.debug-launcher { position: fixed; z-index: 20; left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); min-height: 44px; padding: 8px 12px; border: 2px solid #fff; border-radius: 12px; background: #392a50; color: #fff; font: 700 13px monospace; box-shadow: 0 3px 12px #0003; }
.debug-launcher:hover { background: #614683; }
.debug-fields { display: grid; gap: 8px; text-align: left; min-width: 0; }
.debug-fields label { font-size: 14px; font-weight: 700; }
.debug-fields select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #d5c6e9; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
.debug-panel .dialog-actions { margin-top: 16px; gap: 10px; }
.debug-panel button:disabled { opacity: .45; }
.debug-fields select:focus-visible { outline: 3px solid #3085bf; outline-offset: 2px; }

/* A shared drawing board and toy box: blocks live over the picture, not in a separate form. */
.game-page { --choices-min: 82px; max-width: none; padding: 8px; gap: 8px; overflow: hidden; }
.game-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
.game-nav-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 5px 12px; border: 2px solid #fff; border-radius: 12px; background: #e8ddf8; color: var(--ink); font-family: inherit; font-weight: 800; font-size: 14px; line-height: 1.1; box-shadow: 0 3px 0 #c6ae8640; }
.game-nav-button:first-child { margin-right: auto; }
.game-nav-button > .button-art, .game-nav-button > svg { width: 26px; height: 26px; object-fit: contain; }
.game-navigation { position: relative; z-index: 9; }
.footer-credits { min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 360px) {
  .game-nav-button { padding: 5px 7px; gap: 3px; font-size: 12px; }
  .game-navigation { gap: 4px; }
  .game-nav-button > .button-art, .game-nav-button > svg { width: 23px; height: 23px; }
}
.play-area { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 6px; }
@media (orientation: landscape) and (max-height: 500px) { .play-area { gap: 5px; } }
.game-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; flex: 1 1 auto; min-height: 0; width: 100%; container-name: game-board; container-type: size; }
.scene-wrap { position: relative; width: 100%; height: 100%; border: 1px solid #e4d9c5; border-radius: 18px; background: #f5eddf; container-type: size; align-items: start; }
.donek-character[data-reaching="true"] { z-index: 8; pointer-events: none; }
.game-body:has(#scene-loading) > .donek-character { visibility: hidden; }
/* Three square choices fill the available height; add only padding and borders to their width. */
.picture-choices { --menu-space: 54px; position: relative; z-index: 7; width: max(var(--choices-min), calc((100cqh - var(--menu-space) - 38px) / 3 + 18px)); height: 100%; flex-direction: column; padding: 8px; gap: 6px; border-radius: 18px; background-color: #fff9e4; box-shadow: 0 3px 12px #64513e12; container-name: picture-options; container-type: size; }
.board-menu { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; width: 100%; }
.board-progress { display: flex; align-items: center; gap: 5px; color: #76568f; font-size: 16px; font-weight: 900; white-space: nowrap; }
.board-progress .drawn-star { width: 18px; height: 18px; }
.board-menu .icon-button { width: 48px; height: 48px; border: 2px solid #fff; box-shadow: 0 3px 0 #c6ae8640; }
.board-menu .icon-button { background: #e8ddf8; }
.board-finish { display: flex; flex-direction: column; width: 100%; height: 100%; }
.board-finish h2 { margin: 0; color: #76568f; }
.board-finish .finish-stars { gap: 3px; padding: 0; }
.pause-settings { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pause-menu .dialog-actions { margin: 14px auto; gap: 12px; }
@container (min-width: 102px) {
  .board-menu { flex-direction: row; justify-content: center; gap: 8px; }
  .board-progress { flex-direction: column; gap: 0; }
}
#choices { flex-direction: column; justify-content: space-evenly; gap: 10px; width: 100%; min-width: 0; container-type: size; }
.picture-choice { width: min(100%, calc((100cqh - 20px) / 3)); height: auto; min-height: 0; max-height: none; max-width: none; flex: 0 0 auto; aspect-ratio: 1; border-radius: 13px; padding: 5px; }
.choice-check { width: 21px; height: 21px; }
.puzzle { position: relative; z-index: 4; flex: 0 0 auto; min-height: 0; padding: 2px 8px; border: 0; background: none; border-radius: 0; pointer-events: none; }
.word-slots { gap: 5px; margin: 0; align-items: center; }
.word-slot { flex: 0 1 96px; width: min(96px, calc(100% / var(--slots) - 5px)); max-width: 96px; min-width: 12px; margin: 0; background: #fffdf445; border: 2px dashed #b19bc077; pointer-events: auto; border-radius: 9px; }
.word-slot.active-slot { border-color: #9274b8; background: #f3e3ff77; }
.word-slot.active-slot.empty:not(:disabled) { animation: slot-invite 2.4s ease-in-out infinite; }
.word-wait { height: 96px; }
@keyframes slot-invite { 50% { border-color: #dfa73f; box-shadow: 0 0 0 3px #f5c86545; } }
.word-slot.filled { box-shadow: none; background: transparent; border: 2px solid transparent; }
.word-slots.multiword { flex-wrap: wrap; gap: 7px 12px; }
.word-group { display: flex; gap: 5px; justify-content: center; width: calc(var(--slots) * (clamp(28px, 8vw, 64px) + 5px) - 5px); max-width: 100%; flex: 0 1 auto; }
.slot-dot { color: #957cae; font-size: 11px; }
#tiles { display: block; position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; pointer-events: none; touch-action: none; }
#tiles.celebrating { z-index: 8; }
.letter-tile { position: absolute; top: 0; left: 0; border-radius: 8px; background: transparent; pointer-events: auto; transition: none; will-change: transform; cursor: grab; box-shadow: 0 3px 0 #73613d60, 0 6px 10px #614c3d20; }
.letter-tile.held { z-index: 12; cursor: grabbing; box-shadow: 0 5px 0 #73613d50, 0 12px 18px #614c3d35; }
.letter-tile[data-state="snapping"], .letter-tile[data-state="placed"], .letter-tile.retiring { pointer-events: none; }
.letter-tile.wrong { animation: tile-wrong .4s; }
.letter-tile.hinted::after { content: ''; position: absolute; inset: -4px; border: 3px solid #e0a72b; border-radius: 12px; background: #fff4; box-shadow: 0 0 12px #ffc647; pointer-events: none; opacity: 0; animation: tile-hint .6s ease-in-out 3; }
@keyframes tile-hint { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .letter-tile.hinted::after { animation: none; opacity: 1; background: transparent; } }
.tile-spark { position: absolute; top: 0; left: 0; pointer-events: none; background: url("assets/atlases/particles1.png") center / contain no-repeat; z-index: 10; will-change: transform, opacity; }
.scene-hint { position: absolute; top: 14px; left: 14px; z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; max-width: calc(100% - 28px); border: 2px solid #e8ba62; border-radius: 22px 22px 22px 6px; background: #fffaf0f5; color: #4d3269; box-shadow: 0 4px 0 #d9bc8255; font-size: 20px; font-weight: 900; line-height: 1.25; }
.scene-hint .star-art { width: 32px; height: 32px; flex: 0 0 auto; }
.scene-loading > .star-art { width: 52px; height: 52px; animation: loading-star 1.2s ease-in-out infinite; }
@keyframes loading-star { 50% { scale: 1.18; rotate: 12deg; } }
#toast { font-size: 15px; font-weight: 700; line-height: 1.4; }
@container (max-width: 240px) {
  .scene-hint { top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 10px 12px; }
  .scene-hint .star-art { display: none; }
}
@keyframes tile-wrong { 50% { filter: saturate(1.8) drop-shadow(0 0 8px #e27368); } }
@media (min-width: 681px) { .game-page { --choices-min: 124px; } }
@media (max-width: 680px) {
  .game-page { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); gap: 6px; }
  .game-body { gap: 6px; }
  .picture-choices { padding: 6px; border-radius: 15px; }
  .picture-choice { width: min(100%, calc((100cqh - 24px) / 3)); height: auto; flex-basis: auto; padding: 4px; }
  .puzzle { padding: 2px 4px; }
  .word-slot { flex-basis: 64px; width: min(64px, calc(100% / var(--slots) - 5px)); max-width: 64px; }
  .word-wait { height: 64px; }
}
@media (max-height: 500px) {
  .game-page { padding-top: 5px; padding-bottom: 5px; gap: 5px; }
  .puzzle { padding-top: 0; } .word-slot { flex-basis: 48px; max-width: 48px; }
  .word-wait { height: 48px; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .picture-choices { padding: 5px; gap: 4px; }
  #choices { gap: 6px; }
  .picture-choice { width: min(100%, calc((100cqh - 12px) / 3)); }
}

@media (orientation: landscape) {
  @container game-board (max-height: 500px) {
    /* Two columns keep large choices on short screens, with the same narrow margin. */
    .picture-choices { width: max(var(--choices-min), calc(100cqh - var(--menu-space))); }
    #choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); place-items: center; gap: 10px; }
    .picture-choice { width: min(calc((100cqw - 10px) / 2), calc((100cqh - 10px) / 2)); }
    .picture-choice:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .board-finish { grid-column: 1 / -1; grid-row: 1 / -1; }
  }
}

@media (orientation: landscape) {
  .play-area { --game-nav-width: 56px; display: grid; grid-template-columns: var(--game-nav-width) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .play-area > .puzzle { grid-column: 1 / -1; grid-row: 1; }
  .play-area > .game-body { grid-column: 2; grid-row: 2; }
  .game-navigation { grid-column: 1; grid-row: 2; align-self: start; flex-direction: column; justify-content: flex-start; gap: 8px; }
  .game-nav-button { width: var(--game-nav-width); min-height: 56px; flex-direction: column; gap: 3px; padding: 4px 1px; font-size: 9px; }
  .game-nav-button:first-child { margin-right: 0; }
}

@media (orientation: portrait) {
  .game-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  /* Fit three squares across the width left by the menu, with a little extra height. */
  .picture-choices { width: 100%; height: max(88px, min(174px, calc((100cqw - 80px) / 3 * 1.1 + 14px))); flex-direction: row; padding: 6px; gap: 6px; }
  .board-menu { flex: 0 0 48px; width: 48px; flex-direction: column; gap: 4px; }
  .board-progress { flex-direction: row; gap: 3px; font-size: 12px; }
  .board-progress .drawn-star { width: 14px; height: 14px; }
  #choices { flex-direction: row; width: auto; height: 100%; gap: 6px; }
  .picture-choice { width: min(158px, 100cqh, calc((100cqw - 12px) / 3)); }
}

/* Large, consistent controls. The smaller blocks below are a word display, not buttons. */
:root { --control-size: 64px; }
.game-page { --control-size: 112px; }
@media (max-width: 680px) and (orientation: portrait) {
  .game-page { --control-size: 72px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .game-page { --control-size: 80px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .game-page { --control-size: 64px; }
}
@media (orientation: landscape) {
  @container game-board (max-height: 500px) {
    .picture-choices { width: max(var(--choices-min), 182px, calc(100cqh - var(--menu-space))); }
    .board-progress { flex-direction: row; }
  }
}
.icon-button, .home-screen .icon-button, .home-screen .header .icon-button,
.header nav .icon-button, .board-menu .icon-button, .pause-settings .icon-button {
  width: var(--control-size); height: var(--control-size); min-width: var(--control-size); min-height: var(--control-size); flex-shrink: 0;
}
.primary-button, .secondary-button, .text-button, .home-screen .home-start,
.home-screen .home-resume, .home-screen .home-help, .brand { min-height: var(--control-size); }
.setting-button { flex-direction: column; gap: 4px; border-radius: 16px; font-size: 12px; font-weight: 700; }
.setting-button .button-art { width: 32px; height: 32px; }
.header { gap: 12px; }
.header nav .setting-button, .home-screen .header nav .setting-button { width: 88px; min-width: 76px; height: 72px; padding: 4px; gap: 2px; line-height: 1.15; }
.header nav .setting-button span { max-width: 100%; }
@media (max-width: 480px) {
  .header { gap: 8px; }
  .header nav .setting-button, .home-screen .header nav .setting-button { width: 76px; }
  .home-screen .header nav .setting-button { flex: 1; max-width: 88px; font-size: clamp(10px, 3.5vw, 12px); }
  .header .brand-word { font-size: 22px; letter-spacing: -1px; }
  .header .brand-sub { font-size: 7px; letter-spacing: 1px; }
  /* Keep all three labeled actions large without squeezing the artwork. */
  .home-screen .header > .brand { display: none; }
  .home-screen .header nav { width: 100%; min-width: 0; margin-left: 0; justify-content: center; }
  .home-screen .header nav .home-help { font-size: 12px; padding: 4px; }
}
@media (max-width: 360px) {
  .levels-screen .header > .brand { display: none; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .home-screen .header nav .setting-button { height: 64px; }
  .home-screen .header nav .setting-button .button-art { width: 26px; height: 26px; }
}
@media (max-width: 400px) {
  .header:has(> .icon-button) .brand-word { font-size: 21px; }
  .header:has(> .icon-button) .brand-sub { font-size: 7px; letter-spacing: 1px; }
}
.pause-settings .icon-button { flex-basis: var(--control-size); }
.pause-settings { gap: 8px; }
.pause-menu .dialog-actions { max-width: none; }
.pause-menu .secondary-button .button-art { transform: none; }
.pause-menu .text-button { border: 1px solid var(--line); background: #fffdf8; }
.pause-menu .dialog-actions button { font-size: clamp(19px, calc(var(--control-size) * .24), 27px); gap: 14px; padding: 10px 14px; }
.pause-menu .dialog-actions .button-art { width: clamp(32px, calc(var(--control-size) * .42), 48px); height: clamp(32px, calc(var(--control-size) * .42), 48px); }
.pause-menu .setting-button { font-size: clamp(12px, calc(var(--control-size) * .16), 18px); }
.pause-menu .setting-button .button-art { width: clamp(32px, calc(var(--control-size) * .4), 48px); height: clamp(32px, calc(var(--control-size) * .4), 48px); }
@media (max-height: 600px) {
  dialog[data-kind="pause"] { padding: 12px; }
  .pause-menu .dialog-heading h2 { margin: 4px 0; }
  .pause-menu .dialog-heading p { margin: 4px 0; line-height: 1.3; }
  .pause-menu .dialog-actions { margin: 10px auto; gap: 6px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pause-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
  .pause-menu .dialog-actions { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .pause-menu .pause-settings { grid-column: 1; }
}
.picture-choices { --menu-space: 40px; }
@media (orientation: portrait) {
  .board-menu { flex-basis: 40px; width: 40px; }
  .picture-choices { height: min(174px, max(84px, calc((100cqw - 72px) / 3 * 1.1 + 14px))); }
}
@media (hover: none) and (pointer: coarse) {
  .donek-character { filter: none; will-change: transform; }
}
.game-page.finished .puzzle { display: none; }
.picture-choices.finished { width: clamp(240px, 30cqw, 340px); padding: 12px; }
.picture-choices.finished > .board-menu { display: none; }
.picture-choices.finished #choices { display: flex; width: 100%; height: 100%; }
.board-finish { align-items: stretch; justify-content: flex-start; gap: 10px; min-height: 0; }
.finish-heading { display: flex; justify-content: center; align-items: center; gap: 12px; flex: 0 0 auto; }
.board-finish h2 { font-size: 24px; }
.board-finish .finish-stars .star-art { width: 32px; height: 32px; }
.board-finish .finish-stars .drawn-star { width: 32px; height: 32px; }
.board-finish .finish-stars { gap: 8px; line-height: 0; }
.finish-star { position: relative; display: grid; place-items: center; isolation: isolate; flex: 0 0 auto; }
.finish-star > :is(.star-art, .drawn-star) { position: relative; z-index: 1; }
.finish-stars.awaiting-stars > .earned > .drawn-star { filter: grayscale(1); opacity: .35; }
.finish-stars.awaiting-stars .drawn-star > .star-art { animation-play-state: paused; }
.finish-star::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, #ffe9a0aa 0, #ffc94955 35%, #ffd55c00 70%); opacity: 0; pointer-events: none; }
.award-spark { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; opacity: 0; pointer-events: none; }
.board-finish .finish-stars .award-spark .star-art { width: 10px; height: 10px; }
.finish-stars.celebrating > .earned { z-index: 2; animation: award-star .95s cubic-bezier(.18,.75,.3,1) backwards; animation-delay: var(--delay); }
.finish-stars.celebrating > .earned::before { animation: award-glow .8s ease-out backwards; animation-delay: calc(var(--delay) + .2s); }
.finish-stars.celebrating .award-spark { animation: award-spark .75s ease-out backwards; animation-delay: calc(var(--delay) + .25s); }
@keyframes award-star {
  0% { opacity: 0; transform: translateY(-38px) scale(.25) rotate(-35deg); }
  42% { opacity: 1; transform: translateY(2px) scale(1.65) rotate(12deg); }
  63% { transform: translateY(-3px) scale(.88) rotate(-7deg); }
  82% { transform: translateY(0) scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes award-glow {
  0% { opacity: 0; transform: scale(.3); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes award-spark {
  0% { opacity: 0; transform: scale(.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.35) rotate(var(--spark-turn)); }
}
.finished-words { --word-rows: var(--word-count); display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; column-gap: 10px; container-type: size; list-style: none; padding: 4px 6px; margin: 0; flex: 1 1 0; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; border-radius: 12px; background: #fffaf0b8; scrollbar-color: #b79ac9 #fffaf0; scrollbar-width: thin; }
.finished-word { display: flex; align-items: center; padding: 1px 0; width: 100%; min-width: 0; container-type: inline-size; }
.finished-word-button { display: flex; justify-content: center; align-items: center; width: 100%; min-width: 44px; min-height: 44px; padding: 2px; border: 2px solid transparent; border-radius: 10px; background: #fffdf780; }
.finished-word-text { width: 100%; min-width: 0; text-align: center; text-wrap: balance; line-height: 0; word-spacing: 4px; }
.finished-word-part { display: inline-flex; gap: 2px; vertical-align: middle; margin-block: 2px; }
.finished-word-button[aria-pressed="true"] { background: #eee5f7; }
.finished-word-button.word-pulse { animation: word-pulse .55s ease-out; }
@keyframes word-pulse { 20% { background: #ffe8a0; border-color: #dbaa20; filter: brightness(1.08); } }
.finished-word-button:not(:disabled):is(:hover, :focus-visible, :active) { scale: 1; translate: none; }
.finished-letter { position: relative; width: min(40px, calc((100cqw - 8px - (var(--letters) - 1) * 2px) / var(--letters)), max(22px, calc(100cqh / var(--word-rows) - 6px))); aspect-ratio: 1; flex: 0 0 auto; }
.finish-next { min-height: var(--control-size); width: 100%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px; border: 3px solid #fff; border-radius: 18px; background: #cbeea5; color: #345d27; box-shadow: 0 5px 0 #93b972; font-weight: 900; font-size: 21px; line-height: 1.2; }
.finish-next .button-art { width: 48px; height: 48px; flex: 0 0 auto; }
.finish-next:hover { background: #d9f6b9; }
.finish-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 0 0 auto; width: 100%; }
.finish-actions .secondary-button { min-width: var(--control-size); min-height: var(--control-size); flex-direction: column; gap: 4px; padding: 6px; font-size: 14px; border: 2px solid #fff; background: #fffaf0; }
.finish-actions .button-art { width: 32px; height: 32px; transform: none; }
@media (max-height: 600px), (max-width: 680px) {
  .picture-choices.finished { padding: 8px; }
  .board-finish { gap: 8px; }
  .board-finish h2 { font-size: 21px; }
  .board-finish .finish-stars .star-art { width: 28px; height: 28px; }
  .board-finish .finish-stars .drawn-star { width: 28px; height: 28px; }
  .finish-next { font-size: 18px; gap: 8px; }
  .finish-next .button-art { width: 40px; height: 40px; }
  .finish-actions { gap: 8px; }
  .finished-letter { max-width: 34px; }
}
@media (orientation: portrait) {
  .picture-choices.finished { width: 100%; height: min(410px, 58dvh); }
  .finished-words { --word-rows: var(--word-pairs); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Longer localized phrases need the whole row to keep their letters readable. */
:is(html[lang="en-US"], html[lang="es-419"]) .finished-words { --word-rows: var(--word-count); grid-template-columns: minmax(0, 1fr); }
/* Leave room for the larger actions on the smallest home screens. */
@media (orientation: portrait) and (max-height: 550px) {
  .home-screen .hero-description { display: none; }
}
@media (orientation: portrait) and (max-height: 500px) {
  .home-screen .how-it-works { display: none; }
}
.home-screen .hero-art[data-compact="true"] .hero-pencil { top: calc(50% - var(--pencil-width) * 179 / 128); }

/* Controls share a small bounce and crayon glow. Blocks use light and an outline;
   their movement, size and rotation belong to the physics simulation. */
button:not(:disabled), summary, a[href] { transition: scale .18s ease, translate .18s ease, filter .18s ease, background-color .18s ease, box-shadow .18s ease; }
button:not(:disabled):is(:hover, :focus-visible) { scale: 1.045; translate: 0 -2px; filter: brightness(1.06) saturate(1.15); }
button:not(:disabled):active { scale: .96; translate: 0 1px; }
button:not(:disabled):is(:hover, :focus-visible) .button-art,
.picture-choice:not(:disabled):is(:hover, :focus-visible) > img,
.level-card:not(:disabled):is(:hover, :focus-visible) > img { animation: toy-wiggle .6s ease-in-out; }
.picture-choice:not(:disabled):is(:hover, :focus-visible), .word-slot:not(:disabled):is(:hover, :focus-visible) { background-color: #fff0c6; border-color: #e4ad52; box-shadow: 0 3px 0 #d7aa66, 0 0 12px #edbf6240; }
.letter-tile:not(:disabled):is(:hover, :focus-visible) { scale: 1; translate: none; filter: brightness(1.08) saturate(1.1); box-shadow: 0 3px 0 #73613d60, 0 6px 10px #614c3d20, 0 0 0 2px #ffe5a4, 0 0 10px #e8b85d55; }
.letter-tile:not(:disabled):active { scale: 1; translate: none; filter: brightness(1.04); }
.letter-tile.held { scale: 1; translate: none; }
/* Scaling the actor also scales his board translation, making him jump near the edge. */
.donek-character:not(:disabled):is(:hover, :focus-visible, :active) { scale: 1; translate: none; }
.donek-character:is(:hover, :focus-visible), .hero-pencil:is(:hover, :focus-visible) { filter: drop-shadow(0 0 8px #e2b953) brightness(1.08); }
.brand:is(:hover, :focus-visible) .brand-word span { animation: toy-hop .6s ease-in-out; animation-delay: calc(var(--letter) * 40ms); }
summary:is(:hover, :focus-visible), a[href]:is(:hover, :focus-visible) { color: #8f5ab4; filter: drop-shadow(0 0 3px #e8bf66); }
a[href]:is(:hover, :focus-visible) { text-decoration: underline wavy #d6a23e; text-underline-offset: 4px; }
button:not(:disabled) > .button-art, .picture-choice:not(:disabled) > img, .level-card:not(:disabled) > img { animation: toy-breathe 4s ease-in-out infinite; }
@keyframes toy-breathe { 50% { scale: 1.025; } }
@keyframes toy-wiggle { 25% { rotate: -6deg; scale: 1.08; } 65% { rotate: 5deg; scale: 1.08; } }
@keyframes toy-hop { 30% { translate: 0 -5px; } 70% { translate: 0 -2px; } }

/* Keep touch targets and feedback while dropping expensive decoration on weak devices. */
:root[data-quality="low"] .game-page button > .button-art,
:root[data-quality="low"] .picture-choice > img,
:root[data-quality="low"] .word-slot.active-slot { animation: none; }
:root[data-quality="low"] .donek-character,
:root[data-quality="low"] .letter-tile,
:root[data-quality="low"] .letter-tile:is(:hover, :active, :focus-visible) { filter: none; box-shadow: none; }
:root[data-quality="low"] .letter-tile:focus-visible { outline: 3px solid #8b5daf; }
:root[data-quality="low"] .hero-pencil { animation: none; filter: none; }
:root[data-quality="low"] dialog::backdrop { backdrop-filter: none; }
.game-paused *, .game-paused *::before, .game-paused *::after { animation-play-state: paused !important; }
.parent-label { display: block; margin: 16px 0 8px; font-weight: 700; }
.parent-input { width: 140px; padding: 12px; border: 2px solid #bda9cf; border-radius: 12px; font: inherit; font-size: 24px; text-align: center; color: var(--ink); background: white; }
.parent-input.review-input { box-sizing: border-box; width: 100%; max-width: 260px; padding: 12px 8px; font-family: monospace; font-size: clamp(16px, 5vw, 22px); text-transform: uppercase; }
#dialog .dialog-actions button:disabled { opacity: .5; filter: saturate(.35); }
.purchase-status { min-height: 2.5em; line-height: 1.5; }
.trial-note { color: var(--muted); }

/* Keep navigation visible while the collection itself scrolls. */
.levels-screen { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.levels-screen .header { width: 100%; max-width: 1250px; margin: 0 auto; flex: 0 0 auto; padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); }
.levels-screen .levels-page { width: 100%; min-height: 0; flex: 1 1 0; display: flex; flex-direction: column; margin: 0 auto; padding: 6px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.levels-screen .page-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; margin: 0 0 12px; flex: 0 0 auto; }
.levels-screen .page-heading > div:first-child { display: contents; }
.levels-screen .page-heading h1 { grid-column: 1 / -1; margin: 0; font-size: clamp(21px, 3vw, 32px); line-height: 1.2; }
.levels-screen .page-heading p { grid-column: 1; margin: 4px 0 0; font-size: 12px; line-height: 1.3; }
.levels-screen .page-heading .trial-note { font-size: 11px; }
.levels-screen .star-counter { grid-column: 2; grid-row: 2 / 4; align-self: center; padding: 6px 10px; font-size: 18px; }
.levels-screen .level-grid { min-height: 0; overflow-y: auto; overflow-x: hidden; grid-auto-rows: max-content; align-content: start; padding: 6px 4px 12px; overscroll-behavior: contain; scrollbar-color: #b79ac9 #fffaf0; scrollbar-width: thin; }
@media (max-width: 480px) {
  .levels-screen .header, .levels-screen .levels-page { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .levels-screen .header { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 0; }
  .levels-screen .header nav .setting-button { height: 64px; }
  .levels-screen .page-heading { margin-bottom: 6px; }
  .levels-screen .page-heading h1 { grid-column: 1; font-size: 23px; }
  .levels-screen .page-heading p:not(.trial-note) { display: none; }
  .levels-screen .star-counter { grid-row: 1 / 3; }
}

/* The help title and actions remain outside the scrollable reading area. */
dialog[data-kind="help"][open] { display: flex; flex-direction: column; gap: 12px; width: 500px; height: min(620px, calc(100dvh - 28px)); padding: 16px; overflow: hidden; }
.help-header { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.help-header .dialog-heading { flex: 1; min-width: 0; text-align: left; }
.help-header .eyebrow { margin: 0 0 4px; font-size: 11px; }
.help-header h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); line-height: 1.2; }
.help-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 0 2px; scrollbar-color: #b79ac9 #fffaf0; scrollbar-width: thin; }
.help-body .help-steps { margin: 0; }
.help-body .help-steps li:first-child { margin-top: 0; }
.help-footer { flex: 0 0 auto; padding-top: 4px; }
.help-footer .primary-button { width: 100%; }

/* The same crayon paper as home, with quiet surfaces behind labels and play. */
.levels-screen {
  background: linear-gradient(#fffaf0c9, #fffaf0e8),
    url("assets/ui/home-world-v1.webp") center / cover no-repeat, #fff9e9;
}
.levels-screen .header .icon-button { background: #fffdf0; border-color: #dfd0b6; box-shadow: 0 3px 0 #cebc932e; }
.levels-screen .header [data-action="settings"] { background: #fff0bd; }
.levels-screen .header [data-action="parents"] { background: #e3f1dc; }
.levels-screen .page-heading { background: #fffdf0ed; border-radius: 10px; box-shadow: 0 0 0 6px #fffdf0ed; }
.levels-screen .page-heading h1 { color: #67268c; }
.levels-screen .page-heading p { color: #66536b; }
.levels-screen .star-counter { color: #6b3d7f; background: #fff4cd; border-color: #dcb965; }
.levels-screen .star-counter .star-limit { color: #746458; }
.levels-screen .level-card {
  background: linear-gradient(#fffdf04d, #fffdf04d), var(--card-color);
  border-color: #d7c8b0;
  color: #58386b;
  box-shadow: 0 3px 0 #c7b58d4d;
}
.levels-screen .level-number { background: #fffdf0; color: #674381; }
.levels-screen .level-card > img { background: #fffdf0bf; }
.levels-screen .resume-badge { background: #714294; }
.levels-screen .level-card.locked { opacity: 1; background: #efe9dd; border-color: #d5c9b7; color: #665a69; box-shadow: 0 2px 0 #d8cfc0; }
.levels-screen .level-card.locked > img { opacity: .6; filter: saturate(.25); }
.game-page {
  background: linear-gradient(#fffaf0eb, #fffaf0f5),
    url("assets/ui/home-world-v1.webp") center / cover no-repeat, #fff9e9;
}
.game-page .game-nav-button { color: #59416b; border-color: #fffcf2; background: #eee2f6; box-shadow: 0 3px 0 #cbb68f4d; }
.game-page .game-nav-button[data-action="levels"] { background: #e3eff6; }
.game-page .game-nav-button[data-action="settings"] { background: #e3f1dc; }
.game-page .game-nav-button[data-action="pause"] { background: #fff0bd; }
.game-page .scene-wrap { background: #fffbf0; border-color: #d8c6a5; box-shadow: inset 0 0 0 3px #fffdf066; }
.game-page .picture-choices {
  background: linear-gradient(#fffaf0ee, #fffaf0ee),
    url("assets/textures/colorstripeslight.jpg") center / cover;
  border-color: #d9c8a6;
  box-shadow: 0 3px 0 #cbb68f33;
}
.game-page .board-progress, .game-page .board-finish h2 { color: #68417e; }
.game-page .picture-choice { background: #fffdf4; border-color: #d9ccb3; box-shadow: 0 3px 0 #cdb98b4d; }
.game-page .picture-choice.selected { background: #f0e4f9; border-color: #8b5aa3; }
.game-page .choice-check { color: #65398b; background: #eee0fa; }
.game-page .word-slot.empty { background: #fffdf0ee; border-color: #ac91b6; }
.game-page .word-slot.empty.active-slot { background: #eee0fa; border-color: #8750a4; }
.game-page .slot-dot { color: #715181; }

/* The title screen exposes language names, without relying on country flags. */
.home-screen .header:has(.language-picker) { flex-wrap: wrap; gap: 6px 12px; }
.home-screen .header:has(.language-picker) > .brand { display: none; }
.home-screen .header:has(.language-picker) nav { width: auto; margin-left: auto; }
.language-picker { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #d8c7a8; border-radius: 16px; background: #fffdf0ed; box-shadow: 0 3px 0 #cbb68f33; }
.language-picker button { min-width: 76px; min-height: 44px; padding: 6px 12px; border: 2px solid transparent; border-radius: 11px; background: transparent; color: #634477; font: 700 14px/1.2 system-ui; cursor: pointer; }
.language-picker button[aria-pressed="true"] { color: #542573; background: #ffe797; border-color: #bd934b; }
.language-picker button:hover { background: #f2e8f8; }
.language-picker button:focus-visible { outline: 3px solid #8650a1; outline-offset: 2px; }
.language-picker button:disabled { cursor: wait; opacity: .65; }
.home-screen .home-title[data-title-order="prefix"] .home-title-name { margin-top: 0; margin-bottom: 8px; }
.home-screen .home-title[data-title-order="prefix"] .home-title-tiles { margin-top: 4px; }
@media (max-width: 760px) {
  .home-screen .header:has(.language-picker) { flex-wrap: nowrap; justify-content: space-between; gap: 4px; }
  .language-picker { flex: 1 1 0; min-width: 0; max-width: 300px; padding: 2px; gap: 2px; border-radius: 13px; }
  .language-picker button { flex: 1 1 0; min-width: 44px; padding: 5px 2px; font-size: clamp(9px, 3vw, 12px); }
  .home-screen .header:has(.language-picker) nav { flex: 0 0 auto; gap: 4px; }
  .home-screen .header:has(.language-picker) nav .setting-button { flex: 0 0 auto; min-width: 48px; width: clamp(48px, 16vw, 64px); height: 64px; padding: 3px 2px; font-size: clamp(10px, 2.8vw, 11px); overflow-wrap: anywhere; }
  .home-screen .header:has(.language-picker) nav .setting-button .button-art { width: 26px; height: 26px; }
  .home-screen .header:has(.language-picker) nav .setting-button[data-action="settings"] { width: max-content; min-width: 60px; max-width: none; white-space: nowrap; overflow-wrap: normal; }
}
@media (max-width: 360px) {
  .home-screen .header:has(.language-picker) .language-picker { padding: 0; gap: 0; }
  .home-screen .header:has(.language-picker) .language-picker button { padding-inline: 1px; }
}