:root{color-scheme:dark;--gold:#eed299;--mint:#ace3cf;--muted:#8ba7b5;--line:#294450}*{box-sizing:border-box}body{margin:0;background:#061019;color:#e1eeec;font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}button,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;border:1px solid #3e5964;border-radius:10px;background:#16313d;color:#e7f2ed;padding:12px 19px;min-height:45px;font-weight:650}button:hover{background:#244957;border-color:#aedacb}button:disabled{opacity:.4;cursor:default}button.primary{background:#dfc490;color:#14242a;border-color:#f5dfb5}button.danger{color:#ffb4b0}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #f6db98;outline-offset:4px}a{color:#b3cfc9;text-decoration:none}.masthead{height:59px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1b3440;background:#08161fe6}.brand{letter-spacing:3px;font-size:13px;color:var(--gold)}.masthead button{padding:6px 14px;min-height:36px}.back{font-size:13px}#app{height:100dvh;background:radial-gradient(ellipse at 50% 60%,#102d37 0,transparent 67%)}#play{height:calc(100dvh - 59px);display:flex;flex-direction:column;align-items:center;padding:12px 16px 8px;gap:6px;max-width:920px;margin:auto}.hud{display:flex;justify-content:space-between;width:min(100%,680px);flex-shrink:0}.hud div{display:flex;flex-direction:column;gap:0}.hud small{font-size:10px;letter-spacing:2px;color:var(--muted)}.hud strong{font-size:22px;font-weight:550;font-variant-numeric:tabular-nums}.hud div:last-child{text-align:right}.stage-line{width:min(100%,680px);display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#a5bdbd}.stage-line #stage{color:var(--gold)}#board{position:relative;min-height:0;flex:1;width:100%;display:flex;align-items:center;justify-content:center}canvas{display:block;max-width:100%;max-height:100%;width:auto;height:100%;aspect-ratio:1;object-fit:contain;border-radius:16px;box-shadow:0 18px 55px #0008;border:1px solid #31505c;touch-action:none}#countdown{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;font-size:58px;color:#fff5d7;text-align:center;text-shadow:0 2px 18px #000;font-family:Georgia,serif}#countdown[hidden]{display:none}#powers{display:flex;justify-content:center;gap:6px;min-height:29px;flex-wrap:wrap;flex-shrink:0}.power{border:1px solid #476576;border-radius:20px;padding:3px 11px;font-size:12px;background:#16303d}.power.warn{border-color:#ffe29d;color:#ffe29d}.under{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:12px;min-height:20px;text-align:center;color:var(--mint)}#bonus{color:var(--gold)}#touch{display:none;gap:7px;flex-shrink:0}#touch button{width:62px;min-height:51px;touch-action:none;user-select:none;font-size:20px;padding:4px}.overlay{position:fixed;inset:59px 0 0;background:#030c13cb;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:5}.overlay[hidden]{display:none}#panel{width:min(680px,100%);max-height:100%;overflow:auto;background:linear-gradient(145deg,#142e37f5,#081720fa);border:1px solid #3d555d;border-radius:24px;padding:32px 38px;box-shadow:0 20px 90px #0009}.eyebrow{color:#d7bd86;font-size:11px;letter-spacing:4px;text-transform:uppercase;margin:0 0 9px}h1{font:normal clamp(42px,7vw,67px)/1 Georgia,serif;color:#f2e8cc;margin:8px 0 14px}h2{font:normal 34px/1.1 Georgia,serif;color:#f2e8cc;margin:8px 0 16px}h3{font-size:16px;color:#d9c89d;margin:18px 0 5px}p{color:#b7c9cb;margin:10px 0 18px}.hero{display:flex;align-items:center;gap:25px}.hero img{width:108px;filter:drop-shadow(0 0 18px #e3ca7a33)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.actions button{flex:1 1 auto}.muted,.note{font-size:12px;color:var(--muted)}.chips{display:flex;gap:8px;margin:17px 0}.chips span{border:1px solid #34515c;border-radius:20px;padding:5px 10px;font-size:11px;color:#c6d9d1}label.setting{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #29424c;gap:12px}select{background:#0d2430;color:#edeee1;padding:9px;border-radius:7px;border:1px solid #527078}input[type=checkbox]{width:22px;height:22px;accent-color:#cdb57d}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.level-grid button{padding:10px 3px;min-height:60px}.level-grid small{display:block;font-size:9px;color:#bac5bd;font-weight:400}table{width:100%;border-collapse:collapse;font-size:13px}td,th{padding:8px;text-align:left;border-bottom:1px solid #2a4551}.key{color:#eed299}.guide{font-size:14px}.guide p{margin:5px 0 10px}.enemy-key{display:grid;grid-template-columns:1fr 1fr;gap:6px}.enemy-key span{padding:9px;background:#0a202a;border-radius:8px;font-size:12px}body.reduced-motion *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
@media(pointer:coarse),(max-width:700px){#touch{display:flex}.masthead{height:45px;padding:0 12px}.brand{font-size:10px;letter-spacing:1.5px}.back{font-size:11px}.masthead button{font-size:12px;padding:4px 9px;min-height:32px}#play{height:calc(100dvh - 45px);padding:7px 8px;gap:5px}.overlay{inset:45px 0 0;padding:12px}#panel{padding:23px 21px;border-radius:18px}.hud strong{font-size:19px}.hud small{font-size:9px;letter-spacing:1px}.hero{gap:15px}.hero img{width:76px}.stage-line{font-size:10px}.power{padding:2px 7px;font-size:10px}.under{font-size:11px}#powers{min-height:22px}.chips{gap:5px}.chips span{font-size:10px;padding:5px 7px}}
@media(max-height:500px) and (orientation:landscape){#play{padding:5px 105px 3px 12px;gap:2px}.hud{position:absolute;right:10px;top:56px;width:84px;display:grid;grid-template-columns:1fr;gap:3px}.hud div,.hud div:last-child{text-align:center}.hud strong{font-size:17px}.stage-line{max-width:400px}#touch{position:absolute;left:8px;bottom:15px;display:grid;grid-template-columns:43px 43px;gap:4px}#touch button{width:43px;min-height:44px;font-size:15px}.under{font-size:10px;min-height:15px}#powers{min-height:20px}#panel{max-width:640px}.masthead{height:40px}#play{height:calc(100dvh - 40px)}.overlay{inset:40px 0 0}.hero img{width:60px}}