:root{--bg: #080a10;--surface: #111625;--surface-2: #182035;--border: rgba(255, 255, 255, .1);--text: #f1f5f9;--muted: #94a3b8;--cyan: #38bdf8;--pink: #f472b6;--gold: #fbbf24;--green: #34d399;--danger: #f87171}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100dvh;overflow:hidden;background:radial-gradient(circle at top,#171e38 0%,var(--bg) 65%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none}#app{height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top,10px) 12px env(safe-area-inset-bottom,10px)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 10px;flex-shrink:0}.brand{font-size:20px;font-weight:900;letter-spacing:-.5px;background:linear-gradient(135deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.pill-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}.pill-btn:hover{border-color:var(--cyan)}.home{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:10px;overflow-y:auto;padding-bottom:6px}.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;text-align:center}.hero-card h1{margin:4px 0 6px;font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-card p{margin:0;font-size:13px;color:var(--muted)}.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);background:#38bdf824;padding:3px 9px;border-radius:999px}.name-row{display:flex;gap:8px}.input{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:10px 12px;font-size:14px;outline:none}.input:focus{border-color:var(--cyan)}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-btn{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 10px;color:var(--text);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:transform .1s,border-color .15s}.mode-btn:active{transform:scale(.97)}.mode-btn.primary{border-color:#38bdf880;background:linear-gradient(160deg,rgba(56,189,248,.16),var(--surface))}.mode-btn.br{grid-column:span 2;border-color:#f472b680;background:linear-gradient(160deg,rgba(244,114,182,.16),var(--surface))}.mode-btn strong{font-size:14px}.mode-btn span{font-size:11px;color:var(--muted)}.room-row{display:flex;gap:8px}.btn{background:linear-gradient(135deg,#0284c7,#2563eb);border:none;color:#fff;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:800;cursor:pointer}.btn.secondary{background:var(--surface-2);border:1px solid var(--border)}.footer-links{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);padding:4px 2px}.footer-links a{color:var(--cyan);text-decoration:none}.arena{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:0}.hud-bar{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 12px;font-size:12px;font-weight:700}.timer-track{height:4px;background:#ffffff14;border-radius:999px;overflow:hidden}.timer-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .25s linear}.rival-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px}.panel-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:8px}.pips{display:flex;gap:4px}.pip{width:10px;height:10px;border-radius:50%;background:#ffffff24}.pip.on{background:var(--gold);box-shadow:0 0 8px var(--gold)}.slots-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.slot{aspect-ratio:3 / 4.1;background:#ffffff08;border:1.5px dashed rgba(255,255,255,.14);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;text-align:center;position:relative;transition:transform .15s,border-color .2s,box-shadow .2s}.slot.filled{border-style:solid;background:var(--surface-2);border-color:#38bdf859}.slot.mod{border-color:#f472b68c;background:linear-gradient(160deg,rgba(244,114,182,.18),var(--surface-2))}.slot.hidden-back{border-style:solid;border-color:#38bdf840;background:repeating-linear-gradient(45deg,#131a2e,#131a2e 6px,#19223c 6px,#19223c 12px)}.slot.beam-active{border-color:var(--gold);box-shadow:0 0 14px #fbbf24a6;transform:translateY(-4px)}.slot.jammed{opacity:.45;border-color:var(--danger)}.card-rank{font-size:18px;font-weight:900;line-height:1}.card-suit{font-size:18px;line-height:1.2}.mod-name{font-size:10px;font-weight:800;color:var(--pink);line-height:1.1}.mod-tag{font-size:8px;font-weight:800;color:var(--muted);margin-top:2px}.step-badge{position:absolute;bottom:-8px;background:var(--gold);color:#080a10;font-size:9px;font-weight:900;padding:1px 5px;border-radius:999px;white-space:nowrap}.center-banner{text-align:center;padding:8px 10px;background:#38bdf814;border:1px solid rgba(56,189,248,.22);border-radius:12px;font-size:13px;font-weight:700}.draft-tray{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:10px}.draft-head{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:8px;font-weight:700}.options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.opt-btn{background:var(--surface-2);border:1.5px solid rgba(56,189,248,.4);border-radius:12px;padding:10px 6px;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:92px;cursor:pointer;text-align:center;gap:4px}.opt-btn.is-mod{border-color:#f472b699;background:linear-gradient(160deg,rgba(244,114,182,.16),var(--surface-2))}.opt-btn:active{transform:scale(.96)}.opt-desc{font-size:10px;color:var(--muted);line-height:1.2}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060cd1;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.modal{width:100%;max-width:460px;max-height:84dvh;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.deck-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.deck-item{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px;font-size:11px;display:flex;flex-direction:column;gap:2px;cursor:pointer}.deck-item.active{border-color:var(--pink)}.toast{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:#1e293b;border:1px solid var(--cyan);color:var(--text);padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;z-index:100}