/* Autoškola: mapa městečka vlevo, palubní deska s navigací vpravo (na úzkém displeji pod sebou) */
body { background: var(--meadow); color: var(--ink); }
.home-btn { background: rgba(255, 255, 255, .7); color: var(--ink); }
.drive { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 18px; align-items: start; }

/* ===== Mapa ===== */
.map-wrap { border-radius: 26px; overflow: hidden; box-shadow: 0 12px 30px rgba(31, 42, 77, .18); background: var(--grass); }
#map { display: block; width: 100%; height: auto; font-family: var(--font); }
#map .grass { fill: var(--grass); }
#map .curb { fill: var(--curb); }
#map .road { stroke: var(--asphalt); stroke-width: 46; stroke-linecap: square; }
#map .junction { fill: var(--asphalt); }
#map .lane { stroke: var(--paint); stroke-width: 3; stroke-dasharray: 14 12; }
#map .zebra { fill: var(--paint); }
#map .stopline { stroke: var(--paint); stroke-width: 5; }
#map .stopline.dashed { stroke-dasharray: 6 4; }
#map .ostruvek { fill: var(--grass); stroke: var(--paint); stroke-width: 3; }
#map .label rect { fill: var(--paint); opacity: .92; }
#map .label text { fill: var(--ink); font-size: 16px; font-weight: 600; text-anchor: middle; }
/* cíl jízdy: budova pulzuje a na křižovatce se točí zlatý kroužek */
#map .budova.cil { animation: target 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes target { to { transform: scale(1.06); } }
#map .ring { fill: none; stroke: var(--gold); stroke-width: 6; stroke-dasharray: 10 8; animation: ring 1.6s linear infinite; }
@keyframes ring { to { stroke-dashoffset: -36; } }
/* písmenka L a P u auta */
#map .badge circle { stroke: #fff; stroke-width: 2.5; }
#map .badge text { fill: #fff; font-size: 14px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
#map .badge.pulse circle { animation: badge .45s ease-in-out 4 alternate; transform-box: fill-box; transform-origin: center; }
@keyframes badge { to { transform: scale(1.6); } }
#map .blinker { fill: #FFB648; opacity: .25; }
#map .car.blink-l .blinker.l, #map .car.blink-r .blinker.r { animation: blink .4s steps(2, jump-none) infinite; }
@keyframes blink { from { opacity: .25; } to { opacity: 1; } }

/* ===== Palubní deska ===== */
.dashboard { background: var(--panel); border-radius: 26px; padding: 16px; display: grid; gap: 14px; box-shadow: 0 12px 30px rgba(31, 42, 77, .12); }
.dashboard .talk { --bubble: var(--dash-soft); }
.dashboard .mascot { width: 68px; }
#dash { display: grid; gap: 12px; justify-items: stretch; }
#dash h2 { font-size: 28px; }
#dash .kicker { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); font-weight: 600; }

/* Výběr úrovně: číslo, značka s novinkou a název; zamčená má zámek, dojetá fajfku */
.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lvl { border: 0; border-radius: 16px; padding: 8px 4px; display: grid; justify-items: center; gap: 2px; background: var(--dash-soft); color: var(--ink); font-size: 26px; line-height: 1.1; }
.lvl svg { width: 30px; height: 30px; }
.lvl b { font-size: 18px; }
.lvl small { font-size: 12px; font-weight: 600; color: var(--soft); }
.lvl.now { background: var(--sun); box-shadow: 0 0 0 3px var(--gold); }
.lvl.zamcena { opacity: .55; }
.q-text { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; text-align: center; }

