/* Hráčské stránky – dětský vzhled podle návrhu v Claude Design.
   Velké písmo a tlačítka (min. 56 px), Andika na čtení, Baloo 2 na nadpisy. */
body.player {
  --p-bg: #eef7f0;
  --p-card: #ffffff;
  --p-ink: #1d2b24;
  --p-muted: #4f5d55;
  --p-green: #1f6f50;
  --p-green-dark: #16533c;
  --p-green-soft: #e3f3ea;
  --p-line: #d6e8dc;
  --p-sun: #ffd95e;
  --p-sun-dark: #e8a33d;
  --p-bad: #c4412f;
  --p-bad-ink: #9c2f22;
  --p-bad-soft: #fde6e1;
  --p-read: Andika, "Trebuchet MS", system-ui, sans-serif;
  --p-round: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  background: var(--p-bg);
  color: var(--p-ink);
  font: 20px/1.45 var(--p-read);
}
@media (prefers-color-scheme: dark) {
  body.player {
    --p-bg: #13201a;
    --p-card: #1c2b24;
    --p-ink: #eef5f0;
    --p-muted: #a9bab0;
    --p-green: #4fbf8b;
    --p-green-dark: #2f8a62;
    --p-green-soft: #1f3a2d;
    --p-line: #2c4136;
    --p-bad: #f08a7a;
    --p-bad-ink: #ffb4a8;
    --p-bad-soft: #3d2420;
  }
}
body.player main { max-width: 560px; padding: 16px 18px 40px; display: flex; flex-direction: column; gap: 18px; }
body.player a { color: var(--p-green); }
body.player h1, body.player h2 { font-family: var(--p-round); font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; }
body.player h1 { font-size: 2.1rem; }
body.player h2 { font-size: 1.5rem; }
body.player p { margin: 0 0 .5em; }
body.player p:last-child { margin-bottom: 0; }
body.player .muted { color: var(--p-muted); }

/* horní lišta */
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-back { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 1rem; text-decoration: none; padding: 8px 4px; min-height: 44px; }
.p-stars { display: inline-flex; align-items: center; gap: 6px; background: var(--p-card); border-radius: 999px; padding: 6px 16px 6px 10px; font-family: var(--p-round); font-weight: 800; font-size: 1.3rem; color: var(--p-ink); flex: 0 0 auto; }
.p-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p-green); }
.p-lead { font-size: 1.15rem; }
.p-steps { display: flex; gap: 8px; }
.p-steps span { flex: 1; height: 10px; border-radius: 5px; background: var(--p-line); }
.p-steps span.on { background: var(--p-green); }

/* karta úkolu */
.p-card { background: var(--p-card); border-radius: 28px; padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 4px 0 var(--p-line); scroll-margin-top: 12px; }
.p-card.is-done { box-shadow: 0 4px 0 var(--p-green); }
.p-task-title { font-size: 1.4rem; }
.p-text { font-size: 1.45rem; line-height: 1.7; }
.p-text.small { font-size: 1.1rem; line-height: 1.5; }
.p-question { font-size: 1.75rem; }
.p-note { background: var(--p-green-soft); border-radius: 18px; padding: 12px 16px; font-size: 1.1rem; }
.p-answer { font-size: 1.15rem; }
.p-hint-line { color: var(--p-muted); font-size: 1rem; text-align: center; }

/* „Přečti mi to“ */
.narrate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.p-read { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 14px; border: 0; border-radius: 28px; background: var(--p-sun); color: #1d2b24; font-family: var(--p-round); font-weight: 800; font-size: 1.15rem; cursor: pointer; box-shadow: 0 4px 0 var(--p-sun-dark); }
.p-read:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--p-sun-dark); }

/* tlačítka */
.p-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border: 0; border-radius: 22px; background: var(--p-green); color: #fff; font-family: var(--p-round); font-weight: 800; font-size: 1.4rem; text-decoration: none; cursor: pointer; box-shadow: 0 5px 0 var(--p-green-dark); padding: 0 22px; }
.p-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--p-green-dark); }
.p-btn.small { min-height: 52px; font-size: 1.15rem; }
body.player a.p-btn { color: #fff; }
body.player :is(button, a, input):focus-visible { outline: 3px solid var(--p-sun-dark); outline-offset: 3px; }

/* odpovědi */
.p-choices { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; margin: 0; list-style: none; }
.p-choices.pics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-choice { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 12px 16px; border: 4px solid var(--p-line); border-radius: 22px; background: var(--p-card); color: var(--p-ink); font: 700 1.3rem/1.3 var(--p-read); text-align: center; cursor: pointer; box-shadow: 0 5px 0 var(--p-line); box-sizing: border-box; }
button.p-choice:hover { border-color: var(--p-green); }
button.p-choice:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--p-line); }
.p-choices.pics .p-choice { min-height: 120px; padding: 8px; }
.p-choices.pics .rebus.big { height: 84px; }
.p-choices.pics .rebus.big.emoji { height: auto; font-size: 64px; }
.p-choices.done .p-choice { cursor: default; }
.p-choices.done .p-choice.correct { border-color: var(--p-green); background: var(--p-green-soft); box-shadow: 0 5px 0 var(--p-green); }
.p-choices.done .p-choice.chosen:not(.correct) { border-color: var(--p-bad); background: var(--p-bad-soft); box-shadow: 0 5px 0 var(--p-bad); }
.p-choices.done:not(.pics) .p-choice.chosen::after { content: "tvoje odpověď"; font: 400 .85rem var(--p-read); color: var(--p-muted); margin-left: 6px; }

