:root{color-scheme:dark;--cream:#fff3d2;--gold:#f3b743;--ink:#1e2430;--red:#b94d3e}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#17243a;color:var(--cream);font:16px/1.4 "Avenir Next Condensed","Gill Sans",sans-serif}.shell{width:min(100%,1040px);margin:auto;padding:18px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #536074}h1,h2,p{margin:0}.eyebrow{font-size:.72rem;letter-spacing:.16em;color:var(--gold);font-weight:700}h1{font-family:Palatino,"Palatino Linotype",Georgia,serif;font-size:clamp(2rem,5vw,3.3rem)}button{font:inherit;cursor:pointer;border:0;border-radius:7px;background:var(--gold);color:#24202a;padding:.65em 1em;font-weight:800}.icon,.secondary{background:transparent;border:1px solid #758096;color:var(--cream)}.hud{display:flex;gap:clamp(10px,3vw,30px);align-items:center;flex-wrap:wrap;padding:12px 0}.hud strong{color:var(--gold);margin-left:4px}.meter{height:17px;width:clamp(100px,18vw,180px);border:2px solid var(--cream);border-radius:12px;padding:2px}.meter i{display:block;background:var(--gold);height:100%;width:0;border-radius:8px;transition:width .25s}.game-wrap{position:relative;max-width:900px;margin:auto;box-shadow:0 12px 35px #0008}canvas{display:block;width:100%;height:auto;background:#263b4c;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:14px;background:#111a26d9}.hidden{display:none}.panel{max-width:720px;background:#27354a;border:2px solid var(--gold);border-radius:12px;padding:clamp(18px,4vw,34px);text-align:center;box-shadow:0 8px 0 #121a28}.panel h2{font:clamp(1.5rem,4vw,2.2rem) Palatino,"Palatino Linotype",Georgia,serif;margin:.15em 0}.panel p:not(.eyebrow){margin:.8em auto;max-width:55ch}.characters{display:flex;gap:12px;justify-content:center;margin:20px 0}.character{width:30%;min-width:110px;background:#f3e1b6;color:#202b3b;display:grid;gap:4px;justify-items:center}.character:hover,.character:focus-visible{outline:3px solid white;transform:translateY(-3px)}.character small{font-weight:500}.portrait{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:2rem Palatino,"Palatino Linotype",Georgia;color:white;background:#5d8a79}.tomas{background:#576eaa}.eliska{background:#a55c5a}.keys{font-size:.85rem;color:#d2d9e1}.compact{max-width:380px}.compact button{margin:5px}.help{max-width:760px;margin:20px auto;color:#dce2e9}.help h2{font-size:1.1rem;color:var(--gold)}@media(max-width:500px){.shell{padding:10px}.hud{font-size:.85rem;gap:10px}.characters{gap:7px}.character{padding:8px 3px;font-size:.9rem}.portrait{width:44px;height:44px}.panel{padding:15px}.keys{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}