:root{--navy-900: #081120;--navy-800: #0d1b2e;--navy-700: #16293f;--accent: #f54b3d;--teal: #1a9e9b;--text: #eef3f8;--text-dim: #8ba0b5;--font: "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;--safe-top: calc(16px + env(safe-area-inset-top, 0px)) ;--safe-right: calc(16px + env(safe-area-inset-right, 0px)) ;--safe-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) ;--safe-left: calc(16px + env(safe-area-inset-left, 0px)) }*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--navy-900);color:var(--text);font-family:var(--font);overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}.screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);text-align:center}.screen-heading{font-size:clamp(24px,4vw,36px);font-weight:800;text-transform:uppercase;letter-spacing:.12em}.btn{padding:12px 32px;border:2px solid var(--navy-700);border-radius:4px;background:var(--navy-800);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;transition:border-color .12s ease,background .12s ease}.btn:hover{border-color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent)}.btn-primary:hover{background:#ff604f}.btn-ghost{background:transparent}.btn-small{padding:8px 16px;font-size:12px}.btn-toggled{border-color:var(--accent);color:var(--accent)}.menu-title{font-size:clamp(48px,11vw,110px);font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.04em}.menu-title-accent{color:var(--accent)}.menu-tagline{color:var(--text-dim);font-size:clamp(14px,2vw,18px);letter-spacing:.08em;text-transform:uppercase}.menu-buttons{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap;justify-content:center}.select-cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.card{width:min(300px,42vw);min-width:220px;padding:24px 20px;border:2px solid var(--navy-700);border-radius:8px;background:var(--navy-800);text-align:left;transition:border-color .12s ease,transform .12s ease}.card:hover{border-color:var(--text-dim)}.card-selected,.card-selected:hover{border-color:var(--accent);transform:translateY(-4px)}.card-name{font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.card-tagline{margin-top:4px;color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em}.card-flavor{margin-top:12px;color:var(--text-dim);font-size:14px;line-height:1.5}.opponent-picker{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center}.opponent-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-right:4px}.select-actions{display:flex;gap:16px}.game-screen{position:fixed;top:0;right:0;bottom:0;left:0}.game-canvas-host{width:100%;height:100%}.game-canvas{display:block;width:100%;height:100%}.game-topbar{position:absolute;top:var(--safe-top);right:var(--safe-right);display:flex;gap:8px}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--navy-900)}.searching-text{color:var(--text-dim);font-size:16px;letter-spacing:.08em;text-transform:uppercase}.spinner{width:48px;height:48px;border:4px solid var(--navy-700);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.hud-players{position:absolute;bottom:var(--safe-bottom);left:50%;transform:translate(-50%);display:flex;gap:clamp(48px,12vw,140px)}.hud-player{text-align:center;border-top:3px solid;padding-top:6px;min-width:110px}.hud-player-0{border-color:var(--accent)}.hud-player-1{border-color:var(--teal)}.hud-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim)}.hud-percent{font-size:clamp(36px,7vh,56px);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgb(0 0 0 / .6)}.hud-percent-sign{font-size:.55em}.hud-stocks{display:flex;justify-content:center;gap:6px;min-height:10px}.stock-dot{width:10px;height:10px;border-radius:50%;background:var(--text);box-shadow:0 1px 4px #00000080}.hud-ping{position:absolute;top:var(--safe-top);left:var(--safe-left);color:var(--text-dim);font-size:12px;font-variant-numeric:tabular-nums}.hud-countdown{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(80px,22vh,160px);font-weight:900;color:var(--accent);text-shadow:0 4px 24px rgb(0 0 0 / .6);font-variant-numeric:tabular-nums}.touch-controls{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.touch-left,.touch-right{position:absolute;bottom:var(--safe-bottom);pointer-events:auto;touch-action:none}.touch-left{left:calc(var(--safe-left) + 8px)}.touch-right{right:calc(var(--safe-right) + 8px);display:flex;flex-direction:column;align-items:flex-end;gap:12px}.joystick{width:132px;height:132px;border:3px solid rgb(255 255 255 / .25);border-radius:50%;background:#ffffff0f;display:flex;align-items:center;justify-content:center}.joystick-knob{width:56px;height:56px;border-radius:50%;background:#ffffff59}.touch-attack-row{display:flex;gap:12px}.touch-btn{border:3px solid rgb(255 255 255 / .25);border-radius:50%;background:#ffffff14;color:#ffffffd9;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;touch-action:none}.touch-btn:active{background:#f54b3d66;border-color:var(--accent)}.touch-btn-jump{width:88px;height:88px}.touch-btn-attack,.touch-btn-special{width:72px;height:72px}.victory-title{font-size:clamp(56px,14vh,120px);font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}.victory-title-defeat{color:var(--text-dim)}.victory-winner{color:var(--text-dim);font-size:18px;letter-spacing:.06em}.victory-buttons{display:flex;gap:16px;margin-top:8px}.disconnected-text{color:var(--text-dim);max-width:420px;line-height:1.5}