:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#17382d;background:#f1f7f2}*{box-sizing:border-box}body{margin:0}header{background:#164a37;color:white;padding:16px max(16px,calc((100vw - 960px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:800}nav{display:flex;gap:8px}button{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:12px 18px;background:#d9e8df;color:#143b2c;font-weight:750}button:hover{filter:brightness(.95)}button:disabled{opacity:.5;cursor:not-allowed}.primary{background:#ffb72e;color:#2b290b}.danger{background:#ffe0df;color:#8d2118}main{max-width:960px;margin:28px auto;padding:0 16px;min-height:70vh}h1{font-size:clamp(28px,5vw,44px)}h2{font-size:24px}.card{background:white;border:1px solid #d8e6db;border-radius:24px;padding:24px;margin:16px 0;box-shadow:0 8px 30px #164a3710}.hero{background:linear-gradient(125deg,#1e694a,#164a37);color:white}.muted{color:#557468}.hero .muted{color:#c9e9d8}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:18px 0}.option{background:#f1f7f2;min-height:80px;border:2px solid #c8ddce;font-size:24px}.option:focus-visible,button:focus-visible,input:focus-visible{outline:4px solid #ed9d00;outline-offset:3px}.cars{font-size:clamp(24px,5vw,38px);letter-spacing:4px;line-height:1.8}.lot{padding:16px;border-radius:16px;background:#eef6ff;min-height:85px}.red{background:#fff0ed}.blue{background:#eaf2ff}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spread{justify-content:space-between}.stat{flex:1;min-width:120px;padding:18px;background:#eaf4ed;border-radius:18px}.stat strong{font-size:28px;display:block}.pill{display:inline-block;background:#e3f3e9;border-radius:100px;padding:6px 12px}.message{padding:14px;border-radius:12px;background:#fff4d9;margin:12px 0}.success{background:#dcf4df}.error{background:#ffe5df}input{padding:14px;border:2px solid #b4cdbd;border-radius:12px;font:inherit;max-width:100%;width:300px}table{width:100%;border-collapse:collapse;background:white}td,th{padding:12px;border-bottom:1px solid #e1e9e3;text-align:left}th{background:#e7f1e9}.scroll{overflow:auto}footer{text-align:center;color:#678071;padding:20px}.meter{height:14px;background:#dfe9e1;border-radius:20px;overflow:hidden}.meter>div{height:100%;background:#2a9b65}.big{font-size:44px}.hidden{display:none}@media(max-width:600px){.card{padding:17px}.options{grid-template-columns:repeat(2,1fr)}.option{font-size:20px;padding:14px 8px}header{padding:14px}}

