*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;padding:0;height:100%}body{background:#05050d;color:#dfe9f5;font-family:Hiragino Sans,Noto Sans JP,ui-sans-serif,system-ui,sans-serif;overscroll-behavior:none}.mono{font-family:ui-monospace,SF Mono,Menlo,monospace;font-variant-numeric:tabular-nums}.screen{position:relative;width:100%;height:100dvh;overflow:hidden}.canvas-wrap{position:absolute;inset:0}.touch-zone{touch-action:none;user-select:none;-webkit-user-select:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));pointer-events:none}.overlay>*{pointer-events:auto}.center-screen{display:flex;align-items:center;justify-content:center}.panel{background:#080a18c7;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,234,255,.28);border-radius:18px;box-shadow:0 0 24px #00eaff1f,0 8px 40px #0009;padding:22px;max-width:480px;width:100%;max-height:calc(100dvh - 32px);overflow-y:auto}.panel-title{margin:0 0 12px;font-size:20px;letter-spacing:.06em}.muted{color:#8fa3bd;font-size:13px}.error-text{color:#ff5f8a;font-size:13px;margin:10px 0 0}.btn{appearance:none;border:1px solid transparent;border-radius:12px;padding:13px 18px;font-size:15px;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:transform .06s ease,box-shadow .15s ease,filter .15s ease;color:#041016}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:linear-gradient(135deg,#00eaff,#22a7ff);box-shadow:0 0 18px #00eaff73}.btn-secondary{background:linear-gradient(135deg,#ff2fd6,#b45cff);color:#1a041a;box-shadow:0 0 18px #ff2fd666}.btn-ghost{background:#ffffff0f;border-color:#a0c8ff4d;color:#cfe4ff}.btn-small{padding:8px 12px;font-size:12px}.link-btn{background:none;border:none;color:#7fd9ff;font-size:14px;cursor:pointer;margin-top:14px;padding:6px}.text-input{width:100%;background:#040812d9;border:1px solid rgba(120,160,220,.35);border-radius:10px;color:#eaf4ff;font-size:16px;padding:12px 14px;outline:none}.text-input:focus{border-color:#00eaff;box-shadow:0 0 10px #00eaff59}.field-label{font-size:12px;color:#8fa3bd;letter-spacing:.1em;margin:14px 0 6px}.home-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));overflow-y:auto;background:radial-gradient(ellipse at center,#05050d00 40%,#05050d8c)}.logo{margin:0;font-size:clamp(42px,9vw,72px);font-style:italic;font-weight:900;letter-spacing:.04em;color:#eaffff;text-shadow:0 0 18px rgba(0,234,255,.9),0 0 60px rgba(0,234,255,.4)}.logo-accent{color:#ff2fd6;text-shadow:0 0 18px rgba(255,47,214,.9),0 0 60px rgba(255,47,214,.4)}.tagline{margin:0 0 14px;color:#a9c5e8;font-size:14px;letter-spacing:.14em;text-shadow:0 1px 8px rgba(0,0,0,.8)}.home-panel{max-width:420px}.swatches{display:flex;gap:10px}.swatch{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer}.swatch-active{border-color:#fff;transform:scale(1.12)}.track-select{display:flex;gap:8px;flex-wrap:wrap}.chip{background:#ffffff0f;border:1px solid rgba(140,180,240,.3);color:#cfe4ff;border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer}.chip-active{background:#00eaff2e;border-color:#00eaff;color:#bdf6ff;box-shadow:0 0 10px #00eaff59}.actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}.join-row{display:flex;gap:8px;margin-top:12px}.code-input{text-transform:uppercase;letter-spacing:.3em;font-family:ui-monospace,monospace}.lobby-panel{max-width:440px}.code-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.room-code{font-family:ui-monospace,monospace;font-size:30px;letter-spacing:.28em;color:#7ff3ff;text-shadow:0 0 14px rgba(0,234,255,.7)}.player-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}.player-list li{display:flex;align-items:center;gap:10px;background:#ffffff0a;border-radius:10px;padding:9px 12px}.player-gone{opacity:.45}.player-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.you-tag{font-size:11px;color:#7fd9ff;border:1px solid rgba(127,217,255,.5);border-radius:6px;padding:1px 6px}.ready-tag{font-size:12px;color:#8fa3bd;letter-spacing:.08em}.ready-yes{color:#7dffa8;text-shadow:0 0 8px rgba(125,255,168,.7);font-weight:700}.color-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:baseline;box-shadow:0 0 6px currentColor}.countdown-overlay{flex-direction:column;gap:10px;background:none}.countdown-num{font-size:clamp(90px,22vw,180px);font-weight:900;font-style:italic;color:#fff;text-shadow:0 0 30px rgba(0,234,255,.95),0 0 90px rgba(255,47,214,.5);animation:count-pop 1s ease infinite}@keyframes count-pop{0%{transform:scale(1.15);opacity:.4}20%{transform:scale(1);opacity:1}to{transform:scale(.96);opacity:.9}}.control-hint{color:#b9d4f2;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.9)}.hud{position:absolute;inset:0;pointer-events:none;padding:max(10px,env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.hud-top{display:flex;justify-content:space-between;gap:8px}.hud-box{background:#06081499;border:1px solid rgba(0,234,255,.3);border-radius:10px;padding:8px 14px;font-weight:800;font-size:15px;letter-spacing:.06em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hud-best{margin-top:8px;align-self:center;color:#ffe93e;font-size:13px;text-shadow:0 0 8px rgba(255,233,62,.6)}.hud-finished{margin-top:14px;align-self:center;background:#060814bf;border:1px solid rgba(125,255,168,.5);color:#7dffa8;border-radius:12px;padding:10px 18px;font-weight:800;letter-spacing:.1em}.hud-speed{margin-top:auto;align-self:center;font-size:clamp(38px,8vw,60px);font-weight:900;font-style:italic;color:#eaffff;text-shadow:0 0 18px rgba(0,234,255,.75);line-height:1}.hud-speed-unit{font-size:15px;margin-left:6px;color:#8fd8ef}.ctl-btn{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));width:88px;height:88px;border-radius:50%;border:2px solid rgba(255,255,255,.35);font-weight:900;font-size:13px;letter-spacing:.08em;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;z-index:5}.drift-btn{right:20px;background:radial-gradient(circle,#ff2fd680,#ff2fd626);box-shadow:0 0 20px #ff2fd673}.drift-btn:active{background:radial-gradient(circle,#ff2fd6d9,#ff2fd64d)}.brake-btn{left:20px;width:72px;height:72px;background:radial-gradient(circle,#50a0ff66,#50a0ff1f);box-shadow:0 0 16px #50a0ff59}.brake-btn:active{background:radial-gradient(circle,#50a0ffcc,#50a0ff40)}.results-panel,.ranking-panel{max-width:520px}.global-best{color:#ffe93e;font-weight:800;text-shadow:0 0 12px rgba(255,233,62,.6)}.rank-table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:14px}.rank-table th{text-align:left;color:#8fa3bd;font-size:11px;letter-spacing:.12em;padding:6px 8px;border-bottom:1px solid rgba(140,180,240,.25)}.rank-table td{padding:9px 8px;border-bottom:1px solid rgba(140,180,240,.12)}.rank-num{font-weight:900;color:#7ff3ff}.row-you td{background:#00eaff14}.ranking-screen{overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;background:radial-gradient(ellipse at top,rgba(38,8,70,.55),transparent 60%),#05050d}.ranking-panel .track-select{margin-bottom:14px}.ranking-panel .btn{margin-top:6px}.conn-banner{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);background:#060814cc;border:1px solid rgba(255,233,62,.5);color:#ffe93e;border-radius:999px;padding:6px 16px;font-size:13px;z-index:10}.join-gate{display:flex;flex-direction:column;gap:12px;max-width:360px}@media(max-width:520px){.panel{padding:16px}.room-code{font-size:24px}}