:root {
  --purple: #5b217a;
  --purple-dark: #2a1338;
  --violet: #8a6ba8;
  --cream: #fffbf4;
  --yellow: #e8a32b;
  --pink: #d6567b;
  --ink: #2a1338;
  --green: #62c68a;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  color: var(--ink);
  background: #2a1338;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; }
body { min-height: 100dvh; background: radial-gradient(circle at 50% 10%, #8a6ba8, #2a1338 72%); }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { border: 0; }

.game-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-width: 1500px;
  min-height: 620px;
  margin: auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 84%, rgba(255,213,64,.26), transparent 22%),
    linear-gradient(145deg, #fffdf7 0 58%, #f3edf7 58% 100%);
}

.topbar {
  position: absolute;
  z-index: 20;
  top: 0; left: 0; right: 0;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 64px);
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--purple); background: none; cursor: pointer; text-align: left; }
.brand-mark { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 15px 15px 15px 4px; color: white; background: var(--purple); font-size: 29px; font-weight: 900; transform: rotate(-3deg); }
.brand strong { display: block; font-size: 20px; letter-spacing: .08em; line-height: 1; }
.brand small { display: block; color: var(--yellow); font-weight: 900; letter-spacing: .3em; margin-top: 5px; font-size: 10px; }

.journey { text-align: center; }
.journey-label { display: block; color: #8d81a0; letter-spacing: .16em; font-size: 10px; font-weight: 900; }
.stars { display: flex; gap: 7px; justify-content: center; margin-top: 5px; }
.stars span { color: #dcd3e8; font-size: 21px; transition: .35s transform, .35s color; }
.stars span.on { color: var(--yellow); text-shadow: 0 2px 0 #dc9f00; transform: scale(1.22) rotate(8deg); }
.sound-button { width: 46px; height: 46px; border-radius: 50%; background: white; color: var(--purple); box-shadow: 0 5px 18px #3b166e24; font-size: 22px; cursor: pointer; }
.sound-button.is-muted { color: #aaa; text-decoration: line-through; }

.screen { position: absolute; inset: 0; padding: 110px clamp(24px, 6vw, 90px) 40px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .35s ease; }
.screen.is-active { opacity: 1; pointer-events: auto; transform: none; }

.start-screen { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(420px, .95fr); align-items: center; gap: 2vw; }
.eyebrow { margin: 0 0 20px; color: var(--pink); letter-spacing: .13em; font-size: clamp(12px, 1.2vw, 17px); font-weight: 900; }
.start-copy { position: relative; z-index: 2; }
.start-copy h1 { margin: 0; color: var(--purple-dark); font-size: clamp(44px, 5.8vw, 86px); line-height: .98; letter-spacing: -.055em; }
.start-copy h1 em { color: var(--pink); font-style: normal; }
.intro { max-width: 570px; margin: 27px 0 32px; color: #6b5c7d; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.4; }
.primary-button { min-height: 68px; padding: 0 30px; border-radius: 20px 20px 20px 6px; color: white; background: linear-gradient(135deg, #79409a, var(--purple)); box-shadow: 0 10px 0 #371048, 0 18px 32px #4c218047; font-size: clamp(16px, 1.5vw, 21px); font-weight: 900; letter-spacing: .05em; cursor: pointer; transition: .12s; }
.primary-button span { margin-left: 18px; color: var(--yellow); font-size: 27px; }
.primary-button:active { transform: translateY(7px); box-shadow: 0 3px 0 #3b1779; }
.tap-note { position: absolute; bottom: 23px; left: 0; right: 0; text-align: center; color: #8a7e99; font-size: 13px; }

.start-art { position: relative; height: min(68vh, 670px); }
.orbit { position: absolute; width: 490px; height: 490px; border: 2px dashed #a879df66; border-radius: 50%; left: 50%; top: 49%; transform: translate(-50%,-50%) rotate(-15deg); }
.hero-star { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-8deg); width: 235px; height: 235px; display: grid; place-items: center; color: var(--yellow); font-size: 145px; filter: drop-shadow(0 18px 16px #54209145); animation: float 3s ease-in-out infinite; }
.hero-star::before { content: ""; position: absolute; inset: 24px; border-radius: 47% 53% 55% 45%; background: var(--purple); z-index: -1; }
.planet { position: absolute; border-radius: 50%; }
.planet-one { width: 44px; height: 44px; right: 6%; top: 8%; background: var(--pink); box-shadow: inset -9px -7px #d83770; }
.planet-two { width: 24px; height: 24px; left: 4%; bottom: 13%; background: var(--green); }
.float-card { position: absolute; width: 152px; height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 5px solid white; border-radius: 31px 31px 31px 9px; box-shadow: 0 18px 30px #4a1a8230; color: var(--purple-dark); background: white; font-size: 22px; transform: rotate(var(--tilt)); animation: float 3.4s ease-in-out infinite; }
.float-card span { height: 72px; display: grid; place-items: center; font-size: 65px; }
.card-red { --tilt: -8deg; left: 3%; top: 5%; }
.card-red span { width: 72px; border-radius: 50%; background: #f04655; box-shadow: inset -12px -10px #cc2639; }
.card-cat { --tilt: 7deg; right: 1%; top: 34%; animation-delay: -.9s; }
.card-three { --tilt: -4deg; left: 10%; bottom: 1%; animation-delay: -1.7s; }
.card-three span { color: var(--purple); font-weight: 900; }
@keyframes float { 50% { translate: 0 -13px; } }

.play-screen, .recall-screen { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 105px; }
.round-meta { width: min(760px, 82vw); display: flex; align-items: center; gap: 18px; color: var(--purple); font-size: 12px; letter-spacing: .13em; font-weight: 900; }
.round-track { flex: 1; height: 8px; border-radius: 8px; background: #e7deef; overflow: hidden; }
.round-track i { display: block; width: 33.33%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), #ff9f59); transition: width .4s; }
.prompt-wrap { margin: 23px 0 25px; }
.prompt-wrap p { margin: 0 0 5px; color: #746585; font-size: clamp(17px, 1.5vw, 23px); }
.prompt-wrap h2 { margin: 0; color: var(--purple-dark); font-size: clamp(35px, 4vw, 60px); letter-spacing: -.035em; }
.prompt-wrap h2 strong { color: var(--pink); }
.listen-button { margin-top: 13px; padding: 10px 15px; color: var(--purple); background: #efe5fb; border-radius: 20px; font-size: 11px; font-weight: 900; letter-spacing: .06em; cursor: pointer; }
.listen-button span { margin-right: 6px; font-size: 15px; }

.choices { width: min(930px, 92vw); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(13px, 2vw, 25px); }
.choice { position: relative; aspect-ratio: .92; min-height: 170px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; border: 5px solid white; border-radius: 30px 30px 30px 10px; color: var(--ink); background: white; box-shadow: 0 11px 0 #ded2e8, 0 18px 25px #4820791c; cursor: pointer; transition: .16s transform, .16s box-shadow, .16s border-color; }
.choice:hover, .choice:focus-visible { transform: translateY(-5px) rotate(-1deg); border-color: #e0c9fa; outline: none; }
.choice:active { transform: translateY(7px); box-shadow: 0 4px 0 #ded2e8; }
.choice.is-hint { animation: hintPulse .75s ease-in-out infinite alternate; border-color: var(--yellow); }
.choice.is-found { border-color: var(--green); transform: scale(1.04); box-shadow: 0 9px 0 #3b9c64; }
@keyframes hintPulse { to { transform: scale(1.045); box-shadow: 0 11px 0 #e9b912, 0 0 0 10px #ffd54032; } }
.choice-art { width: min(10vw, 112px); height: min(10vw, 112px); min-width: 70px; min-height: 70px; display: grid; place-items: center; font-size: clamp(48px, 7vw, 82px); font-weight: 900; }
.choice-label { font-size: clamp(15px, 1.4vw, 21px); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.shape-color { border-radius: 50%; box-shadow: inset -15px -12px rgba(45,19,75,.16); }
.shape-number { color: var(--purple); text-shadow: 3px 4px 0 #e4d2f6; }
.helper { margin: 28px 0 0; color: #8a7e99; font-size: 14px; }

.recall-screen { background: radial-gradient(circle at 50% 64%, #fff4e0, transparent 43%); }
.recall-screen .choices { width: min(1100px, 94vw); grid-template-columns: repeat(6, 1fr); }
.recall-screen .choice { min-height: 145px; }
.recall-badge { padding: 10px 17px; color: #7e5d00; background: #fff0a9; border-radius: 20px; font-size: 12px; font-weight: 900; letter-spacing: .07em; }
.prompt-wrap.compact { margin: 20px 0 25px; }
.recall-dots { display: flex; gap: 10px; margin-top: 25px; }
.recall-dots i { width: 13px; height: 13px; border-radius: 50%; background: #d8cce4; transition: .3s; }
.recall-dots i.on { background: var(--green); transform: scale(1.25); }

.finish-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 88px; background: radial-gradient(circle at 50% 44%, white 0 18%, #fff9e4 48%, #f2e8ff 100%); }
.finish-star { width: 115px; height: 115px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 36% 50% 40% 52%; color: var(--yellow); background: var(--purple); font-size: 74px; transform: rotate(-7deg); box-shadow: 0 12px 0 #3b1779; animation: finishPop .5s cubic-bezier(.2,1.8,.5,1); }
@keyframes finishPop { from { transform: scale(.2) rotate(-35deg); } }
.finish-screen .eyebrow { margin: 4px 0 8px; font-size: 17px; }
.finish-screen h2 { margin: 0; color: var(--purple-dark); font-size: clamp(32px, 4vw, 57px); line-height: 1.02; }
.finish-screen h2 strong { color: var(--pink); }
.learned-words { display: flex; gap: 14px; margin: 25px 0 18px; }
.learned-words span { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 17px; background: white; box-shadow: 0 5px 16px #4a1d7920; color: var(--purple); font-weight: 900; }
.learned-words i { width: 28px; height: 28px; display: grid; place-items: center; font-size: 25px; font-style: normal; }
.learned-words .mini-red { border-radius: 50%; background: #f04655; }
.stamp-message { margin: 0 0 23px; color: #655674; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.35; }
.finish-actions { display: flex; align-items: center; gap: 20px; }
.finish-actions .primary-button { min-height: 58px; font-size: 14px; }

.celebration { position: absolute; z-index: 50; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; color: white; background: #5926a9e8; opacity: 0; transform: scale(1.08); transition: .2s; }
.celebration.show { opacity: 1; transform: scale(1); }
.celebration .burst { width: 130px; height: 130px; display: grid; place-items: center; border-radius: 50%; color: var(--purple); background: var(--yellow); font-size: 78px; box-shadow: 0 0 0 18px #ffffff1d; animation: spinPop .45s cubic-bezier(.2,1.8,.5,1); }
.celebration strong { margin-top: 21px; font-size: clamp(47px, 7vw, 90px); line-height: 1; }
.celebration small { color: var(--yellow); font-size: clamp(24px, 3vw, 40px); font-weight: 900; }
@keyframes spinPop { from { transform: scale(.1) rotate(-70deg); } }
.confetti span { position: absolute; width: 10px; height: 18px; border-radius: 3px; animation: fall 2.8s linear infinite; }
@keyframes fall { from { transform: translateY(-20vh) rotate(0); } to { transform: translateY(110vh) rotate(550deg); } }

@media (max-width: 760px) {
  html, body { overflow: auto; }
  .game-shell { min-height: 100dvh; height: auto; overflow: hidden; }
  .topbar { height: 72px; padding: 12px 15px; }
  .brand-mark { width: 39px; height: 39px; font-size: 23px; }
  .brand strong { font-size: 15px; }
  .journey-label { display: none; }
  .sound-button { width: 40px; height: 40px; }
  .screen { min-height: 100dvh; padding: 86px 16px 25px; }
  .start-screen { grid-template-columns: 1fr; align-content: center; text-align: center; }
  .start-copy h1 { font-size: clamp(39px, 12vw, 59px); }
  .intro { margin: 20px auto 27px; }
  .start-art { position: absolute; inset: 50% -10% auto; height: 50vh; opacity: .15; pointer-events: none; }
  .tap-note { display: none; }
  .play-screen, .recall-screen { padding-top: 82px; }
  .prompt-wrap { margin: 13px 0 17px; }
  .choices { grid-template-columns: repeat(2, 1fr); gap: 12px; width: min(430px, 94vw); }
  .recall-screen .choices { grid-template-columns: repeat(3, 1fr); width: min(500px, 94vw); }
  .recall-screen .choice { min-height: 120px; }
  .choice { min-height: 138px; aspect-ratio: 1.08; border-radius: 24px 24px 24px 8px; box-shadow: 0 7px 0 #ded2e8; }
  .choice-art { width: 72px; height: 72px; min-width: 60px; min-height: 60px; font-size: 54px; }
  .helper { margin-top: 18px; }
  .finish-screen { padding-top: 75px; }
  .finish-star { width: 92px; height: 92px; font-size: 57px; }
  .learned-words { gap: 6px; }
  .learned-words span { padding: 8px 9px; font-size: 13px; }
  .finish-actions { flex-direction: column; gap: 15px; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .topbar { height: 73px; padding-top: 10px; padding-bottom: 10px; }
  .screen { padding-top: 78px; }
  .prompt-wrap { margin: 10px 0 13px; }
  .choice { min-height: 150px; }
  .choice-art { width: 80px; height: 80px; }
  .helper { margin-top: 16px; }
  .finish-star { width: 85px; height: 85px; font-size: 52px; margin-bottom: 7px; }
  .learned-words { margin: 14px 0 10px; }
  .stamp-message { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── ONLINE COPY ONLY ─────────────────────────────────────────────────────────
   The finish screen here hands the parent to enrolment rather than to a teacher
   with a stamp, so it carries an <a> styled as the primary button and a quieter
   replay beside it. The hall copy in docs/campaign/grozdober-2026/maxigame/ has
   neither rule and must not gain them: on the kiosk a child must not be able to
   tap through to an enrolment form.
   .primary-button sets no display, which is fine for a <button> and not for an
   <a>, hence the first rule.                                                   */
a.primary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ghost-button { min-height: 58px; padding: 0 24px; border-radius: 20px 20px 20px 6px; color: var(--purple); background: #efe5fb; font-size: 14px; font-weight: 900; letter-spacing: .05em; cursor: pointer; transition: .12s; }
.ghost-button span { margin-left: 12px; font-size: 20px; }
.ghost-button:active { transform: translateY(3px); }

/* The offer line under the two buttons. It sits after .finish-actions, not inside it, because that
   row is a flex row on desktop and a flex column at <=760px - placed inside, the sentence would
   push the two buttons apart on a phone. Width-capped so it breaks into short lines under the
   button rather than running the full width of the screen. */
.finish-offer { max-width: 56ch; margin: 20px 0 0; color: #655674;
                font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45;
                text-wrap: balance; }
@media (max-height: 700px) and (min-width: 761px) {
  .finish-offer { margin-top: 13px; font-size: 14px; }
}

/* The way back to the site. Online copy only — on the hall kiosk this link would be an escape
   hatch out of the game. Grouped with the sound button so the topbar keeps three flex children
   and the star row stays centred. */
.topbar-right { display: flex; align-items: center; gap: 14px; }
.site-link { padding: 8px 12px; border-radius: 12px; color: var(--purple); background: #ffffffcc;
             box-shadow: 0 4px 14px #3b166e14; font-size: 13px; font-weight: 900;
             letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.site-link:hover { background: #fff; }
@media (max-width: 760px) {
  .topbar-right { gap: 8px; }
  .site-link { padding: 6px 9px; font-size: 11px; }
}

/* No recording and no English voice on this device. „СЛУШНИ ПОВТОРНО" is then a button that does
   nothing, which is worse than no button at all — so it is swapped for one line asking the parent
   to read the word. The word itself is already on screen above, so the round still works; only the
   listening half is handed to a human. Set by game.js via markAudible(). */
.no-voice-note { display: none; margin-top: 13px; padding: 10px 14px; color: var(--purple); background: #f6f1fc; border-radius: 14px; font-size: 12px; font-weight: 700; line-height: 1.45; }
body.no-voice .listen-button { display: none; }
body.no-voice .no-voice-note { display: block; }