@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@500;600;700;800&display=swap");

:root { color-scheme: dark; --ink:#081211; --panel:rgba(12,28,27,.82); --line:rgba(192,231,204,.16); --text:#f3f6df; --muted:#9db3a3; --mint:#a7f0c0; --gold:#ffd77b; --rose:#ff9a9d; --font:"Outfit",system-ui,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; overflow-x:hidden; color:var(--text); background:#07100f; font-family:var(--font); }
body::before { position:fixed; inset:0; z-index:-2; content:""; background:radial-gradient(circle at 50% 15%,rgba(97,207,154,.18),transparent 32%),linear-gradient(150deg,#0b1815,#06100f 65%,#101b13); }
.sky-glow { position:fixed; z-index:-1; width:40vw; height:40vw; border-radius:50%; filter:blur(80px); opacity:.12; pointer-events:none; }
.sky-glow-one { top:8vh; left:-16vw; background:#6de6ac; } .sky-glow-two { right:-18vw; bottom:-16vh; background:#f0b861; }
.game-nav { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(1240px,calc(100vw - 32px)); margin:16px auto 0; padding:11px 14px 11px 20px; border:1px solid rgba(192,231,204,.14); border-radius:18px; background:rgba(7,17,15,.73); box-shadow:0 20px 70px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(22px); }
.brand { color:var(--text); font-size:14px; font-weight:800; letter-spacing:.04em; text-decoration:none; }.brand::before { content:"●"; margin-right:9px; color:var(--mint); }
.nav-links { display:flex; align-items:center; gap:6px; }.nav-links>a,.games-menu>summary { display:inline-flex; align-items:center; min-height:36px; padding:0 13px; border:1px solid transparent; border-radius:10px; color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; cursor:pointer; list-style:none; }.nav-links>a:hover,.games-menu>summary:hover,.games-menu[open]>summary { color:var(--text); border-color:rgba(167,240,192,.2); background:rgba(167,240,192,.08); }.games-menu { position:relative; }.games-menu>summary::-webkit-details-marker { display:none; }.games-menu>summary::after { width:6px; height:6px; margin:-3px 0 0 8px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; content:""; transform:rotate(45deg); }.games-menu[open]>summary::after { margin-top:3px; transform:rotate(225deg); }
.games-panel { position:absolute; top:calc(100% + 10px); right:0; display:grid; grid-template-columns:repeat(2,minmax(170px,1fr)); gap:6px; width:420px; padding:12px; border:1px solid rgba(167,240,192,.2); border-radius:16px; background:rgba(9,24,21,.98); box-shadow:0 24px 70px rgba(0,0,0,.5); backdrop-filter:blur(24px); }.games-heading { grid-column:1/-1; padding:5px 7px 10px; border-bottom:1px solid rgba(255,255,255,.08); }.games-heading span { display:block; color:var(--mint); font:500 9px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; }.games-heading strong { display:block; margin-top:5px; font-size:18px; }.games-panel a { display:block; padding:11px; border:1px solid transparent; border-radius:10px; color:var(--text); font-size:13px; font-weight:700; text-decoration:none; }.games-panel a:hover,.games-panel a.current { border-color:rgba(167,240,192,.18); background:rgba(167,240,192,.07); }.games-panel small { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:500; }
.game-shell { width:min(1240px,calc(100vw - 32px)); margin:0 auto; padding:58px 0 38px; }.game-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; }.eyebrow,.hud-label { color:var(--mint); font:500 10px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; }.game-heading h1 { margin:12px 0 5px; font-size:clamp(54px,8vw,88px); line-height:.86; letter-spacing:-.07em; }.game-heading h1 span { color:var(--gold); font-size:.48em; vertical-align:top; }.lede { margin:18px 0 0; color:var(--muted); font-size:17px; }.area-pill { display:flex; align-items:center; gap:8px; margin-bottom:7px; color:var(--muted); font:500 11px/1 var(--mono); }.area-pill i { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 16px var(--mint); }
.game-frame { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px; margin-top:34px; padding:18px; border:1px solid rgba(192,231,204,.14); border-radius:25px; background:linear-gradient(145deg,rgba(19,43,35,.7),rgba(6,16,14,.82)); box-shadow:0 30px 100px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(20px); }.canvas-wrap { position:relative; min-width:0; overflow:hidden; border:1px solid rgba(167,240,192,.2); border-radius:18px; background:#0c1e18; box-shadow:0 0 0 8px rgba(167,240,192,.025),0 0 65px rgba(92,211,150,.1); }.canvas-wrap::after { position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 90px rgba(0,0,0,.28); content:""; pointer-events:none; }.canvas-wrap canvas { display:block; width:100%; height:auto; min-height:420px; aspect-ratio:16/10; outline:none; image-rendering:auto; }
#screen-vignette { position:absolute; inset:0; z-index:2; border-radius:18px; box-shadow:inset 0 0 120px rgba(3,12,10,.55); pointer-events:none; }.hud { display:flex; flex-direction:column; gap:12px; }.hud-card { padding:15px; border:1px solid var(--line); border-radius:15px; background:rgba(7,20,18,.68); }.hero-card { background:linear-gradient(145deg,rgba(23,57,42,.78),rgba(8,23,20,.72)); }.hud-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; }.hud-topline>span:last-child { color:var(--muted); font:500 9px/1 var(--mono); }.hearts { display:flex; gap:5px; margin:13px 0 14px; }.heart { width:17px; height:15px; position:relative; transform:rotate(-45deg); border-radius:3px; background:var(--rose); box-shadow:0 0 13px rgba(255,154,157,.35); }.heart::before,.heart::after { position:absolute; width:17px; height:15px; border-radius:50%; background:inherit; content:""; }.heart::before { top:-8px; left:0; }.heart::after { top:0; left:8px; }.heart.empty { background:rgba(255,255,255,.12); box-shadow:none; }.resource-row { display:grid; grid-template-columns:1fr auto 1fr auto; gap:7px; align-items:center; color:var(--muted); font:500 9px/1 var(--mono); }.resource-row b { color:var(--gold); font-weight:500; }.ability-status { margin-top:12px; padding:9px 10px; border:1px solid rgba(142,242,207,.18); border-radius:9px; color:rgba(214,255,220,.7); background:rgba(142,242,207,.06); font:600 9px/1.25 var(--mono); letter-spacing:.04em; text-transform:uppercase; }.ability-status.ready { border-color:rgba(255,215,123,.38); color:var(--gold); background:rgba(255,215,123,.08); box-shadow:0 0 18px rgba(255,215,123,.08); }.objective-card strong { display:block; margin:12px 0 7px; font-size:17px; line-height:1.1; }.objective-card p,.map-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }.map-dots { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin:13px 0; }.map-dots i { height:20px; border:1px solid rgba(167,240,192,.1); border-radius:4px; background:rgba(255,255,255,.03); }.map-dots i.active { border-color:rgba(167,240,192,.4); background:rgba(167,240,192,.18); box-shadow:0 0 12px rgba(167,240,192,.1); }.map-dots i.done { background:rgba(255,215,123,.15); border-color:rgba(255,215,123,.28); }.controls-card { display:grid; gap:9px; }.controls-card>div { display:grid; grid-template-columns:34px 1fr 34px 1fr; align-items:center; gap:5px; color:var(--muted); font:500 9px/1 var(--mono); }.controls-card>div:first-of-type { grid-template-columns:52px 1fr; }.controls-card kbd { display:inline-grid; min-width:27px; min-height:21px; place-items:center; padding:0 4px; border:1px solid rgba(255,255,255,.16); border-bottom-width:2px; border-radius:5px; color:var(--text); background:rgba(255,255,255,.06); font:500 9px/1 var(--mono); }.quiet-button,.primary-button,.secondary-button { border:0; border-radius:10px; cursor:pointer; font:700 11px/1 var(--font); }.quiet-button { margin-top:auto; padding:11px; color:rgba(157,179,163,.7); background:transparent; }.quiet-button:hover { color:var(--rose); background:rgba(255,154,157,.06); }
.screen-card { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; border-radius:18px; text-align:center; background:linear-gradient(145deg,rgba(8,26,20,.82),rgba(6,13,17,.88)); backdrop-filter:blur(8px); }.screen-card.hidden { display:none; }.screen-kicker { margin:0; color:var(--mint); font:500 10px/1 var(--mono); letter-spacing:.2em; }.screen-card h2 { margin:15px 0 8px; color:var(--text); font-size:clamp(36px,6vw,68px); letter-spacing:-.07em; }.screen-card>p:not(.screen-kicker) { max-width:440px; margin:0; color:var(--muted); font-size:14px; line-height:1.55; }.screen-card small { margin-top:20px; color:rgba(157,179,163,.75); font:500 9px/1.5 var(--mono); }.screen-actions { display:flex; gap:9px; margin-top:25px; }.primary-button,.secondary-button { min-height:42px; padding:0 20px; }.primary-button { color:#061511; background:linear-gradient(135deg,#d8ffe0,#8eeab3); box-shadow:0 0 28px rgba(142,234,179,.22); }.secondary-button { color:var(--text); border:1px solid rgba(167,240,192,.2); background:rgba(167,240,192,.08); }
.dialogue { position:absolute; right:18px; bottom:18px; left:18px; z-index:6; display:none; align-items:flex-start; gap:13px; padding:13px 15px 11px; border:1px solid rgba(214,255,220,.25); border-radius:15px; background:linear-gradient(135deg,rgba(5,20,16,.95),rgba(10,26,24,.92)); box-shadow:0 14px 35px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(12px); }.dialogue.visible { display:flex; animation:dialogue-in .2s ease-out; }.dialogue.closing { display:flex; animation:dialogue-out .2s ease-in forwards; }.dialogue-portrait { display:grid; flex:0 0 48px; width:48px; height:48px; place-items:center; margin-top:1px; border:2px solid rgba(255,255,255,.5); border-radius:14px 14px 14px 5px; color:#fff9dd; background:linear-gradient(145deg,#355e73,#1f3b4e); box-shadow:0 0 20px rgba(167,240,192,.14); font:800 18px/1 var(--font); }.dialogue-portrait[data-character="tansy"] { background:linear-gradient(145deg,#a85e4d,#633a3d); }.dialogue-portrait[data-character="brindle"] { background:linear-gradient(145deg,#4e8f8c,#27595c); }.dialogue-portrait[data-character="lumen"] { background:linear-gradient(145deg,#795f93,#423b67); }.dialogue-content { min-width:0; flex:1; }.dialogue-speaker { color:var(--gold); font:700 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }.dialogue p { min-height:41px; margin:8px 0 9px; color:var(--text); font-size:14px; line-height:1.45; }.dialogue-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }.dialogue-hint { color:var(--muted); font:500 9px/1 var(--mono); }.dialogue-speed { padding:4px 7px; border:1px solid rgba(167,240,192,.18); border-radius:6px; color:var(--muted); background:rgba(167,240,192,.05); cursor:pointer; font:500 9px/1 var(--mono); }.dialogue-speed:hover { color:var(--text); border-color:rgba(167,240,192,.42); background:rgba(167,240,192,.1); }.toast { position:absolute; top:20px; left:50%; z-index:7; min-width:210px; padding:10px 13px; border:1px solid rgba(167,240,192,.24); border-radius:999px; color:var(--text); background:rgba(7,20,18,.84); box-shadow:0 8px 24px rgba(0,0,0,.2); font:500 10px/1.1 var(--mono); opacity:0; pointer-events:none; text-align:center; transform:translate(-50%,-8px); }.toast.visible { opacity:1; transform:translate(-50%,0); transition:opacity .2s ease,transform .2s ease; }.footer-note { margin:15px 0 0; color:rgba(157,179,163,.72); text-align:center; font:500 10px/1 var(--mono); }.footer-note code { color:var(--mint); }
@keyframes dialogue-in { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes dialogue-out { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(8px) scale(.985); } }
@media (max-width:980px) { .game-frame { grid-template-columns:1fr; }.canvas-wrap canvas { min-height:0; }.hud { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.controls-card { grid-column:span 2; }.quiet-button { margin-top:0; } }
@media (max-width:580px) { .game-nav { align-items:flex-start; flex-direction:column; gap:8px; padding:13px 15px; }.nav-links { width:100%; }.games-panel { position:fixed; top:112px; right:16px; left:16px; width:auto; }.game-shell { width:min(100% - 20px,520px); padding-top:36px; }.game-heading { align-items:flex-start; flex-direction:column; gap:18px; }.game-frame { margin-top:25px; padding:9px; }.canvas-wrap canvas { min-height:0; }.hud { grid-template-columns:1fr 1fr; gap:8px; }.hud-card { padding:11px; }.objective-card,.controls-card { grid-column:span 2; }.screen-card { overflow:auto; padding:14px; }.screen-card h2 { margin:8px 0 5px; font-size:clamp(30px,10vw,48px); }.screen-card>p:not(.screen-kicker) { font-size:12px; line-height:1.3; }.screen-card small { margin-top:12px; font-size:8px; }.screen-actions { width:100%; margin-top:14px; }.screen-actions button { flex:1; }.dialogue { right:9px; bottom:9px; left:9px; gap:9px; padding:10px; }.dialogue-portrait { flex-basis:38px; width:38px; height:38px; border-radius:11px 11px 11px 4px; font-size:15px; }.dialogue p { min-height:49px; font-size:13px; }.dialogue-footer { align-items:flex-start; flex-direction:column-reverse; gap:6px; }.dialogue-speed { align-self:flex-end; } }
@media (prefers-reduced-motion:reduce) { .dialogue.visible,.dialogue.closing,.toast.visible { animation:none; transition:none; } }

/* Keep title, pause, and victory screens visually anchored to the same world as
   the canvas, even when the game is waiting for input. */
.screen-card::before { position:absolute; inset:9%; border:1px solid rgba(167,240,192,.12); border-radius:50%; content:""; background:radial-gradient(circle at 50% 42%,rgba(142,242,207,.12),transparent 34%),radial-gradient(circle at 50% 50%,transparent 55%,rgba(255,215,123,.055) 56%,transparent 57%); box-shadow:0 0 90px rgba(72,185,132,.09),inset 0 0 80px rgba(72,185,132,.06); transform:rotate(-9deg); pointer-events:none; }
.screen-card::after { position:absolute; width:42%; height:1px; bottom:22%; left:29%; content:""; background:linear-gradient(90deg,transparent,rgba(167,240,192,.36),transparent); box-shadow:0 0 18px rgba(167,240,192,.16); pointer-events:none; }
.screen-card > * { position:relative; z-index:1; }

/* Visual polish pass: quieter surfaces, stronger hierarchy, and better focus states. */
:root { --line-strong:rgba(192,231,204,.24); --surface:rgba(8,22,19,.78); }
::selection { color:#071511; background:var(--mint); }
button, a, summary { -webkit-tap-highlight-color:transparent; }
.game-nav { border-color:var(--line-strong); background:linear-gradient(120deg,rgba(9,25,21,.88),rgba(7,17,16,.72)); box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.07); transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; }
.game-nav:hover { border-color:rgba(167,240,192,.28); box-shadow:0 26px 90px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.08); }
.brand::before { text-shadow:0 0 14px rgba(167,240,192,.9); }
.game-heading h1 { text-shadow:0 10px 38px rgba(101,226,166,.1); }
.area-pill i { animation:area-breathe 2.8s ease-in-out infinite; }
.game-frame { border-color:var(--line-strong); background:linear-gradient(145deg,rgba(20,48,39,.76),rgba(5,15,14,.88)); box-shadow:0 34px 110px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08); }
.game-frame { align-items:start; }
.canvas-wrap { border-color:rgba(167,240,192,.28); background:radial-gradient(circle at 50% 30%,rgba(66,132,102,.13),transparent 58%),#0a1c17; box-shadow:0 0 0 8px rgba(167,240,192,.035),0 0 80px rgba(92,211,150,.13),inset 0 1px rgba(255,255,255,.08); }
.canvas-wrap { align-self:start; }
.canvas-wrap::after { box-shadow:inset 0 0 100px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.06); }
.hud-card { border-color:rgba(192,231,204,.2); background:linear-gradient(145deg,rgba(8,24,21,.78),rgba(6,16,15,.72)); box-shadow:0 12px 30px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.04); transition:border-color .2s ease,transform .2s ease,background .2s ease; }
.hud-card:hover { border-color:rgba(167,240,192,.3); background:linear-gradient(145deg,rgba(12,32,27,.84),rgba(6,17,15,.76)); transform:translateY(-1px); }
.hero-card { background:linear-gradient(145deg,rgba(26,64,47,.82),rgba(8,23,20,.78)); }
.hearts { min-height:19px; align-items:center; }
.heart { transform:rotate(-45deg) scale(.92); transition:transform .18s ease,background .2s ease,filter .2s ease; filter:drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
.heart:not(.empty) { background:linear-gradient(145deg,#ffd8ce 0%,#ff9a9d 58%,#c65d7b 100%); box-shadow:0 0 13px rgba(255,154,157,.32),inset 2px -2px 0 rgba(153,55,83,.18),inset -2px 2px 0 rgba(255,255,255,.22); }
.hearts.health-pop .heart { animation:health-pop .28s cubic-bezier(.2,.85,.28,1.25); }
.heart:not(.empty) { animation:heart-glimmer 3.4s ease-in-out infinite; }
.heart:nth-child(2n) { animation-delay:-1.3s; }
.heart.empty { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.1); }
.heart.painted { width:23px; height:23px; border:0; border-radius:0; transform:none; background-color:transparent; background-image:url('/mosswake/assets/ui-icons-generated-v1.png'); background-size:400% 400%; background-position:0 0; filter:drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.heart.painted::before,.heart.painted::after { display:none; }
.heart.painted.empty { background-position:33.3333% 0; opacity:.62; box-shadow:none; }
.resource-label { display:flex; align-items:center; gap:4px; min-width:0; }
.hud-icon { display:inline-block; flex:0 0 18px; width:18px; height:18px; background-image:url('/mosswake/assets/ui-icons-generated-v1.png'); background-size:400% 400%; background-position:0 0; background-repeat:no-repeat; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.hud-icon.icon-heartseed { background-position:100% 0; }
.hud-icon.icon-key { background-position:66.6667% 0; }
.hud-icon.icon-drop { background-position:0 100%; }
.hud-icon.icon-discovery { background-position:100% 33.3333%; }
.loot-row { display:none; }
.ability-status { box-shadow:inset 0 1px rgba(255,255,255,.04); transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.ability-status.ready { box-shadow:0 0 22px rgba(255,215,123,.1),inset 0 1px rgba(255,255,255,.06); }
.map-dots i { position:relative; overflow:hidden; transition:background .25s ease,border-color .25s ease,transform .2s ease; }
.map-dots i::after { position:absolute; inset:0; content:""; background:linear-gradient(120deg,transparent,rgba(255,255,255,.16),transparent); transform:translateX(-120%); transition:transform .5s ease; }
.map-dots i.active::after { transform:translateX(120%); }
.controls-card kbd { box-shadow:inset 0 1px rgba(255,255,255,.1),0 2px 0 rgba(0,0,0,.15); }
.primary-button,.secondary-button,.quiet-button,.dialogue-speed { transition:transform .18s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease; }
.primary-button:hover,.secondary-button:hover { transform:translateY(-2px); }
.primary-button:active,.secondary-button:active { transform:translateY(0); }
.primary-button:hover { box-shadow:0 8px 32px rgba(142,234,179,.28); }
.secondary-button:hover { border-color:rgba(167,240,192,.42); background:rgba(167,240,192,.14); }
.quiet-button:hover { transform:translateY(-1px); }
.primary-button:focus-visible,.secondary-button:focus-visible,.quiet-button:focus-visible,.dialogue-speed:focus-visible,.games-menu>summary:focus-visible,.nav-links>a:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.primary-button:disabled,.secondary-button:disabled { cursor:not-allowed; opacity:.42; transform:none; box-shadow:none; }
.screen-card { background:radial-gradient(circle at 50% 36%,rgba(72,150,111,.16),transparent 36%),linear-gradient(145deg,rgba(7,28,21,.9),rgba(5,12,15,.94)); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.screen-card::before { width:180px; height:180px; position:absolute; top:14%; left:50%; border:1px solid rgba(167,240,192,.08); border-radius:50%; content:""; transform:translateX(-50%); pointer-events:none; }
.screen-card h2 { position:relative; text-shadow:0 8px 34px rgba(167,240,192,.18); }
.screen-kicker { position:relative; }
.dialogue { border-color:rgba(214,255,220,.32); background:linear-gradient(135deg,rgba(4,20,16,.97),rgba(9,29,25,.94)); box-shadow:0 18px 45px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08); }
.dialogue-portrait { position:relative; overflow:hidden; box-shadow:0 0 26px rgba(167,240,192,.18),inset 0 1px rgba(255,255,255,.2); font-size:0; }
.dialogue-portrait.painted { background-position:center; background-size:cover; background-repeat:no-repeat; }
.dialogue-portrait.painted::before,.dialogue-portrait.painted::after { display:none; }
.dialogue-portrait::before { position:absolute; top:9px; left:50%; width:17px; height:17px; border-radius:50%; content:""; transform:translateX(-50%); background:#d7a77b; box-shadow:0 -5px 0 2px rgba(36,49,68,.9); }
.dialogue-portrait::after { position:absolute; right:7px; bottom:-4px; left:7px; height:25px; border-radius:16px 16px 5px 5px; content:""; background:#365c78; box-shadow:inset 0 3px rgba(255,255,255,.16); }
.dialogue-portrait[data-character="tansy"]::before { background:#ddba83; box-shadow:0 -5px 0 3px #a85e4d; }
.dialogue-portrait[data-character="tansy"]::after { background:#d07a52; }
.dialogue-portrait[data-character="brindle"]::before { background:#d7ad76; box-shadow:0 -5px 0 3px #324d4e; }
.dialogue-portrait[data-character="brindle"]::after { background:#4d8d87; }
.dialogue-portrait[data-character="lumen"]::before { background:#e0bd89; box-shadow:0 -5px 0 3px #2e2e4a; }
.dialogue-portrait[data-character="lumen"]::after { background:#765c8e; }
.dialogue-speaker { text-shadow:0 0 14px rgba(255,215,123,.22); }
.dialogue p { text-wrap:pretty; }
.dialogue-speed { box-shadow:inset 0 1px rgba(255,255,255,.06); }
.toast { border-color:rgba(167,240,192,.32); background:linear-gradient(120deg,rgba(6,24,19,.94),rgba(11,30,25,.88)); box-shadow:0 12px 32px rgba(0,0,0,.3),0 0 22px rgba(142,242,207,.08); transition:opacity .2s ease,transform .2s ease; }
.toast.visible { animation:toast-settle .24s ease-out; }
.footer-note { opacity:.8; }
@keyframes area-breathe { 0%,100% { transform:scale(.9); opacity:.76; } 50% { transform:scale(1.18); opacity:1; } }
@keyframes heart-glimmer { 0%,100% { filter:drop-shadow(0 3px 4px rgba(0,0,0,.18)); } 50% { filter:drop-shadow(0 0 8px rgba(255,154,157,.52)); } }
@keyframes toast-settle { from { opacity:0; transform:translate(-50%,-8px) scale(.97); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes health-pop { 0% { transform:scale(.92); } 58% { transform:scale(1.08); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .area-pill i,.heart:not(.empty),.hearts.health-pop .heart { animation:none; } .hud-card,.primary-button,.secondary-button,.quiet-button,.dialogue-speed,.toast { transition:none; } .toast.visible { animation:none; } }

/* Final visual pass: a restrained glass edge and a warmer focus on the playable scene. */
.canvas-wrap::before { position:absolute; inset:0; z-index:1; border-radius:18px; content:""; background:linear-gradient(180deg,rgba(211,250,209,.08),transparent 18%,transparent 76%,rgba(4,13,11,.12)); pointer-events:none; }
.screen-card::after { position:absolute; width:300px; height:300px; top:8%; left:50%; border:1px solid rgba(255,215,123,.06); border-radius:50%; content:""; transform:translateX(-50%) rotate(-18deg); box-shadow:0 0 80px rgba(142,242,207,.05); pointer-events:none; }
.game-heading h1 span { text-shadow:0 0 24px rgba(255,215,123,.42); }
.area-pill { padding:8px 11px; border:1px solid rgba(167,240,192,.14); border-radius:999px; background:rgba(7,20,17,.35); }
@media (prefers-reduced-motion:reduce) { .screen-card::after { display:none; } }

/* Player-facing controls and portable-save drawer. The drawer is collapsed by
   default so the art remains the primary focus, while restart/restore stay one
   deliberate click away instead of hiding behind a destructive erase action. */
.controls-card { gap:0; overflow:hidden; }
.controls-toggle { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; width:100%; min-height:36px; padding:0; border:0; color:var(--text); background:transparent; cursor:pointer; text-align:left; }
.controls-toggle .hud-label { margin:0; }
.controls-summary { color:var(--muted); font:500 9px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.controls-chevron { display:inline-grid; width:22px; height:22px; place-items:center; border:1px solid rgba(167,240,192,.18); border-radius:7px; color:var(--mint); background:rgba(167,240,192,.06); font:700 14px/1 var(--font); transition:transform .2s ease,background .2s ease; }
.controls-card.expanded .controls-chevron { transform:rotate(180deg); background:rgba(167,240,192,.12); }
.controls-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
.controls-content { display:grid; gap:9px; margin-top:11px; padding-top:11px; border-top:1px solid rgba(192,231,204,.12); }
.controls-content[hidden], .save-panel[hidden] { display:none; }
.controls-content > div:not(.gamepad-note):not(.controls-actions):not(.save-panel) { display:grid; grid-template-columns:34px 1fr 34px 1fr; align-items:center; gap:5px; color:var(--muted); font:500 9px/1 var(--mono); }
.controls-content > div:first-child { grid-template-columns:52px 1fr; }
.gamepad-note { display:flex; align-items:flex-start; gap:7px; color:rgba(214,255,220,.72); font:500 8px/1.35 var(--mono); }
.gamepad-note i { flex:0 0 7px; width:7px; height:7px; margin-top:2px; border-radius:50%; background:var(--mint); box-shadow:0 0 9px rgba(142,242,207,.7); }
.controls-actions, .save-code-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.controls-actions button, .save-code-actions button { min-height:32px; padding:0 8px; font-size:9px; }
.save-panel { display:grid; gap:7px; padding:10px; border:1px solid rgba(167,240,192,.16); border-radius:10px; background:rgba(167,240,192,.045); }
.save-panel label { color:var(--gold); font:700 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.save-code-row { display:grid; grid-template-columns:1fr auto; gap:6px; }
.save-code-row input { min-width:0; height:32px; padding:0 8px; border:1px solid rgba(167,240,192,.18); border-radius:7px; color:var(--text); background:rgba(2,13,11,.58); font:500 9px/1 var(--mono); }
.save-code-row input:focus { outline:2px solid rgba(255,215,123,.72); outline-offset:1px; border-color:var(--gold); }
.save-code-row button { min-height:32px; padding:0 9px; font-size:9px; }
.save-panel small { color:var(--muted); font:500 8px/1.4 var(--mono); }
.save-code-status { min-height:12px; color:var(--mint); font:600 8px/1.35 var(--mono); }
.save-code-status.error { color:var(--rose); }
@media (max-width:980px) { .controls-content { grid-template-columns:repeat(2,minmax(0,1fr)); }.controls-content > div:not(.gamepad-note):not(.controls-actions):not(.save-panel), .gamepad-note, .controls-actions, .save-panel { grid-column:span 2; }.controls-content > div:not(.gamepad-note):not(.controls-actions):not(.save-panel):first-child { grid-column:span 1; } }
@media (max-width:580px) { .controls-content { grid-template-columns:1fr; }.controls-content > div:not(.gamepad-note):not(.controls-actions):not(.save-panel), .gamepad-note, .controls-actions, .save-panel { grid-column:auto; } }

/* Generated UI surface family: the atlas is decorative progressive enhancement;
   typography, contrast, and interaction remain owned by CSS for accessibility. */
.screen-card { background-image:url('/mosswake/assets/ui/ui-panels-generated-v1.png'),radial-gradient(circle at 50% 36%,rgba(72,150,111,.16),transparent 36%),linear-gradient(145deg,rgba(7,28,21,.9),rgba(5,12,15,.94)); background-size:400% 400%,auto,auto; background-position:33.3333% 33.3333%,center,center; background-repeat:no-repeat; background-blend-mode:soft-light,normal,normal; }
.pause-card { background-position:0 33.3333%,center,center; }
.victory-card { background-position:100% 33.3333%,center,center; }
.dialogue { position:relative; overflow:hidden; background-image:linear-gradient(135deg,rgba(4,20,16,.97),rgba(9,29,25,.94)),url('/mosswake/assets/ui/ui-panels-generated-v1.png'); background-size:auto,400% 400%; background-position:center,0 33.3333%; background-repeat:no-repeat; background-blend-mode:normal,soft-light; }
.dialogue::before { position:absolute; inset:0; content:""; border:1px solid rgba(255,215,123,.22); border-radius:inherit; background-image:url('/mosswake/assets/ui/ui-panels-generated-v1.png'); background-size:400% 400%; background-position:66.6667% 0; background-repeat:no-repeat; opacity:.22; pointer-events:none; }
.dialogue > * { position:relative; z-index:1; }
.dialogue-portrait { background-image:url('/mosswake/assets/ui/ui-panels-generated-v1.png'),linear-gradient(145deg,#355e73,#1f3b4e); background-size:400% 400%,auto; background-position:100% 0,center; background-repeat:no-repeat; }
.dialogue-portrait.painted { background-image:var(--portrait-image),url('/mosswake/assets/ui/ui-panels-generated-v1.png'),linear-gradient(145deg,#355e73,#1f3b4e); background-size:cover,400% 400%,auto; background-position:center,100% 0,center; }