:root{--bg: #efe6d6;--panel: #f7f0e3;--ink: #4a3b2a;--ink-soft: #8a7a63;--accent: #e07a5f;--line: #e0d3bd}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;align-items:center;height:100dvh;padding:12px;gap:10px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{display:flex;flex-direction:column;width:100%;max-width:1200px;flex:1 1 auto;min-height:0;height:100%;gap:10px}.play-area{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}.stage{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}.topbar{width:100%;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px}.title{font-size:clamp(20px,3vw,30px);font-weight:800;letter-spacing:.04em;color:var(--ink)}.stats{display:flex;align-items:center;gap:18px}.stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}.stat-value{font-size:18px;font-weight:700}.stat.status{flex-direction:row;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft)}.status-dot{width:9px;height:9px;border-radius:50%;background:#c9a24b}.status-dot.connected{background:#3d9970}.mute-btn{border:1px solid var(--line);background:var(--panel);border-radius:10px;font-size:16px;padding:4px 10px;cursor:pointer}.game-container{position:relative;line-height:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}canvas{display:block;max-width:100%;max-height:100%;border-radius:14px;border:3px solid var(--line);box-shadow:0 10px 30px #4a3b2a24;background:#f4e9d8;image-rendering:-webkit-optimize-contrast;touch-action:none}.banner{position:absolute;top:22px;left:50%;transform:translate(-50%) translateY(-8px);background:#f7f0e3f0;color:var(--ink);padding:10px 22px;border-radius:999px;font-size:20px;font-weight:800;letter-spacing:.03em;border:2px solid var(--line);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease}.banner.visible{opacity:1;transform:translate(-50%) translateY(0)}.player-list{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:4px;line-height:1.2}.player-item{display:flex;align-items:center;gap:6px;background:#f7f0e3d1;padding:3px 8px;border-radius:8px;font-size:12px;font-weight:600;color:var(--ink)}.player-item[data-self=true]{cursor:pointer;outline:1px solid var(--accent)}.player-item.away{opacity:.55}.player-badge{font-size:12px}.flag-status{position:absolute;top:18px;left:50%;transform:translate(-50%);background:#f7f0e3f0;color:var(--ink);padding:6px 16px;border-radius:999px;font-size:15px;font-weight:700;border:2px solid var(--line);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;line-height:1.3}.flag-status.visible{opacity:1}.banner.visible~.flag-status{transform:translate(-50%) translateY(54px)}.player-color{width:10px;height:10px;border-radius:3px}.touch-controls{display:none;flex-shrink:0;align-items:center;justify-content:space-between;gap:12px;width:100%}.touch-controls.visible{display:flex}.dpad{display:flex;gap:10px}.touch-btn{border:none;border-radius:18px;background:#f7f0e3e6;color:var(--ink);font-size:26px;font-weight:800;box-shadow:0 4px 12px #4a3b2a2e;transition:transform .05s ease,background .1s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.touch-btn.move{width:84px;height:84px}.emotes{display:flex;gap:10px;align-items:center;justify-content:center}.touch-btn.emote{width:52px;height:52px;font-size:22px;border-radius:14px;background:#f7f0e3bf}.touch-btn.jump{width:108px;height:84px;font-size:20px;letter-spacing:.05em;background:var(--accent);color:#fff;flex-shrink:0}.touch-btn.active{transform:scale(.94);background:#d9c7a8}.touch-btn.jump.active{background:#c96548}.controls-hint{font-size:13px;color:var(--ink-soft);text-align:center;flex-shrink:0}.controls-hint kbd{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:inherit;font-size:12px}body.touch-device{overflow:hidden;touch-action:none;padding:max(6px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));gap:6px}body.touch-device #app{gap:6px}body.touch-device .controls-hint-keyboard{display:none}body.touch-device .play-area{gap:6px}body.touch-device .touch-controls{padding:0 4px}body.iphone .topbar{gap:8px}body.iphone .title{font-size:18px}body.iphone .stats{gap:10px}body.iphone .stat-label{font-size:9px}body.iphone .stat-value{font-size:15px}body.iphone .stat.status{font-size:11px}body.iphone .mute-btn{font-size:14px;padding:3px 8px}body.iphone .emotes{display:none}body.iphone .touch-btn.move{width:72px;height:72px;font-size:24px}body.iphone .touch-btn.jump{width:88px;height:72px;font-size:18px}body.iphone-portrait .player-list{font-size:11px}body.iphone-landscape{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}body.iphone-landscape .topbar{gap:12px}body.iphone-landscape .title{font-size:16px}body.iphone-landscape .stats{gap:12px}body.iphone-landscape .stat-label{display:none}body.iphone-landscape .stat-value,body.iphone-landscape .stat.status{font-size:13px}body.iphone-landscape .touch-btn.move{width:64px;height:64px}body.iphone-landscape .play-area{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"move stage jump";align-items:stretch;gap:10px}body.iphone-landscape .stage{grid-area:stage;min-width:0}body.iphone-landscape .touch-controls{display:contents}body.iphone-landscape .dpad{grid-area:move;flex-direction:column;align-self:center;justify-content:center}body.iphone-landscape .touch-controls .emotes{display:none}body.iphone-landscape .touch-btn.jump{grid-area:jump;align-self:center;width:80px;height:64px;font-size:16px}@media (max-width: 700px){.controls-hint-keyboard{display:none}.player-list{font-size:11px}}@media (pointer: coarse){body{overflow:hidden;touch-action:none}.touch-controls.visible{display:flex}.controls-hint-keyboard{display:none}}