:root {
  --bg: #000000;
  --panel: #000000;
  --line: #ffffff;
  --line-dim: rgba(255, 255, 255, 0.35);
  --line-faint: rgba(255, 255, 255, 0.16);
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.68);
  --lime: #ffffff;
  --blue: #ffffff;
  --red: #ffffff;
  --font-main: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  font-family: var(--font-main);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-main);
  font-size:15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: var(--font-main);
  font-size: inherit;
  color: var(--ink);
}

button {
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: #000000;
  color: var(--ink);
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

button:hover:not(:disabled) {
  background: #ffffff;
  color: #000000;
}

button:disabled {
  opacity: 0.35;
  border-color: var(--line-dim);
  cursor: not-allowed;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.primary {
  background: #ffffff;
  color: #000000;
  font-weight: 800;
  border: 1px solid #ffffff;
}

.primary:hover:not(:disabled) {
  background: #000000;
  color: #ffffff;
}

.quiet {
  background: transparent;
  border: 1px solid var(--line-dim);
}

.muted {
  color: var(--muted);
}

.tiny {
  font-size:13px;
}

.green, .blue, .red {
  color: #ffffff;
}

/* Header & Shell */
header {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: #000000;
  flex-wrap: wrap;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.brand {
  font-size:25px;
  letter-spacing: 4px;
  font-weight: 900;
  text-decoration: none;
  color: var(--ink);
}

.brand span {
  color: var(--ink);
}

.version {
  font-size:12px;
  color: var(--ink);
  letter-spacing: 1.5px;
}

.version b {
  display: block;
  color: var(--muted);
  letter-spacing: 0;
  font-weight: 400;
}

.shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  max-width: 1680px;
  margin: auto;
}

.shell.full-stage {
  display: block;
  max-width: 1440px;
}

.shell.full-stage > nav {
  display: none;
}

nav {
  padding: 24px 16px;
  border-right: 1px solid var(--line);
  min-height: calc(100vh - 65px);
  background: #000000;
}

nav button {
  display: block;
  text-align: left;
  background: #000000;
  border: 1px solid transparent;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
}

nav button:hover:not(:disabled) {
  border-color: var(--line);
  background: #000000;
  color: #ffffff;
}

nav button.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 800;
}

nav p {
  font-size:12px;
  color: var(--muted);
  margin: 20px 8px;
}

main {
  padding: 28px;
  min-width: 0;
}

h1 {
  font-size:31px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin: 4px 0 12px;
  font-weight: 900;
}

h2 {
  font-size:21px;
  margin: 0 0 12px;
  font-weight: 800;
}

h3 {
  font-size:17px;
  margin: 0 0 8px;
  font-weight: 700;
}

p {
  margin: 8px 0;
}

.eyebrow {
  font-size:12px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.panel {
  background: #000000;
  border: 1px solid var(--line);
  padding: 20px;
  margin: 18px 0;
}

.notice {
  border: 1px solid var(--line-dim);
  border-left: 4px solid #ffffff;
  background: #000000;
  padding: 12px 16px;
  color: var(--ink);
  font-size:14px;
  margin: 16px 0;
}

/* =========================================================
   1. 로그인 & 2. 홈 로비 (Full-Stage Black/White Typographic Layout)
   ========================================================= */
.stage-screen {
  min-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  padding: 28px;
  position: relative;
  background: #000000;
}

.stage-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.stage-logo {
  font-size:43px;
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1;
}

.stage-logo small {
  display: block;
  font-size:13px;
  letter-spacing: 3px;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 500;
}

.stage-bg-placeholder {
  flex: 1;
  min-height: 280px;
  margin: 24px 0;
  border: 1px dashed var(--line-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.stage-bg-placeholder .placeholder-title {
  font-size:19px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--muted);
}

.stage-bg-placeholder .placeholder-sub {
  font-size:13px;
  color: var(--muted);
  margin-top: 6px;
}

/* Login Box at Bottom-Center */
.login-bottom-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

.login-box {
  width: 100%;
  max-width: 460px;
  border: 2px solid #ffffff;
  background: #000000;
  padding: 22px 24px;
}

.login-box h2 {
  font-size:19px;
  letter-spacing: 2px;
  margin: 0 0 12px;
  text-align: center;
  border-bottom: 1px solid var(--line-dim);
  padding-bottom: 10px;
}

.login-form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.login-form-row input {
  flex: 1;
}

.login-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.login-preset-btn {
  padding: 12px 10px;
  text-align: center;
  border: 1px solid #ffffff;
  background: #000000;
}

.login-preset-btn strong {
  display: block;
  font-size:16px;
  margin-bottom: 4px;
}

.login-preset-btn small {
  display: block;
  font-size:12px;
  color: var(--muted);
}

.login-preset-btn:hover strong,
.login-preset-btn:hover small {
  color: #000000;
}

/* Home Lobby Bottom Navigation Bar */
.lobby-bottom-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-dim);
  flex-wrap: wrap;
}

.lobby-left-group {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.lobby-right-group {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

.lobby-text-box {
  min-width: 130px;
  padding: 16px 22px;
  border: 2px solid #ffffff;
  background: #000000;
  color: #ffffff;
  font-size:18px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lobby-text-box small {
  font-size:12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0;
}

.lobby-text-box:hover:not(:disabled) small {
  color: #000000;
}

.lobby-text-box.shop-static {
  cursor: default;
}

.lobby-text-box.shop-static:hover {
  background: #000000;
  color: #ffffff;
}

.lobby-text-box.shop-static:hover small {
  color: var(--muted);
}

.lobby-text-box.match-start-box {
  min-width: 180px;
  font-size:20px;
  background: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
}

.lobby-text-box.match-start-box small {
  color: #000000;
}

.lobby-text-box.match-start-box:hover:not(:disabled) {
  background: #000000;
  color: #ffffff;
}

.lobby-text-box.match-start-box:hover:not(:disabled) small {
  color: var(--muted);
}

.lobby-sub-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* =========================================================
   4. 로스터 구성 (Image 1: 01~05 Tabs + Power + 3+2 Card Formation)
   ========================================================= */
.roster-stage {
  max-width: 1100px;
  margin: 0 auto;
}

.preset-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 18px;
  flex-wrap: wrap;
}

.preset-tab {
  min-width: 58px;
  height: 44px;
  border: 2px solid #ffffff;
  background: #000000;
  color: #ffffff;
  font-size:19px;
  font-weight: 900;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.preset-tab.active {
  background: #ffffff;
  color: #000000;
}

.power-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 360px;
  margin: 0 auto 26px;
  padding: 10px 20px;
  border: 2px solid #ffffff;
  background: #000000;
}

.power-banner .power-label {
  font-size:13px;
  font-weight: 800;
  letter-spacing: 2px;
  border-right: 1px solid var(--line-dim);
  padding-right: 14px;
}

.power-banner .power-value {
  font-size:27px;
  font-weight: 900;
  letter-spacing: 1px;
}

/* 3+2 Formation Layout (Image 1) */
.formation-3-2 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  margin-bottom: 28px;
}

.formation-row-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 250px));
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.formation-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 250px));
  gap: 20px;
  justify-content: center;
  width: 100%;
}

/* Database Player Card (Image 1 & Image 2 Style in Black/White Typography) */
.db-card {
  border: 2px solid #ffffff;
  background: #000000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 310px;
  transition: transform 0.12s ease;
}

.db-card:hover {
  transform: translateY(-2px);
}

.db-card.picked-card {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.db-card-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}

.db-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.db-card-badges-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.badge-box {
  display: inline-block;
  border: 1px solid #ffffff;
  padding: 2px 7px;
  font-size:12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: #000000;
  color: #ffffff;
  text-align: center;
}

.badge-grade {
  border: 2px solid #ffffff;
  padding: 3px 9px;
  font-size:13px;
  font-weight: 900;
  letter-spacing: 1px;
}

.badge-grade.UR, .badge-grade.SSR {
  background: #ffffff;
  color: #000000;
}

.db-card-center {
  margin: 16px 0 12px;
  text-align: center;
  padding: 10px 6px;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}

.db-card-team {
  font-size:12px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.db-card-nick {
  font-size:25px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.2;
  word-break: keep-all;
}

.db-card-real {
  font-size:13px;
  color: var(--muted);
  margin-top: 2px;
}

.db-card-statline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-faint);
  font-size:11px;
}

.db-card-statline span {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted);
}

.db-card-statline b {
  font-size:14px;
  color: #ffffff;
  margin-top: 1px;
}

.db-card-sig {
  font-size:12px;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottom OVR & Name Strip (matches LV.271 + Name in Image 1) */
.db-card-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 2px solid #ffffff;
}

