:root {
  color-scheme: dark;
  font-family: ui-rounded, "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --night: #182233;
  --night-soft: #222f43;
  --panel: #2d3c50;
  --cream: #fff1d7;
  --muted: #d7d0c2;
  --gold: #e8c477;
  --sage: #a9c5a5;
  --rose: #d6a2ad;
  --honey: #efc45f;
  --line: #607087;
  --focus: #ffe5a5;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--night); overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 82% -4%, rgba(229, 190, 116, .13), transparent 27rem),
    linear-gradient(180deg, #253247 0, var(--night) 34rem);
  overflow-x: clip;
}
button, a { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .52; }
.skip-link { position: fixed; z-index: 5; top: .5rem; left: .5rem; min-height: 44px; padding: .8rem 1rem; color: #182233; background: var(--focus); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(100%, 42rem); min-height: 100svh; margin: auto; padding: max(1rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); }
.site-header, .brand, .game-header, .metric-row { display: flex; align-items: center; }
.site-header { flex-wrap: wrap; justify-content: space-between; gap: .65rem 1rem; margin-bottom: 1.8rem; }
.brand { min-width: 0; min-height: 48px; gap: .65rem; color: var(--cream); text-decoration: none; }
.brand > span:last-child { min-width: 0; }
.brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #876f44; border-radius: 42% 58% 48% 52%; color: #2c281f; background: var(--gold); box-shadow: 0 0 20px rgba(232,196,119,.18); font: 900 1.2rem/1 Georgia, serif; }
.brand small, .brand strong { display: block; }
.brand small { color: var(--gold); font-size: .62rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.brand strong { margin-top: .12rem; font: 800 1.1rem/1 Georgia, serif; }
.day-mark { padding: .35rem .58rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--muted); font-size: .67rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
main { outline: none; }
.eyebrow { margin: 0 0 .38rem; color: var(--gold); font-size: .66rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.dashboard-intro { margin: 0 .25rem 1.7rem; }
.dashboard-intro h1 { margin: 0; font: 800 clamp(2.1rem, 11vw, 3.7rem)/.94 Georgia, serif; letter-spacing: -.045em; }
.dashboard-intro h1 em { color: var(--sage); font-weight: 400; }
.dashboard-intro > p:last-child { max-width: 31rem; margin: 1rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.game-list > h2 { margin: 0 .25rem .7rem; font: 800 1.05rem/1.2 Georgia, serif; }
.game-list { display: grid; gap: .75rem; }
.game-card { --accent: var(--sage); display: grid; grid-template-columns: 52px minmax(0,1fr); gap: .7rem .85rem; padding: .9rem; border: 1px solid var(--line); border-radius: 1.2rem .55rem 1.2rem .55rem; background: rgba(45,60,80,.93); box-shadow: 0 12px 28px rgba(7,12,21,.2); }
.accent-alchemy { --accent: var(--rose); }
.accent-treasure { --accent: var(--honey); }
.accent-mosaic { --accent: var(--sage); }
.card-symbol, .game-symbol { display: grid; place-items: center; color: #273142; background: var(--accent); box-shadow: inset 0 -3px 0 rgba(26,31,39,.18); }
.card-symbol { width: 52px; height: 52px; border-radius: .9rem .35rem .9rem .35rem; font-size: 1.35rem; }
.game-card h2 { margin: 0; font: 800 1.28rem/1.1 Georgia, serif; }
.game-card p:not(.eyebrow) { margin: .38rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.button { min-height: 48px; padding: .72rem .9rem; border: 1px solid transparent; border-radius: .8rem; font-weight: 900; }
.game-card .button { grid-column: 1/-1; width: 100%; }
.primary-button { color: #252c35; background: var(--gold); box-shadow: inset 0 -3px 0 rgba(70,49,18,.2); }
.secondary-button { color: var(--cream); border-color: var(--line); background: transparent; }
.text-button { min-height: 44px; padding: .55rem 0; border: 0; color: var(--muted); background: transparent; font-weight: 850; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2rem; }
.game-header { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; margin-bottom: 1rem; }
.game-header .text-button { grid-column: 1/-1; justify-self: start; }
.game-title { min-width: 0; }
.game-title h1 { margin: 0; overflow-wrap: anywhere; font: 800 clamp(2rem, 10vw, 3rem)/.95 Georgia, serif; }
.game-symbol { width: 54px; height: 54px; border-radius: 50% 50% 38% 38%; font-size: 1.45rem; }
.shared-card, .score-card { border: 1px solid var(--line); background: rgba(45,60,80,.93); }
.score-card { display: flex; min-height: 54px; align-items: center; justify-content: space-between; margin-bottom: .65rem; padding: .7rem .9rem; border-radius: .55rem 1rem .55rem 1rem; }
.score-card span { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.score-card strong { color: var(--gold); font-size: 1.25rem; }
.shared-card { margin-bottom: .65rem; padding: .95rem; border-radius: 1rem .5rem 1rem .5rem; }
.metric-row { justify-content: space-between; gap: 1rem; margin-bottom: .55rem; font-size: .78rem; }
.metric-row span { color: var(--muted); }
progress { width: 100%; height: .65rem; accent-color: var(--accent, var(--sage)); }
.foundation-card h2, .results-card h2, .unavailable-card h1 { margin: 0; font: 800 1.35rem/1.1 Georgia, serif; }
.foundation-card > p:not(.eyebrow), .results-card > p:not(.eyebrow), .unavailable-card > p:not(.eyebrow) { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.feedback { min-height: 44px; margin: .85rem 0; padding: .7rem .75rem; border-left: 4px solid var(--sage); border-radius: .35rem .7rem .7rem .35rem; color: var(--cream); background: #223044; font-size: .78rem; line-height: 1.35; }
.feedback-warm { border-left-color: var(--gold); }
.feedback-good { border-left-color: var(--sage); color: #e2f2dc; }
.feedback-treasure { border-left-color: var(--honey); color: #ffe7a2; }
.action-row { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.results-card { opacity: .82; }
.result-score { display: block; color: var(--gold); }
.unavailable-card { margin-top: 4rem; }
.alchemy-game { --accent: var(--rose); }
.alchemy-intro p:last-child { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.alchemy-workbench h2, .alchemy-collection h2 { margin: 0; font: 800 1.18rem/1.15 Georgia, serif; }
.alchemy-selection { display: grid; min-height: 48px; margin: .75rem 0; place-items: center; border: 1px dashed #a98089; border-radius: .65rem; color: var(--cream); background: rgba(28,36,51,.55); font-weight: 900; letter-spacing: .06em; }
.alchemy-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
.alchemy-tile { min-width: 0; min-height: 48px; padding: .65rem .35rem; border: 1px solid #8d6c78; border-radius: .35rem .85rem .35rem .85rem; color: var(--cream); background: #493d4d; box-shadow: inset 0 -3px 0 rgba(12,17,26,.25); font-size: clamp(.72rem, 4vw, .9rem); font-weight: 900; letter-spacing: .035em; }
.alchemy-tile[aria-pressed="true"] { border-color: var(--focus); color: #242a34; background: var(--rose); box-shadow: 0 0 0 2px rgba(255,229,165,.22), inset 0 -3px 0 rgba(69,37,48,.22); }
.alchemy-tile:active { transform: translateY(1px); }
.discovery-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.discovery-list li { min-width: 0; min-height: 68px; padding: .55rem; border: 1px solid #56667c; border-radius: .7rem .35rem .7rem .35rem; background: #243246; }
.discovery-list strong, .discovery-list span { display: block; }
.discovery-list strong { overflow-wrap: anywhere; color: #aaa99f; font-size: .72rem; letter-spacing: .035em; }
.discovery-list span { margin-top: .22rem; color: var(--muted); font-size: .65rem; line-height: 1.25; }
.discovery-list .is-found { border-color: #9a7480; background: linear-gradient(145deg, #573f4b, #353b4e); }
.discovery-list .is-found strong { color: #ffd9e1; }
.alchemy-actions { margin-bottom: .65rem; }
.alchemy-game .results-card { border-color: #9a7480; opacity: 1; background: linear-gradient(145deg, rgba(87,63,75,.96), rgba(45,60,80,.96)); }
.treasure-game { --accent: var(--honey); }
.treasure-intro p:last-child { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.treasure-builder h2, .treasure-board h2, .treasure-found h2 { margin: 0 0 .65rem; font: 800 1.18rem/1.15 Georgia, serif; }
.treasure-preview-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .55rem; align-items: end; }
.treasure-preview { min-height: 48px; padding: .55rem; border-bottom: 2px solid #b88e4b; color: var(--cream); background: #202c3d; font-size: 1.08rem; font-weight: 900; letter-spacing: .1em; text-align: center; overflow-wrap: anywhere; }
.treasure-preview.is-empty { color: #aaa298; font-size: .72rem; line-height: 1.7rem; }
.treasure-clear { min-width: 58px; min-height: 48px; padding: .5rem; color: var(--muted); border: 1px solid var(--line); border-radius: .6rem; background: transparent; font-weight: 850; }
.treasure-letters { position: relative; width: 204px; height: 164px; margin: .35rem auto; }
.treasure-letter { position: absolute; display: grid; width: 48px; height: 48px; padding: 0; place-items: center; color: #3a2c19; border: 2px solid #f3cf7a; clip-path: polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); background: linear-gradient(145deg,#ffe8a7,#dca74f); font-size: 1.05rem; font-weight: 900; touch-action: manipulation; }
.treasure-letter:active { transform: scale(.94); }
.treasure-letter.top { left:78px; top:0; }.treasure-letter.upper-right { left:121px; top:28px; }.treasure-letter.lower-right { left:121px; top:87px; }.treasure-letter.bottom { left:78px; top:116px; }.treasure-letter.lower-left { left:35px; top:87px; }.treasure-letter.upper-left { left:35px; top:28px; }
.treasure-letter.centre { left:76px; top:57px; width:52px; height:52px; color:#fff6dc; border-color:#ffd980; background:#9c6334; }
.treasure-letter.centre small { display:block; margin-top:-8px; font-size:.34rem; line-height:1; letter-spacing:.04em; text-transform:uppercase; }
.treasure-controls { display: grid; gap: .5rem; }
.treasure-delete { color: var(--cream); border-color: var(--line); background: #4b5666; }
.treasure-submit { color: #352919; background: var(--honey); box-shadow: inset 0 -4px 0 #a56e29, 0 4px 10px rgba(0,0,0,.2); }
.treasure-controls .button { min-height: 52px; }
.treasure-cards { display: grid; gap: .55rem; }
.treasure-card { --tier: #bd7952; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: .15rem .55rem; min-width:0; min-height: 92px; align-items:center; padding:.6rem; border:1px solid var(--tier); border-radius:.5rem .9rem .5rem .9rem; background:#253244; }
.treasure-card.tier-silver { --tier: #c5c9c5; }.treasure-card.tier-gold { --tier: var(--honey); }
.treasure-chest { display:grid; grid-row:1/4; width:46px; height:40px; place-items:center; color:#302718; border:3px solid var(--tier); border-radius:.5rem .5rem .25rem .25rem; background:#72533c; font-weight:900; }
.treasure-card strong { color:var(--tier); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; }
.treasure-card p { grid-column:2/4; margin:0; color:var(--cream); font-size:.72rem; line-height:1.3; overflow-wrap:anywhere; }
.treasure-bonus { justify-self:end; padding:.18rem .42rem; color:#28231c; border-radius:1rem; background:var(--tier); font-size:.58rem; font-weight:900; text-transform:uppercase; }
.treasure-card.is-found { background:linear-gradient(145deg,#514333,#313a48); box-shadow:inset 0 0 18px rgba(239,196,95,.12); }
.treasure-found-words { display:flex; flex-wrap:wrap; gap:.35rem; min-height:34px; }
.treasure-found-words > span:not(.empty-list) { padding:.3rem .5rem; color:#342918; border-radius:.35rem; background:#e7c674; font-size:.68rem; font-weight:900; }
.empty-list { color:#aaa298; font-size:.75rem; }
.treasure-actions { margin-bottom:.65rem; }
.treasure-game .results-card { border-color:#a98649; opacity:1; background:linear-gradient(145deg,rgba(88,70,42,.96),rgba(45,60,80,.96)); }
.mosaic-game { --accent: var(--sage); }
.mosaic-intro { position:relative; }
.mosaic-intro p:last-of-type { margin:0; padding-right:5.5rem; color:var(--muted); font-size:.84rem; line-height:1.45; }
.mosaic-mistakes { position:absolute; right:.9rem; bottom:.95rem; color:var(--sage); font-size:.68rem; font-weight:850; }
.mosaic-scene { margin-inline:0; padding:.55rem; overflow:hidden; background:#233447; }
.mosaic-scene svg { display:block; width:100%; height:auto; max-height:150px; }
.scene-part { opacity:.1; transition:opacity .35s ease, filter .35s ease; filter:saturate(.35); }
.scene-part.is-revealed { opacity:1; filter:none; }
.mosaic-sky { fill:#415772; }.mosaic-water { fill:#7397a3; }.mosaic-house { fill:#ddc390; }.mosaic-roof { fill:#9a5e4b; }.mosaic-window { fill:#f3cc68; }.mosaic-door { fill:#684b3d; }.mosaic-boat { fill:#b87653; }.mosaic-sail { fill:#f3e3bd; }.mosaic-moon { fill:#efc56d; }.mosaic-trees { fill:#5f846b; }.mosaic-path { fill:#c5a675; }.mosaic-spark { fill:#ffe09a; }.mosaic-garden { fill:none; stroke:#8fb283; stroke-width:5; }
.mosaic-play h2, .mosaic-clues h2 { margin:0 0 .65rem; font:800 1.18rem/1.15 Georgia,serif; }
.mosaic-grid-wrap { display:grid; width:100%; place-items:center; overflow:visible; }
.mosaic-grid { display:grid; grid-template-columns:repeat(var(--cols),44px); grid-template-rows:repeat(var(--rows),44px); gap:3px; width:max-content; padding:.35rem; border:1px solid rgba(255,241,215,.12); border-radius:.65rem; background:rgba(12,21,18,.5); }
.mosaic-cell { width:44px; min-width:44px; min-height:44px; padding:0; border:1px solid #9aa884; border-radius:.3rem; color:#392f22; background:linear-gradient(145deg,#f7e8c6,#d8c293); box-shadow:inset 0 -3px 0 rgba(69,55,34,.16); font-size:1.15rem; font-weight:900; }
.mosaic-cell.is-given { color:var(--cream); border-color:#89a58e; background:#526d5b; opacity:1; }
.mosaic-cell.is-filled { border-color:#f1bf64; }
.mosaic-grid-gap { width:44px; height:44px; }
.mosaic-tray-dock { position:sticky; z-index:3; bottom:max(.25rem,env(safe-area-inset-bottom)); margin:.25rem -.35rem -.35rem; padding:.55rem .45rem; border:1px solid #71806e; border-radius:.75rem; background:rgba(29,45,49,.97); box-shadow:0 -8px 22px rgba(8,14,20,.3); }
.mosaic-tray-heading { display:flex; justify-content:space-between; gap:.75rem; margin-bottom:.45rem; color:var(--muted); font-size:.68rem; }
.mosaic-tray-heading strong { color:var(--sage); letter-spacing:.08em; text-transform:uppercase; }
.mosaic-tile-tray { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; min-height:48px; }
.mosaic-tile { min-width:48px; min-height:48px; padding:.5rem; border:1px solid #c89d58; border-radius:.2rem .55rem .2rem .55rem; color:#352919; background:linear-gradient(145deg,#ffe7a9,#dba75b); box-shadow:inset 0 -4px 0 rgba(96,58,19,.18),0 4px 7px rgba(0,0,0,.2); font-size:1.05rem; font-weight:900; }
.mosaic-tile.is-selected { color:var(--cream); border:3px solid #ffe29a; background:#9c5c45; transform:translateY(-3px) rotate(-2deg); }
.mosaic-tile:disabled { opacity:.18; box-shadow:none; }
.mosaic-clue-list { display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.mosaic-clue-list li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:.25rem .55rem; min-height:48px; align-items:center; padding:.45rem 0; border-bottom:1px dashed rgba(255,241,215,.18); color:var(--muted); font-size:.74rem; line-height:1.3; }
.mosaic-clue-number { display:grid; grid-row:1/3; width:30px; height:30px; place-items:center; border:1px solid var(--sage); transform:rotate(45deg); font-weight:900; }
.mosaic-clue-list strong { grid-column:2; color:var(--sage); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.mosaic-clue-list li.is-complete { color:var(--cream); }.mosaic-clue-list li.is-complete strong { color:var(--gold); }
.mosaic-actions { margin-bottom:.65rem; }
.mosaic-game .results-card { border-color:#839c82; opacity:1; background:linear-gradient(145deg,rgba(61,82,70,.96),rgba(45,60,80,.96)); }
footer { padding: 1rem .25rem 0; color: #aaa99f; font-size: .67rem; text-align: center; }
.noscript { margin: 1rem; padding: 1rem; color: #332819; background: var(--cream); }

@media (min-width: 390px) {
  .shell { padding-inline: max(1rem, env(safe-area-inset-left)); }
  .game-card { grid-template-columns: 58px minmax(0,1fr); padding: 1rem; }
  .card-symbol { width: 58px; height: 58px; }
  .action-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .skip-link { transform: none; position: absolute; clip-path: inset(50%); }
  .skip-link:focus { clip-path: none; }
}

@media (min-width: 390px) {
  .alchemy-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .treasure-controls { grid-template-columns: .85fr 1.35fr; }
  .treasure-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .treasure-card { display:block; min-height:142px; padding:.5rem .35rem; text-align:center; }
  .treasure-chest { margin:0 auto .25rem; }
  .treasure-card p { min-height:2.7rem; margin:.25rem 0; font-size:.65rem; }
  .treasure-bonus { display:inline-block; }
  .mosaic-grid { grid-template-columns:repeat(var(--cols),48px); grid-template-rows:repeat(var(--rows),48px); gap:4px; }
  .mosaic-cell,.mosaic-grid-gap { width:48px; min-width:48px; min-height:48px; height:48px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-part { transition:none; }
  .mosaic-tile.is-selected { transform:none; }
}