.aurora.a3 { top: 2%; height: 33%; background: radial-gradient(ellipse at 50% 50%, rgba(62,255,215,.24), transparent 65%); }
@media (orientation: portrait) { .aurora.a1 { height: 38%; } .aurora.a2 { height: 34%; } .aurora.a3 { height: 32%; } }

.aurora { mix-blend-mode: screen; filter: blur(10px); opacity: 1; }
.aurora.a1 { background: repeating-linear-gradient(108deg, transparent 0%, rgba(43,255,194,.06) 3%, rgba(65,255,202,.72) 7%, rgba(115,255,223,.5) 10%, rgba(57,195,255,.16) 14%, transparent 19%); }
.aurora.a2 { background: repeating-linear-gradient(78deg, transparent 0%, rgba(161,93,255,.08) 5%, rgba(189,128,255,.62) 10%, rgba(108,152,255,.22) 14%, transparent 22%); }

/* The same scene is repeated in front of the sky effect, clipped to the mountain silhouette. */
.village-foreground { position: absolute; inset: 0; background: url('./aurora-landscape-D8Js2zcL.webp') center / cover no-repeat; clip-path: polygon(0 17%, 7% 25%, 13% 28%, 19% 36%, 26% 32%, 32% 36%, 39% 42%, 46% 46%, 50% 48%, 56% 44%, 63% 38%, 69% 34%, 75% 40%, 81% 36%, 88% 29%, 94% 30%, 100% 18%, 100% 100%, 0 100%); }
@media (orientation: portrait) { .village-foreground { background-image: url('./aurora-portrait-CWqnudhz.webp'); clip-path: polygon(0 27%, 9% 31%, 18% 40%, 23% 39%, 35% 44%, 46% 47%, 55% 45%, 64% 40%, 72% 42%, 82% 40%, 90% 37%, 100% 38%, 100% 100%, 0 100%); } }
.aurora { height: 54%; filter: blur(8px); border-radius: 48% 52% 46% 54% / 40% 35% 65% 60%; transform-origin: 50% 100%; }
.aurora.a1 { height: 55%; background: repeating-linear-gradient(103deg, transparent 0%, rgba(85,255,207,.12) 4%, rgba(88,255,211,.65) 7%, rgba(116,244,230,.34) 10%, transparent 16%); }
.aurora.a2 { height: 53%; background: repeating-linear-gradient(78deg, transparent 0%, rgba(158,112,255,.12) 5%, rgba(187,142,255,.48) 9%, transparent 17%); }
.aurora.a3 { height: 50%; }
@media (orientation: portrait) { .aurora.a1 { height: 50%; } .aurora.a2 { height: 48%; } .aurora.a3 { height: 46%; } }
.aurora-reflection { position:absolute; left:12%; right:12%; top:59%; height:21%; opacity:.28; mix-blend-mode:screen; filter:blur(16px); background: repeating-linear-gradient(100deg, transparent 0 10%, #5eead4 13%, #ae94ff 17%, transparent 22%); mask-image: linear-gradient(transparent, #000 35%, transparent); animation: aurora-reflect 18s ease-in-out infinite alternate; }
@keyframes aurora-reflect { from { transform:translateX(-3%) scaleX(.9); opacity:.14; } to { transform:translateX(3%) scaleX(1.05); opacity:.3; } }
.window-glow { position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 8% 6% at 21% 54%, rgba(255,194,106,.18), transparent), radial-gradient(ellipse 8% 6% at 73% 54%, rgba(255,194,106,.18), transparent); animation: window-breathe 7s ease-in-out infinite alternate; }
@keyframes window-breathe { from { opacity:.2; } to { opacity:.85; } }
html[data-calm="true"] :is(.aurora-reflection,.window-glow), html[data-reduced-motion="true"] :is(.aurora-reflection,.window-glow) { animation:none; }
/* The same centered arrangement as the chosen portrait concept, adapted to desktop. */
body[data-orient="land"] .play { top: 76px; flex-direction: column; gap: 12px; justify-content: center; }
body[data-orient="land"] .side { display: contents; }
body[data-orient="land"] .list-title { display:none; }
body[data-orient="land"] .word-list { order:-1; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; max-width: min(900px, 95%); }
body[data-orient="land"] .word-list li { padding:6px 12px; font-size:18px; gap:7px; }
body[data-orient="land"] .btn-hint { align-self:center; min-width:180px; }
.theme-reveal .tr-window { border: 3px solid #d3f7ff; background: linear-gradient(155deg,#fff,#e2f3ff); box-shadow: 0 7px 0 #91b9ec, 0 0 32px rgba(94,234,212,.4), 0 16px 36px rgba(4,15,54,.4); }
.results.panel { background: linear-gradient(155deg,rgba(252,255,255,.97),rgba(218,234,255,.96)); border: 2px solid #c3f2f5; box-shadow: 0 8px 0 #88add9, 0 0 45px rgba(94,234,212,.28), 0 20px 50px rgba(3,12,52,.5); }
.mark.is-found { background: rgba(var(--mk), .68); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 12px rgba(var(--mk), .65); }
.word-list li.is-found { box-shadow: 0 3px 0 var(--card-edge), 0 0 16px rgba(var(--mk), .5); }
.icon-btn:focus-visible, .btn:focus-visible, .btn-hint:focus-visible, .word-list li:focus-visible { outline:3px solid #ffda58; outline-offset:4px; }

/* Feather the skyline so the composited horizon follows the painting without a visible seam. */
.village-foreground { clip-path:none; -webkit-mask-image:linear-gradient(transparent 21%, #000 42%); mask-image:linear-gradient(transparent 21%, #000 42%); }
@media (orientation:portrait) { .village-foreground { clip-path:none; -webkit-mask-image:linear-gradient(transparent 30%, #000 46%); mask-image:linear-gradient(transparent 30%, #000 46%); } }
/* Curved, translucent curtains drift independently above the mountain horizon. */
.aurora.a1 { background: url('./aurora-ribbons-AxXVzV9q.svg') center / 100% 100% no-repeat; filter: blur(3px); opacity: .95; }
.aurora.a2 { background: url('./aurora-ribbons-AxXVzV9q.svg') center / 100% 100% no-repeat; filter: blur(14px); opacity: .5; }
/* Extend curtains past both edges so their slow sway never reveals a cutout. */
.aurora { left:-45%; width:190%; border-radius:0; }
.aurora.a1 { mix-blend-mode:screen; opacity:.8; }

/* Desktop tutorial: give progress, guidance and puzzle separate vertical space. */
body[data-orient="land"] .play { top: 84px; }
body[data-orient="land"] .coach:not([hidden]) { order:-2; width:min(660px, 92%); box-sizing:border-box; display:flex; align-items:center; gap:12px; padding:9px 12px 9px 16px; }
body[data-orient="land"] .coach::before { flex:none; }
body[data-orient="land"] .coach-text { display:block; min-height:0; flex:1; }

/* On wide screens the guide lives beside the puzzle, leaving the full height for the letters. */
body[data-orient="land"] .play.has-side-coach .coach:not([hidden]) {
  position: absolute;
  top: 32px;
  left: calc(50% + var(--board-size) / 2 + 34px);
  width: min(260px, calc((100% - var(--board-size)) / 2 - 46px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'tag skip' 'text text';
  gap: 8px;
  padding: 12px 12px 14px;
}

/* The fingertip stays anchored to the same target used by the tutorial. */
.tutor-hand { width:80px; left:-22px; top:2px; rotate:0deg; transform-origin:48px 2px; filter:drop-shadow(0 5px 5px rgba(4,15,54,.38)); }
.tutor.is-down .tutor-hand { rotate:180deg; }
/* Mode selection and campaign use quiet, readable surfaces over the existing village. */
#screen-menu { gap: 14px; }
#screen-menu .aurora-logo { width:min(570px,70vw); }
.menu-actions { display:flex; justify-content:center; gap:14px; width:min(950px,95%); }
.mode-button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:78px; flex:1 1 0; max-width:260px; padding:12px 16px; border:2px solid #dddaf5; border-radius:19px; color:#25265d; background:#fafaff; box-shadow:0 5px 0 #b5b1d5,0 10px 20px #080f3540; font:700 21px var(--f-display); cursor:pointer; }
.mode-button > span:first-child:not(:last-child) { font-size:26px; color:#7068b1; }
.mode-button.mode-quick { background:linear-gradient(#fff3ad,#ffd553); border-color:#fff4cb; box-shadow:0 5px 0 #bd922e,0 10px 20px #080f3540; }
.mode-button:hover, .selection-back:hover, .category-card:hover, .level-tile:not(:disabled):hover { transform:translateY(-3px); }
.mode-button:focus-visible, .selection-back:focus-visible, .category-card:focus-visible, .level-tile:focus-visible { outline:3px solid #e8af26; outline-offset:3px; }
.selection-panel { width:min(850px, 94%); max-height:calc(100% - 120px); padding:24px 28px; background:rgba(249,249,255,.97); border:2px solid #d9d5f5; border-radius:26px; box-shadow:0 7px 0 #a6a0d5,0 16px 40px #080f3550; color:#27285f; display:flex; flex-direction:column; overflow:hidden; }
.selection-header { display:flex; align-items:center; justify-content:center; gap:14px; position:relative; }
.selection-header h2 { margin:0; font:700 34px var(--f-display); color:#28285e; }
.selection-back { position:absolute; left:0; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; border:2px solid #dfdcf2; background:#fff; color:#6560a4; font:700 26px var(--f-display); box-shadow:0 3px 0 #bbb7da; cursor:pointer; }
.selection-subtitle { margin:8px 0 16px; font:600 16px var(--f-ui); color:#706d99; }
.category-list { overflow:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:4px 5px 12px; overscroll-behavior:contain; }
.category-card { min-height:125px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; border:2px solid #e1def4; border-radius:17px; background:#fff; box-shadow:0 4px 0 #c9c5e3; color:#26265c; font:700 19px var(--f-display); cursor:pointer; }
.category-art { display:block; width:72px; height:72px; flex:none; border-radius:14px; background:none center / contain no-repeat; }
.category-emoji { display:grid; place-items:center; font-size:46px; background:none; }
.campaign-panel { width:min(690px,94%); align-items:center; }
.campaign-panel .selection-header { width:100%; }
.level-list { width:100%; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; overflow:auto; padding:5px 5px 12px; }
.level-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:83px; border-radius:15px; border:2px solid #e1def4; background:#fff; color:#29285d; box-shadow:0 4px 0 #c9c5e3; font:700 27px var(--f-display); cursor:pointer; }
.level-tile small { font:700 15px var(--f-ui); color:#eaa923; letter-spacing:1px; }
.level-tile:disabled { color:#a7a3bf; background:#f1f0f8; cursor:not-allowed; }
.level-tile.is-selected { border-color:#86dcbf; box-shadow:0 0 0 2px #a9e7d0, 0 4px 0 #9ccdb9; }
.btn-level-play { min-width:200px; min-height:50px; margin:8px 0 0; background:linear-gradient(#fff2ad,#ffd553); color:#23265a; border-color:#fff3c4; box-shadow:0 4px 0 #bd922e; }
.campaign-notice { margin:4px 0 0; color:#7a3c54; font:600 14px var(--f-ui); }
.icon-btn { color:#6761a8; background:#fafaff; border-color:#dedaf4; box-shadow:0 4px 0 #b1add3, 0 8px 14px rgba(9,17,55,.22); }
.icon-btn:hover { border-color:#b9b2e4; box-shadow:0 7px 0 #b1add3,0 10px 18px rgba(9,17,55,.22); }
.icon-btn[aria-pressed="true"] { color:#8a86a8; }
.dialog-panel { background:#f9f8fe; color:#302f62; border:2px solid #d7d2f2; box-shadow:0 6px 0 #ada5d9,0 18px 50px rgba(9,17,55,.32); }
.dialog-panel h2 { color:#302f62; }
@media (max-aspect-ratio: 82/100) {
 #screen-menu .aurora-logo { width:min(88vw,500px); }
 .menu-actions { flex-direction:column; align-items:center; gap:10px; }
 .mode-button { width:min(310px,90%); flex:none; min-height:58px; max-width:none; font-size:19px; }
 .selection-panel { max-height:calc(100% - 95px); padding:17px; width:94%; }
 .selection-header h2 { font-size:25px; padding-left:40px; }
 .selection-back { width:40px; height:40px; font-size:22px; }
 .selection-subtitle { font-size:14px; margin:8px 0 12px; }
 .category-list { grid-template-columns:repeat(2,1fr); gap:10px; }
 .category-card { min-height:105px; font-size:17px; }
 .category-art { width:62px; height:62px; }
 .level-list { gap:6px; }
 .level-tile { min-height:63px; font-size:22px; border-radius:12px; }
 .level-tile small { font-size:11px; letter-spacing:0; }
}
@media (min-aspect-ratio: 82/100) { .menu-actions { flex-direction:row; align-items:stretch; } }


/* Custom icons are consistent across operating systems and stay crisp at small sizes. */
.level-detail { display:flex; justify-content:center; align-items:center; height:20px; gap:2px; }
.level-star { width:20px; height:20px; fill:#e2dff0; stroke:#c7c2df; stroke-width:1.5; stroke-linejoin:round; }
.level-star.is-earned { fill:#ffd465; stroke:#d69426; filter:drop-shadow(0 1px 0 #e6af3e); }
.level-lock { width:23px; height:23px; overflow:visible; filter:drop-shadow(0 1px 1px #aba4c6); }
.level-lock .lock-loop { fill:none; stroke:#9690b8; stroke-width:2.4; stroke-linecap:round; }
.level-lock .lock-body { fill:#c9c4de; stroke:#aaa4c9; stroke-width:1; }
.level-lock .lock-hole { stroke:#807aa7; stroke-width:2; stroke-linecap:round; }
@media (max-aspect-ratio:82/100) { .level-detail { height:17px; gap:1px; } .level-star { width:15px; height:15px; } .level-lock { width:19px; height:19px; } }
/* Keep the campaign action warm and understated in every interaction state. */
.btn.btn-level-play { color:#29285d; background:linear-gradient(180deg,#fff4c2 0%,#ffdd72 100%); border:2px solid #f2d788; border-radius:15px; font:700 20px var(--f-display); box-shadow:0 3px 0 #d2ad53, 0 6px 12px rgba(103,79,22,.14); }
.btn.btn-level-play:hover:not(:disabled) { translate:0 -2px; filter:brightness(1.02); box-shadow:0 5px 0 #d2ad53,0 8px 14px rgba(103,79,22,.16); }
.btn.btn-level-play:active:not(:disabled), .btn.btn-level-play.is-down { translate:0 2px; box-shadow:0 1px 0 #d2ad53; }
.btn.btn-level-play:focus-visible { outline:3px solid #8073bd; outline-offset:4px; }
#dialog-settings { background:rgba(30,26,68,.48); backdrop-filter:blur(5px); }
#dialog-settings .field { padding:12px 0; margin:0; border-bottom:1px solid #e3e0f1; }
#dialog-settings .field input[type="range"] { appearance:none; -webkit-appearance:none; height:28px; background:transparent; accent-color:#8076cf; cursor:pointer; }
#dialog-settings .field input[type="range"]::-webkit-slider-runnable-track { height:7px; border-radius:999px; background:#d9d5ed; }
#dialog-settings .field input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:21px; height:21px; margin-top:-7px; border-radius:50%; border:2px solid #8d83d4; background:#fff; box-shadow:0 2px 4px #9993ba66; }
#dialog-settings .field input[type="range"]::-moz-range-track { height:7px; border-radius:999px; background:#d9d5ed; }
#dialog-settings .field input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; border:2px solid #8d83d4; background:#fff; }
#dialog-settings .switch { margin-top:16px; }
#dialog-settings .switch input:checked + .switch-track { background:#a8e5d1; }
#dialog-settings .dialog-actions .btn-primary, #dialog-settings .dialog-actions .btn-primary:hover:not(:disabled) { color:#494477; background:#fff; border-color:#dbd7ee; box-shadow:0 3px 0 #c2bddb; }

.category-card { min-height:138px; }
.category-art { width:84px; height:84px; }
@media (max-aspect-ratio:82/100) { .category-card { min-height:112px; } .category-art { width:70px; height:70px; } }

/* Clear, centered confirmation and consistent category art throughout the flow. */
#dialog-confirm h2, #dialog-confirm .confirm-body { text-align:center; }
#dialog-confirm .dialog-actions { justify-content:center; }
#dialog-confirm .dialog-actions .btn { min-width:125px; padding:10px 14px; }
.tr-row { display:flex; align-items:center; justify-content:center; gap:16px; min-width:0; }
.tr-icon { display:flex; flex:0 0 auto; align-items:center; justify-content:center; }
.tr-icon .category-art { width:72px; height:72px; }
.score-detail { display:flex; flex-wrap:nowrap; text-align:center; align-items:center; justify-content:center; gap:6px; }
.score-detail .category-art { display:inline-block; width:28px; height:28px; }
body[data-orient="port"] .tr-icon .category-art { width:52px; height:52px; }
@media (min-aspect-ratio:82/100) { .categories-panel { width:min(980px,94%); } .category-list { grid-template-columns:repeat(5,1fr); } }
/* Lighter frosted glass for progress. */
.readout { background:rgba(248,249,255,.83); backdrop-filter:blur(12px); border:2px solid rgba(255,255,255,.78); color:#292b60; box-shadow:0 3px 0 rgba(139,150,196,.65),0 8px 20px rgba(7,18,60,.18); }
.readout-icon { stroke:#7771ad; }
.readout-label { color:#59598a; }
.readout-value { color:#292b60; }
.menu-actions { width:min(700px,94%); gap:12px; }
.mode-button { max-width:205px; min-height:58px; padding:9px 12px; font-size:18px; border-radius:16px; }
.mode-button > span:first-child:not(:last-child) { font-size:21px; }
@media (max-aspect-ratio:82/100) { .mode-button { width:min(260px,86%); max-width:none; min-height:52px; font-size:17px; } }
#dialog-confirm .dialog-panel { width:min(580px, calc((100vw - 32px) / var(--s))); }
#dialog-confirm .dialog-actions { flex-wrap:nowrap; }
#dialog-confirm .dialog-actions .btn { flex:1 1 0; min-width:0; white-space:nowrap; font-size:16px; padding:10px 8px; }
@media (max-aspect-ratio:82/100) { #dialog-confirm .dialog-actions { flex-direction:column; align-items:stretch; } }

/* Each category has its own transparent image; contain keeps the full silhouette visible. */
.category-art { background:none center / contain no-repeat; clip-path:none; }

/* --------------------------------------------------------------- score, combo, daily (colours from the tokens above) */

/* the combo pill's bar drains over the combo's window (COMBO_MS in src/core/score.ts) */
.streak { position: relative; overflow: hidden; }
.streak::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 3px; background: rgb(var(--gold-rgb)); transform-origin: 0 50%; }
.streak.is-timing::after { animation: combo-drain var(--combo-ms, 8s) linear forwards; }
@keyframes combo-drain { to { transform: scaleX(0); opacity: .35; } }
body[data-orient="port"] .readout { padding: 0 12px 0 10px; gap: 6px; }
body[data-orient="port"] .readout-value { font-size: 24px; }
body[data-orient="port"] .hud-left { gap: 8px; }

/* "+120" flies to the score; deep in a combo it burns brighter */
.points { z-index: 2; }
.points--hot { font-size: calc(54px * var(--s)); text-shadow: 0 calc(4px * var(--s)) 0 #4a2600, 0 0 calc(28px * var(--s)) rgba(var(--gold-rgb), 1); }

/* "Great!" pops over the word in its pen's colour, rises and fades */
.praise {
  position: absolute; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font: 800 calc(46px * var(--s)) var(--f-display); color: #fff; letter-spacing: .02em;
  -webkit-text-stroke: calc(2px * var(--s)) var(--ink); paint-order: stroke fill;
  text-shadow: 0 calc(4px * var(--s)) 0 var(--ink), 0 0 calc(26px * var(--s)) rgba(var(--mk, var(--mk-0)), 1);
  animation: praise-pop .95s var(--out) forwards;
}
@keyframes praise-pop {
  0% { transform: scale(.3) rotate(-8deg); opacity: 0; }
  22% { transform: scale(1.25) rotate(3deg); opacity: 1; }
  40% { transform: scale(1) rotate(0); }
  75% { opacity: 1; }
  100% { transform: translateY(-36px) scale(.95); opacity: 0; }
}

/* the results' score: the big number, and the best under it */
.results-score { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 0; }
.results-score b { font: 700 52px/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.results-score b.is-land { animation: card-pop .42s var(--out); }
.results-best { min-height: 1.2em; font: 800 16px var(--f-ui); color: var(--ink-soft); }
.results-best.is-new { padding: 2px 12px; color: var(--ink); background: rgb(var(--gold-rgb)); border-radius: 999px; animation: stamp-in .5s var(--back); }
body[data-orient="port"] .results-score b { font-size: 40px; }

/* the Daily button's day streak */
.mode-button { position: relative; }
.daily-streak { position: absolute; top: -10px; right: -6px; padding: 3px 9px; font: 800 13px var(--f-ui); color: var(--ink); background: rgb(var(--gold-rgb)); border-radius: 999px; box-shadow: 0 3px 0 rgba(0, 0, 30, .25); }
/* upright the top row is shared with the corner buttons: the readouts drop their icons, and the combo pill sits
   under them, at the left of the progress row */
body[data-orient="port"] .readout-icon { display: none; }
body[data-orient="port"] .readout { padding: 0 14px; }
body[data-orient="port"] .streak { position: absolute; left: 0; top: 52px; height: 34px; font-size: 20px; }
/* x4 and x5: the combo pill glows in the gold token (the base flame is orange) */
body[data-overdrive="2"] .streak.is-on, body[data-overdrive="3"] .streak.is-on { animation: combo-glow .5s ease-in-out infinite alternate; }
@keyframes combo-glow { from { box-shadow: 0 4px 0 var(--navy-950), 0 0 12px rgba(var(--gold-rgb), .45); } to { box-shadow: 0 4px 0 var(--navy-950), 0 0 30px rgba(var(--gold-rgb), 1); } }
/* landscape: the combo pill hangs under Found as well, and narrow windows drop the readout labels, so the progress
   dots stay centred and clear of the corner buttons */
body[data-orient="land"] .streak { position: absolute; left: 60px; top: 58px; }
@media (max-width: 1199px) { body[data-orient="land"] :is(.readout-label, .readout-icon) { display: none; } }

/* --------------------------------------------------------------- the first tap, then the menu arrives */

/* until the first tap (which unlocks sound) only the logo and "Tap to start" show */
body[data-screen="boot"] :is(.corner, #screens) { visibility: hidden; }
body:not([data-screen="boot"]) .corner .icon-btn { animation: pop-in .5s var(--back) both; animation-delay: calc(500ms + var(--ci, 0) * 70ms); }

/* the menu: the logo lands with a bounce and a light sweeps across it, then the buttons rise in one by one */
#screen-menu .logo { position: relative; }
#screen-menu .logo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) 150% 0 / 250% 100% no-repeat;
  -webkit-mask: var(--logo-mask) center / 100% 100% no-repeat; mask: var(--logo-mask) center / 100% 100% no-repeat;
}
#screen-menu.is-entering .logo { animation: logo-land .8s var(--back) both; }
#screen-menu.is-entering .logo::after { animation: logo-shine 1.1s ease-in-out .55s both; }
@keyframes logo-land { 0% { transform: translateY(-30px) scale(.82); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: none; } }
@keyframes logo-shine { 0% { opacity: 1; background-position: 150% 0; } 100% { opacity: 1; background-position: -60% 0; } }
#screen-menu.is-entering .mode-button { animation: rise-in .55s var(--out) both; animation-delay: calc(600ms + var(--k, 0) * 90ms); }
.menu-actions .mode-button:nth-child(2) { --k: 1; } .menu-actions .mode-button:nth-child(3) { --k: 2; } .menu-actions .mode-button:nth-child(4) { --k: 3; }
html[data-reduced-motion="true"] #screen-menu .logo::after { display: none; }

/* --------------------------------------------------------------- the menu breathes */

/* a soft parallax: the pointer (or the phone's tilt) moves the far sky a little, the village more, the snow most
   and the logo the other way. --px/--py run -1..1 (main.ts); Calm mode leaves them at 0 */
.backdrop { scale: 1.05; translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -6px); transition: translate 1.2s var(--out); }
.village-foreground { scale: 1.05; translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -6px); transition: translate 1s var(--out); }
.snow.s2 { translate: calc(var(--px, 0) * -26px) 0; transition: translate .8s var(--out); }
#screen-menu .logo { translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 8px); transition: translate .9s var(--out); }
/* once it has landed the logo floats, rocking gently; Quick Play glows like a slow breath */
#screen-menu .aurora-logo { animation: logo-bob 6s ease-in-out 1.4s infinite; transform-origin: 50% 80%; }
@keyframes logo-bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-9px) rotate(-1.2deg); } 70% { transform: translateY(-4px) rotate(1deg); } }
#screen-menu .mode-quick { --after: none; }
#screen-menu:not(.is-entering) .mode-quick, #screen-menu.is-entering .mode-quick { animation: rise-in .55s var(--out) .6s both, quick-breathe 3.2s ease-in-out 1.6s infinite; }
@keyframes quick-breathe { 0%, 100% { box-shadow: 0 5px 0 #bd922e, 0 10px 20px #080f3540; } 50% { box-shadow: 0 5px 0 #bd922e, 0 0 34px rgba(var(--gold-rgb), .85); } }
html[data-calm="true"] :is(#screen-menu .aurora-logo, #screen-menu .mode-quick) { animation: none; }

/* the menu snows harder: a near layer of big soft flakes, drifting sideways as it falls (only off the play screen,
   where it would cross the letters) */
.snow.s3 {
  top: -320px; --tile: 320px; --d: 6.5s; opacity: 0; transition: opacity 1.2s;
  background: radial-gradient(6px 6px at 40px 60px, rgba(255, 255, 255, .95) 45%, transparent 100%),
    radial-gradient(5px 5px at 210px 150px, rgba(255, 255, 255, .85) 45%, transparent 100%),
    radial-gradient(8px 8px at 130px 270px, rgba(255, 255, 255, .75) 40%, transparent 100%),
    radial-gradient(4px 4px at 250px 30px, rgba(255, 255, 255, .9) 45%, transparent 100%),
    radial-gradient(5px 5px at 20px 200px, rgba(255, 255, 255, .8) 45%, transparent 100%);
  filter: blur(.6px); animation: snow-fall var(--d) linear infinite, snow-sway 5s ease-in-out infinite alternate;
}
@keyframes snow-sway { from { margin-left: -24px; } to { margin-left: 24px; } }
body:is([data-screen="boot"], [data-screen="menu"], [data-screen="categories"], [data-screen="campaign"]) .snow.s3 { opacity: .85; }
body:is([data-screen="boot"], [data-screen="menu"]) .snow.s1 { --d: 6s; }
html[data-calm="true"] .snow.s3, html[data-reduced-motion="true"] .snow.s3 { display: none; }
/* every flake gradient repeats on its layer's tile (a size inside the shorthand covered only the last gradient) */
.snow.s1 { background-size: 160px 180px; }
.snow.s2 { background-size: 240px 260px; }
.snow.s3 { background-size: 280px 320px; }
.snow.s2 { opacity: .85; }

/* --------------------------------------------------------------- language */

.lang-chip { display: inline-flex; align-items: center; gap: 8px; margin: 2px auto 0; padding: 8px 16px; font: 700 16px var(--f-ui); color: #fff; cursor: pointer;
  background: rgba(var(--deep-rgb), .55); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; backdrop-filter: blur(4px); }
.lang-chip svg { width: 20px; height: 20px; }
.lang-chip:hover { background: rgba(var(--deep-rgb), .75); }
#screen-menu.is-entering .lang-chip { animation: rise-in .55s var(--out) 1s both; }
.lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 14px; }
.lang-option[aria-pressed="true"] { background: rgb(var(--gold-rgb)); border-color: rgb(var(--gold-rgb)); }
#btn-lang-settings { margin: 12px auto 0; }

/* the settings' language button: the label, then the language in a gold pill */
#btn-lang-settings { display: inline-flex; align-items: center; gap: 10px; }
#btn-lang-settings b { padding: 2px 12px; color: var(--ink); background: rgb(var(--gold-rgb)); border-radius: 999px; }
/* End of styles-more.css */
:root { --action-top: #087ba2; --action-bottom: #075a83; --action-edge: #06415f; --action-ring: #9befff; }
.ocean-backdrop { background: #0875a7; scale: 1; translate: none; transition: none; }
#screen-menu .logo { translate: none; transition: none; }
.ocean-scene, .ocean-light, .ocean-foreground { position: absolute; inset: -14px; pointer-events: none; }
.ocean-scene { background: url('./ocean-scene-BvJbIQQH.webp') center / cover no-repeat; transform: translate(calc(var(--ocean-x, 0px) * -.5), calc(var(--ocean-y, 0px) * -.5)); transition: transform 1.5s ease-out; will-change: transform; }
.ocean-light { opacity: .23; mix-blend-mode: screen; background: repeating-linear-gradient(108deg, transparent 0 12%, rgba(147, 247, 255, .25) 16%, transparent 21%); mask-image: linear-gradient(#000, transparent 75%); animation: water-light 14s ease-in-out infinite alternate; }
.ocean-caustics { position: absolute; inset: -8%; pointer-events: none; opacity: .24; background: url('./ocean-caustics-DwtOCcrO.svg') 0 0 / 480px 320px repeat; mix-blend-mode: screen; mask-image: linear-gradient(transparent 4%, #000 40%, rgba(0,0,0,.5) 100%); animation: caustic-drift 16s ease-in-out infinite alternate; will-change: transform; }
.ocean-bubbles { position: absolute; inset: -180px 0; opacity: .42; background: radial-gradient(circle at 36px 82px, transparent 3px, rgba(220,255,255,.8) 4px, transparent 5px),
    radial-gradient(circle at 157px 160px, transparent 5px, rgba(220,255,255,.65) 6px, transparent 7px),
    radial-gradient(circle at 232px 45px, transparent 2px, rgba(220,255,255,.75) 3px, transparent 4px);
  background-size: 280px 240px; animation: bubble-rise 24s linear infinite; }
.ocean-foreground { background: url('./ocean-coral-zfyFjGq0.webp') center bottom / cover no-repeat; transform: translate(var(--ocean-x, 0px), var(--ocean-y, 0px)); transition: transform 1.2s ease-out; will-change: transform; }
.ocean-fish { position: absolute; width: clamp(55px, 8vw, 120px); top: 29%; left: -130px; animation: fish-swim 32s linear infinite; }
.ocean-fish img { width: 100%; display: block; animation: fish-bob 3s ease-in-out infinite alternate; }
.fish-two { top: 56%; width: clamp(40px, 5vw, 75px); animation-duration: 43s; animation-delay: -19s; animation-direction: reverse; opacity: .85; }
@keyframes fish-swim { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 260px)); } }
@keyframes fish-bob { from { transform: translateY(-4px) rotate(-2deg); } to { transform: translateY(4px) rotate(2deg); } }
@keyframes water-light { from { transform: translateX(-2%); opacity: .14; } to { transform: translateX(2%); opacity: .3; } }
@keyframes caustic-drift { from { transform: translate3d(-12px, -7px, 0) scale(1.03); } to { transform: translate3d(12px, 7px, 0) scale(1.07); } }
@keyframes bubble-rise { to { transform: translateY(-240px); } }
.ripple { background: rgba(205, 250, 255, .28); border: 2px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 3px rgba(255,255,255,.65); }
.mark.is-found { background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(var(--mk),.72) 35%, rgba(var(--mk),.62)); box-shadow: inset 0 2px 3px rgba(255,255,255,.85), 0 0 12px rgba(var(--mk),.6); }
.curtain { background: linear-gradient(160deg, #0a638e, #078bb4 54%, #075479); }
.curtain i, .curtain i:nth-child(n) {
  top: auto; bottom: -18vh; left: var(--x); width: var(--size); height: var(--size);
  border: 2px solid rgba(236, 255, 255, .78); border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.9), transparent 15%), radial-gradient(circle at 50% 50%, rgba(187,250,255,.12), rgba(184,247,255,.35));
  box-shadow: inset -3px -4px 10px rgba(2,67,113,.26), inset 2px 2px 9px rgba(255,255,255,.55);
  animation: transition-bubble 1.55s linear var(--delay) infinite; will-change: transform;
}
.curtain i:nth-child(1) { --x: 4%; --size: 56px; --delay: -.2s; }
.curtain i:nth-child(2) { --x: 13%; --size: 28px; --delay: -.7s; }
.curtain i:nth-child(3) { --x: 21%; --size: 78px; --delay: -1.1s; }
.curtain i:nth-child(4) { --x: 31%; --size: 38px; --delay: -.35s; }
.curtain i:nth-child(5) { --x: 40%; --size: 64px; --delay: -.85s; }
.curtain i:nth-child(6) { --x: 50%; --size: 30px; --delay: -1.25s; }
.curtain i:nth-child(7) { --x: 58%; --size: 72px; --delay: -.55s; }
.curtain i:nth-child(8) { --x: 68%; --size: 35px; --delay: -1.05s; }
.curtain i:nth-child(9) { --x: 76%; --size: 56px; --delay: -.1s; }
.curtain i:nth-child(10) { --x: 85%; --size: 26px; --delay: -.75s; }
.curtain i:nth-child(11) { --x: 92%; --size: 75px; --delay: -1.3s; }
.curtain i:nth-child(12) { --x: 46%; --size: 22px; --delay: -.45s; }
@keyframes transition-bubble { from { transform: translate3d(0, 0, 0) scale(.85); } to { transform: translate3d(14px, -140vh, 0) scale(1.05); } }
.hud-centre { gap: 4px; padding: 5px 16px; border: 2px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(248,249,255,.88); box-shadow: 0 3px 0 rgba(139,150,196,.65), 0 8px 20px rgba(7,18,60,.18); }
.hud-centre .progress-label { color: #292b60; }
.hud-centre .seg { background: rgba(89,89,138,.12); border-color: rgba(89,89,138,.48); }
.hud-centre .seg.is-current { border-color: #cc9400; background: #ffdb64; }
.hud-centre .seg.is-good { background: #25b981; border-color: #168d69; }
.theme-reveal .tr-window, body[data-orient='port'] .theme-reveal .tr-window {
  box-sizing: border-box; justify-self: center; width: min(390px, 88%); aspect-ratio: 1; container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center; padding: 20px; overflow: hidden; border-radius: 50%;
  border: 4px solid rgba(231, 255, 255, .95);
  background: radial-gradient(circle at 29% 19%, rgba(255,255,255,.96) 0 3%, transparent 5%), radial-gradient(circle at 34% 22%, #fff 0, #e3faff 52%, #a4e7f5 100%);
  box-shadow: inset -12px -16px 32px rgba(12, 117, 155, .24), inset 10px 10px 24px rgba(255,255,255,.95), 0 14px 32px rgba(0,50,85,.32);
}
.theme-reveal .tr-label { color: #20526c; }
.theme-reveal .tr-row { flex-direction: column; gap: 3cqw; width: 84%; align-self: center; }
.theme-reveal .tr-icon .category-art, body[data-orient='port'] .theme-reveal .tr-icon .category-art { width: min(94px, 26cqw); height: min(94px, 26cqw); }
.theme-reveal .tr-name, body[data-orient='port'] .theme-reveal .tr-name { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: min(52px, calc(110cqw / max(var(--len, 8), 8))); }
.theme-reveal.is-in .tr-window { animation: ocean-bubble-in .55s cubic-bezier(.2,.8,.25,1.2) both; }
.theme-reveal.is-landed .tr-window { box-shadow: inset -12px -16px 32px rgba(12,117,155,.24), inset 10px 10px 24px rgba(255,255,255,.95), 0 0 35px rgba(205,255,255,.7), 0 14px 32px rgba(0,50,85,.32); }
.theme-reveal.is-out { animation: ocean-bubble-out .28s ease-in forwards; }
@keyframes ocean-bubble-in { from { opacity: 0; transform: translateY(36px) scale(.55); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ocean-bubble-out { to { opacity: 0; transform: translateY(-20px) scale(1.12); } }
html[data-calm='true'] :is(.ocean-light,.ocean-caustics,.ocean-bubbles,.ocean-fish,.ocean-fish img), html[data-reduced-motion='true'] :is(.ocean-light,.ocean-caustics,.ocean-bubbles,.ocean-fish,.ocean-fish img) { animation: none; }
html[data-calm='true'] :is(.ocean-scene,.ocean-foreground), html[data-reduced-motion='true'] :is(.ocean-scene,.ocean-foreground) { transform: none; transition: none; }
html[data-calm='true'] :is(.ocean-scene,.ocean-foreground,.ocean-caustics), html[data-reduced-motion='true'] :is(.ocean-scene,.ocean-foreground,.ocean-caustics) { will-change: auto; }
html[data-calm='true'] .ocean-fish, html[data-reduced-motion='true'] .ocean-fish { display: none; }
@media (orientation: portrait) { .ocean-scene { background-image: url('./ocean-portrait-JCpMDAMI.webp'); } }
/* A low landscape screen needs its height for letters; the tutorial retains its existing layout. */
body[data-orient='land'] .play.compact-landscape { flex-direction: row; gap: 24px; }
body[data-orient='land'] .compact-landscape .side { display: flex; width: 310px; gap: 10px; }
body[data-orient='land'] .compact-landscape .word-list { order: 0; flex-direction: column; flex-wrap: nowrap; gap: 7px; max-width: none; }
body[data-orient='land'] .compact-landscape .word-list li { font-size: 24px; padding: 5px 10px; }
body[data-orient='land'] .compact-landscape .btn-hint { width: 100%; min-height: 84px; }

/* The aquarium uses the existing campaign save: no new storage or migration. */
.aquarium-panel { width:min(900px,94%); }
.aquarium-tank { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; overflow:auto; min-height:0; padding:16px; border-radius:22px; background:linear-gradient(180deg,rgba(4,104,148,.32),rgba(0,52,94,.68)),url('./ocean-scene-BvJbIQQH.webp') center / cover; }
.aquarium-fish { min-width:0; min-height:98px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:2px solid rgba(228,255,255,.8); border-radius:18px; background:rgba(228,250,255,.88); color:#164570; font:700 15px var(--f-display); cursor:pointer; }
.aquarium-fish img { display:block; width:85%; height:72px; object-fit:contain; filter:drop-shadow(0 3px 2px rgba(2,47,77,.25)); }
.aquarium-fish:disabled { background:rgba(4,47,76,.5); border-color:rgba(210,250,255,.4); color:rgba(230,250,255,.8); font-size:30px; cursor:default; }
.aquarium-fish:focus-visible { outline:3px solid #ffda58; outline-offset:2px; }
.aquarium-caption { min-height:1.5em; margin:8px 0 0; text-align:center; font-weight:700; }
.fish-reward { display:flex; align-items:center; gap:8px; padding:4px 14px; border:2px solid #9befff; border-radius:999px; background:#e2fbff; color:#175a84; font:700 16px var(--f-display); }
.fish-reward[hidden] { display:none; }
.fish-reward img { width:55px; height:45px; object-fit:contain; animation:aquarium-wiggle .7s ease-out; }
@keyframes aquarium-wiggle { 25% { transform:translateY(-8px) rotate(-8deg) scale(1.08); } 65% { transform:translateY(2px) rotate(8deg); } }
html[data-reduced-motion='true'] :is(.aquarium-fish img,.fish-reward img) { animation:none !important; }
@media (max-width:600px) { .aquarium-tank { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:10px; } .aquarium-fish { min-height:84px; } .aquarium-fish img { height:58px; } .fish-reward img { width:42px; height:34px; } }
/* The fish float in the water; unopened spaces remain subtle silhouettes. */
.aquarium-fish:not(:disabled) { background:transparent; border-color:transparent; color:#fff; text-shadow:0 2px 5px #003452; }
.fish-reward { position:relative; }
.fish-reward::before { content:''; position:absolute; left:12px; width:48px; aspect-ratio:1; border:2px solid rgba(107,216,246,.9); border-radius:50%; pointer-events:none; animation:reward-bubble .9s ease-out forwards; }
@keyframes reward-bubble { 0% { opacity:0; transform:scale(.25); } 50% { opacity:.9; transform:scale(1.2); } 100% { opacity:0; transform:scale(1.8); } }
html[data-reduced-motion='true'] .fish-reward::before { animation:none; opacity:0; }
.aquarium-fish:disabled { width:56px; height:56px; min-height:0; align-self:center; justify-self:center; border-radius:50%; background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.35),rgba(10,86,121,.3) 48%); }
/* Two centered rows keep the menu labels readable. */
@media (min-aspect-ratio:82/100) {
  .menu-actions { flex-flow:row wrap; justify-content:center; width:min(690px,94%); gap:10px; }
  .menu-actions .mode-button { flex:0 1 205px; max-width:205px; min-height:52px; }
}
/* A living tank rather than a collection of cards. */
.aquarium-panel { position:relative; width:min(1050px,96%); max-height:calc(100% - 45px); padding:12px; border:0; background:transparent; box-shadow:none; overflow:visible; }
.aquarium-panel .selection-header { position:relative; z-index:2; justify-content:center; min-height:40px; }
.aquarium-panel .selection-header h2 { color:white; text-shadow:0 3px 10px #003e69; }
.aquarium-panel .selection-back { position:absolute; left:5px; top:0; }
.aquarium-progress { z-index:2; align-self:center; display:flex; gap:12px; align-items:center; margin:2px 0 9px; padding:6px 18px; border-radius:999px; background:rgba(255,255,255,.94); color:#173a6b; font:700 15px var(--f-ui); box-shadow:0 3px 0 rgba(135,192,213,.8),0 5px 14px #002d4d55; }
#aquarium-remaining { color:#4f6691; font-size:.88em; }
.aquarium-tank { position:relative; display:block; flex:1 1 auto; width:100%; min-height:210px; aspect-ratio:1.85; max-height:min(68vh,550px); padding:0; overflow:hidden; border:3px solid rgba(211,252,255,.9); border-radius:28px; box-shadow:inset 0 0 28px #e8ffff55,0 12px 32px #002f5477; background:url('./aquarium-observatory-DlO-YVlY.webp') center / cover no-repeat; }
/* Position, facing and wobble are set per frame by ui/aquarium.ts; --z is depth (far .55 → near 1). */
.aquarium-fish:not(:disabled) { position:absolute; left:0; top:0; width:calc(clamp(48px,10%,112px) * var(--z,1)); height:calc(clamp(42px,15%,85px) * var(--z,1)); min-height:0; padding:0; border:0; background:transparent; z-index:var(--zi,1); filter:saturate(calc(.7 + var(--z,1) * .3)) brightness(calc(.88 + var(--z,1) * .12)); }
/* Double taps feed the fish: never select or drag the sprites (it painted blue boxes over them). */
.aquarium-tank, .aquarium-tank * { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.aquarium-tank img { -webkit-user-drag:none; pointer-events:none; }
.aquarium-fish::selection, .aquarium-fish img::selection { background:transparent; }
.aquarium-fish img { width:100%; height:100%; object-fit:contain; }
.aquarium-empty { position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); width:min(80%,420px); padding:12px 18px; border-radius:18px; background:rgba(245,253,255,.94); color:#174775; text-align:center; font-weight:700; }
.aquarium-caption { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); margin:0; padding:6px 18px; border-radius:999px; background:white; color:#154a72; box-shadow:0 3px 10px #002f5455; }
.aquarium-caption[hidden] { display:none; }
@media (max-aspect-ratio:82/100) { .aquarium-panel { width:96%; max-height:calc(100% - 75px); } .aquarium-tank { aspect-ratio: .85; max-height:72vh; } .aquarium-progress { gap:8px; font-size:12px; padding:6px 11px; } .aquarium-fish:not(:disabled) { width:16%; height:10%; } }
@media (max-height:400px) and (min-aspect-ratio:82/100) { .aquarium-panel { max-height:calc(100% - 20px); } .aquarium-tank { aspect-ratio:2.3; max-height:65vh; } .aquarium-panel .selection-header { min-height:26px; } .aquarium-progress { margin:0 0 3px; padding:2px 12px; } }
.aquarium-fish.is-playing::after { content:''; position:absolute; right:10%; top:5%; width:9px; height:9px; border:2px solid #e8ffff; border-radius:50%; box-shadow:-12px 12px 0 -2px #b9faff, 13px 7px 0 -2px #b9faff; pointer-events:none; animation:aquarium-bubble .65s ease-out forwards; }
@keyframes aquarium-bubble { from { opacity:1; transform:translateY(0) scale(.6); } to { opacity:0; transform:translateY(-32px) scale(1.3); } }
html[data-reduced-motion='true'] .aquarium-fish.is-playing::after { animation:none; display:none; }
.aquarium-back { position:absolute; top:18px; left:28px; z-index:22; }
body:not([data-screen='aquarium']) .aquarium-back { display:none; }
body[data-orient='port'] .aquarium-back { top:14px; left:16px; }

.result-word { display:inline-block; white-space:nowrap; }
body[data-orient='land'] .results { position:relative; }
body[data-orient='land'] .results-main .results-title { position:absolute; top:20px; left:20px; right:20px; text-align:center; font-size:clamp(28px,3vw,46px); }
body[data-orient='land'] .results-main { padding-top:60px; }
.fish-reward:not([open]) { display:none; }
.fish-reward[open] { position:fixed; inset:0; margin:auto; width:min(380px,85vw); max-height:85vh; overflow:auto; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:22px 28px; border:4px solid #c1faff; border-radius:32px; background:linear-gradient(160deg,#fff,#d8f8ff); box-shadow:0 12px 0 #5594c1,0 22px 55px #00395e99; color:#14547c; text-align:center; }
.fish-reward::before { content:none; }
.fish-reward::backdrop { background:rgba(0,39,67,.72); }
.fish-reward h2 { margin:0; font:700 30px var(--f-display); }
.reward-bubble { display:grid; place-items:center; width:190px; height:190px; max-width:48vw; max-height:48vw; border:3px solid #fff; border-radius:50%; background:radial-gradient(circle at 30% 22%,#fff,#c9f8ff 48%,#61cde9); box-shadow:inset -8px -10px 18px #55acc77a,0 0 25px #78ecff; animation:reward-appear .65s cubic-bezier(.2,.8,.2,1.25) both; }
.fish-reward .reward-bubble img { width:85%; height:85%; object-fit:contain; animation:aquarium-wiggle 1s ease-out; }
.reward-name { margin:0; font:700 30px var(--f-display); color:#186394; }
.fish-reward .btn { min-height:48px; }
@keyframes reward-appear { from { transform:scale(.25); opacity:0; } to { transform:scale(1); opacity:1; } }
html[data-reduced-motion='true'] .reward-bubble { animation:none; }
@media (max-height:400px) { .fish-reward[open] { flex-direction:row; flex-wrap:wrap; gap:6px; padding:10px; } .reward-bubble { width:100px; height:100px; } .fish-reward h2,.reward-name { font-size:22px; } }
.reward-bubble { position:relative; border:0; background:none; box-shadow:none; animation:none; overflow:visible; }
.reward-bubble::before { content:''; position:absolute; inset:9%; z-index:0; border:3px solid rgba(255,255,255,.95); border-radius:50%; background:radial-gradient(circle at 30% 23%,rgba(255,255,255,.7),rgba(67,202,233,.48) 62%,rgba(20,129,177,.58)); box-shadow:inset -8px -10px 18px #55acc77a,0 0 25px #78ecff; animation:reward-appear .65s cubic-bezier(.2,.8,.2,1.25) both; }
.fish-reward .reward-bubble img { position:relative; z-index:1; width:110%; height:110%; max-width:none; filter:drop-shadow(0 5px 5px #0a537755); }
html[data-reduced-motion='true'] .reward-bubble::before { animation:none; }
.aquarium-panel .selection-header h2 { padding-left:0; }
/* The aquarium lives in a quiet beach house, with no scenery fish behind it. */
.aquarium-room { display:none; position:fixed; inset:-12px; z-index:0; pointer-events:none; background:url('./aquarium-room-DtJXE69w.webp') center bottom / cover no-repeat; filter:blur(3px); }
body[data-screen='aquarium'] .aquarium-room { display:block; }
body[data-screen='aquarium'] .ocean-backdrop { visibility:hidden; }
.aquarium-top-title { position:absolute; z-index:22; top:20px; left:50%; transform:translateX(-50%); margin:0; color:white; text-shadow:0 2px 8px #003b56; font:700 30px var(--f-display); white-space:nowrap; }
body:not([data-screen='aquarium']) .aquarium-top-title { display:none; }
.aquarium-panel { max-height:calc(100% - 100px); }
.aquarium-tools { width:100%; display:flex; align-items:center; justify-content:center; gap:14px; margin-top:8px; color:white; font:700 14px var(--f-ui); text-shadow:0 2px 5px #003d56; }
.aquarium-tools .btn { min-height:42px; padding:6px 18px; font-size:16px; }
.aquarium-caption { bottom:72px; z-index:4; }
.aquarium-tank { isolation:isolate; touch-action:manipulation; }
.aquarium-tank::before { content:''; position:absolute; inset:-10%; z-index:0; pointer-events:none; background:url('./ocean-caustics-DwtOCcrO.svg') 0 0 / 360px 240px repeat; opacity:.17; mix-blend-mode:screen; animation:aquarium-water 13s ease-in-out infinite alternate; }
@keyframes aquarium-water { from { transform:translate(-8px,-5px); } to { transform:translate(8px,5px); } }
.aquarium-ripple,.aquarium-food { position:absolute; z-index:12; pointer-events:none; }
.aquarium-ripple { width:26px; height:26px; margin:-13px; border:2px solid #e9ffff; border-radius:50%; box-shadow:0 0 8px #b0ffff; animation:aquarium-ripple .8s ease-out forwards; }
.aquarium-food { width:7px; height:7px; border-radius:50%; background:#ffd585; border:1px solid #ad642a; box-shadow:0 2px 4px #00385177; animation:aquarium-food 1s ease-in forwards; }
@keyframes aquarium-ripple { to { transform:scale(2.8); opacity:0; } }
@keyframes aquarium-food { from { transform:translateY(-60px); opacity:0; } 15% {opacity:1} to { transform:translateY(0); opacity:1; } }
html[data-reduced-motion='true'] :is(.aquarium-tank::before,.aquarium-ripple,.aquarium-food) { animation:none; }
@media (max-aspect-ratio:82/100) { .aquarium-top-title { left:65px; right:164px; top:23px; transform:none; overflow:hidden; text-overflow:ellipsis; font-size:18px; text-align:center; } .aquarium-panel { max-height:calc(100% - 90px); } .aquarium-tools { font-size:11px; gap:6px; } .aquarium-tools .btn { font-size:13px; padding:5px 10px; } }
@media (max-height:400px) and (min-aspect-ratio:82/100) { .aquarium-top-title { font-size:22px; top:18px; } .aquarium-panel { max-height:calc(100% - 55px); } .aquarium-tools { margin-top:3px; font-size:12px; } .aquarium-tools .btn { min-height:34px; } .aquarium-caption { bottom:50px; } }
.aquarium-tank::before { opacity:.07; }
/* Pellets drift down, wait for a fish, then dissolve if none came (aquarium.ts removes them at 4.2 s). */
.aquarium-food { animation:aquarium-food 4.2s ease-out forwards; }
@keyframes aquarium-food { 0% { transform:translateY(-60px); opacity:0; } 4% { opacity:1; } 18%,85% { transform:translateY(0); opacity:1; } 100% { transform:translateY(4px) scale(.3); opacity:0; } }
html[data-reduced-motion='true'] .aquarium-food { animation:none; }

/* The board is a pane of sea glass: light aqua, softly blurred, with slow light caustics behind the letters. */
.sheet {
  background:
    url('./ocean-caustics-DwtOCcrO.svg') 0 0 / 300px 200px repeat,
    radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.96), rgba(228,250,255,.93) 55%, rgba(196,238,250,.92));
  background-blend-mode: soft-light, normal;
  border: 2px solid rgba(235,255,255,.95);
  box-shadow: 0 0 0 4px rgba(120,226,247,.35), 0 8px 0 #7cc3dc, inset 0 2px 10px rgba(255,255,255,.9), inset 0 -10px 24px rgba(54,170,210,.18), 0 26px 60px rgba(0,30,60,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: sea-glass 28s linear infinite;
}
.screen.is-entering .sheet { animation: deal-in .6s var(--back) backwards, sea-glass 28s linear infinite; }
@keyframes sea-glass { to { background-position: 300px 200px, 0 0; } }
html[data-calm='true'] .sheet, html[data-reduced-motion='true'] .sheet { animation: none; }
.cells span { color: #123a63; }
/* Sea creatures replace the generic menu glyphs; they bob a little when hovered. */
.mode-icon { display:inline-grid; place-items:center; width:30px; height:30px; flex:none; }
.mode-icon svg { width:100%; height:100%; overflow:visible; }
.btn-play::after { content:none; }
.mode-button:hover .mode-icon { animation:icon-bob .7s ease-in-out infinite alternate; }

/* End of assets/index-BaNfDTZk-part3.css */