*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 22%,#2c4148,#15242e 62%,#101c25);color:#edf0dc;font:15px/1.5 system-ui,'Malgun Gothic',sans-serif;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));-webkit-tap-highlight-color:transparent}button{font:inherit;color:#f3edda;background:#30464a;border:1px solid #69817a;border-bottom:3px solid #172c33;padding:11px 16px;cursor:pointer;font-weight:730;border-radius:3px;min-height:42px;letter-spacing:-.02em}button:hover,button:focus-visible{background:#435d58;color:#fff8d4;outline:2px solid #ebc489;outline-offset:1px}button:disabled{opacity:.55;cursor:default}button.primary{background:#f0c781;color:#342f32;border-color:#ffe2a4;border-bottom-color:#a87550}button.primary:hover{background:#ffdc9c}button.primary span{font-size:.75em;margin-right:8px}button.quiet{background:transparent;border:1px solid #586c6c;color:#d1daca}button:active{transform:translateY(1px)}[hidden]{display:none!important}#app{width:min(100%,920px);position:relative}.screen,#arena{box-shadow:0 12px 50px #07101668;overflow:hidden;background:#20323b;border:1px solid #53666a;border-radius:6px}.landing{max-width:735px;margin:auto;background:#22343b}.mast,footer,.row,.paneHead,.actions,.stats{display:flex;align-items:center;justify-content:space-between;gap:10px}.mast{padding:12px 22px;background:#1d3039}.mast>b{font-size:14px;color:#e8dcb9}.mast small,.eyebrow,footer,.plate,.sector{font:700 10px/1.6 ui-monospace,monospace;letter-spacing:.14em;color:#a2c4b5}.mark{display:inline-block;width:10px;height:10px;margin-right:9px;background:#ebc37e;box-shadow:inset -3px -3px #ae7e64;transform:rotate(45deg)}canvas{image-rendering:pixelated;display:block}.cover{position:relative;background:#384560;border-block:2px solid #627370;overflow:hidden}.cover canvas{width:100%;height:auto}.plate{position:absolute;bottom:7px;right:9px;background:#1b3039e8;color:#e2d5b0;padding:3px 7px;font-size:9px}.welcome{padding:17px 25px 10px}.eyebrow{color:#ecc786}.welcome h1,.paper h2{margin:4px 0;font-weight:900;font-size:clamp(28px,5.2vw,46px);letter-spacing:-.075em;line-height:1.18}.welcome h1 em{font-style:normal;color:#efd29d}.welcome p,.paper p{color:#c7d6cf;margin:7px 0 5px}.landing .actions{padding:5px 25px 17px}.actions>button{flex:1}.actions>.primary{flex:1.55}.landing footer{border-top:1px solid #496066;padding:8px 25px;color:#a3b8b5;letter-spacing:.05em}.paper{padding:clamp(16px,3vw,30px);background:#22353e}.paper h2{font-size:clamp(23px,4vw,35px)}.paper h3{margin:.7em 0 .2em}.paper .muted,.sub{color:#a8bdbb;font-size:13px}#arena{height:min(82svh,688px);min-height:305px;display:flex;flex-direction:column;overscroll-behavior:none}.hud{display:flex;align-items:center;gap:16px;padding:8px 14px;background:#20323b;border-bottom:2px solid #556c70}.vitals{flex:1}.hpLine{display:flex;align-items:center;gap:8px}.hpLine>i,.meter{display:block;height:8px;background:#18282e;box-shadow:inset 0 0 0 1px #566a69}.hpLine>i{width:min(190px,58%)}u{display:block;height:100%;text-decoration:none}#hpbar{background:#e99f83;border-top:2px solid #ffcc98}#hp,#cd,#next,.time b,#score{font:700 14px/1.4 ui-monospace,monospace}.time{text-align:right}.time span,.readout small{display:block;color:#9fb8b3;font-size:10px}.time b{font-size:22px}.field{flex:1;min-height:100px;position:relative;isolation:isolate;background:#386875}#world,#touch{width:100%;height:100%;position:absolute;inset:0}#touch{display:none;pointer-events:none;touch-action:none}#zone{pointer-events:auto;touch-action:none;position:absolute;left:0;bottom:0;width:65%;height:60%;user-select:none}#stick{position:absolute;left:57px;top:calc(100% - 56px);width:68px;height:68px;transform:translate(-50%,-50%);border:2px solid #f3f0d578;background:#20364155;border-radius:50%;display:grid;place-items:center;pointer-events:none}#knob{width:28px;height:28px;background:#dff0d788;border:2px solid #f2f0cfb0;border-radius:50%}#dashkey{position:absolute;bottom:22px;right:18px;pointer-events:auto;border-radius:50%;width:66px;height:66px;touch-action:none;background:#334d53b5;border:2px solid #dfc49caa;color:#fff0ca}.touch #touch{display:block}.readout{display:flex;align-items:center;justify-content:space-around;gap:9px;padding:8px 12px;border-top:2px solid #647970}.catch{display:flex;align-items:center;gap:5px}.catch canvas{width:46px;height:23px}.catch b{font-size:12px}.meter{margin-top:3px;height:3px}#castbar{background:#a4d3ba}#toast,#bossbar{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;background:#21323de8;border:1px solid #d9bc88;color:#ffe5ae;padding:4px 10px;font-size:12px;font-weight:800;pointer-events:none}#toast{top:10px}#bossbar{top:45px;font-size:10px;padding:2px 8px;min-width:100px;color:#f7d5cc;border-color:#da998c}#bossbar i{display:block;height:3px;background:#ea947a}#modal{position:absolute;inset:0;z-index:5;background:#0b1824b5;display:grid;place-items:center;padding:12px}#dialog{width:min(100%,500px);border:1px solid #a79f85;border-top:4px solid #dfbc85;border-radius:3px;max-height:94%;overflow:auto}.stack{display:grid;gap:8px;margin-top:14px}.stack button{text-align:left}.stats{padding:12px 0;justify-content:flex-start;gap:20px}.stats small{display:block;color:#a2b7b2}.stats b{color:#f3d292}.tabs{display:flex;gap:4px;margin:15px 0 6px}.tabs button{flex:1;padding:6px 3px;font-size:13px}.tabs .on,.node.selected{border-color:#f4cc88;background:#485a52}.graph{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:17px 14px;margin:10px 0;padding:10px;background-color:#1d3039;background-image:radial-gradient(#405459 1px,transparent 1px);background-size:14px 14px;border:1px solid #4c6365;border-radius:3px}.graph svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.node{position:relative;justify-self:center;min-width:100px;max-width:100%;padding:5px 12px;font-size:13px;white-space:nowrap;background:#2b4149}.node.lock{color:#a3b5b6;border-style:dashed}.node.owned{border-color:#8ec4a9}.node small{display:block;font:10px monospace;color:#c2c9ac}.detail{border-left:3px solid #bfaa80;padding:6px 12px;background:#294049}.detail b{color:#f3d8ab}.detail p{font-size:14px;margin:2px 0 6px}.settings dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px}.settings dt{color:#efd19e}.settings dd{margin:0;color:#cfdbd3}.choice small{display:block;font-weight:500;color:#c4d6cc}.choice b{color:#f6d7a8}#warning{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);background:#773f43;padding:6px;z-index:8}#labtools{margin-top:10px;font-size:12px}body:has(#arena:not([hidden])){overflow:hidden}.touch #arena{height:calc(100svh - 26px)}@media(max-width:600px){body{padding:6px}.mast{padding:10px 13px}.mast small{font-size:8px}.welcome{padding:16px 15px 9px}.welcome p{font-size:13px}.landing .actions{padding:4px 15px 14px;flex-wrap:wrap}.landing .actions .primary{flex:1 0 100%}.landing footer{padding:7px 13px;font-size:9px}.readout{padding:6px 3px;gap:3px}.catch canvas{width:34px;height:17px}.hud{padding:5px 9px}.touch #arena,#arena{height:calc(100svh - 12px)}.paper{padding:14px}.tabs button{font-size:12px}.node{min-width:92px}.paneHead .quiet{padding:4px 8px}.actions button{padding-inline:6px}.catch b{font-size:11px}}@media(max-height:520px) and (orientation:landscape){body{padding:3px}.landing{max-width:700px;display:grid;grid-template-columns:1.05fr 1fr}.mast,.landing footer{grid-column:1/-1}.cover{grid-column:1;grid-row:2/4;display:grid;align-items:center;background:#304652}.welcome{padding:8px 14px}.welcome h1{font-size:27px}.landing .actions{padding:4px 11px 9px;gap:3px}.actions button{font-size:12px}.readout,.hud{padding:3px 10px}#arena,.touch #arena{height:calc(100svh - 6px);min-height:240px}.paper.screen{max-height:96svh;overflow:auto}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}