:root{--bg: #140f0b;--bg-2: #1e1712;--panel: #241b14;--panel-2: #2e2318;--panel-3: #392b1d;--ink: #f3e7d3;--muted: #b7a488;--gold: #e8b84b;--gold-2: #f9e08a;--gold-deep: #a9761f;--stone: #6b5644;--stone-dark: #3a2e24;--good: #7fd05a;--bad: #ef5b3c;--shadow: rgba(0, 0, 0, .55);--font: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace}*,*:before,*:after{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100dvh;font-family:var(--font);color:var(--ink);background:radial-gradient(120% 80% at 50% -10%,#2a2016 0%,var(--bg) 60%),var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit;cursor:pointer}img,.pixel{image-rendering:pixelated}.app{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,3vw,28px);gap:16px}.screen{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:18px}[hidden]{display:none!important}.title-screen{text-align:center;gap:22px;padding:8px}.logo{display:flex;flex-direction:column;gap:6px}.logo-eyebrow{letter-spacing:.42em;text-transform:uppercase;font-size:.7rem;color:var(--gold-deep);margin:0;padding-left:.42em}.logo-title{margin:0;font-size:clamp(2.1rem,8vw,3.6rem);line-height:.98;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);text-shadow:0 2px 0 var(--gold-deep),0 4px 0 #5c3f14,0 6px 12px rgba(0,0,0,.6)}.tagline{margin:0;color:var(--muted);max-width:40ch}.how-to{list-style:none;padding:16px 18px;margin:0;display:grid;gap:10px;text-align:left;background:var(--panel);border:2px solid var(--panel-3);border-radius:12px;max-width:440px;color:var(--muted);font-size:.92rem}.how-to b{color:var(--ink)}.how-to li{display:flex;gap:10px;align-items:baseline}.how-to .bullet{color:var(--gold)}.btn{font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:13px 22px;border-radius:10px;border:2px solid var(--gold-deep);color:#201406;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 4px 0 var(--gold-deep),0 8px 16px #0006;transition:transform .06s ease,box-shadow .06s ease}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-deep),0 4px 10px #0006}.btn-ghost{color:var(--ink);background:var(--panel-2);border-color:var(--panel-3);box-shadow:0 4px #1a130c,0 8px 16px #0006}.btn-ghost:active{box-shadow:0 1px #1a130c}.btn:focus-visible,.icon-btn:focus-visible,.option:focus-visible,.dpad-btn:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px}.icon-btn{font-size:1.1rem;line-height:1;width:40px;height:40px;display:grid;place-items:center;border-radius:9px;border:2px solid var(--panel-3);background:var(--panel-2);color:var(--ink)}.icon-btn:active{transform:translateY(2px)}.game-screen{gap:12px}.hud{width:100%;max-width:560px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--panel);border:2px solid var(--panel-3);border-radius:12px}.hud-left{display:flex;flex-direction:column;gap:2px;min-width:0}.hud-title{font-weight:700;color:var(--gold);letter-spacing:.04em;font-size:.9rem;text-transform:uppercase}.hud-maze{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-right{display:flex;align-items:center;gap:8px}.hud-stat{font-weight:700;color:var(--ink);background:var(--bg-2);padding:8px 10px;border-radius:9px;border:2px solid var(--panel-3);white-space:nowrap}.board-wrap{padding:10px;border-radius:14px;background:linear-gradient(180deg,#322517,#241a10);border:3px solid var(--stone-dark);box-shadow:inset 0 0 0 2px #4b3a26,0 10px 30px #00000080}.board{--tile: 40px;--w: 13;--h: 13;position:relative;width:calc(var(--w) * var(--tile));height:calc(var(--h) * var(--tile));display:grid;background:#0d0a07}.tile{width:var(--tile);height:var(--tile);background-size:cover;background-repeat:no-repeat;image-rendering:pixelated}.tile.walkable{cursor:pointer}.tile.exit{animation:exitGlow 1.4s ease-in-out infinite}@keyframes exitGlow{0%,to{box-shadow:inset 0 0 6px 1px #f9e08a59}50%{box-shadow:inset 0 0 12px 3px #f9e08abf}}.hero,.monster{position:absolute;top:0;left:0;width:var(--tile);height:var(--tile);background-size:cover;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none;transform:translate(calc(var(--hx, 1) * var(--tile)),calc(var(--hy, 1) * var(--tile)))}.hero{z-index:5;transform:translate(calc(var(--hx, 1) * var(--tile)),calc(var(--hy, 1) * var(--tile))) scaleX(var(--face, 1));transition:transform .13s ease;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}.hero.warp{transition:none}.monster{z-index:4;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5));animation:monsterBob 1.6s ease-in-out infinite}.monster.hidden{display:none}.monster.cleared{filter:grayscale(1) brightness(1.4) contrast(.85) drop-shadow(0 3px 2px rgba(0,0,0,.5));opacity:.92;animation:none}@keyframes monsterBob{0%,to{margin-top:0}50%{margin-top:-2px}}.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:6px;justify-content:center}.dpad-btn{font-size:1.2rem;border-radius:10px;border:2px solid var(--panel-3);background:var(--panel-2);color:var(--gold);box-shadow:0 3px #17110a}.dpad-btn:active{transform:translateY(2px);box-shadow:0 1px #17110a}.dpad-btn.up{grid-area:1 / 2}.dpad-btn.left{grid-area:2 / 1}.dpad-btn.down{grid-area:2 / 2}.dpad-btn.right{grid-area:2 / 3}.hint{margin:0;color:var(--muted);font-size:.78rem;text-align:center;max-width:42ch}.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:18px;background:#080503c7;backdrop-filter:blur(2px)}.modal{opacity:0;transition:opacity .14s ease}.modal.open{opacity:1}.modal-card,.overlay-card{width:100%;max-width:440px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:3px solid var(--gold-deep);border-radius:16px;padding:20px;box-shadow:0 18px 50px #0009}.modal-card:focus{outline:none}.modal.open .modal-card{animation:pop .16s ease}@keyframes pop{0%{transform:scale(.94)}to{transform:scale(1)}}.modal.shake .modal-card{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(7px)}60%{transform:translate(-5px)}80%{transform:translate(3px)}}.monster-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}.portrait{flex:0 0 auto;width:68px;height:68px;background-size:cover;image-rendering:pixelated;border-radius:10px;background-color:#17110a;border:2px solid var(--panel-3);box-shadow:inset 0 0 10px #0009}.monster-name{margin:0 0 2px;color:var(--gold);font-size:1.25rem;letter-spacing:.03em}.monster-blurb{margin:0;color:var(--muted);font-size:.84rem;line-height:1.35}.question-prompt{margin:4px 0 14px;font-size:1.05rem;font-weight:700;line-height:1.35}.options{display:grid;gap:9px}.option{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;font-size:.98rem;color:var(--ink);background:var(--panel-3);border:2px solid #4b3a26;border-radius:10px;transition:transform .06s ease,background .1s ease,border-color .1s ease}.option:hover:not(:disabled){border-color:var(--gold);transform:translate(2px)}.option:disabled{cursor:default;opacity:.95}.option-key{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--bg-2);border:1px solid #4b3a26;color:var(--gold);font-size:.8rem;font-weight:700}.option.correct{background:#7fd05a29;border-color:var(--good);color:var(--good)}.option.correct .option-key{color:var(--good);border-color:var(--good)}.option.wrong{background:#ef5b3c29;border-color:var(--bad);color:var(--bad)}.feedback{margin-top:16px;padding-top:14px;border-top:2px dashed #4b3a26;display:grid;gap:10px}.feedback-title{margin:0;font-size:1.15rem;letter-spacing:.03em}.feedback-title.good{color:var(--good)}.feedback-title.bad{color:var(--bad)}.feedback-lore{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}.feedback .btn{justify-self:start}.overlay-card{text-align:center}.overlay-card h2{margin:0 0 8px;color:var(--gold);font-size:1.8rem;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 2px 0 var(--gold-deep)}.overlay-card p{margin:0 0 18px;color:var(--muted)}.overlay-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}@media(max-width:480px){.dpad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px)}.hud-title{font-size:.8rem}}@media(prefers-reduced-motion:reduce){.hero,.monster,.tile.exit,.modal,.modal-card{animation:none!important;transition:none!important}}