.db-card-ovr {
  font-size:23px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.db-card-ovr small {
  font-size:11px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 3px;
}

.db-card-strip-name {
  font-size:14px;
  font-weight: 800;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom Footer Bar ([Role | ⓘ] in Image 1) */
.db-card-footer {
  display: grid;
  grid-template-columns: 1fr 48px;
  border-top: 1px solid #ffffff;
  background: #000000;
}

.db-card-footer button {
  border: 0;
  padding: 9px 8px;
  font-size:13px;
  font-weight: 800;
}

.db-card-footer button + button {
  border-left: 1px solid #ffffff;
}

/* Checked / Equipped Overlay Badge for Image 2 Grid */
.db-card-check {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #000000;
  font-size:12px;
  font-weight: 900;
  padding: 2px 10px;
  letter-spacing: 0.5px;
  border: 1px solid #ffffff;
  z-index: 2;
}

/* =========================================================
   Image 2: 선수 선택창 (Top Squad Mini Bar + Search/Role Filter + Card Grid)
   ========================================================= */
.selector-top-squad {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid #ffffff;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.mini-squad-card {
  width: 120px;
  border: 2px solid #ffffff;
  padding: 8px 10px;
  background: #000000;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
}

.mini-squad-card.active {
  background: #ffffff;
  color: #000000;
}

.mini-squad-card.active .muted,
.mini-squad-card.active small {
  color: #000000;
}

.mini-squad-top {
  display: flex;
  justify-content: space-between;
  font-size:12px;
  font-weight: 800;
}

.mini-squad-nick {
  font-size:16px;
  font-weight: 900;
  margin: 6px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-squad-bottom {
  display: flex;
  justify-content: space-between;
  font-size:13px;
  font-weight: 800;
  border-top: 1px solid currentColor;
  padding-top: 4px;
}

/* Middle Filter Bar (Image 2: [🔍] [탑] [정글] [미드] [원딜] [서폿] + Sort) */
.selector-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 16px 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-dim);
}

.selector-role-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.role-tab-btn {
  min-width: 58px;
  height: 42px;
  padding: 0 14px;
  border: 2px solid #ffffff;
  background: #000000;
  color: #ffffff;
  font-size:15px;
  font-weight: 800;
}

.role-tab-btn.active {
  background: #ffffff;
  color: #000000;
}

.selector-search-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 860px;
}

.selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

/* =========================================================
   Existing Views & Components (Preserved & Styled in Black/White)
   ========================================================= */
.roster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.slot {
  background: #000000;
  border: 1px solid var(--line);
  padding: 15px;
  min-width: 0;
}

.slot.active {
  border-width: 2px;
}

.role {
  font-size:12px;
  color: var(--ink);
  letter-spacing: 1px;
  font-weight: 800;
}

.slot strong {
  display: block;
  font-size:21px;
  margin: 10px 0 0;
}

.slot small {
  display: block;
  color: var(--muted);
}

.slot .ovr {
  font-size:27px;
  color: var(--ink);
  font-weight: 900;
}

.slot button {
  width: 100%;
  margin-top: 10px;
  padding: 7px;
  font-size:13px;
}

.bench {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.bench > div {
  padding: 14px;
  background: #000000;
  border: 1px solid var(--line);
  flex: 1;
  min-width: 220px;
}

.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}

.filters label {
  margin: 0;
}

.filters input, .filters select {
  margin-top: 6px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  background: #000000;
  border: 1px solid var(--line);
  border-radius: 0;
}

label {
  display: block;
  color: var(--muted);
  font-size:13px;
  margin: 10px 0 5px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.player {
  background: #000000;
  border: 1px solid var(--line);
  padding: 16px;
  min-width: 0;
}

.player.picked {
  border-width: 2px;
}

.player h3 {
  font-size:21px;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.grade {
  font-size:12px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 2px 8px;
  font-weight: 800;
}

.grade.UR, .grade.SSR {
  background: #ffffff;
  color: #000000;
}

.stats {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: 12px 0;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
  padding: 8px 0;
}

.stats span {
  font-size:11px;
  color: var(--muted);
  text-align: center;
}

.stats b {
  display: block;
  font-size:16px;
  color: var(--ink);
}

.signatures {
  font-size:13px;
  min-height: 36px;
  color: var(--muted);
}

.player .actions, .actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.player .actions button {
  flex: 1;
  font-size:13px;
  padding: 8px;
}

.pill {
  display: inline-block;
  font-size:12px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  background: #000000;
  color: #ffffff;
  font-weight: 700;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 24px 0;
}

dialog {
  color: var(--ink);
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: 0;
  max-width: 760px;
  width: calc(100% - 32px);
  max-height: 90vh;
  padding: 24px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size:14px;
}

th, td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line-dim);
}

th {
  color: var(--muted);
  font-weight: 700;
}

.draftlayout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  gap: 16px;
}

.team {
  background: #000000;
  border: 1px solid var(--line);
  padding: 14px;
}

.team .pick {
  border-top: 1px solid var(--line-dim);
  padding: 10px 0;
}

.team .pick b {
  display: block;
}

.team .pick small {
  display: block;
  color: var(--muted);
}

.champions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.champ {
  padding: 12px 7px;
  text-align: center;
  min-height: 86px;
  background: #000000;
  border: 1px solid var(--line-dim);
}

.champ b {
  display: block;
}

.champ small {
  font-size:11px;
  color: var(--muted);
}

.champ.selected {
  border: 2px solid #ffffff;
  background: #ffffff;
  color: #000000;
}

.champ.selected small,
.champ.selected .sig {
  color: #000000;
}

.champ .sig {
  display: block;
  color: #ffffff;
  font-size:11px;
  font-weight: 700;
  margin-top: 3px;
}

.timeline {
  display: flex;
  gap: 6px;
  overflow: auto;
  margin: 18px 0;
  padding-bottom: 8px;
}

.timeline span {
  min-width: 64px;
  background: #000000;
  border: 1px solid var(--line-dim);
  padding: 7px;
  font-size:11px;
  text-align: center;
}

.timeline .current {
  border: 2px solid #ffffff;
  background: #ffffff;
  color: #000000;
  font-weight: 800;
}

.draft-controls {
  background: #000000;
  border: 1px solid var(--line);
  padding: 18px;
  margin-bottom: 16px;
}

.banlist {
  font-size:13px;
  color: var(--muted);
  min-height: 36px;
}

.note {
  border-top: 1px solid var(--line-dim);
  padding: 14px 0;
}

.note p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
  padding: 12px 22px;
  font-weight: 800;
  display: none;
  max-width: 90vw;
  z-index: 20;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.summary-role {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line-dim);
  padding: 10px 0;
}

.summary-role small {
  color: var(--muted);
}

.empty {
  padding: 36px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-dim);
}

details {
  margin: 14px 0;
}

summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.7;
}

a {
  color: var(--ink);
}

.real-name {
  display: block;
  font-size:13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

progress {
  width: 100%;
  height: 14px;
  accent-color: #ffffff;
  margin: 4px 0 8px;
}

#battle-count {
  color: #ffffff;
  font-size:25px;
}

.lane-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.lane-card {
  border: 1px solid var(--line);
  padding: 14px;
  overflow-wrap: anywhere;
}

.lane-detail {
  border-bottom: 1px solid var(--line-dim);
  padding: 8px 0;
}

/* =========================================================
   Responsive Design (PC & Mobile Active Support)
   ========================================================= */
