:root {
  --bg: #05070d;
  --panel: rgba(10, 15, 28, .9);
  --line: rgba(255,255,255,.12);
  --gold: #dfbc69;
  --cyan: #3fc8ff;
  --text: #f4f6ff;
  --muted: #9ba8c4;
  --success: #52e39a;
  --danger: #ff6b82;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(63,200,255,.16), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(143,74,255,.15), transparent 34%),
    linear-gradient(145deg, #04060b, #080d19 55%, #100b1b);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
}
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 10px clamp(18px,4vw,56px);
  border-bottom: 1px solid var(--line);
  background: rgba(4,7,13,.88);
  backdrop-filter: blur(18px);
}
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; letter-spacing:.16em; }
.brand span { color: var(--gold); }
.topbar nav { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.topbar nav a { padding:9px 13px; color:var(--muted); text-decoration:none; border-radius:999px; }
.topbar nav a:hover, .topbar nav a.active { color:var(--text); background:rgba(255,255,255,.07); }
.badge { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); white-space:nowrap; }
.badge.online { color:var(--success); border-color:rgba(82,227,154,.4); }
.badge.connecting { color:var(--gold); }
.shell { position:relative; z-index:1; width:min(1240px, calc(100% - 28px)); margin:28px auto 70px; display:grid; gap:18px; }
.hero-panel, .panel { border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:0 22px 80px rgba(0,0,0,.35); }
.hero-panel { padding:clamp(24px,5vw,58px); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.7fr); gap:32px; align-items:center; overflow:hidden; position:relative; }
.hero-panel::after { content:""; position:absolute; width:380px; height:380px; left:-120px; bottom:-180px; border:1px solid rgba(63,200,255,.2); border-radius:50%; box-shadow:0 0 80px rgba(63,200,255,.16), inset 0 0 40px rgba(63,200,255,.08); }
.eyebrow { margin:0 0 10px; color:var(--gold); letter-spacing:.18em; font-size:.74rem; font-weight:800; }
h1 { margin:0; font-size:clamp(2.4rem,6vw,5.5rem); line-height:.98; }
h1 span { color:var(--cyan); }
.hero-panel p:not(.eyebrow) { color:var(--muted); max-width:720px; line-height:1.8; }
.status-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.status-grid article { min-height:112px; display:grid; place-content:center; text-align:center; padding:15px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); }
.status-grid strong { font-size:1.8rem; color:var(--cyan); }
.status-grid span { color:var(--muted); font-size:.82rem; margin-top:4px; }
.panel { padding:22px; }
.notice { text-align:center; padding:42px; }
.notice p { color:var(--muted); }
.lobby-grid { display:grid; grid-template-columns:minmax(300px,.75fr) minmax(380px,1.25fr); gap:18px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.panel-heading h2, .phase-panel h2 { margin:0; }
.primary-button, .secondary-button, .danger-button, .icon-button {
  border-radius:14px;
  border:1px solid var(--line);
  min-height:44px;
  padding:10px 16px;
  color:var(--text);
  background:rgba(255,255,255,.055);
}
.primary-button { color:#07111b; font-weight:900; border-color:transparent; background:linear-gradient(135deg,#65d7ff,#d9bd6a); }
.secondary-button:hover, .icon-button:hover { border-color:rgba(223,188,105,.55); background:rgba(223,188,105,.09); }
.danger-button { color:#ffdce2; border-color:rgba(255,107,130,.38); background:rgba(255,107,130,.09); }
.wide { width:100%; margin-bottom:10px; }
.icon-button { min-width:44px; padding:8px; font-size:1.15rem; }
.join-box { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.join-box label { display:block; color:var(--muted); margin-bottom:8px; }
.join-box > div { display:grid; grid-template-columns:1fr auto; gap:8px; }
.join-box input { min-width:0; min-height:44px; border-radius:14px; border:1px solid var(--line); background:rgba(0,0,0,.28); color:var(--text); padding:10px 14px; direction:ltr; text-transform:uppercase; letter-spacing:.18em; }
.queue-message { margin:16px 0 0; padding:12px; border-radius:14px; color:var(--gold); background:rgba(223,188,105,.08); text-align:center; }
.empty-state { min-height:210px; display:grid; place-content:center; text-align:center; gap:8px; color:var(--muted); border:1px dashed var(--line); border-radius:18px; }
.empty-state strong { color:var(--text); }
.room-code { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:16px; background:rgba(63,200,255,.08); border:1px solid rgba(63,200,255,.24); }
.room-code strong { direction:ltr; letter-spacing:.22em; color:var(--cyan); font-size:1.4rem; }
.players-list { display:grid; gap:10px; margin:14px 0; }
.player-row { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.03); }
.player-avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(223,188,105,.35); color:var(--gold); font-weight:900; }
.player-row small { display:block; color:var(--muted); margin-top:3px; }
.ready-pill { padding:7px 10px; border-radius:999px; color:var(--muted); background:rgba(255,255,255,.05); }
.ready-pill.ready { color:var(--success); background:rgba(82,227,154,.1); }
.room-actions { display:grid; grid-template-columns:1fr auto; gap:10px; }
.phase-panel { display:grid; grid-template-columns:.5fr 1.5fr; gap:24px; align-items:start; }
.phase-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.phase-cards article { padding:16px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.03); }
.phase-cards span { color:var(--gold); font-weight:900; }
.phase-cards strong { display:block; margin:8px 0; }
.phase-cards p { color:var(--muted); line-height:1.55; font-size:.85rem; margin:0; }
.phase-cards .pending { border-style:dashed; opacity:.76; }
.toast { position:fixed; z-index:50; left:22px; bottom:22px; width:min(360px,calc(100% - 44px)); display:grid; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:rgba(5,8,16,.96); box-shadow:0 20px 60px rgba(0,0,0,.45); }
.toast span { color:var(--muted); }
.match-dialog { width:min(560px,calc(100% - 30px)); color:var(--text); border:1px solid rgba(223,188,105,.38); border-radius:24px; background:#090e1b; padding:28px; text-align:center; }
.match-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(6px); }
.versus { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin:24px 0; }
.versus span { color:var(--gold); font-size:1.5rem; }
.phase-note { color:var(--muted); line-height:1.7; }
@media (max-width:900px) {
  .topbar { align-items:flex-start; }
  .topbar nav { display:none; }
  .hero-panel, .lobby-grid, .phase-panel { grid-template-columns:1fr; }
  .phase-cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .status-grid, .phase-cards { grid-template-columns:1fr; }
  .room-actions { grid-template-columns:1fr; }
}

.status-grid { grid-template-columns: repeat(6, 1fr); }
.status-grid article:last-child strong { font-size: 1.12rem; color: var(--gold); }
.ranked-button { border:1px solid rgba(223,188,105,.48); border-radius:14px; min-height:48px; padding:11px 16px; color:#07111b; font-weight:950; background:linear-gradient(135deg,#f4d889,#72d8ff 55%,#a97aff); box-shadow:0 10px 32px rgba(169,122,255,.16); }
.queue-message.ranked { color:#e7d2ff; background:rgba(169,122,255,.1); border:1px solid rgba(169,122,255,.25); }
.mode-pill { display:inline-flex; margin-bottom:10px; padding:6px 10px; border-radius:999px; color:var(--muted); border:1px solid var(--line); font-size:.76rem; font-weight:900; letter-spacing:.13em; }
.mode-pill.ranked { color:#f4d889; border-color:rgba(223,188,105,.45); background:rgba(223,188,105,.08); }
.ranked-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.leaderboard-list,.history-list { display:grid; gap:8px; max-height:430px; overflow:auto; padding-inline-end:4px; }
.leader-row,.history-row { display:grid; grid-template-columns:52px 1fr auto auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.leader-row small,.history-row small { display:block; color:var(--muted); margin-top:3px; font-size:.78rem; }
.rank-number { color:var(--gold); font-weight:900; }
.history-row>span { padding:6px 8px; border-radius:999px; text-align:center; color:var(--muted); background:rgba(255,255,255,.05); font-size:.78rem; }
.history-row.win>span { color:var(--success); background:rgba(82,227,154,.1); }
.history-row.loss>span { color:var(--danger); background:rgba(255,107,130,.1); }
.rating-delta { color:var(--muted); direction:ltr; }
.rating-delta.positive { color:var(--success); }
.rating-delta.negative { color:var(--danger); }
.muted-line { color:var(--muted); text-align:center; padding:28px; }
@media (max-width:900px){.ranked-grid{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.status-grid{grid-template-columns:repeat(2,1fr)}.leader-row,.history-row{grid-template-columns:44px 1fr auto auto}}

.spectate-link{display:block;text-align:center;text-decoration:none}.history-row .replay-link{margin-inline-start:auto;padding:5px 8px;border:1px solid var(--line);border-radius:8px;color:var(--cyan);text-decoration:none;font-size:.68rem}
.history-row button.replay-link{background:transparent;cursor:pointer;font-family:inherit}.history-row button.replay-link:disabled{opacity:.55;cursor:default}