:root{color-scheme:light;--paper:#faf8f5;--surface:#fff;--ink:#292e2a;--muted:#646c65;--line:#d9ded8;--green:#187b63;--red:#c5534b;--soft:#eef2ec;font-family:"PingFang SC","Noto Sans CJK SC",sans-serif;font-size:14px;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input{font:inherit}button{min-height:44px;padding:8px 14px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--ink);cursor:pointer;font-weight:600}button:hover{border-color:var(--green);background:var(--soft)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--green);border-color:var(--green);color:white}.quiet{background:transparent;color:var(--muted)}button:focus-visible,input:focus-visible,summary:focus-visible,.arena:focus-visible{outline:3px solid #bd7c26;outline-offset:2px}#app{max-width:1100px;margin:auto;padding:16px}header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}.brand,.header-actions{display:flex;gap:10px;align-items:center}.brand{flex-shrink:0;color:var(--green)}h1{font-size:18px;margin:0;color:var(--ink);font-weight:750}h2{font-size:15px;margin:0 0 10px}p{line-height:1.65}.header-actions{flex-wrap:wrap;justify-content:flex-end}#roomLabel{color:var(--muted);font-size:13px}#notice{border-left:3px solid #bd7c26;background:#fff3d9;padding:8px 12px;margin:10px 0;overflow-wrap:anywhere}#lobby{max-width:640px;margin:32px auto 16px}.intro h2{font-size:26px;line-height:1.3}.intro p{color:var(--muted);margin:8px 0 24px}#joinForm{display:grid;grid-template-columns:1.3fr 1fr auto;gap:12px;align-items:end}label{display:grid;gap:8px;font-weight:600;font-size:13px}input{min-width:0;width:100%;height:44px;border:1px solid var(--line);border-radius:6px;padding:0 12px;background:white;color:var(--ink)}.demo{margin-top:32px}.demo svg{width:100%;display:block}.rules{color:var(--muted);text-align:center;font-size:13px}.matchline{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:44px}#connection{color:var(--muted);font-size:12px}.arena{position:relative;aspect-ratio:2/1;background:#f3f5ef;border:1px solid var(--line);overflow:hidden;isolation:isolate}canvas{width:100%;height:100%;position:absolute;inset:0;display:block;pointer-events:none}.scoreboard{position:absolute;top:14px;left:20px;right:20px;display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:start;pointer-events:none}.health>div{display:flex;gap:8px;justify-content:space-between;color:var(--green);font-size:14px}.health b{max-width:85%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.health.right>div{color:var(--red)}meter{width:100%;height:10px;display:block;margin-top:7px;background:#dce3dc;border:none;border-radius:0}meter::-webkit-meter-bar{background:#dce3dc;border:0;border-radius:0}meter::-webkit-meter-optimum-value{background:var(--green)}.right meter::-webkit-meter-optimum-value{background:var(--red)}meter::-moz-meter-bar{background:var(--green)}.right meter::-moz-meter-bar{background:var(--red)}#timer{text-align:center;font-size:26px;line-height:1.2;font-variant-numeric:tabular-nums}.overlay{position:absolute;inset:28% 5% auto;text-align:center;pointer-events:none}.overlay h2{font-size:clamp(18px,3.5vw,32px);margin:0;text-wrap:balance}.overlay p{margin:6px auto 12px;max-width:420px;font-size:13px}.overlay button{pointer-events:auto}.overlay.countdown h2{font-size:64px;color:var(--green)}#controlBar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:13px;min-height:44px}#keyHint{color:var(--muted)}#roleLabel{font-weight:600}#touchControls{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;touch-action:none;user-select:none}#touchControls>div{display:flex;gap:8px}#touchControls button{width:62px;height:52px;touch-action:none;font-size:16px}#touchControls .attack{background:var(--green);color:white;border-color:var(--green)}#touchControls button.pressed{background:#d9bd83;color:#292e2a}.actions{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 16px;border-bottom:1px solid var(--line)}.actions .quiet{margin-left:auto}.room-bottom{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:20px}.section-title{display:flex;justify-content:space-between;gap:8px}#playerCount{font-size:12px;color:var(--muted)}ol{list-style:none;padding:0;margin:0}li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;overflow-wrap:anywhere}li span{color:var(--muted);flex-shrink:0}li b{font-weight:600}li.self b{color:var(--green)}#players,#history{max-height:180px;overflow:auto}details{margin-top:20px;color:var(--muted);font-size:12px}summary{min-height:44px;display:flex;align-items:center;cursor:pointer}a{color:var(--green)}#app:fullscreen{width:100%;max-width:none;background:var(--paper);overflow:auto;padding:16px 4vw}.immersive{position:fixed;inset:0;z-index:20;background:var(--paper);overflow:auto;max-width:none!important}.immersive .arena,#app:fullscreen .arena{max-height:70vh;max-width:140vh;margin:auto} @media(max-width:680px){#app{padding:12px}header{gap:8px}.header-actions{gap:6px}h1{font-size:16px}.brand svg{width:24px}.header-actions button{padding:6px 10px}#roomLabel{font-size:12px}.scoreboard{top:8px;left:10px;right:10px;gap:10px;grid-template-columns:1fr 40px 1fr}.health>div{font-size:12px}#timer{font-size:22px}meter{height:8px;margin-top:4px}.overlay{inset:24% 4% auto}.overlay p{font-size:12px;margin:4px 0 6px}.overlay button{padding:6px 12px}.room-bottom{gap:20px;grid-template-columns:1fr}#keyHint{display:none}#joinForm{grid-template-columns:1fr 1fr}#joinForm button{grid-column:1/-1}.intro h2{font-size:24px}#lobby{margin-top:24px}#touchControls button{width:58px}.overlay.countdown h2{font-size:44px}#focus{padding:6px 12px}.room-bottom>section:last-child{margin-top:0}#history{max-height:130px}} @media(max-width:380px){#roomLabel{width:100%;text-align:right}.brand{gap:5px}header{align-items:flex-start}.arena{aspect-ratio:1.75}.overlay h2{font-size:18px}.scoreboard{gap:8px}#touchControls button{width:52px}#touchControls>div{gap:6px}.actions button{padding:6px 10px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#touchControls button{padding:6px;white-space:nowrap}#renameForm{display:flex;gap:8px;align-items:end;max-width:360px;margin:12px 0}#renameForm label{flex:1}#renameForm button{flex-shrink:0}
/* Match the original game's palette; the shared room is a compact frame around it. */
:root{color-scheme:dark;--paper:#0a0c14;--surface:#151925;--ink:#eef0f7;--muted:#a1a8bc;--line:#30364a;--green:#00aaff;--red:#ff5555;--soft:#1d2434}
input,select{background:var(--surface);color:var(--ink)}select{height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;min-width:0}#app{max-width:1280px}#lobby{max-width:840px}.intro h2{font-size:24px}.demo{display:block;width:100%;height:auto;border:1px solid var(--line);margin-top:24px}.arena{background:#050610;border-color:#30364a}.health>div{color:#6bceff}.health.right>div{color:#ff7777}.scoreboard{background:linear-gradient(#080b16e8,#080b1600);top:0;left:0;right:0;padding:14px 20px 24px}.scoreboard meter{background:#171c30}.scoreboard meter::-webkit-meter-bar{background:#171c30}.scoreboard .sp{height:5px;margin-top:5px}.scoreboard .sp::-webkit-meter-optimum-value{background:#a69aff}.scoreboard .guard{height:4px;margin-top:5px}.scoreboard .guard::-webkit-meter-optimum-value{background:#8493ae}.overlay{inset:27% 5% auto}.overlay h2,.overlay p{text-shadow:0 2px 5px #000,0 0 18px #000}.overlay h2{color:#fff}.overlay button{background:#00aaff;color:#04101d}.overlay.countdown h2{color:#fff}#notice{background:#322b19;color:#ffe5aa}#options{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 16px}#options label{flex:1;min-width:100px}#controlBar{flex-wrap:wrap}#keyHint{font-size:12px}#touchControls{gap:16px}#touchControls>div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}#touchControls button{width:64px;height:48px;padding:4px;font-size:13px}#touchControls .attack{color:#04101d}.actions{padding-top:4px}.room-bottom{padding-top:14px}#app:fullscreen .arena,.immersive .arena{max-height:65vh;max-width:130vh}
@media(max-width:680px){#app{padding:8px}.brand svg{display:none}.header-actions{gap:4px}.header-actions button{padding:6px 8px;font-size:12px}#roomLabel{width:100%;text-align:right}header{align-items:center}.scoreboard{padding:8px 10px 18px}.health>div{font-size:11px}.scoreboard .sp,.scoreboard .guard{height:3px;margin-top:3px}.overlay{inset:33% 3% auto}.overlay h2{font-size:19px}.overlay p{font-size:11px;line-height:1.4}.overlay button{min-height:40px;padding:5px 12px}.arena{aspect-ratio:2/1}#touchControls{gap:12px}#touchControls>div{grid-template-columns:repeat(2,1fr);gap:6px}#touchControls button{width:64px;height:46px}.room-bottom{grid-template-columns:1fr 1fr;gap:16px}.room-bottom h2{font-size:13px}li{display:block;font-size:12px}li span{display:block;margin-top:3px}#players,#history{max-height:140px}#options{gap:8px}#options label{min-width:80px}#options select{font-size:12px;padding:4px}#controlBar{padding:6px 0}.actions{padding-bottom:12px}.intro h2{font-size:22px}}
@media(max-height:500px) and (orientation:landscape){#touchControls>div{grid-template-columns:repeat(4,1fr)}#touchControls button{width:52px}#app:fullscreen,.immersive{padding:4px 10px}.immersive header,#app:fullscreen header{display:none}.immersive .arena,#app:fullscreen .arena{max-height:62vh;max-width:124vh}.immersive .room-bottom,.immersive details,#app:fullscreen .room-bottom,#app:fullscreen details{display:none}}