@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 160px minmax(0, 1fr);
  }
  main {
    padding: 20px;
  }
  .draftlayout {
    grid-template-columns: 150px minmax(0, 1fr) 150px;
  }
  .champions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  header {
    padding: 10px 14px;
    gap: 10px;
  }
  .shell {
    display: block;
  }
  nav {
    min-height: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  nav button {
    width: auto;
    white-space: nowrap;
    margin: 0;
    padding: 8px 12px;
  }
  nav p {
    display: none;
  }
  main {
    padding: 16px 14px;
  }
  .formation-row-3 {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 10px;
  }
  .formation-row-2 {
    grid-template-columns: repeat(2, minmax(150px, 220px));
    gap: 10px;
  }
  .draftlayout {
    grid-template-columns: 1fr 1fr;
  }
  .draftlayout .center {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .selector-search-row,
  .filters {
    grid-template-columns: 1fr 1fr;
  }
  .two {
    grid-template-columns: 1fr;
  }
  .lane-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-bottom-bar {
    flex-direction: column;
  }
  .lobby-left-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  .lobby-right-group {
    width: 100%;
  }
  .lobby-text-box.match-start-box {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .formation-row-3,
  .formation-row-2 {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  .login-preset-grid {
    grid-template-columns: 1fr;
  }
  .selector-search-row,
  .filters {
    grid-template-columns: 1fr;
  }
  .selector-grid,
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .db-card {
    min-height: 250px;
  }
  .db-card-nick {
    font-size:19px;
  }
  .mini-squad-card {
    width: calc(33.33% - 8px);
    min-width: 92px;
  }
  .champions {
    grid-template-columns: repeat(3, 1fr);
  }
  .lane-grid {
    grid-template-columns: 1fr;
  }
}

/* Requested persistent navigation; original card and typography styles unchanged. */
[hidden]{display:none!important}
.shell.player-mode{display:block}
.shell.player-mode>#nav{display:none}
.shell.developer-mode{display:grid;grid-template-columns:200px minmax(0,1fr);max-width:1680px}
.shell.developer-mode>#nav{display:block}
#bottom-menu{position:fixed;bottom:0;left:0;right:0;z-index:40;background:#000;border-top:1px solid var(--line);padding:12px 24px max(12px,env(safe-area-inset-bottom))}
#bottom-menu .lobby-bottom-bar{max-width:1632px;margin:auto;padding:0;border:0}
body.has-bottom-menu{padding-bottom:126px}
#top-header{position:sticky;top:0;z-index:45}
@media(max-width:850px){
 .shell.developer-mode{grid-template-columns:1fr}
 #bottom-menu{padding:8px 12px max(8px,env(safe-area-inset-bottom))}
 #bottom-menu .lobby-bottom-bar{flex-direction:row;flex-wrap:nowrap;gap:8px}
 #bottom-menu .lobby-left-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;flex:1;min-width:0;width:auto}
 #bottom-menu .lobby-right-group{width:auto;margin-left:0}
 #bottom-menu .lobby-text-box{min-width:0;padding:10px 4px;font-size:13px;letter-spacing:0}
 #bottom-menu .lobby-text-box small{font-size:10px}
}

/* v0.18 draft broadcast room */
.draft-mode main{padding:18px 16px}.draft-room{max-width:1600px;margin:0 auto}.draft-scoreboard{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;gap:18px;margin-bottom:18px;align-items:start}.draft-score{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.draft-score strong{font-size:29px}.draft-score.right{justify-content:flex-end}.score-boxes{display:flex;gap:5px}.score-boxes span{display:block;width:25px;height:18px;border:1px solid #aaa}.score-boxes .won{background:#fff}.fearless-board h2{font-size:14px;margin:0 0 8px}.fearless-board h2 small{float:right;color:#888;font-size:10px}.fearless-board>div{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}.fearless-board p{display:flex;margin:0;font-size:11px;border-bottom:1px solid #333;padding:5px;gap:10px;line-height:1.5}.fearless-board p b{white-space:nowrap}.fearless-board p span{color:#aaa}.draft-banbar{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:14px}.draft-banbar>b{text-align:center;font-size:13px}.draft-ban{border:1px solid #555;padding:10px;font-size:12px;display:flex;gap:12px;align-items:center}.draft-ban>div{display:flex;gap:6px;flex:1;flex-wrap:wrap}.draft-ban span{background:#191919;min-width:30px;text-align:center;padding:4px 6px}.draft-progress-label{display:flex;justify-content:space-between;font-size:11px;color:#aaa;margin-top:12px}.draft-progress{width:100%;height:4px;display:block;margin:8px 0 18px}.draft-stage{display:grid;grid-template-columns:165px 130px minmax(300px,1fr) 130px 165px;gap:12px;align-items:start}.draft-stage>.team{padding:12px;margin:0}.draft-stage .team h3{font-size:16px;min-height:26px}.draft-stage .team .pick{min-height:124px;display:flex;flex-direction:column;justify-content:center;padding:10px 0}.draft-stage .team .pick small{font-size:12px;line-height:1.6}.draft-stage .team .pick b{font-size:15px}.draft-stage .team .pick .role{font-size:11px;margin-bottom:6px}.draft-voices{padding-top:46px}.voice-slot{min-height:124px;display:flex;flex-direction:column;justify-content:center;gap:5px}.voice-bubble{position:relative;border:1px solid #777;padding:10px 9px;font-size:12px;line-height:1.65;margin:0;background:#151515;overflow-wrap:anywhere}.voice-bubble:before{content:'';position:absolute;left:-6px;top:20px;width:10px;height:10px;background:#151515;border-left:1px solid #777;border-bottom:1px solid #777;transform:rotate(45deg)}.voice-bubble>span{display:block;font-size:10px;color:#999;margin-bottom:4px}.ai-gestures .voice-bubble:before{left:auto;right:-6px;border:0;border-top:1px solid #777;border-right:1px solid #777}.draft-voices>small{display:block;font-size:10px;color:#777;line-height:1.5;margin-top:10px}.draft-broadcast{border:1px solid #aaa;padding:20px 18px;min-height:125px;display:flex;justify-content:center;flex-direction:column;margin-bottom:14px}.draft-broadcast .eyebrow{font-size:10px;color:#aaa}.draft-broadcast p{font-size:17px;line-height:1.7;margin:10px 0 0}.draft-core{min-width:0}.draft-core .draft-controls{padding:14px;margin:0 0 8px}.draft-controls h2{font-size:15px;margin:0}.draft-controls label{font-size:11px}.draft-core .champions{gap:5px;margin-bottom:10px;grid-template-columns:repeat(4,minmax(0,1fr))}.draft-core .champ{min-height:76px;padding:8px 3px;font-size:12px}.draft-core .champ small{font-size:10px}.draft-pagination{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border:1px solid #444;padding:8px;font-size:12px}.draft-pagination button{padding:6px 12px;font-size:12px}.draft-analysis{border:1px solid #555;margin:14px 0;padding:14px}.draft-analysis h3,.draft-ability h3{font-size:14px;margin-bottom:8px}.draft-analysis p{font-size:12px}.draft-analysis details{margin-top:8px}.draft-core .panel{padding:14px;margin-bottom:14px}.draft-core .panel h2{font-size:15px}.draft-core .panel select{font-size:12px;padding:9px;margin-bottom:5px}.draft-core .panel p{font-size:12px}.draft-core .panel details{font-size:12px;border-top:1px solid #333;padding:7px 0}.draft-await{padding:24px;border:1px dashed #555;color:#aaa;font-size:13px;text-align:center}.draft-order{font-size:12px;margin-top:20px;border-top:1px solid #444;padding-top:12px}
@media(min-width:1500px){.draft-stage{grid-template-columns:180px 155px minmax(380px,1fr) 155px 180px}.draft-voices .voice-bubble{font-size:13px}}
@media(max-width:1190px){.draft-stage{grid-template-columns:150px minmax(0,1fr) 150px;gap:10px}.draft-stage>.team:first-child{grid-column:1;grid-row:1}.draft-stage>.team:last-child{grid-column:3;grid-row:1}.draft-core{grid-column:2;grid-row:1}.draft-voices{grid-row:2;padding-top:0}.draft-voices:not(.ai-gestures){grid-column:1/3}.draft-voices.ai-gestures{grid-column:3}.draft-voices .voice-slot{min-height:0;margin:6px 0}.draft-voices .voice-bubble:before{display:none}.draft-scoreboard{grid-template-columns:145px minmax(0,1fr) 145px}.draft-core .champions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.draft-mode main{padding:12px 8px}.draft-scoreboard{grid-template-columns:1fr 1fr;gap:10px}.fearless-board{grid-column:1/-1;grid-row:2}.draft-score.right{grid-column:2;grid-row:1}.draft-score{font-size:12px}.draft-stage{grid-template-columns:1fr 1fr}.draft-stage>.team:first-child{grid-column:1;grid-row:1}.draft-stage>.team:last-child{grid-column:2;grid-row:1}.draft-stage .team .pick{min-height:100px}.draft-core{grid-column:1/-1;grid-row:3}.draft-voices:not(.ai-gestures){grid-column:1;grid-row:2}.draft-voices.ai-gestures{grid-column:2;grid-row:2}.draft-banbar{grid-template-columns:1fr 1fr;gap:6px}.draft-banbar>b{grid-column:1/-1;grid-row:1}.draft-ban{display:block;font-size:11px;padding:7px}.draft-ban>div{margin-top:5px}.draft-core .champions{grid-template-columns:repeat(3,minmax(0,1fr))}.draft-broadcast{min-height:100px}.draft-broadcast p{font-size:15px}.fearless-board p{font-size:10px}}
.draft-clock-note{font-size:11px;color:#888;margin:-9px 0 16px}.draft-core .draft-pagination{min-width:0}.draft-stage .team .pick{overflow-wrap:anywhere}

/* v0.18.1 layout and timed presentation */
.draft-score{flex-direction:column;align-items:flex-start;gap:12px;justify-content:flex-start}.draft-score.right{align-items:flex-end;justify-content:flex-start;text-align:right}.draft-score .score-boxes{margin:0}.draft-scoreboard>.right{justify-self:end}
.draft-stage{align-items:stretch}.draft-stage>.team{display:flex;flex-direction:column;align-self:stretch}.draft-stage .team .pick{flex:1}.draft-stage .team>.tiny{margin-top:18px}.draft-stage .draft-core{display:flex;flex-direction:column}.draft-stage .draft-analysis{margin-bottom:0}.draft-voices{display:grid;grid-template-rows:repeat(5,minmax(124px,1fr));padding-top:46px;padding-bottom:76px;align-self:stretch}.voice-slot{min-height:0}.draft-extras{margin:16px 319px 0}.draft-extras .panel{padding:14px}.draft-extras .panel h2{font-size:15px}.draft-extras p,.draft-extras select,.draft-extras details{font-size:12px}.draft-extras .panel{margin-bottom:14px}
.draft-clock-track{height:12px;width:100%;overflow:hidden;background:#242424;border:1px solid #606060;margin:8px 0 14px}.draft-clock-track>div{height:100%;background:#fff;transform-origin:left center;transition:transform .1s linear;will-change:transform}.draft-clock-note{margin:0 0 16px}
.voice-bubble>.voice-copy{display:block;color:var(--ink);font-size:12px;margin:0;line-height:1.65;min-height:1.65em}.timed-bubble{transform-origin:right center;animation:voice-own 3s linear both;will-change:transform,opacity}.ai-gestures .timed-bubble{transform-origin:left center;animation-name:voice-ai}
@keyframes voice-own{0%{opacity:0;transform:translateX(20px) scale(.2)}8%,87%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(-30px) scale(.2)}}
@keyframes voice-ai{0%{opacity:0;transform:translateX(-20px) scale(.2)}8%,87%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(30px) scale(.2)}}
@media(prefers-reduced-motion:reduce){.timed-bubble{animation-name:voice-fade}.ai-gestures .timed-bubble{animation-name:voice-fade}.draft-clock-track>div{transition:none}}
@keyframes voice-fade{0%{opacity:0}8%,87%{opacity:1}100%{opacity:0}}
.draft-stage .draft-analysis{margin-top:auto}

.draft-broadcast p{white-space:pre-line}

/* v0.18.4 signature breakdown and immediate player hover */
.draft-signatures{border-top:1px solid #444;margin-top:10px;padding-top:6px}.draft-signatures p{margin:6px 0;line-height:1.6}.draft-signatures em{color:#b9b9b9;font-size:11px}.enemy-sig{display:block;margin-top:5px;line-height:1.5}.player-hover-name{cursor:help;text-decoration:underline dotted #777;text-underline-offset:3px}.player-hover-name:focus-visible{outline:1px solid white;outline-offset:3px}
.player-hover-layer{position:fixed;inset:auto;margin:0;padding:0;border:0;width:min(310px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;background:#111;color:#fff;z-index:2147483647;pointer-events:none;box-shadow:0 12px 40px #000c}.player-hover-layer::backdrop{pointer-events:none;background:transparent}.hover-player-card{border:1px solid #ccc;padding:18px}.hover-player-card h2{font-size:26px;margin:8px 0 3px}.hover-player-card h3{font-size:14px;margin:14px 0 8px}.hover-player-card p{font-size:13px;margin:6px 0}.hover-player-card .stats{margin-top:14px}.hover-player-card .stats span{font-size:11px}.hover-player-card .stats b{font-size:17px}.hover-signature{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}.hover-signature small{display:block;flex-basis:100%;color:#aaa;font-size:11px}

/* v0.18.8 stable draft geometry: content scrolls inside its allocated panel. */
.draft-room{--draft-stage-height:1240px}.draft-stage{height:var(--draft-stage-height);align-items:stretch}.draft-stage>.team{height:100%;min-height:0;display:grid;grid-template-rows:32px repeat(5,minmax(0,1fr)) 20px 70px;overflow:hidden}.draft-stage>.team h3{margin:0;min-height:0}.draft-stage .team .pick{min-height:0;overflow:auto;flex:none}.draft-stage .team>.tiny{margin:0;align-self:end}.draft-stage .team>.banlist{overflow:auto;line-height:1.6}
.draft-stage .draft-core{display:grid;grid-template-rows:144px 560px minmax(0,1fr);gap:12px;height:100%;min-height:0}.draft-core>.draft-broadcast{margin:0;min-height:0;overflow:auto;justify-content:flex-start}.draft-stage .draft-analysis{margin:0;min-height:0;height:100%;overflow:auto;overscroll-behavior:contain}.draft-analysis>.two{align-items:start}.draft-synergy-entry{display:block;margin:8px 0}.draft-synergy-entry small{display:block;color:#aaa;line-height:1.6;margin-top:3px}
#draft-picker{display:grid;grid-template-rows:248px minmax(0,1fr);gap:8px;min-height:0;height:100%}.draft-core .draft-controls{padding:12px;margin:0;overflow:auto;min-height:0}.draft-turn-status{font-size:12px;min-height:18px;margin:8px 0}.draft-role-field select{margin-bottom:0}.draft-role-field.role-unused{visibility:hidden;pointer-events:none}.draft-controls label{margin-top:5px}.draft-controls input,.draft-controls select{padding:8px;margin-bottom:5px}.draft-core #confirm-area .row{min-height:37px}.draft-core #confirm-area details{font-size:11px}
.draft-core #champion-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr)) 44px;gap:5px;margin:0;min-height:0;align-content:stretch;overflow:auto}.draft-core #champion-results .champ{height:100%;min-height:0;overflow:auto;line-height:1.4}.draft-core #champion-results .draft-pagination{grid-row:4;min-height:0;padding:5px}.draft-core #champion-results.ai-locked .champ{filter:grayscale(1);opacity:.35;cursor:not-allowed}.draft-core #champion-results.ai-locked .draft-pagination{opacity:.45}
.draft-voices{min-height:0;height:100%;padding-top:44px;padding-bottom:116px;grid-template-rows:repeat(5,minmax(0,1fr))}.draft-extras{margin:16px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}.draft-extras>.panel{margin:0;min-width:0}.draft-extras select{width:100%}
@media(max-width:1190px){.draft-voices{display:none!important}.draft-stage{grid-template-columns:150px minmax(0,1fr) 150px}.draft-stage>.team:first-child{grid-column:1;grid-row:1}.draft-stage>.team:last-child{grid-column:3;grid-row:1}.draft-stage>.draft-core{grid-column:2;grid-row:1}.draft-extras{margin:16px 0 0}}
@media(max-width:700px){.draft-stage{height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:560px var(--draft-stage-height);gap:12px}.draft-stage>.team:first-child{grid-column:1;grid-row:1}.draft-stage>.team:last-child{grid-column:2;grid-row:1}.draft-stage>.draft-core{grid-column:1/-1;grid-row:2}.draft-core #champion-results{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr)) 44px}.draft-core #champion-results .draft-pagination{grid-row:5}.draft-extras{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.draft-extras .two{grid-template-columns:1fr}.draft-extras .panel{padding:10px}.draft-extras .panel h2,.draft-extras .panel h3{font-size:13px}}

/* v0.18.9 readable cards without nested scrollbars. */
.draft-room{--draft-stage-height:1588px}.draft-stage .draft-core{grid-template-rows:144px 900px minmax(0,1fr)}
#draft-picker{grid-template-rows:232px minmax(0,1fr);gap:8px}.draft-core .draft-controls{overflow:visible;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 20px auto 16px 36px 40px;align-content:start;gap:4px}.draft-controls>.row{min-height:32px}.draft-controls h2{line-height:1.5;letter-spacing:0}.draft-turn-status{margin:0;line-height:20px}.draft-role-field{display:flex;align-items:center;gap:10px;min-height:36px}.draft-role-field label{margin:0;white-space:nowrap}.draft-role-field select{flex:1;min-width:0}.draft-controls>label{margin:0;line-height:16px}.draft-controls input,.draft-controls select{height:36px;margin:0;padding:7px 10px;font-size:13px;line-height:20px}.draft-core #confirm-area .row{min-height:40px}.draft-controls button{padding:7px 12px}
.draft-core #champion-results{grid-template-rows:repeat(3,minmax(200px,1fr)) 44px;overflow:visible}.draft-core #champion-results .champ{height:auto;min-height:200px;overflow:visible;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:10px 7px;gap:3px;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}.draft-core #champion-results .champ b{font-size:13px;line-height:1.5;margin:0 0 3px}.draft-core #champion-results .champ small{display:block;font-size:11px;line-height:1.5;margin:0;color:#bcbcbc}.draft-core #champion-results .champ .sig{font-size:11px;line-height:1.5;margin:3px 0 0}.draft-core #champion-results .champ:hover:not(:disabled),.draft-core #champion-results .champ:focus-visible{background:#202020;color:#fff;border-color:#fff}.draft-core #champion-results .champ:hover:not(:disabled) small,.draft-core #champion-results .champ:hover:not(:disabled) .sig{color:#fff}.draft-core #champion-results .champ.selected{background:#fff;color:#000}.draft-core #champion-results .champ.selected small,.draft-core #champion-results .champ.selected .sig{color:#000}.draft-core #champion-results .champ.selected:hover:not(:disabled){background:#e5e5e5;color:#000}.draft-core #champion-results .champ.selected:hover:not(:disabled) small,.draft-core #champion-results .champ.selected:hover:not(:disabled) .sig{color:#000}
.draft-stage .draft-analysis{overflow:visible;padding:12px}.draft-analysis h3{margin:0 0 8px}.draft-analysis p{margin:5px 0;font-size:12px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}.draft-analysis>.two{gap:16px}.draft-analysis .draft-signatures{margin-top:8px;padding-top:5px}.draft-analysis .draft-signatures p{margin:4px 0;line-height:1.5}.draft-synergy-entry{margin:6px 0}.draft-synergy-entry small{margin-top:2px;font-size:11px;line-height:1.5}.draft-stage .team .pick,.draft-stage .team>.banlist{overflow:visible}.draft-core>.draft-broadcast{overflow:visible;padding:14px}.draft-core>.draft-broadcast p{font-size:15px;line-height:1.6;margin-top:8px}.draft-order #draft-full-composition{margin:16px 0;padding:14px;border:1px solid #444}.draft-extras p,.draft-extras summary{line-height:1.65;word-break:keep-all}
@media(max-width:700px){.draft-room{--draft-stage-height:1788px}.draft-stage .draft-core{grid-template-rows:144px 1100px minmax(0,1fr)}.draft-core #champion-results{grid-template-rows:repeat(4,minmax(200px,1fr)) 44px}.draft-analysis>.two{gap:10px}.draft-core #champion-results .champ{padding:8px 5px}.draft-core #champion-results .champ small{font-size:10px}.draft-controls h2{font-size:13px}}

/* v0.19.0 compact draft, larger type and win markers */
.draft-room{--draft-stage-height:1472px}.draft-stage .draft-core{grid-template-rows:144px 784px minmax(0,1fr)}.draft-core #champion-results{grid-template-rows:repeat(3,minmax(160px,1fr)) 44px}.draft-core #champion-results .champ{min-height:160px;padding:7px 6px;gap:2px;justify-content:flex-start}.draft-core #champion-results .champ b{margin-bottom:2px}.draft-core #champion-results .champ small,.draft-core #champion-results .champ .sig{line-height:1.4}.score-boxes span{width:36px;height:26px}.draft-score{gap:10px}.draft-analysis p{line-height:1.5}.draft-analysis .compact-signatures p{margin:3px 0}
@media(max-width:700px){.draft-room{--draft-stage-height:1632px}.draft-stage .draft-core{grid-template-rows:144px 944px minmax(0,1fr)}.draft-core #champion-results{grid-template-rows:repeat(4,minmax(160px,1fr)) 44px}.score-boxes span{width:30px;height:24px}}

/* v0.19.1 analysis overlays the picker instead of occupying a tall third row. */
.draft-room{--draft-stage-height:996px}.draft-stage .draft-core{grid-template-rows:144px 784px 44px}.draft-analysis-launch{width:100%;height:44px;padding:8px;font-size:14px;font-weight:700;letter-spacing:.3px}#draft-picker{position:relative;isolation:isolate}.draft-analysis-popup{position:absolute;inset:0;z-index:100;background:#080808;border:1px solid #fff;padding:18px;overflow:auto;box-shadow:0 8px 24px #000a;cursor:pointer;outline-offset:3px;overscroll-behavior:contain}.draft-analysis-popup>.row{gap:12px;border-bottom:1px solid #555;padding-bottom:12px;margin-bottom:12px}.draft-analysis-popup h2{margin:0;font-size:17px}.draft-analysis-popup .draft-analysis{height:auto;min-height:0;margin:0;padding:0;border:0;overflow:visible}.draft-analysis-popup .draft-analysis h3{font-size:15px}.draft-analysis-popup .draft-analysis p{font-size:13px;line-height:1.6}.draft-analysis-popup .draft-analysis>.two{gap:20px}.draft-analysis-popup .draft-signatures{margin-top:12px;padding-top:10px}
@media(max-width:700px){.draft-room{--draft-stage-height:1156px}.draft-stage .draft-core{grid-template-rows:144px 944px 44px}.draft-analysis-popup{padding:12px}.draft-analysis-popup>.row{flex-wrap:wrap}.draft-analysis-popup .draft-analysis>.two{grid-template-columns:1fr;gap:14px}}

/* v0.19.2 · staged draft opening. Underlying controls stay inert until complete. */
body.match-room #top-header .brand,body.match-room #top-header .version{visibility:hidden}
body.match-room #top-header{background:#000;border-bottom:0}
.recruit-settings button:disabled{background:#252525;color:#777;border-color:#444;cursor:not-allowed}
.draft-opening{background:#000;overflow:hidden}
.draft-opening .draft-stage>.team:first-child{animation:opening-left 1s both;animation-delay:calc(4000ms + var(--opening-elapsed))}
.draft-opening .draft-stage>.team:last-child{animation:opening-right 1s both;animation-delay:calc(4000ms + var(--opening-elapsed))}
.draft-opening .draft-scoreboard,.draft-opening .draft-banbar,.draft-opening .draft-progress-label,.draft-opening .draft-clock-track,.draft-opening .draft-clock-note{animation:opening-top 1s both;animation-delay:calc(5300ms + var(--opening-elapsed))}
.draft-opening .draft-broadcast{animation:opening-fade 1s both;animation-delay:var(--opening-elapsed)}
.draft-opening #draft-picker,.draft-opening .draft-analysis-launch,.draft-opening .draft-extras,.draft-opening .draft-order{animation:opening-bottom 1s both;animation-delay:calc(6600ms + var(--opening-elapsed))}
.draft-opening .draft-voices{visibility:hidden}
@keyframes opening-fade{from{opacity:0}to{opacity:1}}
@keyframes opening-left{from{opacity:0;transform:translateX(-110%)}to{opacity:1;transform:translateX(0)}}
@keyframes opening-right{from{opacity:0;transform:translateX(110%)}to{opacity:1;transform:translateX(0)}}
@keyframes opening-top{from{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}
@keyframes opening-bottom{from{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.draft-opening *{animation-duration:1ms!important}}

/* v0.19.3 · equal-width, nine-slice rarity frames; card content remains live text. */
.db-card{--rarity-frame-width:12px;border:var(--rarity-frame-width) solid transparent;border-image-slice:24;border-image-width:1;border-image-repeat:stretch;background:#000}
.db-card.rarity-R{border-image-source:url("assets/card-frames/r.svg");--rarity-color:#28a8e5;--rarity-light:#b6efff}
.db-card.rarity-SR{border-image-source:url("assets/card-frames/sr.svg");--rarity-color:#299250;--rarity-light:#a6df83}
.db-card.rarity-SSR{border-image-source:url("assets/card-frames/ssr.svg");--rarity-color:#d6342c;--rarity-light:#ff9860}
.db-card.rarity-UR{border-image-source:url("assets/card-frames/ur.svg");--rarity-color:#963ed1;--rarity-light:#d9a7fa}
.db-card.rarity-N{border-image-source:url("assets/card-frames/n.svg");--rarity-color:#777b89;--rarity-light:#c6c9d3}
.db-card .badge-grade{border:1px solid var(--rarity-color);background:var(--rarity-color);color:#fff}.db-card.rarity-LR .badge-grade{color:#fff9df}.db-card.picked-card{outline:1px solid var(--rarity-light);outline-offset:3px}
#toast{z-index:1000;bottom:24px;line-height:1.55;text-align:center;pointer-events:none}body.has-bottom-menu #toast{bottom:calc(120px + env(safe-area-inset-bottom))}

/* v0.19.4 · intrinsic SVG size + proportional slices, full-size corner ornaments. */
.db-card{border-image-slice:25%}.db-card::after{content:"";position:absolute;inset:-12px;pointer-events:none;z-index:3;background-image:var(--rarity-corner),var(--rarity-corner),var(--rarity-corner),var(--rarity-corner);background-position:left top,right top,right bottom,left bottom;background-size:24px 24px;background-repeat:no-repeat}
.db-card.rarity-R{--rarity-corner:url("assets/card-frames/r-corner.svg")}
.db-card.rarity-SR{--rarity-corner:url("assets/card-frames/sr-corner.svg")}
.db-card.rarity-SSR{--rarity-corner:url("assets/card-frames/ssr-corner.svg")}
.db-card.rarity-UR{--rarity-corner:url("assets/card-frames/ur-corner.svg")}
.db-card.rarity-N{--rarity-corner:url("assets/card-frames/n-corner.svg")}
.db-card-footer{grid-template-columns:minmax(0,1fr)}.db-card-footer>button{width:100%}.card-name-detail{font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;background:transparent;border:0;padding:0;max-width:100%;white-space:normal}.card-name-detail:hover{background:transparent;color:var(--rarity-light)}.card-name-detail:focus-visible{outline:1px solid var(--rarity-light);outline-offset:3px}

/* v0.19.5 · bubbles shrink into their roster; recruiting shares rarity frames. */
.timed-bubble{transform-origin:left center;animation-name:voice-to-blue-roster}.ai-gestures .timed-bubble{transform-origin:right center;animation-name:voice-to-red-roster}
@keyframes voice-to-blue-roster{0%{opacity:0;transform:translateX(20px) scale(.2);transform-origin:right center}8%{opacity:1;transform:translateX(0) scale(1);transform-origin:right center}12%,87%{opacity:1;transform:translateX(0) scale(1);transform-origin:left center}100%{opacity:0;transform:translateX(-16px) scale(0);transform-origin:left center}}
@keyframes voice-to-red-roster{0%{opacity:0;transform:translateX(-20px) scale(.2);transform-origin:left center}8%{opacity:1;transform:translateX(0) scale(1);transform-origin:left center}12%,87%{opacity:1;transform:translateX(0) scale(1);transform-origin:right center}100%{opacity:0;transform:translateX(16px) scale(0);transform-origin:right center}}
.recruit-result-card{--rarity-frame-width:10px;padding:12px;min-height:0;gap:6px}.recruit-result-card::after{inset:-10px;background-size:20px 20px}.recruit-result-card .grade{background:var(--rarity-color);border-color:var(--rarity-light);color:#fff}.recruit-result-card>button{margin-top:auto}.recruit-result-card .stats{gap:5px}.recruit-result-card .row{gap:6px}
#bottom-menu .settings-menu:disabled{background:#252525;color:#777;border-color:#444;cursor:not-allowed}
@media(max-width:850px){#bottom-menu .lobby-left-group{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:560px){#bottom-menu .lobby-bottom-bar{flex-wrap:wrap}#bottom-menu .lobby-left-group{flex-basis:100%}#bottom-menu .lobby-right-group{width:100%}#bottom-menu .lobby-right-group .match-start-box{width:100%}body.has-bottom-menu{padding-bottom:180px}body.has-bottom-menu #toast{bottom:190px}}
@media(prefers-reduced-motion:reduce){.timed-bubble,.ai-gestures .timed-bubble{animation-name:voice-fade}}

/* v0.19.6 · draft rosters flank live commentary and an uncropped battlefield. */
.battle-room{--draft-stage-height:996px;max-width:1600px;margin:0 auto 28px;overflow:hidden}
.battle-room .battle-stage{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;grid-template-rows:minmax(0,1fr);gap:16px;height:var(--draft-stage-height)}
.battle-stage>.team:first-child{grid-column:1;grid-row:1}.battle-stage>.team:last-child{grid-column:3;grid-row:1}
.battle-stage>.battle-center{grid-column:2;grid-row:1;grid-template-rows:minmax(144px,auto) minmax(0,1fr);gap:12px;min-width:0;min-height:0;height:100%}
.battle-center>.draft-broadcast{padding:14px;margin:0;overflow:visible;justify-content:center}.battle-center>.draft-broadcast p{font-size:15px;line-height:1.6}
.battle-map{margin:0;width:100%;height:100%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;background:#000}.battle-map img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.battle-secondary{clear:both;max-width:1600px;margin:0 auto;padding-top:24px;border-top:1px solid #444}
.battle-entering>.team:first-child{animation:opening-left 1.2s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--battle-entry-elapsed)}
.battle-entering>.team:last-child{animation:opening-right 1.2s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--battle-entry-elapsed)}
.battle-entering .draft-broadcast{animation:opening-fade 1.2s ease both;animation-delay:calc(250ms + var(--battle-entry-elapsed))}.battle-entering .battle-map{animation:opening-fade 1.2s ease both;animation-delay:calc(450ms + var(--battle-entry-elapsed))}
@media(max-width:1190px){.battle-room .battle-stage{grid-template-columns:150px minmax(0,1fr) 150px;gap:12px}}
@media(max-width:700px){.battle-room .battle-stage{height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:560px auto}.battle-stage>.team:first-child{grid-column:1;grid-row:1}.battle-stage>.team:last-child{grid-column:2;grid-row:1}.battle-stage>.battle-center{grid-column:1/-1;grid-row:2;height:auto;grid-template-rows:auto auto}.battle-map{height:auto;aspect-ratio:1}.battle-center>.draft-broadcast{min-height:144px}}
@media(prefers-reduced-motion:reduce){.battle-entering>.team,.battle-entering .draft-broadcast,.battle-entering .battle-map{animation:none}}
/* v0.19.7: live match scoreboard and stateful map plates */
.rt-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:20px 28px;margin-bottom:16px;background:#101923;border:1px solid #334351;border-radius:12px;color:#eef4fb}
.rt-side{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:16px}.rt-side>strong{width:100%;font-size:23px}.rt-side:last-child{justify-content:flex-end;text-align:right}.rt-side span{color:#d2dbe5}.rt-side .buff-active{color:#dcb8ff}
.rt-center{text-align:center;min-width:150px}.rt-center>strong{display:flex;justify-content:center;align-items:center;gap:18px;font-size:46px;line-height:1.15;font-variant-numeric:tabular-nums}.score-colon{color:#9ca8b6;font-size:30px}.rt-center time{display:block;margin-top:8px;font-size:21px;font-variant-numeric:tabular-nums}.rt-center small{display:block;font-size:12px;color:#a5b6c7;margin-top:4px}
.battle-map{container-type:size;display:grid;place-items:center}.battle-map-square{position:relative;width:min(100cqw,100cqh);height:min(100cqw,100cqh);max-width:100%;max-height:100%;aspect-ratio:1}.battle-map-square img{display:block;width:100%;height:100%;object-fit:contain}
.rt-objectives{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.rt-objectives p{display:flex;flex-direction:column;gap:8px}.rt-event-table{overflow-x:auto}.rt-event-table table{width:100%;border-collapse:collapse;font-size:15px}.rt-event-table td,.rt-event-table th{text-align:left;padding:12px 14px;border-bottom:1px solid #8883;line-height:1.5}.rt-event-table td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:700px){.rt-scoreboard{gap:10px;padding:16px 12px}.rt-center{min-width:90px}.rt-center>strong{font-size:32px;gap:8px}.rt-side{font-size:13px;gap:6px}.rt-side>strong{font-size:18px}.rt-center time{font-size:17px}.battle-map-square{width:100%;height:auto;max-height:none}}

/* v0.19.8: death is displayed over the corresponding roster slot. */
.battle-room .team .pick{position:relative}
.roster-death{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(7,10,16,.9);border:1px solid #697080;color:#fff;pointer-events:none;border-radius:4px}
.roster-death>span{color:#ff8d94;font-size:16px;font-weight:700;letter-spacing:2px}.roster-death>strong{font-size:32px;line-height:1.1;font-variant-numeric:tabular-nums}.battle-room .team .pick .roster-death>small{font-size:12px;color:#c8cfda}

/* v0.20.1 · monochrome match HUD and sequential transcript */
.rt-scoreboard{background:#000;color:#fff;border:1px solid #fff;border-radius:0;box-shadow:none}
.rt-scoreboard .blue,.rt-scoreboard .red,.rt-side span,.rt-side .buff-active,.rt-center small,.score-colon{color:#fff}.rt-side{font-size:15px}.rt-side>strong{border-bottom:1px solid #777;padding-bottom:8px}.rt-center{border-left:1px solid #777;border-right:1px solid #777;padding:0 22px}.rt-center small{opacity:.65}
.draft-broadcast:has(.live-feed){min-height:0;height:220px;overflow:hidden;justify-content:flex-start}.live-feed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.live-feed::-webkit-scrollbar{display:none;width:0;height:0}.draft-broadcast .live-feed-line{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0;line-height:1.6;min-height:1.6em}.live-feed.reviewable{cursor:grab;touch-action:none;user-select:none}.live-feed[data-dragging]{cursor:grabbing}.battle-stage>.battle-center{grid-template-rows:220px minmax(0,1fr)}
@media(max-width:700px){.rt-center{padding:0 10px}.rt-side{font-size:12px}.battle-stage>.battle-center{grid-template-rows:220px auto}}
.live-feed{display:flex;flex-direction:column}.draft-broadcast .live-feed-line{flex:0 0 auto}.draft-broadcast .live-feed-line:first-child{margin-top:auto}
/* Preserve the draft grid's existing 144px commentary row. */
.draft-room .draft-broadcast:has(.live-feed){height:144px}

.player-movement{display:block;color:#fff;font-size:12px;border-bottom:1px solid #666;padding:3px 0;}

/* v0.20.3 summoner loadout and objective tally */
.summoner-slots{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px;width:100%}.summoner-slot{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:2px 4px;border:1px solid #aaa;padding:5px 4px;background:#050505;color:#fff;min-width:0}.summoner-slot svg{width:22px;height:22px;grid-row:1/3}.summoner-slot span{font-size:11px;white-space:nowrap}.summoner-slot small{font-size:10px!important;line-height:1.2!important}.summoner-slot select{width:100%;min-width:0;background:#000;color:#fff;border:0;padding:4px 0;margin:0;font-size:11px;grid-row:1/3}.summoner-slot.cooling{color:#aaa;border-color:#555}.objective-tiles{display:flex;flex-wrap:wrap;gap:10px 16px}.objective-tile{display:flex;flex-direction:column;gap:5px;font-size:12px}.objective-tile>span{display:flex;gap:8px;justify-content:space-between}.objective-tile .score-boxes{flex-wrap:wrap;max-width:140px;gap:3px}.objective-tile .score-boxes span{width:16px;height:13px;border:1px solid #aaa}.objective-tile .score-boxes .won{background:#fff}.rt-side.red .objective-tiles{justify-content:flex-end}.draft-stage .team .pick,.battle-stage .team .pick{min-height:150px}.draft-stage .voice-slot{min-height:150px}
@media(max-width:700px){.rt-scoreboard{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:6px}.rt-center{min-width:0;padding:0 6px}.objective-tiles{gap:8px}.objective-tile .score-boxes span{width:11px;height:10px}.summoner-slot{grid-template-columns:18px 1fr;padding:4px 2px}.summoner-slot svg{width:18px;height:18px}}

.summoner-slot{grid-template-columns:1fr;text-align:center}.summoner-slot svg{grid-row:auto;justify-self:center}.summoner-slot select{grid-row:auto;text-align:center}.summoner-slot span{white-space:normal}.draft-room,.battle-room{--draft-stage-height:1120px}.draft-stage .team .pick{overflow:visible;min-height:0}.draft-stage .voice-slot{min-height:0}
@media(max-width:700px){.draft-stage{grid-template-rows:1120px var(--draft-stage-height)}.battle-room .battle-stage{grid-template-rows:1120px auto}.draft-room{--draft-stage-height:1156px}}

.roster-kda{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #666;margin-top:6px;width:100%;text-align:center}.roster-kda>span{display:flex;justify-content:center;gap:6px;align-items:center;padding:3px 0}.roster-kda>span+span{border-left:1px solid #666}.roster-kda small{font-size:10px!important;color:#aaa}.roster-kda b{font-size:13px!important}.battle-room{--draft-stage-height:1250px}@media(max-width:700px){.battle-room .battle-stage{grid-template-rows:1250px auto}}

/* v0.20.7 stable roster rows, commentary expansion, separate instant action log */
.draft-room{--draft-stage-height:1280px}.draft-stage>.team{grid-template-rows:32px repeat(5,minmax(0,1fr));row-gap:8px;padding:12px;box-sizing:border-box;overflow:visible}.draft-stage .team .pick{padding:10px 0;min-height:0;justify-content:flex-start;gap:2px;box-sizing:border-box}.summoner-slots{margin-top:auto;padding-top:6px}.summoner-slot{min-height:58px;box-sizing:border-box}.draft-stage .draft-core{height:100%;grid-template-rows:minmax(220px,1fr) 784px 44px;gap:12px}.draft-room .draft-broadcast:has(.live-feed){height:auto;min-height:0;margin-bottom:0}.draft-room .draft-broadcast .live-feed{height:100%;min-height:0}.draft-analysis-launch{align-self:end}.draft-extras{display:block}.draft-extras>.panel{width:100%}.draft-voices{grid-template-rows:repeat(5,minmax(0,1fr));padding-top:52px;padding-bottom:12px;gap:8px}
.battle-room{--draft-stage-height:1520px}.battle-stage>.team{grid-template-rows:32px repeat(5,minmax(0,1fr)) 180px}.battle-stage>.battle-center{grid-template-rows:300px minmax(0,1fr)}.battle-center>.battle-broadcast{height:300px}.squad-actions{border-top:1px solid #777;min-height:0;padding-top:8px;display:flex;flex-direction:column}.squad-actions h4{margin:0 0 7px;font-size:13px}.squad-actions>div{overflow:auto;scrollbar-width:none;min-height:0}.squad-actions>div::-webkit-scrollbar{display:none}.squad-actions p{font-size:11px;line-height:1.55;margin:0 0 8px;overflow-wrap:anywhere}.squad-actions time{color:#aaa}.squad-actions *{animation:none!important}
@media(max-width:700px){.draft-stage{grid-template-rows:1280px 1280px}.battle-room .battle-stage{grid-template-rows:1520px auto}.draft-stage>.draft-core{grid-template-rows:minmax(220px,1fr) 944px 44px}.battle-stage>.battle-center{height:auto;grid-template-rows:300px auto}}

/* v0.20.9 read-only dice inspector */
.dice-inspector article{border-top:1px solid currentColor;padding:16px 0;margin-top:16px}.dice-inspector p{line-height:1.7;overflow-wrap:anywhere}.dice-inspector input{width:100px}.dice-inspector .row{flex-wrap:wrap;gap:10px;margin-top:14px}.dice-inspector table{font-variant-numeric:tabular-nums}

/* v0.21.2 stable match panels, spacious squad rows, mirrored objectives */
.draft-room{--draft-stage-height:1660px}.battle-room{--draft-stage-height:1960px}
.draft-stage>.team{grid-template-rows:32px repeat(5,minmax(290px,1fr));row-gap:12px}
.battle-stage>.team{grid-template-rows:32px repeat(5,minmax(310px,1fr)) 180px;row-gap:12px}
.draft-stage .team .pick{min-height:290px;height:auto;overflow:visible;padding:12px 0 18px;gap:5px}
.battle-stage .team .pick{min-height:310px}.draft-stage .team .pick>*{flex-shrink:0}
.summoner-slots{margin-top:10px;padding-top:6px}.player-movement{position:static!important;display:block;min-height:30px;white-space:normal;line-height:1.5}
.rt-side.red{flex-direction:row-reverse;justify-content:flex-start}.rt-side.red>strong{text-align:right}.rt-side.red .objective-tiles{flex-direction:row-reverse;justify-content:flex-start}
.battle-stage>.battle-center{grid-template-rows:300px minmax(0,1fr);min-width:0}
.battle-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-height:0;height:100%}
.battle-workspace>.panel{margin:0;padding:12px;min-width:0;min-height:0;height:100%;box-sizing:border-box}
.building-teams{display:grid;grid-template-columns:1fr 1fr;gap:12px}.building-teams h3{font-size:15px}.building-teams article{padding:10px 0;border-bottom:1px solid #555}.building-teams h4{margin:10px 0}.building-teams p{font-size:11px;line-height:1.5}
.building-plates{margin:12px 0;font-size:12px}.building-plates>div{display:flex;gap:3px;margin-top:6px;flex-wrap:wrap}.building-plates>div>span{width:17px;height:20px;border:1px solid #aaa;display:grid;place-items:center;color:#999;background:#000;font-size:10px}.building-plates .intact{background:#fff;color:#000}
.building-hp{margin:14px 0;font-size:12px}.building-hp>span{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px}.building-hp progress{width:100%;height:7px;accent-color:#fff;background:#222}.building-hp progress::-webkit-progress-bar{background:#222}.building-hp progress::-webkit-progress-value{background:#fff}
.battle-history{display:flex;flex-direction:column}.battle-history h2,.battle-buildings h2{font-size:18px;margin:0 0 12px}.battle-log-scroll{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;overflow-anchor:none;scroll-behavior:auto;scrollbar-width:thin}.battle-log-scroll>article{padding:10px 0;border-bottom:1px solid #555}.battle-log-scroll p{font-size:12px;line-height:1.7;overflow-wrap:anywhere}.battle-log-scroll .two{grid-template-columns:1fr}.battle-log-scroll h3{font-size:14px}.battle-log-scroll summary{cursor:pointer;font-size:13px}.battle-buildings{overflow:auto}.battle-broadcast:has(.live-feed){animation:none!important}.battle-broadcast .live-feed-line{animation:none!important}
@media(max-width:700px){.draft-stage{grid-template-rows:1660px 1660px}.battle-room .battle-stage{grid-template-rows:1960px auto}.battle-stage>.battle-center{height:auto;grid-template-rows:300px auto}.battle-workspace{height:auto;grid-template-columns:1fr}.battle-workspace>.battle-history{height:850px}.battle-workspace>.battle-buildings{height:auto}}

/* v0.21.3 mirrored slots and uncluttered squads */
.draft-room .draft-broadcast p,.draft-room .draft-broadcast .live-feed-line{font-size:15px;line-height:1.6}
.battle-stage>.team{grid-template-rows:32px repeat(5,minmax(310px,1fr));row-gap:12px}

/* v0.21.4 content-sized building panels without the empty lower area */
.battle-room{max-width:1440px}
.battle-room .battle-stage{height:auto;align-items:stretch}
.battle-stage>.team{height:100%;grid-template-rows:32px repeat(5,minmax(240px,1fr))}
.battle-stage .team .pick{min-height:240px;padding:10px 0 12px;gap:4px}
.battle-stage>.battle-center{height:auto;grid-template-rows:300px auto}
.battle-workspace{height:auto;align-items:stretch;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.battle-workspace>.panel{height:auto;padding:12px}
.building-teams article{padding:6px 0}.building-teams h4{margin:7px 0}.building-teams p{margin:6px 0}
.building-plates{margin:8px 0}.building-plates>div{margin-top:4px}
.building-hp{margin:10px 0}.building-hp progress{display:block;margin:5px 0 0}.building-teams>div>.building-hp:last-child{margin-bottom:0}
.battle-history{position:relative;min-height:300px}
.battle-history>.battle-log-scroll{position:absolute;top:48px;bottom:12px;left:12px;right:12px}
@media(max-width:700px){.battle-room .battle-stage{grid-template-rows:auto auto}.battle-stage>.team{grid-template-rows:32px repeat(5,minmax(240px,auto));height:auto}.battle-stage>.battle-center{grid-template-rows:300px auto}.battle-workspace{grid-template-columns:1fr}.battle-workspace>.battle-history{height:650px}.battle-workspace>.battle-buildings{height:auto}}

.battle-stage>.battle-center{align-self:start}

/* v0.21.5 always-visible draft rules */
.draft-order>h3{font-size:12px;margin:0 0 12px;padding:6px 8px;border:1px solid #777}

/* v0.21.6 trim the space below all ten draft players together */
.draft-room{--draft-stage-height:1310px}
.draft-room .draft-stage>.team{grid-template-rows:32px repeat(5,minmax(230px,1fr))}
.draft-room .draft-stage .team .pick{min-height:230px;padding:10px 0 8px;gap:4px}
.draft-room .draft-stage>.draft-core{grid-template-rows:minmax(220px,1fr) 784px 44px}
@media(max-width:700px){.draft-room .draft-stage{grid-template-rows:1310px 1310px}.draft-room .draft-stage>.draft-core{grid-template-rows:minmax(220px,1fr) 944px 44px}}

/* v0.21.7 reserve the same two-line status slot for every player */
.battle-stage .team .pick>.player-movement{display:block;box-sizing:border-box;height:44px;min-height:44px;max-height:44px;flex:0 0 44px;margin:0;padding:4px 0;line-height:17px!important;font-size:12px!important;overflow:hidden;white-space:normal;overflow-wrap:anywhere}
/* v0.22.1: stable in-game geometry; content scrolls within its own panel. */
.battle-room{max-width:1800px;min-width:1180px}
.battle-room .battle-stage{display:grid;grid-template-columns:220px minmax(720px,1fr) 220px;grid-template-rows:1500px;height:1500px;gap:12px;align-items:stretch}
.battle-room .battle-stage>.team{grid-row:1;grid-template-rows:32px repeat(5,minmax(0,1fr));height:1500px;gap:12px;min-height:0}
.battle-room .battle-stage>.team:first-child{grid-column:1}.battle-room .battle-stage>.team:last-child{grid-column:3}
.battle-room .battle-stage .team .pick{height:100%;min-height:0;box-sizing:border-box;padding:8px 0;gap:3px;overflow:hidden}
.battle-room .battle-stage>.battle-center{grid-column:2;grid-row:1;height:1500px;display:grid;grid-template-rows:300px 600px 576px;gap:12px;align-self:start;min-width:0}
.battle-center>.battle-buildings{height:600px;margin:0;padding:12px;box-sizing:border-box;overflow:hidden}
.building-teams{display:grid;grid-template-columns:1fr;grid-template-rows:260px 260px;gap:12px}
.building-team-row{min-width:0;overflow:hidden}.building-team-row>h3{height:20px;margin:0 0 6px}
.building-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr) minmax(0,.8fr);gap:10px}
.building-lanes article{padding:0;border:0;min-width:0}.building-lanes h4{margin:4px 0 8px}.building-lanes p{height:36px;margin:6px 0;font-size:11px;line-height:16px}
.building-lanes .building-plates{margin:6px 0;font-size:12px}.building-lanes .building-plates>div{flex-wrap:nowrap;gap:3px}.building-lanes .building-plates>div>span{width:16px;height:18px}
.building-lanes .building-hp{margin:8px 0;font-size:12px}.building-hp progress{height:7px;accent-color:#999;background:#333;border:0;width:100%}
.building-hp progress::-webkit-progress-bar{background:#333}.building-hp progress::-webkit-progress-value{background:#999}.building-hp progress::-moz-progress-bar{background:#999}
.building-plates>div>span.intact{background:#999;color:#111;border-color:#888}
.battle-center>.battle-workspace{height:576px;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.battle-workspace>.panel{height:576px;box-sizing:border-box;min-height:0;margin:0;overflow:hidden}
.battle-summary{position:relative}.summary-scroll{position:absolute;inset:48px 12px 12px;overflow:auto;scrollbar-width:none}.summary-scroll::-webkit-scrollbar{display:none}
.battle-workspace>.battle-history{height:576px}.battle-history>.battle-log-scroll{position:absolute;inset:48px 12px 12px;overflow:auto}
.battle-stage .roster-economy{height:36px;line-height:18px;font-size:12px!important;flex:none}.battle-stage .roster-ability{display:block;height:18px;line-height:18px;font-size:11px!important;flex:none}
.rt-scoreboard{display:grid;grid-template-columns:minmax(0,1fr) 330px minmax(0,1fr);height:220px;box-sizing:border-box;overflow:hidden;gap:12px}
.rt-side{height:190px;overflow:hidden;align-content:start}.rt-side .buff-times{width:100%;font-size:12px}.spawn-times{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:6px}.spawn-times small{font-size:11px;white-space:nowrap}.rt-side.red .buff-times{text-align:right}
.rt-match-score{display:grid;grid-template-columns:90px 1fr 90px;align-items:center;gap:6px}.score-flank{text-align:center;font-size:13px;white-space:nowrap}.set-win-boxes{display:flex;justify-content:center;gap:5px;margin-top:12px}.set-win-boxes i{display:block;width:20px;height:18px;border:1px solid #666;background:#151515}.score-flank.B .won{background:#679bc4}.score-flank.R .won{background:#c47d7d}
#battle-top-controls{display:inline-flex;gap:8px}#battle-top-controls[hidden]{display:none}#battle-top-controls button{min-width:120px}#battle-top-controls button:disabled{background:#444;color:#999;border-color:#555;cursor:default}
.battle-secondary>.ingame-explanation{height:230px;box-sizing:border-box;overflow:auto}.series-result{max-height:600px;overflow:auto}

.battle-secondary>.panel:not(.ingame-explanation):not(.series-result){height:420px;box-sizing:border-box;overflow:auto}
/* v0.22.2 shared objective clock and compact squad spells */
.rt-scoreboard{grid-template-rows:145px 48px;height:220px;row-gap:8px}.rt-side{height:145px}.shared-objective-times{grid-column:1/-1;grid-row:2;min-width:0;border-top:1px solid #555;padding-top:7px}.shared-objective-times .spawn-times{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:0}.shared-objective-times small{font-size:12px}
.battle-room .battle-stage .team .pick{display:grid;grid-template-columns:minmax(0,1fr) 76px;grid-template-rows:44px 20px 24px 60px 28px 36px 18px;align-content:start;gap:3px 4px}
.battle-stage .pick>.player-movement{grid-column:1/-1;grid-row:1}.battle-stage .pick>.role{grid-column:1/-1;grid-row:2}.battle-stage .pick>b{grid-column:1;grid-row:3;min-width:0;font-size:15px}.battle-stage .pick>small:not(.player-movement):not(.roster-economy):not(.roster-ability){grid-column:1;grid-row:4;min-width:0;font-size:12px;line-height:18px}
.battle-stage .pick>.summoner-slots{grid-column:2;grid-row:3/5;display:grid;grid-template-columns:1fr 1fr;align-self:start;width:76px;gap:3px;margin:0}.battle-stage .summoner-slot{min-width:0;padding:4px 1px;display:flex;flex-direction:column;align-items:center;font-size:10px}.battle-stage .summoner-slot svg{width:22px;height:22px}.battle-stage .summoner-slot span,.battle-stage .summoner-slot small{font-size:10px!important;white-space:nowrap}
.battle-stage .pick>.roster-kda{grid-column:1/-1;grid-row:5;margin:0}.battle-stage .pick>.roster-economy{grid-column:1/-1;grid-row:6}.battle-stage .pick>.roster-ability{grid-column:1/-1;grid-row:7}
.summary-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px}.summary-table th,.summary-table td{padding:7px 4px;text-align:left;overflow-wrap:anywhere}.summary-table th{position:sticky;top:0;background:#111}.summary-table th:nth-child(1){width:40px}.summary-table th:nth-child(2){width:32px}.summary-table tr:nth-child(even){background:#202020}.summary-table td{border-bottom:1px solid #444}
/* LR keeps the existing frame geometry with its own high-contrast accent. */
.db-card.rarity-LR{border-image-source:url("assets/card-frames/lr.svg");--rarity-color:#c88928;--rarity-light:#fff1a2;--rarity-corner:url("assets/card-frames/lr-corner.svg")}.grade.LR{color:#fff1a2;border-color:#c88928;background:#39290f}.grade.UR{color:#e9caff;border-color:#963ed1;background:#321444}.battle-stage .roster-economy{font-size:10px!important}

.collection-owned-filter{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:13px;cursor:pointer}.collection-owned-filter input[type="checkbox"]{width:16px;height:16px;min-width:16px;margin:0;accent-color:#88659f;cursor:pointer}

/* Grade badges share the frame palette, including recruitment results. */
.db-card.rarity-UR .badge-grade,.recruit-result-card.rarity-UR .grade{background:#963ed1;border-color:#d9a7fa;color:#fff}.db-card.rarity-LR .badge-grade,.recruit-result-card.rarity-LR .grade{background:#c88928;border-color:#fff1a2;color:#fff9df}

/* IA bridge pages: same monochrome palette; visual assets can replace the art panels. */
.career-page{max-width:1280px;margin:0 auto;padding:24px 8px 40px}.career-heading{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:28px}.career-heading h1{font-size:32px;margin:8px 0}.career-two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:20px}.career-art{min-height:320px;padding:40px;background:linear-gradient(135deg,#080808,#242424);border:1px solid #444;display:flex;flex-direction:column;justify-content:end;gap:20px}.career-art>span{font-size:28px;letter-spacing:3px}.career-art p{line-height:1.8;color:#bbb}.title-art{min-height:320px}.title-art>span{font-size:64px;letter-spacing:8px}.career-title-actions{margin-top:20px}.career-page label{display:block;margin:16px 0 8px}.career-page input,.career-page select{max-width:100%}.career-status{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#555;border:1px solid #555;margin-bottom:20px}.career-status>div{background:#101010;padding:20px}.career-status small,.career-status b{display:block}.career-status b{font-size:18px;margin-top:10px}.career-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.career-chapters h2{font-size:18px}.career-stage{display:flex;gap:8px;align-items:center;padding:14px 0;border-bottom:1px solid #333;flex-wrap:wrap;color:#777}.career-stage small{margin-left:auto}.career-stage.current{color:#fff;border-bottom-color:#fff}.career-dialogue{min-height:220px;margin-top:16px}.career-dialogue>p{font-size:21px;line-height:1.8;min-height:65px}.career-match-title{display:flex;justify-content:space-between;gap:20px;align-items:center}.career-match-title small{display:block;font-size:13px;color:#999;margin-top:10px}.career-match-row{display:grid;grid-template-columns:1fr 80px 1fr;text-align:center;padding:18px;border-bottom:1px solid #333}.career-match-row>span:first-child{text-align:left}.career-match-row>span:last-child{text-align:right}@media(max-width:900px){.career-two{grid-template-columns:1fr}.career-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.career-status{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.career-chapters{grid-template-columns:1fr}.career-art{padding:24px}.career-heading h1{font-size:26px}.career-match-title{flex-wrap:wrap}.career-match-row{grid-template-columns:1fr 50px 1fr;padding:14px 4px}}
/* Career page shell: visible routes, hub cards and a structured storefront. */
.career-navigation{max-width:1280px;margin:16px auto 0;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #444;padding-bottom:12px}.career-navigation button{background:#141414;color:#bbb;border:1px solid #444;padding:12px 16px}.career-navigation button.active{background:#eee;color:#111;border-color:#eee}.career-navigation small{margin-right:8px;opacity:.5}.career-office-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}.career-office-links>button{text-align:left;background:#151515;border:1px solid #555;padding:24px;min-height:150px}.career-office-links>button:hover{border-color:#fff;background:#222}.career-office-links small{display:block;color:#888;margin-bottom:12px}.career-office-links strong{display:block;font-size:21px}.career-office-links strong span{float:right}.career-office-links p{font-size:13px;color:#aaa;line-height:1.6;margin-bottom:0}.career-shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.career-shop-grid>.panel{display:flex;flex-direction:column;margin:0}.career-shop-grid p{line-height:1.8;min-height:55px}.career-shop-grid button{margin-top:auto}.shop-symbol{height:100px;display:grid;place-items:center;font-size:60px;color:#aaa;background:linear-gradient(135deg,#111,#222);border-block:1px solid #333}.career-results-scroll{overflow:auto}.career-results-table{width:100%;border-collapse:collapse}.career-results-table th,.career-results-table td{text-align:left;padding:14px 10px;border-bottom:1px solid #333}.career-results-table tr:nth-child(6){border-top:2px solid #888}.career-page .panel{min-width:0}.career-page .title-art{background:radial-gradient(ellipse at 75% 50%,#393939 0,transparent 65%),linear-gradient(150deg,#080808,#222);min-height:280px}.career-navigation~.career-page{padding-top:20px}@media(max-width:850px){.career-office-links,.career-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.career-navigation button{padding:10px}.career-navigation small{display:none}}@media(max-width:540px){.career-office-links,.career-shop-grid{grid-template-columns:1fr}.career-office-links>button{min-height:110px}.career-navigation{gap:4px}.career-navigation button{font-size:12px}}

/* EP-01 story presentation; existing match layout unchanged. */
.story-cast,.campaign-rounds{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.story-cast span,.campaign-rounds span{border:1px solid #555;padding:10px 14px;color:#aaa;font-size:13px}.story-cast .speaking,.campaign-rounds .active{border-color:#ddd;color:#fff;background:#292929}.story-choices{display:grid;gap:12px;margin:20px 0}.story-choices button{white-space:normal;text-align:left;line-height:1.8;padding:16px}.career-dialogue>p{line-height:1.9;max-width:900px}.career-stage span{overflow-wrap:anywhere}.career-chapters{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}