/* Volant: šipky doleva, rovně, doprava */
.nav-word { text-align: center; font-size: 40px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--eu-blue); min-height: 54px; }
.wheel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.arrow { min-height: 108px; border: 0; border-radius: 22px; display: grid; place-items: center; align-content: center; gap: 4px; background: var(--asphalt); color: #fff; font-size: 18px; font-weight: 600; box-shadow: 0 5px 0 var(--asphalt-dark); }
.arrow svg { width: 48px; height: 48px; fill: currentColor; }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow.right { background: var(--ok); box-shadow: 0 5px 0 #2E8A4E; }
.arrow.wrong { background: var(--bad); box-shadow: 0 5px 0 #B94545; }

/* Značka: zastavit, nebo jet */
.sign-big { display: grid; place-items: center; }
.sign-big svg { width: 130px; height: 130px; }
.stopgo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stopgo button { min-height: 96px; border: 0; border-radius: 22px; display: grid; place-items: center; align-content: center; gap: 6px; font-size: 22px; font-weight: 700; color: #fff; }
.stopgo button i { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #fff; }
.stopgo .stop { background: var(--bad); box-shadow: 0 5px 0 #B94545; }
.stopgo .go { background: var(--ok); box-shadow: 0 5px 0 #2E8A4E; }
.stopgo .stop i { background: #fff; border-radius: 8px; width: 28px; height: 28px; }
.stopgo .dal { background: var(--asphalt); box-shadow: 0 5px 0 var(--asphalt-dark); }
.stopgo .dal i { border-style: dashed; }

/* Kruháč: výjezdy 1, 2, 3; cílový má zlatý kroužek, ten u auta svítí */
.exits { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 12px; }
.exits li { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--dash-soft); font-size: 22px; font-weight: 700; color: var(--soft); }
.exits li.cil { box-shadow: 0 0 0 4px var(--gold); color: var(--ink); }
.exits li.ted { background: var(--sun); color: var(--ink); }
.exits li.minul { opacity: .45; }

/* Tři jízdy */
.missions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.missions li { padding: 8px 6px; border-radius: 14px; background: var(--dash-soft); text-align: center; font-size: 15px; font-weight: 600; color: var(--soft); }
.missions li.now { background: var(--sun); color: var(--ink); }
.missions li.done { background: #CFEFD3; color: #22663A; }
.missions li.done::after { content: " ✓"; }
.phone-num { font-size: 64px; font-weight: 700; color: var(--bad); text-align: center; letter-spacing: .06em; }

/* ===== Řidičák ===== */
.license { border-radius: 18px; padding: 14px 16px; background: var(--license); color: var(--ink); display: grid; gap: 10px; box-shadow: 0 8px 20px rgba(31, 42, 77, .18); transform: rotate(-1.5deg); }
.license header { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .06em; font-size: 15px; }
.license header b { display: grid; place-items: center; width: 34px; height: 24px; border-radius: 4px; background: var(--eu-blue); color: var(--sun); font-size: 13px; }
.license .lic-body { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; }
.license .lic-photo { height: 92px; border-radius: 8px; background: rgba(255, 255, 255, .55); display: grid; place-items: center; }
.license .lic-photo svg { width: 64px; }
.license dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 16px; }
.license dt { color: #8A4A60; }
.license dd { margin: 0; font-weight: 700; }
/* razítka za úrovně po řidičáku; nezískané jsou jen bledý obrys, po všech je řidičák zlatý */
.license .stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.license .stamp { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; border: 2px dashed rgba(138, 74, 96, .4); font-size: 12px; font-weight: 600; color: #8A4A60; }
.license .stamp svg { width: 28px; height: 28px; opacity: .2; filter: grayscale(1); }
.license .stamp.ok { border-style: solid; border-color: #8A4A60; background: rgba(255, 255, 255, .5); transform: rotate(-4deg); }
.license .stamp.ok svg { opacity: 1; filter: none; }
.license.gold { background: linear-gradient(135deg, #FFE38A, var(--gold) 55%, #F4B73A); }

@media (max-width: 880px) { .drive { grid-template-columns: minmax(0, 1fr); } }
/* iPhone na výšku: menší Tik-Tak, značka a tlačítka, ať je mapa i odpověď vidět bez posouvání */
@media (max-width: 520px) {
  .dashboard { padding: 12px; gap: 10px; }
  .dashboard .mascot { width: 48px; }
  .dashboard .icon-btn { width: 48px; height: 48px; }
  #dash { gap: 10px; }
  .sign-big svg { width: 96px; height: 96px; }
  .stopgo button { min-height: 80px; }
  .arrow { min-height: 88px; }
  .nav-word { font-size: 32px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #map .ring, #map .budova.cil { animation: none !important; }
}