:root{--desk:#e9e4d8;--paper:#fbf8f1;--rule:#c7d6e8;--ink-a:#2446a6;--ink-b:#c0392b;--graphite:#6f6b64;--text:#2b2a27;--muted:#7a756b;--line:#d9d2c3;--gold:#d49a00;--bad:#d23a3a;--hand:"Patrick Hand", "Comic Sans MS", system-ui, sans-serif;--kai:"LXGW WenKai TC", "Kaiti TC", "STKaiti", "KaiTi", "BiauKai", serif}*{box-sizing:border-box}html,body{background:var(--desk);color:var(--text);-webkit-tap-highlight-color:transparent;margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,PingFang HK,sans-serif}button{font:inherit;color:inherit;cursor:pointer}.muted{color:var(--muted)}.ink-a{color:var(--ink-a)}.ink-b{color:var(--ink-b)}.layout{grid-template-columns:1fr;gap:12px;max-width:1100px;margin:0 auto;padding:10px 12px 24px;display:grid}.board-col{flex-direction:column;gap:6px;min-width:0;display:flex}.board-frame{justify-content:center;display:flex;position:relative}#board{aspect-ratio:216/302;filter:drop-shadow(0 2px 6px #3c321e2e);touch-action:manipulation;-webkit-user-select:none;user-select:none;width:auto;height:min(56dvh,139.8vw - 22.368px);display:block}#board.targeting{cursor:crosshair}@media (width>=900px){.layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start;min-height:100vh}#board{height:calc(100vh - 100px)}.panel{position:sticky;top:10px}}@media (width<=899px){html,body{height:100%;overflow:hidden}.layout{flex-direction:column;gap:4px;height:100dvh;padding:6px 8px 0;display:flex}.board-col{flex:none;gap:2px}.strip{white-space:nowrap;flex-wrap:nowrap;gap:8px;font-size:13px}.strip .chars{font-size:15px}.panel{border-radius:12px 12px 0 0;flex:1 1 0;min-height:0;padding:10px 12px 0;overflow-y:auto}.panel .primary{box-shadow:0 -8px 10px 6px var(--paper);margin-bottom:8px;position:sticky;bottom:8px}.steps{grid-template-columns:repeat(2,1fr);font-size:14px}}.strip{flex-wrap:wrap;align-items:center;gap:4px 12px;width:100%;max-width:520px;margin:0 auto;padding:0 4px;font-size:14px;display:flex}.strip .dot{background:currentColor;border-radius:50%;width:10px;height:10px}.strip .chars{font-family:var(--kai);letter-spacing:1px;font-size:17px}.strip .chars .gone{opacity:.35;text-decoration:line-through}.strip .pts{font-family:var(--hand);margin-left:auto;font-size:18px}.strip .pts small{color:var(--muted);font-size:14px}.strip .land,.strip .wall-hp{color:var(--muted);font-size:13px}@media (width<=420px){.strip .land{display:none}}.paper{fill:var(--paper)}.rule{stroke:var(--rule);stroke-width:.25px;opacity:.7}.ground{fill:currentColor;opacity:.045}.fold{stroke:#b5ae9f;stroke-width:.3px;stroke-dasharray:2 2}.frontline{fill:none;stroke:#3a3833;stroke-width:.7px}.rough{filter:url(#rough)}.piece>*{fill:currentColor;fill-opacity:.1;stroke:currentColor;stroke-width:1.1px;stroke-linecap:round;stroke-linejoin:round}.piece line{fill:none}.piece .dash{stroke-dasharray:3 2.5}.piece.pencil{opacity:.55}.piece.pencil>*{stroke-dasharray:2 1.2}.piece.ghost{color:var(--graphite);opacity:.8}.piece.ghost>*{stroke-dasharray:1.6 1.2;fill-opacity:.05}.piece.plane-ready>*{fill-opacity:.35;stroke-width:.5px}.draw-in>*{stroke-dasharray:150;stroke-dashoffset:150px;animation:.9s forwards draw}@keyframes draw{to{stroke-dashoffset:0}}.sel-ring{fill:none;stroke:var(--gold);stroke-width:.8px;stroke-dasharray:2 1.5}.fp{fill:none;stroke:#9a948a;stroke-width:.25px;stroke-dasharray:1 1}.fp-ghost{fill:#00000008;stroke:var(--graphite);stroke-width:.3px;stroke-dasharray:1 1}.preview.bad .piece.ghost,.preview.bad .bar-ghost{color:var(--bad)}.preview.bad .fp-ghost{stroke:var(--bad);fill:#d23a3a14}.aim{stroke:var(--graphite);stroke-width:.5px;stroke-dasharray:2 1.5}.crosshair{fill:none;stroke:var(--graphite);stroke-width:.5px}.aim.beyond,.crosshair.beyond{opacity:.35;stroke-dasharray:.8 1.6}.preview.bad .aim,.preview.bad .crosshair{stroke:var(--bad)}.bar{stroke:currentColor;stroke-width:2px;stroke-linecap:round}.bar-ghost{stroke:currentColor;stroke-width:1.6px;stroke-dasharray:2 1.5;stroke-linecap:round;opacity:.75}.band{fill:url(#hatch);stroke:var(--graphite);stroke-width:.4px;stroke-dasharray:2 2}#hatch line{stroke:var(--graphite);stroke-width:.5px}.preview.bad .band{stroke:var(--bad)}.tian rect,.tian line{fill:none;stroke:currentColor;stroke-width:.6px}.tian rect{fill:var(--paper);fill-opacity:.7}.castle-grounds{fill:#78643c0f;stroke:#9a948a;stroke-width:.3px;stroke-dasharray:1.2 1.2}.front-label{font:4.5px var(--kai);fill:#3a3833;opacity:.75;text-anchor:end}.push-hint path{fill:none;stroke:currentColor;stroke-width:.7px;stroke-linecap:round;stroke-linejoin:round}.push-hint text,text.push-hint{font:5.6px var(--hand);fill:currentColor;text-anchor:middle}text.push-hint.muted{fill:var(--muted)}.char{font-family:var(--kai);text-anchor:middle;dominant-baseline:central;fill:currentColor;font-size:12px}.char.gone{opacity:.45}.scratch{fill:none;stroke:currentColor;stroke-width:1.1px;stroke-linecap:round}.wreck{opacity:.6}.wreck .scratch{stroke:#222;stroke-width:1.3px}.wall path{fill:none;stroke:currentColor;stroke-width:.9px;stroke-linejoin:round;stroke-linecap:round}.wall.ghost{color:var(--graphite);opacity:.7}.wall.ghost path{stroke-dasharray:2 1.5}.crack{fill:none;stroke:#2b2a27;stroke-width:.6px;stroke-linejoin:round}.badge{font:6px var(--hand);fill:currentColor}.fx-shot{stroke:currentColor;stroke-width:.9px;stroke-linecap:round}.fx-spark{stroke:var(--gold);stroke-width:.7px}.fx-burst{fill:none;stroke:#222;stroke-width:1px}.fx-label{font:6px var(--hand);fill:#555;text-anchor:middle}.fx-band{fill:#d49a002e;stroke:var(--gold);stroke-width:.4px}.fx-float{font:10px var(--hand);fill:currentColor;text-anchor:middle}#caption{color:#fff;font-family:var(--kai);opacity:0;pointer-events:none;white-space:nowrap;background:#2b2a27e6;border-radius:999px;padding:5px 14px;font-size:17px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#caption.show{animation:1.5s forwards caption}@keyframes caption{0%{opacity:0}12%,65%{opacity:1}to{opacity:0}}#caption small{opacity:.75;font-family:system-ui,sans-serif;font-size:12px}#caption .n,.steps .n{border:1px solid;border-radius:50%;place-items:center;width:20px;height:20px;margin-right:4px;font:12px system-ui;display:inline-grid}.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 1px 3px #3c321e14}.panel:empty{display:none}.panel h3{font:18px var(--hand);margin:14px 0 6px}.turn-line{align-items:baseline;gap:6px;font-size:15px;display:flex}.timer{font:18px var(--hand);margin-left:auto}.timer.low{color:var(--bad)}.points{margin:4px 0 8px;font-size:14px}.points b{font:26px var(--hand);margin-right:2px}.hint{color:var(--muted);min-height:1.4em;margin-bottom:8px;font-size:13.5px}.hint.err{color:var(--bad)}.tip{background:#fff7dc;border:1px solid #f0dfa6;border-radius:8px;margin-bottom:10px;padding:7px 10px;font-size:13.5px;line-height:1.45}.tip>b:first-child{font:15px var(--hand);color:#9a6b00;margin-right:4px}.banner{background:var(--bad);color:#fff;border-radius:8px;margin-bottom:8px;padding:6px 10px;font-size:13.5px}.strip .tag{color:#2f6b2a;background:#e3f1e0;border-radius:999px;padding:1px 7px;font-size:11.5px}.strip .tag.off{color:#9b2c22;background:#f6dcd9}.builds{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.build{border:1px solid var(--line);background:#fff;border-radius:8px;justify-items:center;gap:0;padding:6px 2px 5px;display:grid;position:relative}.build .zh{font:20px/1.1 var(--kai)}.build .en{color:var(--muted);font-size:11px}.build .cost{background:var(--text);color:#fff;border-radius:9px;min-width:18px;height:18px;padding:0 4px;font:11px/18px system-ui;position:absolute;top:-6px;right:-4px}.build.on,.act.on{border-color:var(--gold);box-shadow:0 0 0 2px #d49a0059}button:disabled{opacity:.45;cursor:not-allowed}.selected-card{border:1px dashed var(--gold);background:#fffdf5;border-radius:8px;margin-top:10px;padding:10px;font-size:14px}.acts{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.act{border:1px solid var(--line);background:#fff;border-radius:8px;flex:1 1 0;gap:2px;min-width:86px;padding:7px 6px;display:grid}.act small{color:var(--muted);font-size:10.5px;line-height:1.2}.orders,.log{margin:0;padding:0;font-size:14px;list-style:none}.orders li{border-bottom:1px dotted var(--line);align-items:center;gap:8px;padding:5px 0;display:flex}.orders li span:first-child{flex:1}.orders .cost{font:16px var(--hand);color:var(--muted)}.x{color:var(--muted);background:0 0;border:none;padding:0 4px;font-size:18px;line-height:1}.primary{background:var(--text);color:#fff;border:none;border-radius:10px;width:100%;margin-top:14px;padding:11px;font-size:16px;display:block}.link.danger{color:var(--bad)}.primary.danger{background:var(--bad)}.card .primary+.primary{margin-top:8px}.ghost-btn{color:var(--text);border:1px solid var(--text);background:0 0}.link{color:var(--muted);background:0 0;border:none;padding:0;font-size:13px;text-decoration:underline}.last-turn{margin-top:12px;font-size:13.5px}.last-turn summary{cursor:pointer;color:var(--muted)}.last-turn ul{margin:6px 0 0;padding-left:18px}.footer{color:var(--muted);text-align:center;margin-top:14px;font-size:13px}.steps{font-family:var(--kai);gap:3px;margin:10px 0;padding:0;font-size:16px;list-style:none;display:grid}.steps li{opacity:.4}.steps li.done{opacity:.7}.steps li.now{opacity:1;font-weight:700}.steps small{color:var(--muted);font:12px system-ui}.log li{border-bottom:1px dotted var(--line);padding:3px 0;animation:.3s fade-in}@keyframes fade-in{0%{opacity:0;transform:translateY(3px)}}#overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;background:#28241e73;place-items:center;padding:16px;display:none;position:fixed;inset:0;overflow-y:auto}#overlay.show{display:grid}#overlay.opaque{background:var(--desk);-webkit-backdrop-filter:none;backdrop-filter:none}.card{background:var(--paper);border-radius:14px;width:100%;max-width:460px;padding:22px;box-shadow:0 10px 40px #281e0a40}.wordmark{font:22px var(--hand);letter-spacing:3px;text-align:center;color:var(--ink-a);margin:-2px 0 4px}.title{font:700 44px/1.1 var(--kai);text-align:center;letter-spacing:4px;margin:0 0 4px}.card fieldset{border:1px solid var(--line);border-radius:8px;gap:6px;margin:12px 0 0;padding:8px 12px 10px;display:grid}.card legend{font:16px var(--hand);padding:0 4px}.card .row{flex-wrap:wrap;gap:14px;display:flex}.card select{font:inherit;margin-left:4px}.card details{margin-top:14px;font-size:14px}.card details summary{cursor:pointer;color:var(--muted)}.help{padding-left:18px;font-size:14px}.help li{margin-bottom:5px}.handover,.center{text-align:center}.credit{text-align:center;color:var(--muted);margin:14px 0 0;font-size:13px}.credit-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;line-height:1;display:flex}.credit-row .link{line-height:1}.ig-link{color:var(--ink-a);align-items:center;gap:4px;font-weight:600;text-decoration:none;display:inline-flex}.ig-link:hover span{text-decoration:underline}.ig{fill:none;stroke:currentColor;stroke-width:2px;width:15px;height:15px}.ig .dot{fill:currentColor;stroke:none}.about p{font-size:14.5px;line-height:1.55}.about .maker{font:18px var(--hand);margin-top:16px}.ig-btn{border:1px solid var(--ink-a);border-radius:10px;justify-content:center;gap:8px;padding:11px;font-size:15px;display:flex}.ig-btn .ig{width:18px;height:18px}.lang-row{text-align:right;margin:-8px -6px 0 0}.lobby .code{letter-spacing:8px;text-align:center;margin:2px 0 12px;font:700 46px/1.1 ui-monospace,SF Mono,Menlo,monospace}.link-row,.join-row{align-items:center;gap:6px;display:flex}.link-row input,.join-row input{border:1px solid var(--line);background:#fff;border-radius:8px;flex:1;min-width:0;padding:8px;font:14px ui-monospace,Menlo,monospace}.join-row{flex-wrap:wrap;margin-top:12px}.join-row input{text-transform:uppercase;letter-spacing:2px;flex:0 110px}.link-row button,.join-row button{border:1px solid var(--text);background:#fff;border-radius:8px;padding:8px 14px}.lobby .waiting{margin-top:14px}.handover .big{font:64px var(--hand)}
