:root {
  --ink: #fff8f2;
  --muted: #c9b7a4;
  --red: #e23b2f;
  --gold: #e6b34a;
  --panel: rgba(16, 10, 16, 0.78);
  --line: rgba(255, 248, 242, 0.16);
  --bg: #07060a;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #050308;
  color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
button, input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: var(--red);
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  letter-spacing: 0.04em;
}
button.ghost {
  background: transparent;
  border: 1px solid var(--line);
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: default; }
kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #1b1814;
}

.hood-app { height: 100%; position: relative; }
.stage-wrap { position: relative; height: 100%; background: #0d1118; }
#arena { display: block; width: 100%; height: 100%; touch-action: none; }

.chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 5;
}
.chrome.on { opacity: 1; }
.chrome.on .chrome-hit { pointer-events: auto; }
/* Safety net: the chrome occupies the same strip as the fight HUD, so it stays
   hidden for the whole match no matter what toggles it. */
body.match-on .chrome { opacity: 0; }
body.match-on .chrome .chrome-hit { pointer-events: none; }

.token-top, .token-foot {
  position: absolute;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.token-top { top: 18px; align-items: flex-start; }
.token-foot { bottom: calc(34vh + 10px); justify-content: space-between; }
.browse { display: flex; gap: 8px; }
.browse button { min-width: 44px; font-size: 22px; line-height: 1; }
.token-top h1, .token-id, .menu h2 {
  margin: 0;
  font-family: Georgia, serif;
}
.token-top h1 { font-size: clamp(22px, 3vw, 34px); text-shadow: 0 2px 0 #0a0806; }
.token-id, .kicker {
  margin: 0 0 4px;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}
.note { margin: 6px 0 0; color: var(--muted); max-width: 42ch; font-size: 13px; }
.rarity {
  margin: 0 0 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.rarity.common { color: #c4b8ae; }
.rarity.uncommon { color: #3dff8a; }
.rarity.rare { color: #4aa3ff; }
.rarity.epic { color: #c86bff; }
.rarity.legendary { color: #ffc14a; text-shadow: 0 0 12px rgba(255, 193, 74, 0.45); }
.gcard .rarity { display: inline; margin: 0; letter-spacing: 0.08em; }

.fight-cta {
  min-width: 140px;
  padding: 12px 28px;
  font-size: 16px;
  box-shadow: 0 10px 28px rgba(226, 59, 47, 0.35);
}
.side-links { display: flex; gap: 8px; flex-wrap: wrap; }
.side-links a, .side-links button { pointer-events: auto; }

.foot-left { display: flex; flex-direction: column; gap: 10px; }
.scene-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: auto;
}
.scene-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(12, 10, 16, 0.72);
  border: 1px solid #4a4038;
  border-radius: 3px;
  padding: 5px 8px;
}
.scene-bar select {
  background: #15121a;
  color: #f4ead8;
  border: 1px solid #5a4e42;
  border-radius: 2px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 3px 6px;
}

.overlay#help,
.overlay#result { z-index: 9; }
.overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 12, 0.62);
  backdrop-filter: blur(10px);
}
.overlay[hidden] { display: none; }
.menu, .help-card, .result-card, .online-card {
  width: min(520px, calc(100% - 32px));
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, rgba(22, 18, 16, 0.94), rgba(12, 10, 10, 0.92));
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.menu p, .help-card p, .result-card p { color: var(--muted); margin: 8px 0 16px; }
.menu-grid {
  display: grid;
  gap: 10px;
}
.menu-grid button { width: 100%; text-align: left; padding: 12px 16px; }
.menu-grid button strong { display: block; font-size: 16px; }
.menu-grid button span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.menu-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.overlay a, .side-links a {
  color: inherit;
  text-decoration: none;
}
.overlay a:visited, .side-links a:visited { color: inherit; }
.menu-row a.ghost, .side-links a.ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  letter-spacing: 0.04em;
}

.score-pill {
  position: absolute;
  /* The top strip belongs to the HUD and the centre below it to the round
     banner, combo counter and move call, so the series score goes bottom left.
     The training panel sits bottom right. */
  bottom: 20px;
  left: 20px;
  z-index: 6;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-family: Georgia, serif;
  letter-spacing: 0.08em;
}
.score-pill[hidden] { display: none; }

.gallery {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: auto;
  padding: 24px;
  background: #07060a;
}
.gallery.dock {
  top: auto;
  bottom: 0;
  z-index: 6;
  max-height: 34vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 8px 16px 10px;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 3, 8, 0.72) 22%, rgba(5, 3, 8, 0.96) 55%);
}
.gallery.dock .grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  grid-template-columns: none;
}
.gallery.dock .gcard {
  flex: 0 0 112px;
}
.gallery.dock .gcard canvas { height: 78px; }
/* The dock is a fixed strip, so card text has to fit on one line each. */
.gallery.dock .gcard b,
.gallery.dock .gcard i {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcard.on { outline: 2px solid #e6b34a; }
body.match-on .gallery { display: none !important; }
.gal-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
}
.gal-tools select,
.gal-tools input[type="search"] {
  font: inherit;
  color: inherit;
  background: #161018;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
}
.from-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.from-filters button {
  background: #1b1418;
  border: 1px solid var(--line);
  padding: 4px 10px;
  font-size: 12px;
}
.from-filters button.on { background: var(--red); border-color: transparent; }
.roster-count { margin: 0; color: var(--muted); font-size: 12px; }
.gallery[hidden] { display: none; }
.mm-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.mm-brand strong { display: block; font-size: 18px; letter-spacing: 0.04em; }
.mark {
  width: 14px;
  height: 14px;
  background: var(--red);
  box-shadow: 5px 5px 0 var(--gold);
  flex: 0 0 auto;
}
.mm-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(36px, 6vw, 72px);
  letter-spacing: -0.03em;
}
.gal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.gallery:not(.dock) {
  background: #050308;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.gallery.dock .grid {
  display: flex;
  grid-template-columns: none;
}
.gcard {
  background: #16130f;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.gcard canvas {
  width: 100%;
  height: 120px;
  display: block;
  background: linear-gradient(#9aada8, #6a7e7a);
  border-radius: 8px;
}
.gcard b { display: block; margin-top: 6px; font-size: 12px; }
.gcard i { color: var(--muted); font-style: normal; font-size: 11px; }

.hud {
  pointer-events: none;
  position: absolute;
  inset: 16px 20px auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  z-index: 4;
}
.hud[hidden],
.train-panel[hidden],
.score-pill[hidden],
.combo[hidden],
.move-call[hidden],
.banner[hidden] {
  display: none !important;
}
body.nft-view .hud,
body.nft-view .train-panel,
body.nft-view .score-pill {
  display: none !important;
}
.bar-col, .vs {
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(8, 6, 8, 0.62), rgba(8, 6, 8, 0.28));
  border: 1px solid var(--line);
  border-radius: 12px;
}
.bar-col h2 { margin: 0 0 2px; font-size: 17px; font-family: Georgia, serif; }
.moves { margin: 0 0 8px; color: var(--gold); font-size: 11px; }
.bar-col.p2 { text-align: right; }
.hp {
  height: 18px;
  border: 2px solid #f4ead8;
  background: #1a0c0a;
  overflow: hidden;
}
.hp > i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #ffd56a 0%, #e23b2f 58%, #8a1810 100%);
  transform-origin: left center;
}
.bar-col.p2 .hp > i { transform-origin: right center; margin-left: auto; }
.meter { margin-top: 7px; height: 8px; background: #101820; border: 1px solid #4a6e92; }
.meter > i { display: block; height: 100%; background: linear-gradient(90deg, #1e5ec8, #7ed0ff); width: 0; }
.guard { margin-top: 5px; height: 5px; background: #16120e; border: 1px solid #6a5a3c; opacity: 0; transition: opacity 0.2s; }
.guard.on { opacity: 1; }
.guard > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f0e0a8, #d8a23c); transform-origin: left center; }
.bar-col.p2 .guard > i { transform-origin: right center; }
.guard.low > i { background: linear-gradient(90deg, #ffb46a, #e2402c); }
.vs {
  text-align: center;
  font-family: Georgia, serif;
  color: var(--gold);
  font-size: 28px;
}
.vs small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.combo, .move-call, .banner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  font-family: Georgia, serif;
  color: #fff8ee;
  z-index: 5;
}
/* The HUD bar owns the top ~128px of the stage, so these three keep a pixel
   floor: on a short stage a plain percentage lands on top of it. */
.combo { top: max(14%, 124px); font-size: 42px; font-weight: 800; }
.move-call { top: max(26%, 178px); font-size: clamp(22px, 4vw, 42px); text-transform: uppercase; }
.banner { top: max(18%, 138px); font-size: clamp(28px, 5vw, 58px); letter-spacing: 0.16em; }
.train-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.train-panel p { margin: 0 0 6px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }
.train-panel select, .online-card input, .online-card select {
  background: #1b1814;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
}

.help-card ul { margin: 0; padding-left: 18px; color: var(--muted); }
.help-card li { margin: 6px 0; }

.wallet {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.addr { color: var(--gold); font-size: 12px; letter-spacing: 0.04em; }
.rooms { display: grid; gap: 8px; margin: 12px 0; max-height: 240px; overflow: auto; }
.room {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #14110e;
}
.char-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin: 12px 0;
  max-height: 280px;
  overflow: auto;
}
.char-pick button.on { outline: 2px solid var(--gold); }
.status { color: var(--muted); font-size: 13px; }

.select { display: none !important; }
.fight-top, .help { display: none; }

.overlay.game-menu {
  display: block;
  place-items: unset;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
.overlay.game-menu[hidden] { display: none; }
.overlay.game-menu .mm-glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 3, 8, 0.82) 0%, rgba(5, 3, 8, 0.35) 38%, transparent 58%),
    radial-gradient(900px 520px at 78% 40%, rgba(226, 59, 47, 0.22), transparent 58%),
    radial-gradient(120% 80% at 50% 120%, #000 0%, transparent 55%);
}
.overlay.game-menu .mm-brand,
.overlay.game-menu .mm-title,
.overlay.game-menu .mm-list,
.overlay.game-menu .mm-note,
.overlay.game-menu .mm-hints { pointer-events: auto; }
.overlay.game-menu .mm-brand {
  position: absolute;
  top: 22px;
  left: 28px;
}
.overlay.game-menu .mm-title {
  position: absolute;
  top: 18px;
  right: 36px;
  font-size: clamp(52px, 9vw, 108px);
  text-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), 0 0 40px rgba(226, 59, 47, 0.25);
}
.overlay.game-menu .mm-list {
  position: absolute;
  left: 0;
  top: 26%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: min(380px, 40vw);
  padding: 12px 28px 12px 48px;
}
.overlay.game-menu .mm-item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 10px 18px 10px 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 26px);
  color: rgba(255, 248, 242, 0.62);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.overlay.game-menu .mm-item:hover,
.overlay.game-menu .mm-item.on {
  filter: none;
  color: #fff;
  background: linear-gradient(90deg, rgba(226, 59, 47, 0.55), rgba(226, 59, 47, 0.05) 70%, transparent);
}
.overlay.game-menu .mm-item.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: #fff;
  box-shadow: 0 0 12px var(--red);
}
.overlay.game-menu .mm-note {
  position: absolute;
  left: 48px;
  bottom: 72px;
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  text-shadow: 0 1px 0 #000;
}
.overlay.game-menu .mm-hints {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 28px;
  background: rgba(0, 0, 0, 0.42);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 800px) {
  .overlay.game-menu .mm-title { right: 16px; font-size: 42px; }
  .overlay.game-menu .mm-list { padding-left: 16px; top: 22%; }
  .overlay.game-menu .mm-note { left: 16px; bottom: 88px; }
}

.overlay.lobby-ui {
  display: flex;
  place-items: stretch;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(140, 50, 220, 0.28), transparent 55%),
    linear-gradient(180deg, #12081c 0%, #07060d 100%);
  backdrop-filter: none;
}
.lobby-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px 22px 12px;
  gap: 12px;
}
.lobby-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.lobby-top h1 {
  margin: 2px 0 4px;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(34px, 5vw, 56px);
}
.lobby-meta { margin: 0; color: #c9a6ff; font-size: 13px; letter-spacing: 0.04em; }
.lobby-wallet { text-align: right; max-width: 320px; }
.lobby-wallet .status { margin: 8px 0 0; }
.lobby-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.9fr);
  gap: 16px;
  min-height: 0;
}
.lobby-rooms {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.rooms { display: grid; gap: 10px; margin: 0; max-height: none; overflow: visible; }
.room-slot {
  padding: 10px 12px 12px;
  border: 1px solid rgba(180, 120, 255, 0.28);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(20, 10, 32, 0.92), rgba(8, 6, 14, 0.92));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.room-slot .head {
  display: block;
  color: #d7c4ff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.room-slot .head b { display: block; color: #fff; font-size: 15px; letter-spacing: 0.1em; }
.room-slot .head span { display: block; margin-top: 3px; }
.vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.vs-box {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px;
  background: #0b0a12;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.vs-box.empty { color: #8b7aa6; letter-spacing: 0.04em; }
.vs-box canvas { display: block; width: 64px; height: 78px; }
.vs-box .who { display: block; font-size: 12px; color: #f4ead8; }
.vs-mark {
  font-family: Georgia, serif;
  font-style: italic;
  color: #e6b34a;
  font-size: 22px;
}
.room-slot button { min-width: 88px; }
.lobby-side {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 0;
}
.lobby-cap, .lobby-watch, .lobby-chat {
  border: 1px solid rgba(180, 120, 255, 0.24);
  background: rgba(10, 8, 16, 0.78);
  padding: 10px 12px;
}
.lobby-cap { display: flex; justify-content: space-between; color: #d7c4ff; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.lobby-watch { overflow: auto; min-height: 72px; }
/* Side boxes have to shrink and scroll inside the fixed shell instead of
   spilling over the footer. */
.lobby-chat { min-height: 0; overflow: auto; }
.lobby-side { grid-template-rows: auto minmax(72px, 1fr) minmax(0, auto); }
.watch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.watch-row canvas { width: 36px; height: 42px; background: #111; }
.sig { display: flex; gap: 2px; margin-left: auto; align-items: flex-end; height: 12px; }
.sig i { display: block; width: 3px; background: #7dffb0; }
.sig i:nth-child(1) { height: 4px; }
.sig i:nth-child(2) { height: 7px; }
.sig i:nth-child(3) { height: 10px; }
.sig i:nth-child(4) { height: 12px; }
.lobby-chat { min-height: 88px; color: var(--muted); }
.lobby-foot {
  display: grid;
  gap: 10px;
}
.char-pick {
  display: flex;
  gap: 6px;
  margin: 0;
  max-height: none;
  overflow: auto;
  padding-bottom: 4px;
}
.char-pick button.gcard {
  flex: 0 0 96px;
  padding: 6px;
  border-radius: 2px;
  background: #161018;
}
.char-pick button.gcard canvas { width: 100%; height: 72px; border-radius: 0; }
.char-pick button.gcard b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
.char-pick button.on { outline: 2px solid #e6b34a; }
.lobby-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.lobby-actions a.ghost,
.side-links a.ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .lobby-body { grid-template-columns: 1fr; }
  .lobby-top { flex-direction: column; }
  .lobby-wallet { text-align: left; }
  .overlay.game-menu .mm-list { min-width: calc(100% - 24px); }
}

/* The footer carries Enter cup and Admin, so the shell itself must never
   scroll — the bracket and the holder list scroll on their own. */
.ch-shell { overflow: hidden; }
.ch-clock-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid rgba(180, 120, 255, 0.18);
}
.ch-clock-row .ch-admin {
  flex: 1 1 320px;
  max-width: 520px;
}
.ch-clock {
  margin: 2px 0 4px;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.ch-stats {
  display: flex;
  gap: 18px;
  color: #d7c4ff;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ch-stats b { display: block; color: #fff; font-size: 18px; letter-spacing: 0.04em; }
.ch-body { min-height: 0; }
/* Short screens: trim the clock and the portrait strip so the bracket and the
   leaderboard keep a usable height. */
@media (max-height: 880px) {
  .lobby-shell { padding: 12px 18px 8px; gap: 8px; }
  .ch-clock { font-size: clamp(26px, 4vw, 38px); }
  .char-pick button.gcard { flex: 0 0 84px; }
  .char-pick button.gcard canvas { height: 56px; }
}
.ch-bracket {
  display: flex;
  gap: 14px;
  overflow: auto;
  padding-bottom: 8px;
}
.ch-round { flex: 0 0 240px; display: grid; gap: 10px; align-content: start; }
.ch-match.live {
  outline: 2px solid #e6b34a;
  box-shadow: 0 0 24px rgba(230, 179, 74, 0.25);
}
.ch-match.done { opacity: 0.78; }
.vs-box.won { outline: 1px solid #e6b34a; }
.ch-board {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: #f4ead8;
}
.ch-board li { margin: 6px 0; }
.ch-board i { color: #c9a6ff; font-style: normal; }
.ch-board span { color: #8b7aa6; }
.ch-admin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid rgba(180, 120, 255, 0.24);
  background: rgba(10, 8, 16, 0.78);
}
.ch-admin[hidden] { display: none; }
.ch-admin label { display: grid; gap: 4px; font-size: 12px; color: #d7c4ff; letter-spacing: 0.06em; text-transform: uppercase; }
.ch-admin input {
  background: #0b0a12;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 8px 10px;
}
.ch-admin .status { grid-column: 1 / -1; margin: 0; }
.ch-live-tag {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 4px 14px;
  border: 1px solid #e6b34a;
  background: rgba(8, 4, 8, 0.72);
  color: #e6b34a;
  letter-spacing: 0.18em;
  font-size: 12px;
}
.ch-live-tag[hidden] { display: none; }

@media (max-width: 860px) {
  .ch-clock-row { flex-direction: column; align-items: flex-start; }
}