/* Viliho fotbal: nahoře domeček, název, hvězdy a tři tréninky, uprostřed hřiště (SVG scéna 800 × 500),
   pod ním řada úkolu a trenér s bublinou. Barvy a písmo jako rozcestník (obloha, Nunito), jen světlý vzhled. */
:root {
  --sky-0: #BFE3FF; --sky-1: #E6F4FF; --ink: #1F2A4D; --soft: #50607F; --paper: #FFFFFF; --edge: #D3DDEB; --edge-deep: #A9B8CF;
  --grass-0: #6CBF58; --grass-1: #5AAE47; --chalk: #F4FAEE; --net: rgba(255, 255, 255, .55);
  --gold: #FFC93C; --gold-deep: #D18E00; --blue: #2F6FDB; --blue-deep: #1E4FA6; --red: #E5484D; --red-deep: #A92A2F;
  --keeper: #FF8A1F; --keeper-deep: #C25E00; --glove: #7BD389; --skin: #F2C9A0; --hair: #6B4423;
  --board: #1B1F4D; --board-2: #2A3580; --led: #FFD54A; --crowd-a: #E5484D; --crowd-b: #2F6FDB; --crowd-c: #FFC93C; --crowd-d: #F4FAEE;
  --shadow: rgba(31, 42, 77, .22); --veil: rgba(27, 31, 77, .55); --shade: rgba(0, 0, 0, .18);
  --font: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, var(--sky-1), var(--sky-0)) fixed; background-color: var(--sky-0);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(14px, env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-bottom, 0px));
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
button:focus-visible, .home:focus-visible, .tap:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }

/* hlavička: domeček, název, hvězdy, tři tréninky */
.top, main { max-width: 1000px; margin: 0 auto; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.home {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); font-size: 24px; line-height: 1; text-decoration: none;
}
h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 700; text-wrap: balance; }
.stars { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stars svg { width: 20px; height: 20px; fill: var(--ink); }
.stars.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.tabs { display: flex; gap: 8px; margin-left: auto; min-width: 0; }
.tab { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 0; border-radius: 18px; background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); text-align: left; }
.tab svg { width: 30px; height: 30px; flex: none; }
.tab b { display: block; font-size: 18px; font-weight: 600; }
.tab small { display: block; font-size: 13px; color: var(--soft); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 var(--board); }
.tab[aria-selected="true"] small { color: var(--sky-0); }

/* hřiště */
.pitch { margin-top: 14px; border-radius: 26px; overflow: hidden; background: var(--grass-1); box-shadow: 0 10px 30px var(--shadow); }
.scene { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.scene text { font-family: var(--font); font-weight: 700; }
.tap { cursor: pointer; }
.fig { transform-box: fill-box; transform-origin: 50% 100%; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.hint .fig { animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-12px) scale(1.08); } }
.ring { fill: none; stroke: var(--gold); stroke-width: 7; }
.goalglow { fill: none; stroke: var(--gold); stroke-width: 8; opacity: 0; }
.ready .goalglow { animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 1; } }
.target circle.face { fill: var(--paper); stroke: var(--gold); stroke-width: 7; }
.target text { font-size: 44px; fill: var(--ink); }
.target.right circle.face { fill: var(--gold); stroke: var(--gold-deep); }
.gol { font-size: 120px; fill: var(--gold); stroke: var(--ink); stroke-width: 9; paint-order: stroke; transform-box: fill-box; transform-origin: center; animation: gol .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gol { from { transform: scale(.2) rotate(-14deg); opacity: 0; } }
.digit { font-size: 92px; fill: var(--led); transform-box: fill-box; transform-origin: center; }
.digit.pop { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.row.look { animation: look .9s ease-in-out 2; }
@keyframes look { 50% { opacity: .35; } }
.xring { fill: none; stroke: var(--gold); stroke-width: 6; }
.pair { stroke: var(--chalk); stroke-width: 3; stroke-dasharray: 6 7; opacity: .8; }

/* řada pod hřištěm: pořadí přihrávek, série penalt nebo skóre; vpravo odpovědi */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; min-height: 64px; }
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.chip { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip.done { background: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); }
.chip.now { outline: 3px dashed var(--ink); outline-offset: -6px; animation: breathe 1.2s ease-in-out infinite; }
.chip.empty { background: transparent; box-shadow: none; border: 3px dashed var(--edge-deep); }
.chip svg { width: 34px; height: 34px; }
.chip.goal { opacity: .45; }
.chip.goal.lit { opacity: 1; background: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); }
.chip.miss { color: var(--red); }
.arrow { font-size: 24px; color: var(--soft); }
@keyframes breathe { 50% { transform: scale(1.08); } }
.answers { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.ans { min-width: 64px; min-height: 60px; padding: 8px 18px; border: 0; border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--edge-deep); font-size: 24px; font-weight: 600; }
.ans.b { background: var(--blue); color: var(--paper); box-shadow: 0 4px 0 var(--blue-deep); }
.ans.r { background: var(--red); color: var(--paper); box-shadow: 0 4px 0 var(--red-deep); }
.ans.go { background: var(--gold); box-shadow: 0 4px 0 var(--gold-deep); }
.ans:active { transform: translateY(3px); box-shadow: none; }

/* trenér: píšťalka, bublina, zopakovat, zvuk */
.coach { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.whistle { flex: none; width: 56px; height: 56px; }
.bubble { position: relative; flex: 1; min-width: 0; min-height: 56px; margin: 0; padding: 12px 18px; border-radius: 20px; background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); font-size: clamp(19px, 2.6vw, 24px); font-weight: 600; text-wrap: balance; }
.bubble::before { content: ""; position: absolute; left: -9px; top: 20px; border: 9px solid transparent; border-left: 0; border-right-color: var(--paper); }
.bubble.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.round { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); }
.round svg { width: 26px; height: 26px; }
.round[aria-pressed="false"] { background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); color: var(--soft); }
.round[aria-pressed="false"] .waves { display: none; }
@keyframes pop { from { transform: scale(.6); opacity: .3; } }

/* výkop: první klepnutí pustí zvuk (iOS) */
.start { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: var(--veil); }
.start-card { max-width: 420px; padding: 26px 30px; border-radius: 28px; background: var(--paper); text-align: center; box-shadow: 0 20px 50px var(--shadow); }
.start-card svg { width: 110px; height: 110px; margin: 0 auto; display: block; animation: roll 3s ease-in-out infinite; }
@keyframes roll { 50% { transform: translateX(10px) rotate(40deg); } }
.start-card h2 { margin: 10px 0 4px; font-size: 34px; }
.start-card p { margin: 0 0 18px; font-size: 19px; color: var(--soft); text-wrap: balance; }
.kick { min-height: 64px; padding: 10px 34px; border: 0; border-radius: 20px; background: var(--gold); box-shadow: 0 4px 0 var(--gold-deep); font-size: 28px; font-weight: 700; }

@media (max-width: 640px) {
  .tabs { flex-basis: 100%; }
  .tab { flex: 1; flex-direction: column; gap: 2px; padding: 8px 4px; text-align: center; }
  .tab small { display: none; }
  .chip { width: 44px; height: 44px; font-size: 24px; }
  .whistle { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }