/* The game is a screen, not a scrolling document. Parent help can scroll inside
   its own dialog; the play surface never pans, bounces or pulls to refresh. */
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.app {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  padding-left: max(23px, env(safe-area-inset-left));
  padding-right: max(23px, env(safe-area-inset-right));
}
.topbar, footer { min-width: 0; }
main { min-width: 0; min-height: 0; overflow: hidden; }
.game, .welcome, .finish { touch-action: none; }
.game {
  position: relative;
  height: 100%;
  max-height: 840px;
  min-height: 0;
  display: grid;
  grid-template-rows: 42px auto minmax(0, 1fr) 28px;
  gap: clamp(8px, 1.8dvh, 18px);
  padding: 10px 7px 2px;
}
.game-top { position: static; }
.question-block { margin: 0; }
.question-block h1 { font-size: clamp(24px, 6.7vw, 44px); }
.question-block .eyebrow { margin-bottom: 8px; }
.listen { min-height: 40px; margin-top: 12px; }
.choices {
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2dvh, 18px);
}
.color-choice {
  width: 100%;
  height: 100%;
  min-height: 0;
  touch-action: none;
}
.color-choice .face { pointer-events: none; }
.shape-choice { color: #315c45; }
.shape-choice .shape {
  width: min(64%, 140px);
  height: min(70%, 140px);
  fill: currentColor;
  pointer-events: none;
}
.game-menu { display: flex; justify-content: center; gap: 14px; width: min(100%, 530px); }
.game-menu .primary { flex: 1; width: 50%; min-width: 0; gap: 10px; margin: 0; padding: 18px 22px; }
.game-menu .secondary-game { color: #315c45; background: #e2e8d7; box-shadow: 0 5px 0 #c4cfb5; }
.game-menu .secondary-game:active { box-shadow: 0 1px 0 #c4cfb5; }
.feedback { height: auto; margin: 0; align-self: center; }
footer { padding-top: 4px; }
.welcome {
  height: 100%;
  min-height: 0;
  max-height: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2dvh, 26px) 0 8px;
}
.welcome > :not(.color-garden) { flex-shrink: 0; }
.welcome h1 { font-size: clamp(32px, 6.4dvh, 58px); }
.welcome .eyebrow { margin-bottom: 12px; }
.welcome .lead { margin-top: 12px; }
.color-garden {
  position: relative;
  flex: 1 1 220px;
  min-height: 70px;
  max-height: 235px;
  width: min(350px, 100%);
  height: auto;
  margin: 10px auto;
  transform: none;
}
.friend-blue { left: 4%; bottom: 12%; width: 33%; height: 63%; }
.friend-yellow { left: 28%; top: 4%; width: auto; height: 70%; aspect-ratio: 1; }
.friend-red { right: 2%; bottom: 12%; width: 33%; height: 55%; }
.garden-shadow { left: 7%; width: 86%; bottom: 5%; }
.welcome .primary { min-width: min(255px, 100%); }
.welcome .quiet { margin-top: 12px; }
.little-note { margin-top: 14px; }
.finish { max-height: 100%; padding: 12px 0; }
dialog { overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.update-controls { border-top: 1px solid #dfe3d4; margin-top: 20px; padding-top: 2px; }
.update-controls .text-button { display: inline-block; line-height: 1.5; text-decoration: underline; }
@media (min-width: 900px) {
  .app { padding-left: 48px; padding-right: 48px; }
}
@media (max-height: 700px) {
  .game { gap: 8px; padding-top: 4px; }
  .question-block .eyebrow { display: none; }
  .listen { margin-top: 8px; }
  .welcome .lead { font-size: 13px; }
  .welcome .little-note { display: none; }
  .welcome .primary { padding-top: 16px; padding-bottom: 16px; }
  .finish-star { font-size: 70px; margin-bottom: 16px; }
  .finish .eyebrow { margin-bottom: 10px; }
  .finish h1 { font-size: 32px; }
  .finish .lead { margin-top: 10px; }
  .finish-dots { margin: 20px 0 25px; }
  .finish .text-button { margin-top: 12px; }
}
@media (max-width: 540px) {
  .game-menu { gap: 12px; }
  .game-menu .primary { font-size: 16px; padding: 17px 16px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .app { padding-top: max(6px, env(safe-area-inset-top)); }
  .topbar { min-height: 36px; }
  .topbar .icon-button { width: 36px; height: 36px; }
  .game {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr) 20px;
    gap: 8px;
    padding-top: 2px;
  }
  .game-top { position: absolute; inset: 3px 7px auto; pointer-events: none; }
  .game-top .back-button { pointer-events: auto; }
  .progress { display: none; }
  .question-block { margin: 0; padding: 0 50px; }
  .question-block h1 { font-size: 26px; }
  .listen { min-height: 34px; padding: 6px 12px; margin-top: 5px; }
  .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .color-choice { height: 100%; min-height: 0; }
  .feedback { font-size: 11px; }
  .welcome { position: relative; display: flex; min-height: 0; padding: 4px 50% 4px 0; }
  .welcome h1 { font-size: clamp(25px, 8dvh, 35px); }
  .welcome .eyebrow { font-size: 8px; margin-bottom: 6px; }
  .welcome .lead { margin-top: 8px; }
  .welcome .primary { min-width: 200px; padding: 13px 19px; margin-top: 16px; }
  .welcome .game-menu { gap: 10px; margin-top: 14px; }
  .welcome .game-menu .primary { min-width: 0; font-size: 13px; padding: 12px; margin-top: 0; }
  .color-garden { position: absolute; top: 5%; right: 0; width: 45%; height: 90%; max-height: 230px; margin: 0; }
  .welcome .quiet, .welcome .little-note { display: none; }
  .finish { padding: 0; }
  .finish-star { font-size: 48px; margin-bottom: 4px; }
  .finish .eyebrow { font-size: 8px; margin-bottom: 5px; }
  .finish h1 { font-size: 28px; }
  .finish .lead { margin-top: 6px; font-size: 13px; }
  .finish-dots { margin: 10px 0 16px; }
  .finish-dots i { height: 12px; width: 12px; }
  .finish .primary { padding: 10px 20px; }
  .finish .text-button { margin-top: 4px; padding: 8px 0; }
  footer, footer .text-button { font-size: 8px; }
}

/* Letter recognition uses the same neutral tile for every answer. */
.letter-choice { color: #315c45; background: #ececde; }
.letter-glyph { font-family: system-ui, sans-serif; font-size: clamp(70px, 17dvh, 142px); font-weight: 700; font-style: normal; line-height: 1; pointer-events: none; }
.game-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 650px); gap: 12px; }
.welcome .game-menu .primary { width: 100%; min-width: 0; margin: 0; gap: 8px; padding: 17px 20px; }
.game-menu .letters-game { color: #624b7b; background: #eae1f1; box-shadow: 0 5px 0 #d0bfdf; }
.game-menu .letters-game:active { box-shadow: 0 1px 0 #d0bfdf; }
@media (max-width: 600px) and (orientation: portrait) {
  .game-menu { grid-template-columns: 1fr; width: min(100%, 320px); gap: 10px; }
  .welcome .game-menu .primary { min-height: 52px; padding: 11px 21px; font-size: 16px; }
  .color-garden { min-height: 50px; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .welcome h1 { font-size: 30px; }
  .welcome .eyebrow { margin-bottom: 6px; }
  .welcome .lead { margin-top: 6px; }
  .welcome .game-menu .primary { min-height: 48px; padding: 9px 20px; }
  .game-menu { gap: 8px; }
  .welcome .quiet { margin-top: 8px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .welcome .game-menu { margin-top: 12px; gap: 8px; }
  .welcome .game-menu .primary { font-size: 12px; padding: 12px 10px; gap: 5px; }
  .welcome .game-menu .primary span { font-size: 18px; }
  .letter-glyph { font-size: clamp(60px, 22dvh, 106px); }
}
@media (orientation: landscape) and (max-height: 550px) and (max-width: 700px) {
  .welcome .game-menu .primary { min-height: 44px; }
  .welcome .game-menu .primary span { display: none; }
}
/* Longer translated headings must fit the fixed-height play screen. */
html:not([lang="uk"]) .welcome h1 { font-size:clamp(27px,7.8vw,58px); max-width:100%; overflow-wrap:anywhere; }
@media (orientation:landscape) and (max-height:550px) {
 html:not([lang="uk"]) .welcome h1 { font-size:clamp(22px,4.8vw,28px); }
 .language-picker { margin:3px 0; font-size:10px; }
 .language-picker select { min-height:28px; }
}

.game-header-actions{display:flex;align-items:center;gap:8px}.game-settings{position:relative;z-index:8}.game-settings>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:64px;padding:7px 10px;border:1px solid #dce1d3;border-radius:24px;list-style:none;cursor:pointer;font-size:17px;touch-action:manipulation}.game-settings>summary::-webkit-details-marker{display:none}.game-settings[open]>summary{background:#edf0e2}.game-languages{position:absolute;right:0;top:calc(100% + 8px);width:220px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 90px);overflow:auto;background:#fffdf8;border:1px solid #dce1d3;border-radius:18px;box-shadow:0 10px 30px #303c3426;padding:12px;touch-action:pan-y}.game-languages p{font-size:11px;color:#66745f;text-align:left;margin:4px 10px 8px}.game-languages a{display:flex;align-items:center;gap:9px;padding:10px 12px;min-height:44px;border-radius:10px;text-decoration:none;font-size:14px;color:#465940}.game-languages a[aria-current]{background:#edf0e2;font-weight:650}.game-languages a:hover{background:#edf0e2}.game-languages a:focus-visible,.game-settings summary:focus-visible{outline:3px solid #518ccf;outline-offset:2px}.game-languages a[aria-invalid]{outline:2px solid #bd715d}@media(max-width:350px){.topbar .brand{font-size:12px;gap:7px}.topbar .brand-mark{width:22px;height:22px}.game-header-actions{gap:3px}.game-settings>summary{min-width:60px}.topbar .icon-button{width:38px;min-width:38px}}

.game-settings>summary{min-width:44px;width:44px;font-size:21px}.game-nav-panel{position:absolute;right:0;top:calc(100% + 8px);width:232px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 85px);overflow-y:auto;background:#fffdf8;border:1px solid #dce1d3;border-radius:18px;box-shadow:0 10px 30px #303c3426;padding:12px;touch-action:pan-y;overscroll-behavior:contain}.game-nav p{font-size:12px;text-align:left;font-weight:650;margin:4px 12px 6px;color:#66745f}.game-nav button,.game-nav>a{display:flex;align-items:center;width:100%;min-height:44px;padding:9px 12px;margin:0;border:0;border-radius:10px;text-decoration:none;font:inherit;font-size:14px;text-align:left;background:transparent;color:#465940;cursor:pointer;touch-action:manipulation}.game-nav button:hover,.game-nav>a:hover{background:#edf0e2}.game-nav #nav-login{border-top:1px solid #dce1d3;border-radius:0;margin-top:8px;padding-top:14px}.game-language-options{margin-top:5px;border-top:1px solid #dce1d3}.game-language-options>summary{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 12px;font-size:13px;cursor:pointer;list-style:none;touch-action:manipulation}.game-language-options>summary::-webkit-details-marker{display:none}.game-language-options>summary:after{content:'⌄';margin-left:auto}.game-language-options[open]>summary:after{content:'⌃'}.game-language-options .game-languages{position:static;max-width:100%;width:auto;max-height:none;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0 0 0 10px}.game-nav-panel :focus-visible{outline:3px solid #518ccf;outline-offset:1px}@media(max-width:350px){.game-settings>summary{min-width:44px}}

.choices.two-choices{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.practice-settings{padding:6px 0 14px;border-bottom:1px solid #dce1d3;margin:18px 0}.practice-settings label{display:block;font-size:14px;font-weight:600;margin:12px 0 8px}.practice-settings select{font:inherit;font-size:14px;min-height:48px;width:100%;padding:10px 12px;border:1px solid #b7c1ab;border-radius:12px;background:#fffdf8;color:#303c34}.practice-settings p{font-size:13px;line-height:1.6}.practice-settings select:focus-visible{outline:3px solid #518ccf;outline-offset:2px}

.choices.three-choices{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.choices.three-choices>.color-choice:last-child{grid-column:1/-1;width:calc(50% - 8px);justify-self:center}@media(orientation:landscape) and (max-height:550px){.choices.three-choices{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.choices.three-choices>.color-choice:last-child{grid-column:auto;width:100%}}


/* A clear welcome hierarchy: title, our three friends, then four separate cards. */
.brand-mascots{display:block;width:42px;height:38px;object-fit:cover;flex-shrink:0}
.welcome{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(90px,190px) auto auto;gap:20px;align-content:center;justify-items:center;padding:20px 0 12px;max-height:820px}
.welcome-copy{text-align:center;max-width:100%}.welcome .eyebrow,.welcome .little-note{display:none}.welcome h1,html:not([lang="uk"]) .welcome h1{font-size:clamp(28px,4.8dvh,46px);line-height:1.08;letter-spacing:-1.6px;max-width:550px;margin:0}.welcome .lead{font-size:14px;margin:10px 0 0}
.color-garden{position:relative;inset:auto;display:block;flex:none;width:min(310px,100%);height:100%;min-height:0;max-height:none;margin:0;transform:none;overflow:hidden}
.welcome-mascots{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.game-menu,.welcome .game-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(100%,480px);margin:0}
.welcome .game-menu .primary{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-width:0;min-height:88px;width:100%;padding:15px 18px;margin:0;border-radius:22px;box-shadow:0 4px 0 #d2dcc8;font-weight:650;font-size:16px;line-height:1.15;background:#e6ecdf;color:#354e3a}
.welcome .game-menu #start{background:#e6ecdf;color:#354e3a}.welcome .game-menu .secondary-game{background:#eaf0e4;color:#3c5b42}.welcome .game-menu .letters-game{background:#eee7f2;color:#654f79;box-shadow:0 4px 0 #dcd0e4}.welcome .game-menu .bubbles-launch{background:#e4eff2;color:#3c6170;box-shadow:0 4px 0 #cbdfe5}
.game-tile-icon{display:grid;place-items:center;width:40px;height:32px;flex-shrink:0}.game-tile-icon svg{width:40px;height:32px}.game-letter{font:700 32px/1 system-ui,sans-serif}.game-tile-label{display:block}.welcome .quiet{margin:1px 0 0;font-size:12px;line-height:1.4;color:#6a7868}
@media(max-height:700px) and (orientation:portrait){.welcome{grid-template-rows:auto minmax(75px,1fr) auto auto;gap:14px;padding:10px 0}.welcome .lead{display:none}.welcome .game-menu .primary{min-height:78px;padding:12px 10px;font-size:15px;gap:7px}.welcome .game-menu{gap:12px}.color-garden{width:min(270px,100%)}.welcome .quiet{font-size:11px}}
@media(orientation:landscape) and (max-height:550px){.welcome{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px 28px;padding:8px 0;max-height:100%}.welcome-copy{grid-column:1;grid-row:1}.welcome h1,html:not([lang="uk"]) .welcome h1{font-size:26px;line-height:1.08}.welcome .lead,.welcome .quiet{display:none}.color-garden{grid-column:1;grid-row:2;position:relative;inset:auto;width:100%;height:100%;max-height:none;margin:0}.welcome .game-menu{grid-column:2;grid-row:1/3;align-self:center;gap:12px;margin:0}.welcome .game-menu .primary{min-height:74px;padding:10px 8px;font-size:14px;gap:7px}.game-tile-icon,.game-tile-icon svg{width:34px;height:28px}.game-letter{font-size:28px}}

/* Free bubble play: six glassy targets, with a visible pause while naming one. */
.bubble-game{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) 38px;gap:12px;padding:12px 4px 0;touch-action:none}
.bubble-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.bubble-heading h1{font-size:clamp(21px,4vw,30px);line-height:1.12;margin:0;letter-spacing:-.9px}.bubble-heading .back-button{font-size:12px;padding:8px 10px;width:auto;min-height:44px;max-width:140px;white-space:normal}
.bubble-prompt{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px}.bubble-prompt h2{font-size:clamp(21px,5vw,30px);line-height:1.2;font-weight:550;margin:0;letter-spacing:-.6px}.bubble-prompt .icon-button{flex-shrink:0;width:44px;height:44px}.bubble-prompt .icon-button:disabled{visibility:hidden}
.bubble-board{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,2dvh,24px);padding:clamp(8px,2dvh,20px);border-radius:40px;background:radial-gradient(ellipse at 15% 80%,#e4eedb90,transparent 65%),radial-gradient(ellipse at 85% 25%,#e7eff390,transparent 70%);width:100%;max-width:740px;justify-self:center}
.garden-bubble{position:relative;display:block;justify-self:center;align-self:center;width:auto;height:100%;max-width:180px;max-height:180px;max-inline-size:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--bubble-colour);background:radial-gradient(ellipse at 29% 23%,#ffffff9c,transparent 32%),radial-gradient(ellipse at 70% 83%,#0002,transparent 60%),var(--bubble-colour);box-shadow:inset 0 0 0 2px #ffffff60,inset -6px -8px 14px #0002,0 8px 18px #3954590c;cursor:pointer;touch-action:none;transition:opacity .2s,transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;isolation:isolate}
.garden-bubble::before{content:'';position:absolute;inset:5%;border-radius:50%;border:2px solid transparent;border-top-color:#ffffffda;border-left-color:#ffffff90;transform:rotate(-28deg);pointer-events:none}
.bubble-shine{position:absolute;top:16%;left:18%;width:28%;height:13%;border-radius:50%;background:#ffffffe0;transform:rotate(-35deg);pointer-events:none}.bubble-glint{position:absolute;right:15%;bottom:16%;width:26%;height:14%;border-bottom:3px solid #ffffffbd;border-radius:50%;transform:rotate(-35deg);pointer-events:none}
.bubble-wait{position:absolute;inset:-1px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:50%;background:#faf7f0b8;opacity:0;transition:opacity .18s;pointer-events:none}.bubble-wait i{display:block;width:4px;height:17px;background:#75877b;border-radius:3px;opacity:.75}
.bubble-board.listening .garden-bubble:not(.bubble-active) .bubble-wait{opacity:1}.bubble-board.listening .garden-bubble:not(.bubble-active){box-shadow:inset 0 0 0 2px #ffffff80;border-color:#cbd5ce}.bubble-board.listening .garden-bubble{cursor:default}.garden-bubble.bubble-active{outline:3px solid #8ca89c;outline-offset:5px;box-shadow:inset 0 0 0 3px #ffffffdf,0 0 0 9px #dce8dc66}
.garden-bubble.bubble-popped{opacity:0;transform:scale(.7);pointer-events:none}.garden-bubble:focus-visible,.bubble-game button:focus-visible{outline:3px solid #315c45;outline-offset:4px}.bubble-feedback{font-size:clamp(12px,2vw,16px);line-height:1.35;text-align:center;margin:0;color:#627662;align-self:center}
@media(min-width:760px) and (min-height:600px){.garden-bubble:nth-child(2),.garden-bubble:nth-child(6){max-width:150px;max-height:150px}.garden-bubble:nth-child(3),.garden-bubble:nth-child(4){max-width:164px;max-height:164px}}
@media(max-width:600px) and (orientation:portrait){.bubble-game{gap:10px;padding:8px 0 0}.bubble-heading h1{font-size:22px}.bubble-heading .back-button{max-width:95px;font-size:11px}.bubble-board{gap:10px;padding:8px;max-height:480px}.bubble-prompt h2{font-size:23px}.garden-bubble{max-width:140px;max-height:140px}}
@media(orientation:landscape) and (max-height:550px){.bubble-game{position:relative;grid-template-rows:auto minmax(0,1fr) 22px;gap:7px;padding:0}.bubble-heading{position:absolute;inset:0 auto auto 0;z-index:2}.bubble-heading h1{display:none}.bubble-heading .back-button{width:84px;min-height:38px;font-size:10px;padding:5px}.bubble-prompt{margin:0 55px 0 90px;min-height:38px}.bubble-prompt h2{font-size:20px}.bubble-prompt .icon-button{width:36px;height:36px}.bubble-board{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px 22px;padding:4px 30px;border-radius:22px;max-width:620px}.garden-bubble{max-height:120px;max-width:120px}.bubble-feedback{font-size:11px}}
@media(prefers-reduced-motion:reduce){.garden-bubble,.bubble-wait{transition:none}}
/* Labels are text, not the oversized decorative spans used by the old buttons. */
.welcome .game-menu .primary .game-tile-label{display:block;font-size:inherit;line-height:1.2;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.welcome .game-menu .primary .game-tile-icon{display:grid;font-size:inherit;line-height:1}
.welcome .game-menu .primary .game-letter{display:block;font:700 32px/1 system-ui,sans-serif}
@media(orientation:landscape) and (max-height:550px){.welcome .game-menu .primary .game-letter{font-size:28px}}
/* Size circles from both the column width and viewport height; never stretch
   a tall grid cell into a bubble wider than its phone-sized column. */
.garden-bubble{width:min(100%,180px,calc((100dvh - 250px)/2));height:auto;aspect-ratio:1}
.bubble-prompt h2{text-align:center}
@media(orientation:landscape) and (max-height:550px){.garden-bubble{width:min(100%,120px,calc((100dvh - 174px)/2));height:auto}}

.game-nav #nav-games-heading{font-weight:650}.game-nav .nav-account{border-top:1px solid #dce1d3;margin-top:8px;padding-top:6px}.game-nav .nav-account>a{display:flex;align-items:center;min-height:44px;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:14px;color:#465940;touch-action:manipulation}.game-nav .nav-account>a:hover{background:#edf0e2}.game-nav .nav-account form{margin:0}.game-nav .nav-account [hidden]{display:none}

/* Soft play adds depth to the tray and controls. Learning colours stay solid. */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  color: #f4eee6;
  background: #1e2234;
  --paper: #1e2234;
  --ink: #f4eee6;
  --muted: #c2c3d5;
  --panel: #2b3046;
  --line: #50566d;
  --accent: #e6c680;
}
:root:not([data-theme="light"]) :is(.brand, .icon-button, .back-button, .listen, .game-settings>summary, .game-nav button, .game-nav .nav-account button, .game-languages a, dialog) { color: var(--ink); }
:root:not([data-theme="light"]) :is(.icon-button, .back-button, .listen, .game-settings>summary, dialog, .choices, .bubble-board) { background: var(--panel); border-color: var(--line); }
:root:not([data-theme="light"]) :is(.game-settings[open]>summary, .game-nav a:hover, .game-nav button:hover, .game-languages a[aria-current], .icon-button[aria-pressed=true]) { background: #3a405a; }
:root:not([data-theme="light"]) :is(.game-language-options, .game-nav .nav-account, .practice-settings, .update-controls) { border-color: var(--line); }
:root:not([data-theme="light"]) :is(.eyebrow, .quiet, .little-note, footer, .text-button, .feedback, .bubble-feedback, dialog p, .offline-note) { color: var(--muted); }
:root:not([data-theme="light"]) :is(h1 span, .finish-star, .tiny-flower, .little-note span) { color: var(--accent); }
:root:not([data-theme="light"]) .welcome .game-menu .primary { background: var(--panel); color: var(--ink); box-shadow: 0 4px 0 #141726; }
:root:not([data-theme="light"]) .welcome .game-menu #start { background: #343b50; color: var(--ink); }
:root:not([data-theme="light"]) .welcome .game-menu .letters-game { color: #dbc9f1; }
:root:not([data-theme="light"]) :is(.finish, dialog) .primary { background: var(--accent); color: #292535; box-shadow: 0 4px 0 #89713f; }
:root:not([data-theme="light"]) .progress i { background: #626783; }
:root:not([data-theme="light"]) .progress i.filled { background: var(--accent); }
:root:not([data-theme="light"]) .feedback.success { color: #b4e2bf; }
:root:not([data-theme="light"]) .color-choice.correct { box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px #e6c680; }
:root:not([data-theme="light"]) .shape-choice,
:root:not([data-theme="light"]) .letter-choice { background: #e6e0ef; color: #333549; }
:root:not([data-theme="light"]) :is(button, a, select, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
:root:not([data-theme="light"]) dialog::backdrop { background: #141726b8; }
:root:not([data-theme="light"]) .practice-settings select { background: var(--paper); color: var(--ink); border-color: var(--line); }
:root:not([data-theme="light"]) .choices { padding: clamp(7px, 1.4dvh, 14px); border-radius: 28px; }
.color-choice { border-radius: clamp(20px, 4.8dvh, 35px); }

/* The full grid cell remains the touch target. Only the raised cap is round. */
.tactile-colour,
.tactile-colour:active,
.tactile-colour.correct,
:root:not([data-theme="light"]) .tactile-colour.correct {
  display: grid;
  place-items: center;
  container-type: size;
  transition: opacity 380ms ease-out;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.tactile-colour.correct::after { content: none; }
.colour-cap {
  --cap-depth: clamp(4px, 1.4dvh, 9px);
  --cap-rest: inset 0 calc(-1 * var(--cap-depth)) 0 #0003, inset 0 2px 0 #ffffff32,
              0 5px 0 #0003, 0 9px 15px #0002;
  --cap-pressed: inset 0 calc(-.45 * var(--cap-depth)) 0 #0003, inset 0 2px 0 #ffffff32,
                 0 2px 0 #0003, 0 4px 7px #0002;
  position: relative;
  display: grid;
  place-items: center;
  width: 96%;
  height: 94%;
  border-radius: 45%;
  background: var(--color);
  box-shadow: var(--cap-rest);
  transition: transform 135ms ease-out, box-shadow 135ms ease-out;
  pointer-events: none;
}
@supports (width: 1cqi) {
  .colour-cap {
    width: min(calc(100cqi - 8px), calc(100cqb - 10px), 15rem);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
  }
}
.colour-cap::before {
  content: "";
  position: absolute;
  inset: 14% auto auto 19%;
  width: 34%;
  height: 12%;
  border-radius: 50%;
  background: #ffffff42;
  transform: rotate(-24deg);
}
.tactile-colour[data-held] .colour-cap {
  transform: translateY(5px) scale(.97);
  box-shadow: var(--cap-pressed);
  transition-duration: 65ms;
}
@media (prefers-reduced-motion: reduce) {
  .tactile-colour[data-held] .colour-cap { transform: none; }
}
.tactile-colour.correct .colour-cap {
  outline: 2px solid var(--color);
  outline-offset: 3px;
}
.tactile-colour.correct:not([data-held]) .colour-cap::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--color);
  border-radius: inherit;
  opacity: 0;
  animation: colour-ripple 1450ms 100ms ease-out;
}
@keyframes colour-ripple {
  0% { transform: scale(1); opacity: 0; }
  25% { opacity: .48; }
  100% { transform: scale(1.12); opacity: 0; }
}
/* A short, quiet colour cue over the game area, independent of the controls. */
.colour-celebration {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.colour-balloon {
  --balloon-fill: var(--celebration-colour);
  --balloon-ink: #4a343c;
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: clamp(60px, var(--size), 118px);
  height: auto;
  opacity: 0;
  animation: colour-balloon-drift 2600ms var(--delay) linear both;
}
@supports (color: color-mix(in srgb, red, white)) {
  .colour-balloon {
    --balloon-fill: color-mix(in srgb, var(--celebration-colour) 71%, #fff1d8);
    --balloon-ink: color-mix(in srgb, var(--celebration-colour) 28%, #3b2930);
  }
}
.balloon-body, .balloon-tie {
  fill: var(--balloon-fill);
  stroke: var(--balloon-ink);
  stroke-width: 1.65;
  stroke-linejoin: round;
}
.balloon-shade { fill: var(--balloon-ink); opacity: .12; }
.balloon-glint { fill: #fff9eb; opacity: .5; }
.balloon-pattern { fill: #fff9eb; opacity: .65; }
.balloon-line, .balloon-stitch {
  fill: none;
  stroke: var(--balloon-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.balloon-stitch { stroke: #fff9eb; stroke-dasharray: 2 4; opacity: .82; }
.colour-balloon--smile  { --left: 5%;  --top: 55%; --size: 23vmin; --drift: 13px; --delay: 0ms; }
.colour-balloon--dots   { --left: 41%; --top: 68%; --size: 19vmin; --drift: -7px; --delay: 210ms; }
.colour-balloon--stitch { --left: 73%; --top: 53%; --size: 22vmin; --drift: -12px; --delay: 110ms; }
@keyframes colour-balloon-drift {
  0% { transform: translateY(16px) rotate(-4deg); opacity: 0; }
  23% { opacity: .85; }
  60% { opacity: .85; }
  100% {
    transform: translate(var(--drift), calc(-1 * clamp(68px, 17dvh, 135px))) rotate(5deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .colour-celebration { display: none; }
}
[data-appearance] label { display: grid; gap: 5px; margin-top: 16px; }
[data-appearance] select { min-height: 44px; max-width: 100%; }

.activity-next { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; color: var(--ink); font-size: 14px; text-underline-offset: 4px; }
.activity-next[hidden] { display: none; }
@media(max-height:700px) { .finish .text-button { margin-top: 0; } }
@media(max-height:470px) { .activity-next { margin-top: 2px; } .finish-star { display: none; } .finish-dots { margin-block: 8px 12px; } }

.audio-preparation {
  display:grid;
  height:100%;
  place-items:center;
  text-align:center;
  overflow:auto;
}
.audio-loader {padding:1rem; max-width:25rem}
.audio-loader img {width:clamp(4rem,18vmin,7.5rem); height:auto}
.audio-loader:not(.audio-failed) img {animation:mascot-settle 1.8s ease-in-out infinite}
.audio-loader-actions {display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem}
.audio-loader-actions button {min-height:44px}
.audio-preparation[hidden],.audio-loader[hidden],.audio-loader button[hidden] {display:none}
@keyframes mascot-settle {50% {transform:translateY(-5px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce) {.audio-loader:not(.audio-failed) img {animation:none}}