:root { color-scheme: dark; font-family: Georgia, 'Times New Roman', serif; --gold:#ffd784; --ink:#100d1b; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #090717; }
body { display: grid; place-items: center; padding: 18px; overflow: hidden; background: radial-gradient(circle at 50% 35%,#282044 0,#0d0a1c 48%,#05040b 100%); }
#game-shell { position: relative; width: min(100%, 960px); aspect-ratio: 8 / 5; overflow: hidden; border-radius: 18px; box-shadow: 0 28px 80px #000, 0 0 0 3px #8b7049; background: #0d1111; }
canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.panel { position: absolute; inset: 0; width: 100%; height: 100%; padding: clamp(55px,9%,95px) clamp(45px,14%,150px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #f3ead6; background: #211a32; border: 10px solid #100c1c; border-radius: 18px; box-shadow: inset 0 0 0 3px #b58a4f, inset 0 0 0 9px #332641; }
.panel::before { content: ''; position: absolute; inset: 24px; border: 1px solid #6f5677; border-radius: 12px; pointer-events: none; }
.panel::after { content: '✦'; position: absolute; top: 29px; color: #c89d58; font-size: 16px; }
.eyebrow { margin:0 0 4px; color: #c9ad72; text-transform: uppercase; letter-spacing: .16em; font: 700 11px/1.4 system-ui, sans-serif; }
h1, h2 { margin: 8px 0 18px; color: var(--gold); letter-spacing: .08em; text-shadow: 3px 3px 0 #5a314d; }
h1 { font-size: clamp(42px, 8vw, 72px); } h2 { font-size: 42px; }
p { max-width: 650px; font-size: 18px; line-height: 1.55; }
button { min-width: 210px; margin-top: 14px; padding: 14px 26px; border: 2px solid #f4d48d; border-radius: 12px; color: #251a2c; background: #ddb465; box-shadow: 0 4px 0 #79553d; font: 800 13px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
button:hover, button:focus-visible { background:#ecc979; transform: translateY(-1px); box-shadow: 0 5px 0 #79553d; outline:none; }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 #79553d; }
.controls { margin: 22px 0 0; padding:8px 14px; border-radius:10px; color: #aaa0ad; background:#171221; font: 12px/1.5 system-ui, sans-serif; }
.story-art { position:relative; width:300px; height:108px; margin-bottom:12px; overflow:hidden; border:2px solid #725b78; border-radius:18px; background:#171426; box-shadow:inset 0 -18px 0 #100d1b; }
.story-moon { position:absolute; width:38px; height:38px; right:35px; top:15px; border-radius:50%; background:#f2d887; box-shadow:0 0 18px #f2d88766; }
.story-mountain { position:absolute; left:60px; bottom:17px; width:180px; height:72px; background:#493b5b; clip-path:polygon(0 100%,40% 15%,55% 58%,72% 30%,100% 100%); }
.story-hero,.story-pip { position:absolute; bottom:14px; width:20px; height:28px; border-radius:10px 10px 6px 6px; background:#d8ad70; box-shadow:0 -8px 0 -2px #c68e49; }
.story-hero { left:70px; }.story-pip { right:63px; background:#8d63ad; box-shadow:0 -8px 0 -2px #c5a06f; }
.story-glow { position:absolute; width:10px; height:8px; border-radius:50%; bottom:22px; box-shadow:0 0 12px currentColor; }.story-glow.g1{left:125px;color:#8fcf71;background:currentColor}.story-glow.g2{left:148px;color:#ef8b52;background:currentColor}.story-glow.g3{left:172px;color:#68cbd7;background:currentColor}
.story-0 .story-pip,.story-0 .story-glow{opacity:.15}.story-1 .story-hero{left:115px}.story-1 .story-pip{right:105px}.story-1 .story-moon{background:#9c79bf}.story-2 .story-mountain{background:#2f263f}.story-2 .story-glow{animation:glow-bob 1.5s ease-in-out infinite alternate}.story-2 .g2{animation-delay:.25s}.story-2 .g3{animation-delay:.5s}
.victory-art { position:relative; width:340px; height:150px; margin-bottom:10px; overflow:hidden; border:2px solid #987445; border-radius:20px; background:linear-gradient(#f4ca7b,#8fb8ad 62%,#28213a 63%); }
.sunrise{position:absolute;left:138px;top:15px;width:64px;height:64px;border-radius:50%;background:#fff1ac;box-shadow:0 0 28px #fff1ac}.cave-rim{position:absolute;top:0;width:105px;height:150px;background:#171322}.cave-rim.left{left:0;clip-path:polygon(0 0,100% 0,62% 26%,88% 49%,55% 67%,75% 100%,0 100%)}.cave-rim.right{right:0;clip-path:polygon(0 0,100% 0,100% 100%,25% 100%,45% 67%,12% 49%,38% 26%)}
.escape-rope{position:absolute;left:169px;top:43px;width:3px;height:120px;background:#6b4a36}.escape-hero{position:absolute;left:159px;top:83px;width:22px;height:31px;border-radius:10px 10px 7px 7px;background:#435c74;box-shadow:0 -9px 0 -2px #e0b986;animation:climb 2.2s ease-in-out infinite}.escape-glow{position:absolute;width:12px;height:9px;border-radius:50%;bottom:13px;box-shadow:0 0 13px currentColor;animation:glow-bob 1s ease-in-out infinite alternate}.escape-glow.one{left:132px;color:#8fcf71;background:currentColor}.escape-glow.two{left:163px;color:#ef8b52;background:currentColor;animation-delay:.2s}.escape-glow.three{left:195px;color:#68cbd7;background:currentColor;animation-delay:.4s}.paid-slip{position:absolute;right:23px;bottom:13px;padding:4px 7px;transform:rotate(-8deg);border:2px solid #704837;color:#704837;background:#dbc18b;font:900 11px system-ui}
@keyframes climb{0%,100%{transform:translateY(9px)}50%{transform:translateY(-10px)}}@keyframes glow-bob{from{transform:translateY(2px)}to{transform:translateY(-5px)}}
.hidden { display: none; }
@media (max-width: 650px) { body { padding: 0; } #game-shell { width: 100vw; } .panel { padding: 24px; } .panel p { font-size: 15px; } }