/* Přístupnost pro dítě, které ještě nečte */
.child-control{min-height:76px;min-width:110px;font-size:32px}.speak-button{font-size:23px;min-height:68px}.instruction-icon{font-size:42px;text-align:center;margin:12px}.spoken-caption{font-size:15px;color:#66766d;margin:8px 0 20px}.hero .spoken-caption{color:#fff}.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}.skill-card{padding:18px;border:1px solid #d7e5d9;border-radius:18px;background:#f9fcf9}.skill-card h3{margin:0 0 4px;font-size:22px}.skill-area{font-weight:700;color:#246448;margin-top:0}.skill-metrics{display:flex;flex-wrap:wrap;gap:8px}.skill-metrics>div{flex:1;min-width:95px;padding:10px;background:#e8f3e9;border-radius:12px}.skill-metrics span{display:block;font-size:12px;color:#4b6857}.skill-metrics strong{display:block;font-size:22px}.option{min-height:94px}#scene{margin:22px 0}.cars{overflow-wrap:anywhere}

/* Mobil: zadání a odpovědi mají přednost před dekorativní hlavičkou. */
@media (max-width: 600px) {
  header { padding: 7px 12px; gap: 4px; flex-wrap: nowrap; min-height: 48px; }
  header > span { font-size: 13px; line-height: 1.15; max-width: 44%; }
  header nav { gap: 4px; margin-left: auto; }
  header nav button { padding: 9px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
  main { margin: 7px auto; padding: 0 10px; min-height: 0; }
  .card { margin: 8px 0; padding: 12px; border-radius: 16px; }
  h1 { margin: 4px 0 8px; font-size: 25px; }
  h2 { margin: 5px 0 8px; font-size: 19px; }
  .hero p { margin: 6px 0; }
  .stat { padding: 10px; min-width: 90px; }
  .stat strong { font-size: 22px; }
  footer { padding: 8px; font-size: 11px; }
  body.playing header { min-height: 40px; }
  body.playing header > span { font-size: 12px; }
  body.playing main > .hero { padding: 9px 12px; }
  body.playing main > .hero .row { gap: 6px; font-size: 12px; }
  body.playing main > .hero h2 { font-size: 16px; margin: 4px 0; }
  body.playing main > .hero .pill { display: none; }
  body.playing .meter { height: 7px; margin-top: 5px; }
  body.playing .instruction-icon { display: none; }
  body.playing .speak-button { min-height: 48px; padding: 8px 12px; font-size: 17px; }
  body.playing .spoken-caption { font-size: 13px; margin: 6px 0 8px; line-height: 1.25; }
  body.playing #scene { margin: 8px 0; }
  body.playing .lot { padding: 8px; min-height: 48px; }
  body.playing .cars { font-size: clamp(23px, 6vw, 32px); line-height: 1.35; letter-spacing: 1px; }
  body.playing .options { margin: 8px 0; gap: 8px; }
  body.playing .option { min-height: 68px; padding: 8px 6px; font-size: 22px; }
  body.playing #hint { min-height: 48px; min-width: 72px; padding: 6px 10px; font-size: 25px; }
  body.playing .message { margin: 6px 0; padding: 8px; }
  body.playing #scene p { margin: 5px 0; }
  body.playing footer { display: none; }
}
@media (max-width: 380px) {
  header > span { max-width: 37%; }
  header nav button { padding: 8px 6px; font-size: 11px; }
  body.playing .option { min-height: 60px; }
}

/* Verze pro předškolního čtenáře: akce bez textových popisků. */
body.playing .spoken-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.playing .hero{margin-bottom:4px}
body.playing .hero .race-progress{font-size:13px;letter-spacing:1px}
body.playing #scene{margin:6px 0}
body.playing .icon-only{font-size:32px;min-width:76px;min-height:62px}
body.playing #feedback:empty{display:none}
body.playing .option{font-size:clamp(24px,6vw,34px);line-height:1.3;overflow-wrap:anywhere}
.car-select{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.car-choice{font-size:clamp(28px,7vw,42px);padding:7px;min-height:64px;min-width:54px;background:#e8f3eb;border:2px solid #8cb89b}.car-choice:active{background:#ffca4d}
body.playing .card{margin:5px 0}
@media(max-width:600px){body.playing header>span{display:none}body.playing header{justify-content:flex-end}body.playing .hero .row{font-size:12px}body.playing .car-choice{min-height:58px;min-width:44px;padding:5px}body.playing .options{grid-template-columns:repeat(2,minmax(0,1fr))}body.playing .option{min-height:70px}}

/* Správná odpověď: další úloha bez hledání tlačítka pod obsahem. */
body.playing #choices .next-icon{display:block;width:min(100%,320px);margin:8px auto;min-height:90px;font-size:48px;background:#ffc83d}
body.playing #choices:has(.next-icon){display:flex;justify-content:center;align-items:center;min-height:100px}
@media(max-width:600px){body.playing #choices .next-icon{min-height:78px}body.playing #hint{margin-top:4px}}

/* Jednoznačné akce a přehrání posledního pokynu. */
.replay-control{min-height:58px;min-width:68px;margin:12px;font-size:28px;background:#e9f2ed}
body.playing #hint[hidden]{display:none}
body.playing #choices .next-icon{background:#ffc83d}
@media(max-width:600px){body.playing .hero{padding:8px 12px}body.playing #scene{margin:4px 0}body.playing .card{padding:10px}}