:root{color-scheme:dark;font-family:"PingFang SC","Noto Sans CJK SC",sans-serif;background:#181b19;color:#eee9d9;--muted:#b8bdaf;--line:#40463e;--gold:#e5c47c;--green:#a8c7a3}*{box-sizing:border-box}body{margin:0}main{max-width:1164px;margin:auto;padding:24px 32px max(24px,env(safe-area-inset-bottom))}header,.brand,.game-top,.stats,.game-bottom,.join-row,#room-info,#room-info>div{display:flex;align-items:center;gap:16px}header{justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{gap:12px}.brand>span:first-child{font-size:32px;color:var(--gold)}h1{font-size:22px;margin:0;letter-spacing:2px}.subtitle{color:var(--muted);font-size:13px;border-left:1px solid var(--line);padding-left:12px}button,input{font:inherit;color:inherit;border:1px solid #586152;background:#252b25;border-radius:6px;min-height:44px;padding:10px 16px}button{cursor:pointer;touch-action:manipulation}button:hover{background:#354032}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.primary{background:var(--gold);color:#23261c;border-color:var(--gold);font-weight:700}.primary:hover{background:#f3d69a}.primary span{float:right}#lobby{display:grid;grid-template-columns:1fr 340px;gap:48px;padding:32px 0}.intro h2{font-size:36px;font-weight:600;line-height:1.45;margin:0 0 12px;letter-spacing:2px}.intro p{color:var(--muted);font-size:15px;line-height:1.8;margin:0}.lobby-actions{display:grid;gap:10px}.lobby-actions>button{text-align:left}label{font-size:13px;color:var(--muted);display:block;margin:8px 0}.join-row{gap:8px}.join-row button{flex-shrink:0;white-space:nowrap}input{width:100%;min-width:0;letter-spacing:2px}.note{font-size:12px;color:var(--muted);margin:0;line-height:1.6}.game{border:1px solid var(--line);border-radius:8px;overflow:hidden}.game-top{justify-content:space-between;background:#222820;min-height:62px;padding:8px 20px}.game-top>div:first-child{display:flex;align-items:center;gap:16px}#chapter{font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}.stats{gap:14px;font-size:13px;color:#d2d6c7}.stats button{padding:6px 10px}.stage{position:relative;background:#a4ab93;line-height:0}canvas{display:block;width:100%;height:auto;aspect-ratio:1100/540}.game-bottom{justify-content:space-between;padding:14px 20px;background:#222820;font-size:13px;line-height:1.6;min-height:56px}#hint{color:var(--muted)}.balance{display:flex;align-items:center;gap:8px;white-space:nowrap}meter{width:80px;height:9px}meter::-webkit-meter-bar{background:#4c5545;border:0}meter::-webkit-meter-optimum-value{background:#a8c7a3}#result{position:absolute;inset:0;display:grid;place-items:center;background:#171d19b8;line-height:1.5;text-align:center;padding:20px}#result>div{background:#20271f;border:1px solid #839475;padding:24px;max-width:440px;width:100%}#result h2{font-size:26px;margin:0 0 12px}#result p{color:#ccd2c2;margin:0 0 16px}#result button{min-width:140px}#room-info{justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}#room-info>div{flex-wrap:wrap}#room-code{letter-spacing:2px;color:var(--gold)}#connection{color:var(--muted);font-size:13px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:20px 0}.player-control{display:flex;justify-content:space-between;gap:16px;align-items:center}.player-control>div:first-child{display:grid;gap:6px}.player-control strong{font-size:14px;color:var(--gold)}.player-control[data-player="1"] strong{color:var(--green)}.player-control span{font-size:12px;color:var(--muted)}.keys{display:flex;gap:6px}.keys button{min-width:46px;padding:8px 12px;touch-action:none;user-select:none}.keys button.pressed{background:var(--gold);color:#20271f}details{border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:13px;line-height:1.8;margin-top:20px}summary{cursor:pointer;min-height:44px;display:flex;align-items:center}summary::before{content:'＋';margin-right:10px;color:var(--gold)}details[open] summary::before{content:'−'}details p{max-width:880px}footer{color:#a6af9b;font-size:12px;padding:6px 0 12px}#game-error,#lobby-error{color:#ffd0b7;font-size:13px;line-height:1.7}[hidden]{display:none!important}
@media(max-width:800px){main{padding:16px}#lobby{gap:24px;grid-template-columns:1fr 300px}.intro h2{font-size:28px}.controls{gap:16px}.player-control{flex-direction:column;align-items:flex-start;gap:10px}.game-top{padding:8px 12px}.game-bottom{padding:12px;align-items:flex-start}.stats{gap:8px}}
@media(max-width:600px){main{padding:12px max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}header{padding-bottom:14px;gap:8px}h1{font-size:19px}.brand{gap:6px}.subtitle{display:none}#lobby{grid-template-columns:1fr;padding:24px 0;gap:20px}.intro h2{font-size:28px}.intro br{display:none}.intro p{font-size:14px}.game-top{gap:6px;flex-wrap:wrap}.game-top>div:first-child{gap:10px}.game-top strong{font-size:14px}.stats{flex-wrap:wrap;gap:10px}.game-bottom{flex-wrap:wrap;gap:6px}.controls{gap:12px}.keys{gap:4px}.keys button{min-width:44px;padding:8px 10px}.player-control span{font-size:11px}#room-info{align-items:flex-start;gap:8px}#room-info>div{display:grid;gap:8px}#copy{white-space:nowrap;padding:8px}#result{padding:8px}#result>div{padding:10px}#result h2{font-size:20px;margin-bottom:6px}#result p{font-size:12px;margin-bottom:8px}#result button{min-height:44px;padding:8px}.stage canvas{aspect-ratio:700/460;object-fit:cover}.balance{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

@media(max-height:500px) and (min-width:601px){body.active main{padding:8px 12px}body.active header{display:none}body.active .game-top{min-height:44px;padding:0 10px}body.active .stage canvas{height:calc(100dvh - 190px);min-height:150px;aspect-ratio:auto;object-fit:cover;object-position:center bottom}body.active .game-bottom{min-height:28px;padding:3px 10px;font-size:12px}body.active #room-info{padding:2px 0}body.active #room-info button{min-height:36px;padding:4px 10px}body.active .controls{padding:6px 0;gap:20px}body.active .player-control{flex-direction:row;align-items:center}body.active details{margin-top:8px}}