*{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:dark;--bg: #020617;--panel: #0f172a;--text: #e2e8f0;--muted: #94a3b8;--accent: #22d3ee;--p1: #3b82f6;--p2: #ef4444}body{background:var(--bg);color:var(--text);font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif;min-height:100vh}#root{display:flex;justify-content:center;min-height:100vh;padding:24px 16px}.top-page,.room-page{width:100%;max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:20px}.logo{font-size:3rem;letter-spacing:.05em;color:var(--p1)}.logo span{color:var(--p2)}.logo.small{font-size:1.6rem}.tagline{color:var(--muted)}.field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}input{background:var(--panel);border:1px solid #334155;border-radius:8px;color:var(--text);font-size:1.1rem;padding:10px 14px;width:240px}input:focus{outline:2px solid var(--accent);border-color:transparent}.menu{display:flex;flex-direction:column;gap:12px;width:280px}.btn{background:var(--panel);border:1px solid #334155;border-radius:8px;color:var(--text);cursor:pointer;font-size:1rem;padding:12px 18px;transition:background .15s}.btn:hover:not(:disabled){background:#1e293b}.btn:disabled{cursor:default;opacity:.45}.btn.primary{background:var(--p1);border-color:transparent}.btn.primary:hover:not(:disabled){background:#2563eb}.join-row{display:flex;gap:8px}.join-row input{flex:1;width:auto;text-transform:uppercase}.join-row .btn{white-space:nowrap}.error{color:#fca5a5}.howto{color:var(--muted);font-size:.9rem;max-width:460px;margin-top:12px}.howto h2{font-size:1rem;margin-bottom:8px;color:var(--text)}.howto li{margin-left:1.2em;margin-bottom:4px}.hud{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:960px}.hud-player{display:flex;gap:10px;align-items:baseline;font-weight:700}.hud-player.right{flex-direction:row}.hud-pct{font-size:1.4rem;font-variant-numeric:tabular-nums}.hud-timer{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}.board-wrap{position:relative;width:100%;max-width:960px}.board{width:100%;display:block;border:2px solid #334155;border-radius:8px;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#020617d1;border-radius:8px;text-align:center;padding:20px}.overlay.countdown span{font-size:6rem;font-weight:800;color:var(--accent)}.overlay h2{font-size:2rem}.room-code{font-size:3rem;font-weight:800;letter-spacing:.25em;color:var(--accent);font-variant-numeric:tabular-nums}.hint{color:var(--muted);font-size:.85rem}.menu-row{display:flex;gap:12px}.banner{position:absolute;top:12px;left:50%;transform:translate(-50%);background:#0f172aeb;border:1px solid #334155;border-radius:8px;padding:8px 16px;font-size:.9rem}.banner.flash{border-color:var(--p2)}.dpad{display:none;flex-direction:column;align-items:center;gap:6px;-webkit-user-select:none;user-select:none}.dpad button{background:var(--panel);border:1px solid #334155;border-radius:10px;color:var(--text);font-size:1.3rem;width:56px;height:48px}.dpad-mid{display:flex;gap:6px}@media(pointer:coarse){.dpad{display:flex}}