@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&family=Rajdhani:wght@600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #050b13;
  --panel: #091522;
  --panel-2: #0b1929;
  --line: rgba(145, 181, 211, 0.13);
  --muted: #6f8296;
  --text: #e9f2f8;
  --gold: #c99b4a;
  --blue: #30a4f5;
  --blue-2: #0b5c9b;
  --red: #ef536a;
  --red-2: #9d2137;
  --green: #59d6a0;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 18%, rgba(17, 103, 159, .18), transparent 28%),
    radial-gradient(circle at 90% 17%, rgba(145, 28, 51, .14), transparent 26%),
    linear-gradient(180deg, #07111e 0, var(--bg) 46%, #050a11 100%);
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.app-shell { width: min(1760px, 100%); margin: 0 auto; padding: 0 24px 28px; position: relative; }

.topbar {
  min-height: 96px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 46px; height: 52px; display: grid; place-items: center;
  background: linear-gradient(150deg, #d6b36f, #826029);
  clip-path: polygon(50% 0, 94% 22%, 86% 78%, 50% 100%, 14% 78%, 6% 22%);
  padding: 2px;
}
.brand-mark::before { content: ""; position: absolute; width: 38px; height: 44px; clip-path: inherit; background: #0a1622; }
.brand-mark span { position: relative; z-index: 1; font: 700 14px/1 "Rajdhani", sans-serif; color: #e4bf73; }
.eyebrow { margin: 0 0 3px; color: var(--gold); font: 700 10px/1.2 "Rajdhani", sans-serif; letter-spacing: .22em; }
.brand h1 { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: .02em; }
.brand h1 i { color: #405266; font-style: normal; margin: 0 5px; }

.series-strip {
  height: 48px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(7, 17, 29, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.compact-field { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--muted); font-size: 12px; border-right: 1px solid var(--line); height: 100%; }
.compact-field select { border: 0; color: var(--text); background: transparent; outline: 0; font-weight: 700; }
.compact-field select option { background: #0b1826; }
.scoreboard { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.scoreboard strong { font: 700 23px/1 "Rajdhani", sans-serif; }
.scoreboard small { color: #485b6e; }
.score-dot { width: 6px; height: 6px; transform: rotate(45deg); }
.score-dot.blue { background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.score-dot.red { background: var(--red); box-shadow: 0 0 12px var(--red); }
.game-chip { align-self: stretch; display: grid; place-items: center; min-width: 86px; padding: 0 14px; color: #9eacba; border-left: 1px solid var(--line); font: 700 12px "Rajdhani", sans-serif; letter-spacing: .13em; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.icon-button, .secondary-button, .primary-button, .text-button { border: 0; transition: .2s ease; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(14,30,45,.8); border: 1px solid var(--line); }
.icon-button:hover { border-color: rgba(201,155,74,.5); background: rgba(201,155,74,.08); }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-button.muted svg { opacity: .38; }
.secondary-button { height: 38px; padding: 0 15px; background: rgba(14,30,45,.8); border: 1px solid var(--line); color: #afbdca; font-size: 12px; }
.secondary-button:hover { border-color: #42576b; color: white; }
.danger-ghost:hover { border-color: rgba(239,83,106,.4); color: #ff8192; }

main { padding-top: 22px; }
.draft-layout { display: grid; grid-template-columns: 250px minmax(660px, 1fr) 250px; gap: 14px; align-items: stretch; }

.team-panel, .draft-stage, .champion-section {
  background: linear-gradient(180deg, rgba(13, 28, 43, .96), rgba(7, 17, 28, .96));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.team-panel { min-height: 543px; position: relative; overflow: hidden; }
.team-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; }
.blue-side::before { background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.red-side::before { background: linear-gradient(90deg, transparent, var(--red), transparent); }
.team-panel::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(70px); opacity: .11; top: 65px; pointer-events: none; }
.blue-side::after { background: var(--blue); left: -110px; }
.red-side::after { background: var(--red); right: -110px; }
.team-heading { padding: 20px 18px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
.team-heading span { display: block; color: var(--blue); font: 700 9px "Rajdhani", sans-serif; letter-spacing: .18em; }
.red-side .team-heading span { color: var(--red); text-align: right; }
.team-heading input { width: 150px; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; outline: 0; color: var(--text); font-weight: 800; font-size: 19px; }
.red-side .team-heading input { text-align: right; }
.team-heading input:focus { border-color: currentColor; }
.team-heading b { color: #587089; font: 700 18px "Rajdhani", sans-serif; }

.roster { padding: 8px 12px 14px; position: relative; z-index: 1; }
.player-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 82px; padding: 8px 4px; border-bottom: 1px solid rgba(145,181,211,.08); }
.red-side .player-row { grid-template-columns: minmax(0, 1fr) 36px; }
.player-row:last-child { border-bottom: 0; }
.role-emblem { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(48,164,245,.2); background: rgba(48,164,245,.06); color: #4ca9e8; transform: rotate(45deg); }
.red-side .role-emblem { border-color: rgba(239,83,106,.2); background: rgba(239,83,106,.06); color: #e2576b; }
.role-emblem svg { width: 18px; height: 18px; fill: currentColor; transform: rotate(-45deg); opacity: .8; }
.player-info { min-width: 0; }
.red-side .player-info { text-align: right; }
.player-info label { display: block; color: #6b7f92; font: 700 9px "Rajdhani", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.player-info input { width: 100%; border: 0; border-bottom: 1px solid transparent; padding: 3px 0; background: transparent; outline: 0; color: #cdd8e2; font-weight: 600; }
.player-info input:focus { color: white; border-color: #31485e; }

.draft-stage { min-width: 0; position: relative; overflow: hidden; }
.draft-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(20,122,192,.035) 0 48%, transparent 48% 52%, rgba(182,38,62,.035) 52%); pointer-events: none; }
.phase-header { min-height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 15px 22px; border-bottom: 1px solid var(--line); position: relative; }
.phase-header h2 { margin: 6px 0 0; font-size: 20px; }
.timer-wrap { text-align: center; align-self: start; margin-top: -2px; }
.timer { width: 78px; height: 60px; border: 1px solid rgba(201,155,74,.4); border-top: 2px solid var(--gold); background: linear-gradient(180deg, rgba(201,155,74,.12), rgba(201,155,74,.02)); color: white; clip-path: polygon(10% 0, 90% 0, 100% 15%, 92% 100%, 8% 100%, 0 15%); }
.timer span { font: 700 34px/.8 "Rajdhani", sans-serif; }
.timer small { display: block; margin-top: 5px; color: var(--gold); font: 700 8px "Rajdhani", sans-serif; letter-spacing: .16em; }
.timer.warning { color: #ff7c65; border-color: #f36e59; animation: timerPulse .8s infinite alternate; }
@keyframes timerPulse { to { filter: drop-shadow(0 0 9px rgba(243,110,89,.4)); } }
.timer-wrap p { margin: 3px 0 0; color: #55687a; font-size: 9px; }
.turn-controls { justify-self: end; display: flex; gap: 14px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; background: transparent; color: #7d90a2; padding: 7px 0; font-size: 12px; }
.text-button:hover:not(:disabled) { color: white; }
.text-button:disabled { opacity: .3; cursor: not-allowed; }
.text-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.ban-board { display: grid; grid-template-columns: 1fr 50px 1fr; align-items: end; padding: 16px 18px 4px; position: relative; }
.ban-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #6e8293; font-size: 10px; }
.red-bans .ban-label { justify-content: flex-end; }
.ban-label i { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(48,164,245,.35), transparent); }
.red-bans .ban-label i { background: linear-gradient(90deg, transparent, rgba(239,83,106,.35)); }
.ban-slots { display: flex; gap: 7px; }
.red-bans .ban-slots { justify-content: flex-end; }
.ban-slot { position: relative; flex: 0 1 50px; aspect-ratio: 1; background: rgba(2,8,14,.6); border: 1px solid rgba(119,151,178,.14); overflow: hidden; }
.ban-slot::before, .ban-slot::after { content: ""; position: absolute; top: 50%; left: 17%; width: 66%; height: 1px; background: #33475a; transform: rotate(45deg); opacity: .5; }
.ban-slot::after { transform: rotate(-45deg); }
.ban-slot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.9) brightness(.52); }
.ban-slot.filled::after { height: 2px; background: var(--red); opacity: .65; }
.ban-slot.filled::before { display: none; }
.ban-slot.skipped { display: grid; place-items: center; color: #3b4b5a; font: 700 9px "Rajdhani"; }
.ban-divider { align-self: center; text-align: center; color: #3e5162; font: 700 8px "Rajdhani"; letter-spacing: .15em; }

.pick-arena { display: grid; grid-template-columns: minmax(0,1fr) 130px minmax(0,1fr); gap: 12px; min-height: 306px; padding: 8px 18px 18px; position: relative; }
.pick-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.pick-slot { min-width: 0; position: relative; overflow: hidden; background: rgba(3,10,17,.62); border: 1px solid rgba(119,151,178,.13); }
.pick-slot.active { border-color: var(--blue); box-shadow: inset 0 0 30px rgba(48,164,245,.1), 0 0 13px rgba(48,164,245,.12); }
.red-pick.active { border-color: var(--red); box-shadow: inset 0 0 30px rgba(239,83,106,.1), 0 0 13px rgba(239,83,106,.12); }
.pick-slot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; animation: reveal .3s ease-out; }
@keyframes reveal { from { opacity: 0; transform: scale(1.08); } }
.pick-slot .empty-number { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(111,130,150,.24); font: 700 38px "Rajdhani"; }
.pick-caption { position: absolute; inset: auto 0 0; min-height: 50px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 7px 8px; background: linear-gradient(transparent, rgba(2,7,12,.95)); }
.pick-caption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.pick-caption small { color: #5d7284; font: 700 8px "Rajdhani"; letter-spacing: .1em; }
.pick-slot.active .empty-number { color: rgba(48,164,245,.5); animation: slotPulse 1s infinite alternate; }
.red-pick.active .empty-number { color: rgba(239,83,106,.5); }
@keyframes slotPulse { to { opacity: .4; } }

.versus-core { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.phase-orbit { width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid rgba(201,155,74,.3); border-radius: 50%; position: relative; background: radial-gradient(circle, rgba(201,155,74,.1), transparent 68%); }
.phase-orbit::before, .phase-orbit::after { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(201,155,74,.18); border-radius: 50%; }
.phase-orbit::after { inset: -7px; border-style: solid; opacity: .3; }
.orbit-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); top: -3px; box-shadow: 0 0 9px var(--gold); animation: orbit 8s linear infinite; transform-origin: 3px 47px; }
@keyframes orbit { to { transform: rotate(360deg); } }
.phase-orbit div { text-align: center; }
.phase-orbit small { display: block; color: #687b8c; font: 700 7px "Rajdhani"; letter-spacing: .18em; }
.phase-orbit strong { color: #e2c27e; font: 700 22px "Rajdhani"; }
.versus { margin-top: 13px; color: #5b6d7e; font: 700 18px "Rajdhani"; letter-spacing: .2em; }
.versus-core p { margin: 3px 0 0; color: #465868; font-size: 9px; }

.locked-summary { margin: 0 18px 18px; background: rgba(4,12,20,.65); border: 1px solid var(--line); position: relative; }
.locked-toggle { width: 100%; display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; background: transparent; border: 0; }
.lock-icon { width: 30px; height: 30px; display: grid; place-items: center; background: rgba(201,155,74,.08); border: 1px solid rgba(201,155,74,.18); color: var(--gold); }
.lock-icon svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.locked-toggle b { display: block; color: #aebdca; font-size: 11px; }
.locked-toggle small { color: #536678; font-size: 9px; }
.locked-toggle em { color: var(--gold); font-style: normal; }
.chevron { width: 15px; fill: none; stroke: #64798b; stroke-width: 2; transition: transform .2s; }
.locked-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.locked-content { display: none; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 56px; }
.locked-content.open { display: flex; }
.locked-pill { display: flex; align-items: center; gap: 5px; padding: 3px 7px 3px 3px; border: 1px solid var(--line); color: #8396a7; font-size: 10px; }
.locked-pill img { width: 22px; height: 22px; object-fit: cover; filter: grayscale(.6); }
.locked-empty { color: #475a6b; font-size: 10px; }

.champion-section { margin-top: 14px; overflow: hidden; }
.pool-toolbar { min-height: 76px; padding: 12px 18px; display: grid; grid-template-columns: auto minmax(220px,340px) 1fr auto; gap: 18px; align-items: center; border-bottom: 1px solid var(--line); }
.pool-title { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.pool-title span { color: #596d7e; font: 700 8px "Rajdhani"; letter-spacing: .18em; }
.pool-title h2 { margin: 1px 0 0; font-size: 18px; }
.title-icon { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(201,155,74,.08); border: 1px solid rgba(201,155,74,.2); color: var(--gold); }
.title-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.search-box { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #06101b; border: 1px solid var(--line); }
.search-box:focus-within { border-color: rgba(201,155,74,.42); }
.search-box svg { width: 17px; fill: none; stroke: #607486; stroke-width: 1.6; }
.search-box input { min-width: 0; flex: 1; background: transparent; border: 0; outline: 0; color: white; }
.search-box input::placeholder { color: #485a6a; }
kbd { padding: 2px 5px; border: 1px solid #27394a; color: #526678; background: #0b1723; font: 10px "Rajdhani"; }
.role-filters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.role-button { height: 34px; padding: 0 10px; border: 1px solid transparent; background: transparent; color: #65798b; font-size: 11px; }
.role-button:hover { color: #b8c6d1; background: rgba(255,255,255,.025); }
.role-button.active { color: #e3c47e; border-color: rgba(201,155,74,.25); background: rgba(201,155,74,.07); }
.pool-meta { text-align: right; padding-left: 15px; border-left: 1px solid var(--line); }
.pool-meta strong { display: block; color: #c9d6df; font: 700 19px "Rajdhani"; }
.pool-meta span { color: #586c7d; font-size: 9px; }
.pool-message { display: none; padding: 28px; text-align: center; color: #657a8d; }

.champion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; max-height: 440px; overflow: auto; padding: 16px 18px 20px; scrollbar-width: thin; scrollbar-color: #263c4e #07111b; }
.champion-card { min-width: 0; border: 1px solid rgba(126,158,183,.13); background: #07111b; padding: 0; text-align: left; position: relative; overflow: hidden; transition: transform .16s, border-color .16s, filter .16s; }
.champion-card:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); z-index: 1; }
.champion-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.champion-portrait { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #0b1722; }
.champion-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 6px 8px; color: #aebdca; font-size: 11px; text-align: center; }
.champion-card:hover:not(:disabled) .champion-name { color: #f2d795; }
.champion-card:disabled { cursor: not-allowed; filter: grayscale(.9) brightness(.4); }
.champion-card:disabled::after { content: ""; position: absolute; top: 38%; left: 12%; width: 76%; height: 1px; background: var(--red); transform: rotate(-45deg); opacity: .75; }
.champion-card .status-tag { position: absolute; top: 4px; right: 4px; padding: 2px 4px; background: rgba(3,8,13,.9); color: #d06c79; font: 700 7px "Rajdhani"; letter-spacing: .05em; }
.champion-card.disabled-current .status-tag { color: #f0a95e; }

.footer-strip { min-height: 74px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0 0; }
.rule-note { color: #5a6d7d; font-size: 11px; }
.rule-note span { display: inline-block; margin-right: 7px; padding: 2px 6px; border: 1px solid rgba(201,155,74,.22); color: var(--gold); font: 700 8px "Rajdhani"; letter-spacing: .12em; }
.primary-button { height: 44px; min-width: 142px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 18px; background: linear-gradient(135deg, #b88b3d, #d2ad61); color: #09121b; font-weight: 800; box-shadow: 0 9px 25px rgba(190,142,57,.13); }
.primary-button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.primary-button:disabled { filter: grayscale(1); opacity: .34; cursor: not-allowed; }
.primary-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.primary-button.compact { min-width: auto; height: 38px; }

.toast-region { position: fixed; z-index: 30; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { min-width: 240px; padding: 12px 14px; background: #102233; border-left: 3px solid var(--gold); box-shadow: 0 12px 40px rgba(0,0,0,.5); color: #c9d6df; font-size: 12px; animation: toastIn .25s ease-out; }
.toast.error { border-color: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateX(12px); } }

.modal { width: min(560px, calc(100vw - 32px)); border: 1px solid rgba(201,155,74,.28); padding: 0; color: var(--text); background: #091522; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.modal::backdrop { background: rgba(1,5,9,.78); backdrop-filter: blur(5px); }
.modal form { padding: 22px; }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.modal h2 { margin: 4px 0 0; }
.modal-copy, .winner-modal p { color: #728698; font-size: 12px; line-height: 1.7; }
.modal textarea { width: 100%; min-height: 180px; resize: vertical; padding: 12px; outline: 0; background: #050d16; border: 1px solid var(--line); color: #b7c6d2; font: 11px/1.5 Consolas, monospace; }
.modal textarea:focus { border-color: rgba(201,155,74,.4); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.winner-modal { text-align: center; }
.winner-modal form { padding: 30px; }
.winner-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.winner-button { min-height: 110px; border: 1px solid var(--line); background: rgba(9,23,36,.8); }
.winner-button.blue:hover { border-color: var(--blue); box-shadow: inset 0 0 35px rgba(48,164,245,.11); }
.winner-button.red:hover { border-color: var(--red); box-shadow: inset 0 0 35px rgba(239,83,106,.11); }
.winner-button small { display: block; margin-bottom: 5px; color: #607486; font: 700 9px "Rajdhani"; letter-spacing: .16em; }
.winner-button strong { font-size: 18px; }
.winner-button.blue strong { color: #67bdf6; }
.winner-button.red strong { color: #f17687; }

/* Multiplayer room lobby */
body.lobby-open { overflow: hidden; }
.lobby-screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: auto;
  background:
    linear-gradient(rgba(5,11,19,.92), rgba(5,11,19,.98)),
    radial-gradient(circle at 18% 20%, rgba(27,127,191,.36), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(174,41,67,.26), transparent 28%),
    #050b13;
  transition: opacity .28s ease, visibility .28s ease;
}
.lobby-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.lobby-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.lobby-glow { position: fixed; width: 380px; height: 380px; border-radius: 50%; filter: blur(130px); opacity: .13; pointer-events: none; }
.lobby-glow.blue { background: var(--blue); left: -150px; top: 25%; }
.lobby-glow.red { background: var(--red); right: -160px; top: 18%; }
.lobby-shell { width: min(1080px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; padding: 0 0 34px; position: relative; }
.lobby-header { height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.service-status { display: flex; align-items: center; gap: 8px; color: #71879a; font-size: 11px; }
.service-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(89,214,160,.75); }
.lobby-hero { padding: 58px 0 45px; max-width: 650px; }
.lobby-hero h2 { margin: 12px 0 16px; font-size: clamp(38px, 5vw, 64px); line-height: 1.12; letter-spacing: -.04em; }
.lobby-hero h2 span { color: #8195a7; }
.lobby-hero > p:last-child { max-width: 570px; margin: 0; color: #718599; line-height: 1.8; }
.lobby-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 13px; background: rgba(10,24,38,.86); border: 1px solid var(--line); box-shadow: var(--shadow); }
.room-search { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #050e18; border: 1px solid rgba(145,181,211,.13); }
.room-search:focus-within { border-color: rgba(201,155,74,.42); }
.room-search svg { width: 19px; fill: none; stroke: #667b8c; stroke-width: 1.6; }
.room-search input { width: 100%; background: transparent; border: 0; outline: 0; color: white; font-size: 14px; }
.room-search input::placeholder { color: #4b5f71; }
.lobby-toolbar .primary-button { height: 46px; min-width: 150px; }
.lobby-toolbar .primary-button svg { width: 16px; }
.room-list-heading { display: flex; justify-content: space-between; align-items: end; padding: 30px 3px 13px; }
.room-list-heading span { color: #576c7e; font: 700 9px "Rajdhani"; letter-spacing: .18em; }
.room-list-heading h3 { margin: 4px 0 0; font-size: 18px; }
.room-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; min-height: 128px; }
.room-list-message { grid-column: 1 / -1; display: grid; place-items: center; min-height: 128px; border: 1px dashed rgba(145,181,211,.14); color: #607486; }
.room-card { min-width: 0; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 13px; padding: 17px; text-align: left; background: linear-gradient(135deg, rgba(13,29,45,.95), rgba(8,18,30,.95)); border: 1px solid var(--line); transition: .18s ease; }
.room-card:hover { transform: translateY(-2px); border-color: rgba(201,155,74,.45); box-shadow: 0 14px 35px rgba(0,0,0,.25); }
.room-emblem { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(201,155,74,.22); background: rgba(201,155,74,.06); color: var(--gold); transform: rotate(45deg); }
.room-emblem svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transform: rotate(-45deg); }
.room-card-info { min-width: 0; }
.room-card-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dce7ef; font-size: 15px; }
.room-card-info span { display: flex; align-items: center; gap: 10px; margin-top: 5px; color: #5f7487; font-size: 10px; }
.room-card-info i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.room-card-action { display: flex; align-items: center; gap: 9px; color: #8ca0b1; font-size: 11px; }
.room-card-action svg { width: 17px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.lobby-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); color: #4e6274; font-size: 10px; }
.lobby-footer b { color: #6c8193; font: 700 9px "Rajdhani"; letter-spacing: .15em; }

.room-live-chip { height: 38px; max-width: 180px; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 0 10px; text-align: left; background: rgba(13,30,44,.85); border: 1px solid rgba(89,214,160,.18); }
.room-live-chip:hover { border-color: rgba(89,214,160,.42); }
.room-live-chip .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #5b7082; }
.room-live-chip.connected .live-dot { background: var(--green); box-shadow: 0 0 9px rgba(89,214,160,.7); }
.room-live-chip small { display: block; color: #4f6577; font: 700 7px "Rajdhani"; letter-spacing: .13em; }
.room-live-chip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aebdca; font-size: 10px; }
.room-live-chip em { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 10px; background: rgba(89,214,160,.09); color: #73c9a5; font: normal 700 9px "Rajdhani"; }
.room-modal { width: min(460px, calc(100vw - 32px)); }
.room-modal form { display: grid; gap: 13px; }
.modal-field { display: grid; gap: 7px; text-align: left; }
.modal-field span { color: #7b8fa0; font-size: 11px; }
.modal-field input { height: 44px; padding: 0 12px; outline: 0; background: #050e18; border: 1px solid var(--line); color: white; }
.modal-field input:focus { border-color: rgba(201,155,74,.46); }
.modal-field input::placeholder { color: #405465; }
.form-error { min-height: 18px; margin: -3px 0 0; color: #f17687; font-size: 11px; }
.modal-submit { width: 100%; }
.member-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 48px; padding: 11px; background: #050e18; border: 1px solid var(--line); }
.member-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid rgba(89,214,160,.16); color: #9bb0bf; font-size: 10px; }
.member-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.leave-room-button { width: 100%; margin-top: 4px; }
.sync-flash { animation: syncFlash .55s ease; }
@keyframes syncFlash { 50% { border-color: rgba(89,214,160,.7); box-shadow: 0 0 16px rgba(89,214,160,.12); } }

@media (max-width: 1250px) {
  .draft-layout { grid-template-columns: 210px minmax(600px, 1fr) 210px; }
  .team-heading { padding-inline: 13px; }
  .team-heading input { width: 120px; font-size: 17px; }
  .pool-toolbar { grid-template-columns: auto minmax(220px,1fr) auto; }
  .role-filters { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 1fr auto; padding: 14px 0; }
  .series-strip { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .draft-layout { grid-template-columns: 1fr 1fr; }
  .draft-stage { grid-column: 1 / -1; grid-row: 1; }
  .team-panel { min-height: auto; }
  .team-panel.blue-side { grid-row: 2; }
  .team-panel.red-side { grid-row: 2; }
  .roster { display: grid; grid-template-columns: repeat(5,1fr); }
  .player-row, .red-side .player-row { min-width: 0; grid-template-columns: 1fr; text-align: center; }
  .role-emblem { margin: auto; }
  .red-side .player-info { text-align: center; }
  .team-heading input, .red-side .team-heading input { text-align: left; }
}

@media (max-width: 720px) {
  .app-shell { padding: 0 10px 18px; }
  .topbar { gap: 12px; }
  .brand-mark { width: 38px; height: 44px; }
  .brand h1 { font-size: 16px; }
  .header-actions .secondary-button { padding: 0 9px; font-size: 0; }
  .header-actions .secondary-button::after { content: "数据"; font-size: 11px; }
  .header-actions .danger-ghost::after { content: "重置"; }
  .series-strip { width: 100%; }
  .scoreboard { flex: 1; justify-content: center; }
  .draft-layout { display: flex; flex-direction: column; }
  .draft-stage { order: 1; }
  .team-panel.blue-side { order: 2; }
  .team-panel.red-side { order: 3; }
  .phase-header { grid-template-columns: 1fr auto; padding: 12px; }
  .turn-controls { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
  .ban-board { grid-template-columns: 1fr 24px 1fr; padding: 12px 9px 4px; }
  .ban-slots { gap: 3px; }
  .pick-arena { grid-template-columns: 1fr 58px 1fr; padding-inline: 8px; gap: 5px; min-height: 250px; }
  .pick-list { grid-template-columns: 1fr; }
  .pick-slot { min-height: 58px; }
  .pick-slot img { position: absolute; inset: 0; object-position: 50% 22%; }
  .pick-caption { min-height: 36px; padding: 12px 5px 5px; }
  .pick-caption small { display: none; }
  .phase-orbit { width: 54px; height: 54px; }
  .phase-orbit::after { inset: -3px; }
  .orbit-dot { transform-origin: 3px 30px; }
  .versus-core p { display: none; }
  .locked-summary { margin-inline: 8px; }
  .pool-toolbar { grid-template-columns: 1fr auto; gap: 10px; }
  .pool-title { min-width: 0; }
  .search-box { grid-column: 1 / -1; grid-row: 2; }
  .role-filters { grid-row: 3; }
  .pool-meta { grid-column: 2; grid-row: 1; }
  .champion-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); padding: 10px; gap: 7px; max-height: 520px; }
  .footer-strip { align-items: stretch; flex-direction: column; }
  .primary-button { width: 100%; }
  .winner-buttons { grid-template-columns: 1fr; }
  .lobby-shell { width: min(100% - 22px, 1080px); }
  .lobby-header { height: 78px; }
  .lobby-hero { padding: 40px 0 30px; }
  .lobby-hero h2 { font-size: 38px; }
  .lobby-toolbar { grid-template-columns: 1fr; }
  .lobby-toolbar .primary-button { width: 100%; }
  .room-list { grid-template-columns: 1fr; }
  .room-card { padding: 14px; }
  .lobby-footer { flex-direction: column; }
  .room-live-chip { max-width: 126px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}