.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 */


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