/* výsledky */
.p-result { display: flex; align-items: center; gap: 12px; border-radius: 22px; padding: 14px 18px; font-family: var(--p-round); font-weight: 800; font-size: 1.35rem; }
.p-result svg { flex: 0 0 auto; }
.p-result.ok { background: var(--p-green-soft); color: var(--p-green-dark); }
.p-result.bad { background: var(--p-bad-soft); color: var(--p-bad-ink); font-family: var(--p-read); font-size: 1.15rem; }
.p-result.small { font-size: 1.1rem; padding: 10px 16px; align-self: flex-start; }
@media (prefers-color-scheme: dark) { body.player .p-result.ok { color: var(--p-green); } }
.p-celebrate { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--p-green); color: #fff; border-radius: 28px; padding: 22px 16px; text-align: center; box-shadow: 0 6px 0 var(--p-green-dark); }
.p-celebrate b { font-family: var(--p-round); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.p-plus { background: var(--p-sun); color: #1d2b24; border-radius: 999px; padding: 4px 18px; font-family: var(--p-round); font-weight: 800; font-size: 1.3rem; }
.p-celebrate-star svg { animation: p-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes p-pop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .p-celebrate-star svg { animation: none; } }

/* psaná odpověď a nápověda */
.p-answer-form { display: flex; flex-direction: column; gap: 12px; }
.p-answer-form label { font-weight: 700; font-size: 1.1rem; }
body.player .p-answer-form input, body.player .p-row-form input { min-height: 64px; box-sizing: border-box; border: 3px solid var(--p-green); border-radius: 20px; padding: 0 18px; font: 1.4rem var(--p-read); background: var(--p-card); color: var(--p-ink); }
.p-row-form { display: flex; gap: 10px; flex-wrap: wrap; }
.p-row-form input { flex: 1 1 180px; min-width: 0; }
.p-hint { display: flex; gap: 14px; align-items: flex-start; background: #fff4cc; color: #1d2b24; border: 3px dashed var(--p-sun-dark); border-radius: 22px; padding: 14px 16px; font-size: 1.2rem; }
.p-hint svg { color: #b5741a; flex: 0 0 auto; }
.p-hint b { display: block; font-family: var(--p-round); font-size: 1.3rem; }

/* obrázky místo slov – na stránkách hráče větší */
body.player .rebus { height: 1.9em; }
body.player .rebus.emoji { height: auto; font-size: 1.7em; }

/* média */
body.player .video, body.player img.media { border-radius: 20px; }

/* spodní karta s postupem */
.p-progress { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--p-card); border-radius: 22px; padding: 14px 18px; text-decoration: none; color: var(--p-ink); font-size: 1rem; }
body.player .p-progress { color: var(--p-ink); }
.p-progress-go { display: inline-flex; align-items: center; gap: 4px; color: var(--p-green); font-weight: 700; white-space: nowrap; }
.p-next { margin-top: 4px; }

/* uvítání */
.p-welcome { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; position: relative; }
.p-welcome::before { content: ""; position: absolute; right: -110px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: var(--p-sun); z-index: -1; }
body.player:has(.p-welcome) main { overflow: hidden; }
.p-welcome h1 { font-size: 3.6rem; color: var(--p-green); line-height: 1; }
.p-welcome .p-lead { font-size: 1.35rem; }
.p-skip { align-self: center; }
.p-skip .link { font-size: 1.1rem; padding: 10px 16px; min-height: 44px; color: var(--p-green); }
.p-tip { display: flex; align-items: center; gap: 14px; background: var(--p-card); border-radius: 20px; padding: 14px 18px; font-size: 1.05rem; line-height: 1.3; }
.p-tip svg { color: var(--p-green); flex: 0 0 auto; width: 36px; height: 36px; }

/* mapa stezky */
.p-map { position: relative; width: 100%; background: #dcefe2; border-radius: 28px; overflow: hidden; }
@media (prefers-color-scheme: dark) { .p-map { background: #20352a; } }
.p-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-stop { position: absolute; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-family: var(--p-round); font-weight: 800; font-size: 1.4rem; text-decoration: none; border: 4px solid #fff; }
.p-stop.done { background: #1f6f50; color: #fff; }
.p-stop.here, .p-stop.seen { background: var(--p-sun); color: #1d2b24; }
.p-stop.here { width: 66px; height: 66px; font-size: 1.8rem; box-shadow: 0 0 0 6px rgba(255, 217, 94, .45); }
.p-stop.hidden { background: #fff; color: #6b7c72; border: 4px dashed #9fb3a7; }
body.player a.p-stop.done { color: #fff; }
body.player a.p-stop:is(.here, .seen) { color: #1d2b24; }
.p-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 1rem; }
.p-legend span { display: inline-flex; align-items: center; gap: 6px; }
.p-legend i { width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; }
.p-legend i.done { background: #1f6f50; }
.p-legend i.here { background: var(--p-sun); }
.p-legend i.hidden { background: #fff; border: 3px dashed #9fb3a7; }

/* žebříček */
.p-board { list-style: none; margin: 0; padding: 0; counter-reset: b; display: flex; flex-direction: column; gap: 4px; }
.p-board li { counter-increment: b; display: flex; align-items: center; gap: 10px; font-size: 1.1rem; padding: 6px 0; }
.p-board li::before { content: counter(b) "."; width: 1.6em; color: var(--p-muted); }
.p-board li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.p-board li b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--p-round); font-size: 1.25rem; }
.p-board li b svg { width: 22px; height: 22px; }
.p-board li.me { color: var(--p-green); font-weight: 700; }