/* ═══════════════════════════════════════════════════════════════════════
   DBTS V 0.327 — "ARENA" PRESENTATION LAYER
   The authoritative visual system for every screen: boot, home hub,
   in-match HUD, playmat, and all popups. main.css now only carries board
   geometry, card/hand mechanics and dev tooling; all chrome lives here.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonts (bundled, OFL — see styles/fonts/OFL.txt) ─────────────────── */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-latin-800-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/barlow-condensed-latin-900-italic.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/chakra-petch-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/chakra-petch-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/chakra-petch-latin-700-normal.woff2') format('woff2'); }

/* ── Design tokens ────────────────────────────────────────────────────── */
:root {
  --f-ui: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --f-num: 'Chakra Petch', 'Barlow Condensed', monospace;

  --bg-0: #03050d;
  --bg-1: #070d22;
  --bg-2: #0c1838;
  --bg-3: #13244f;

  --glass: linear-gradient(165deg, rgba(20, 36, 80, .94) 0%, rgba(9, 16, 40, .96) 46%, rgba(5, 9, 24, .97) 100%);
  --glass-soft: linear-gradient(180deg, rgba(22, 38, 82, .72), rgba(8, 14, 34, .82));
  --line: rgba(128, 176, 255, .22);
  --line-2: rgba(150, 200, 255, .42);
  --line-hi: rgba(170, 225, 255, .85);

  --cyan: #3cd2ff;
  --cyan-rgb: 60, 210, 255;
  --orange: #ff8a1c;
  --orange-rgb: 255, 138, 28;
  --gold: #ffc53d;
  --gold-rgb: 255, 197, 61;
  --danger: #ff4058;

  --p1: #ff3b4f;
  --p2: #2f8dff;
  --p1-rgb: 255, 59, 79;
  --p2-rgb: 47, 141, 255;

  --text: #eef3ff;
  --text-dim: #a9bbdc;
  --text-mute: #6f82a8;

  --chamfer-s: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  --chamfer-m: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --chamfer-l: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);

  --btn-primary: linear-gradient(180deg, #ffc047 0%, #ff8d1f 48%, #f06200 100%);
  --btn-secondary: linear-gradient(180deg, rgba(64, 94, 160, .62) 0%, rgba(26, 42, 88, .82) 100%);
  --btn-danger: linear-gradient(180deg, #ff6a78 0%, #e0223c 55%, #a30f24 100%);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.34, 1.4, .64, 1);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --hex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><path d='M28 0 56 16v32L28 64 0 48V16zM28 64v33M0 48l-28 16M56 48l28 16' fill='none' stroke='%2378b4ff' stroke-width='1'/></svg>");
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--f-ui);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: var(--f-ui); }
::selection { background: rgba(var(--cyan-rgb), .35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(120, 170, 255, .45) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(120, 180, 255, .55), rgba(70, 110, 200, .45)); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--cyan-rgb), .75); }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 .4em;
  border: 1px solid rgba(160, 200, 255, .5); border-bottom-width: 2px;
  background: rgba(20, 34, 72, .9); color: #fff;
  font: 700 .86em/1.45 var(--f-num); text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. ATMOSPHERE — shared animated backdrop (boot + home)
   ═══════════════════════════════════════════════════════════════════════ */
.fx-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: var(--bg-0); }
.fx-backdrop > span { position: absolute; pointer-events: none; }
.fx-sky {
  inset: 0;
  background:
    radial-gradient(ellipse 42% 55% at 30% 50%, rgba(255, 130, 30, .30) 0%, rgba(255, 90, 10, .10) 38%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 78% 30%, rgba(40, 110, 255, .30) 0%, transparent 65%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(40, 90, 220, .35) 0%, transparent 60%),
    linear-gradient(180deg, #050a1d 0%, #081334 42%, #060b22 70%, #03050d 100%);
}
.fx-rays {
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, transparent 0 8%, rgba(3, 5, 13, .0) 8%, rgba(3, 5, 13, .92) 62%),
    repeating-conic-gradient(from 0deg at 30% 50%, rgba(255, 190, 90, .05) 0deg 1.4deg, transparent 1.4deg 9deg);
}
.fx-streaks {
  inset: -20%;
  background:
    repeating-linear-gradient(112deg, transparent 0 140px, rgba(120, 190, 255, .045) 140px 141px, transparent 141px 260px),
    repeating-linear-gradient(112deg, transparent 0 380px, rgba(255, 170, 70, .04) 380px 382px, transparent 382px 700px);
}
.fx-floor {
  left: -40%; right: -40%; bottom: -8%; height: 62%;
  background:
    linear-gradient(rgba(90, 160, 255, .22) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(90, 160, 255, .22) 1px, transparent 1px) 0 0 / 64px 100%;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  opacity: .45;
}
.fx-grain { display: none; }
.fx-vignette {
  inset: 0;
  background:
    radial-gradient(ellipse 120% 95% at 50% 50%, transparent 55%, rgba(0, 0, 0, .72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 14%, transparent 86%, rgba(0,0,0,.6) 100%);
}
@keyframes fxSpin { to { rotate: 360deg; } }
@keyframes fxStreak { from { transform: translateX(0); } to { transform: translateX(520px); } }
@keyframes fxFloor { from { background-position: 0 0, 0 0; } to { background-position: 0 64px, 0 0; } }
@keyframes fxPulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes fxGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes fxSheen { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes fxBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fxRiseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fxSlideIn { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes fxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxSpinner { to { rotate: 360deg; } }

/* ═══════════════════════════════════════════════════════════════════════
   2. BOOT / LOADING
   ═══════════════════════════════════════════════════════════════════════ */
#loadingScreen {
  position: fixed; inset: 0; z-index: 100040; overflow: hidden; overflow: clip;
  display: block;
  background: var(--bg-0);
  opacity: 1; visibility: visible;
  transition: opacity .5s ease, visibility 0s linear .5s;
  cursor: default;
}
#loadingScreen.closed { opacity: 0; visibility: hidden; pointer-events: none; }
#loadingScreen.is-ready { cursor: pointer; }
#loadingScreen .fx-sky {
  background:
    radial-gradient(ellipse 38% 48% at 50% 44%, rgba(255, 140, 40, .28) 0%, rgba(255, 90, 10, .08) 45%, transparent 72%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(40, 90, 220, .38) 0%, transparent 62%),
    linear-gradient(180deg, #040819 0%, #081334 50%, #03050d 100%);
}
#loadingScreen .fx-rays {
  background:
    radial-gradient(circle at 50% 44%, transparent 0 8%, rgba(3, 5, 13, .92) 62%),
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(255, 190, 90, .05) 0deg 1.4deg, transparent 1.4deg 9deg);
}
.ld-center {
  position: absolute; left: 50%; top: 44%;
  translate: -50% -50%;
  width: min(820px, 86vw);
  display: grid; justify-items: center; gap: 18px;
  z-index: 3;
}
.ld-aura {
  position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 2.2; translate: -50% -50%;
  background: radial-gradient(ellipse, rgba(255, 160, 50, .32) 0%, rgba(255, 110, 20, .12) 40%, transparent 70%);
  animation: fxGlow 3.2s ease-in-out infinite;
}
.ld-logo { position: relative; width: min(620px, 72vw); animation: fxRiseIn .9s var(--ease-out) both; }
.ld-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); user-select: none; pointer-events: none; }
.ld-tagline {
  position: relative; display: flex; align-items: center; gap: 18px;
  color: var(--text-dim); font: italic 700 clamp(14px, 1.5vw, 20px)/1 var(--f-ui);
  letter-spacing: .42em; text-transform: uppercase;
  animation: fxRiseIn .9s .15s var(--ease-out) both;
}
.ld-tagline::before, .ld-tagline::after { content: ''; width: clamp(40px, 7vw, 110px); height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .8)); }
.ld-tagline::after { transform: scaleX(-1); }
.ld-bottom {
  position: absolute; left: 50%; bottom: clamp(26px, 5vh, 64px); translate: -50% 0;
  width: min(1100px, calc(100vw - 56px));
  display: grid; gap: 12px; z-index: 2;
}
.ld-status-row { display: flex; align-items: center; gap: 12px; min-height: 22px; }
.ld-spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid rgba(var(--cyan-rgb), .25); border-top-color: var(--cyan);
  border-radius: 50%; animation: fxSpinner .8s linear infinite;
}
#loadingScreen.is-ready .ld-spinner { border-color: var(--gold); border-top-color: var(--gold); animation: none; border-radius: 0; rotate: 45deg; width: 10px; height: 10px; margin: 0 3px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
#loadingStatus {
  flex: 1; min-width: 0; margin: 0;
  color: var(--text-dim); font: 700 15px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ld-pct { color: #fff; font: 700 18px/1 var(--f-num); letter-spacing: .06em; }
.ld-track {
  position: relative; height: 8px; overflow: hidden;
  background: rgba(10, 20, 48, .9);
  box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .25);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
#loadingBar {
  position: relative; width: 0%; height: 100%;
  background: linear-gradient(90deg, #2a7dff 0%, var(--cyan) 55%, #fff 100%);
  box-shadow: 0 0 18px rgba(var(--cyan-rgb), .8);
  transition: none; /* width transitions stall while the main thread boots */
}

#loadingScreen.is-ready #loadingBar { background: linear-gradient(90deg, #ff7a12, var(--gold) 70%, #fff); box-shadow: 0 0 18px rgba(var(--orange-rgb), .8); }
#loadingScreen.is-failed #loadingBar { background: linear-gradient(90deg, #a30f24, var(--danger)); box-shadow: 0 0 18px rgba(255, 64, 88, .7); }
#loadingContinue {
  justify-self: center;
  width: auto; min-width: 280px; margin: 18px 0 0; padding: 14px 44px;
  border: 0; border-radius: 0;
  background: var(--btn-primary); color: #1c0b00;
  font: italic 800 24px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  clip-path: var(--chamfer-m);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s var(--ease-out), filter .15s ease;
  position: relative; overflow: hidden;
}
#loadingContinue::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: fxSheen 2.4s ease-in-out infinite; }
#loadingContinue.ready { opacity: 1; visibility: visible; transform: none; }
#loadingContinue:hover { filter: brightness(1.1) saturate(1.1); }
#loadingScreen.is-failed #loadingContinue { background: var(--btn-danger); color: #fff; }
.ld-hint {
  justify-self: center; margin-top: -2px;
  color: var(--text-mute); font: 700 13px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s ease;
}
#loadingScreen.is-ready:not(.is-failed) .ld-hint { opacity: 1; animation: fxBlink 1.6s ease-in-out infinite; }
.ld-foot { display: flex; align-items: flex-end; gap: 22px; margin-top: 14px; }
.ld-foot .loading-build { flex: none; color: var(--text-mute); font: 700 13px/1 var(--f-num); letter-spacing: .12em; }
.ld-disclaimer { color: rgba(170, 186, 220, .5); font: 500 12px/1.4 var(--f-ui); letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════════════════
   3. HOME HUB (1920×1080 authored stage)
   ═══════════════════════════════════════════════════════════════════════ */
#titleScreen {
  position: fixed; inset: 0; z-index: 100000; overflow: hidden; overflow: clip;
  background: var(--bg-0);
}
#titleScreen.closed { visibility: hidden; pointer-events: none; }
#titleParticleCanvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: .8; }
.hub-stage {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  /* Authored at 1920x1080; the stage grows along the spare axis so the top
     bar and footer always sit on the real screen edges (no letterboxing). */
  width: calc(var(--hub-stage-w, 1920) * 1px); height: calc(var(--hub-stage-h, 1080) * 1px);
  transform: translate(-50%, -50%) scale(var(--dbts-hub-scale, 1));
  transform-origin: center center;
}

/* Top bar — its tint bleeds past the stage so it always meets the screen edges. */
.hub-topbar {
  position: absolute; left: 0; right: 0; top: 0; height: 92px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 58px;
  z-index: 5;
}
.hub-topbar::before {
  content: ''; position: absolute; inset: 0 -3000px; z-index: -1;
  background: linear-gradient(180deg, rgba(3, 6, 16, .92) 0%, rgba(6, 12, 30, .72) 70%, rgba(6, 12, 30, 0) 100%);
  border-bottom: 1px solid rgba(120, 170, 255, .14);
}
.hub-topbar::after {
  content: ''; position: absolute; left: 58px; right: 58px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--orange) 0 180px, rgba(var(--cyan-rgb), .55) 180px 420px, transparent 900px);
}
.hub-brand { display: flex; align-items: center; gap: 22px; }
.hub-brand-logo { height: 60px; width: auto; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.7)); }
.hub-brand-sep { width: 2px; height: 42px; background: linear-gradient(180deg, transparent, rgba(160, 200, 255, .55), transparent); transform: skewX(-16deg); }
.hub-crumb { display: grid; line-height: 1; }
.hub-crumb b { color: #fff; font: italic 900 38px/.9 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; }
.hub-crumb i { margin-top: 4px; color: var(--text-dim); font: 700 14px/1 var(--f-ui); font-style: normal; letter-spacing: .28em; text-transform: uppercase; }
.hub-topbar-right { display: flex; align-items: center; gap: 14px; }
.hub-chip {
  display: grid; gap: 3px; padding: 8px 18px 8px 16px; min-width: 112px;
  background: var(--glass-soft);
  box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--cyan);
  clip-path: var(--chamfer-s);
}
.hub-chip i { color: var(--text-mute); font: 700 11px/1 var(--f-ui); font-style: normal; letter-spacing: .24em; text-transform: uppercase; }
.hub-chip b { color: #fff; font: 700 19px/1 var(--f-num); letter-spacing: .04em; }
.hub-build-chip { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--orange); }

.hub-icon-btn {
  position: relative; width: 56px; height: 56px; min-width: 56px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 0;
  background: var(--glass-soft);
  box-shadow: inset 0 0 0 1px var(--line-2);
  clip-path: var(--chamfer-s);
  transition: background .18s ease, box-shadow .18s ease, transform .18s var(--ease-snap);
}
.hub-icon-btn img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); pointer-events: none; }
.account-button-icon { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hub-icon-btn:hover, .hub-icon-btn:focus-visible, .hub-icon-btn.active {
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .35), rgba(20, 60, 120, .7));
  box-shadow: inset 0 0 0 1px var(--line-hi), inset 0 0 18px rgba(var(--cyan-rgb), .4);
  outline: none; filter: none;
}
.hub-icon-btn:active { transform: scale(.94); }
.hub-icon-btn .account-link-dot {
  position: absolute; right: 8px; top: 8px; width: 9px; height: 9px;
  background: #ff4058; rotate: 45deg; box-shadow: 0 0 0 2px rgba(3, 6, 16, .9), 0 0 10px rgba(255,64,88,.75);
}
.hub-icon-btn.connected .account-link-dot { background: #4dff95; box-shadow: 0 0 0 2px rgba(3, 6, 16, .9), 0 0 10px #4dff95; }

/* Featured leaders */
.hub-showcase { position: absolute; left: 40px; top: calc(50% - 436px); width: 1220px; height: 880px; z-index: 2; transition: transform .6s var(--ease-out), opacity .4s ease, filter .4s ease; }
.hub-aura {
  position: absolute; left: 50%; top: 44%; width: 980px; height: 980px; translate: -50% -50%;
  background:
    radial-gradient(circle, rgba(255, 200, 90, .42) 0%, rgba(255, 140, 30, .22) 22%, rgba(255, 90, 10, .08) 44%, transparent 64%);
  animation: fxGlow 4.5s ease-in-out infinite;
}
.hub-aura::after {
  content: ''; position: absolute; inset: 18%; border-radius: 50%;
  border: 2px solid rgba(255, 210, 120, .18);
  box-shadow: 0 0 60px rgba(255, 160, 40, .25), inset 0 0 60px rgba(255, 160, 40, .2);
}
.hub-fan { position: absolute; left: 50%; top: 44%; width: 0; height: 0; }
.hub-card {
  position: absolute; left: 0; top: 0;
  width: 420px; aspect-ratio: 600 / 838;
  cursor: pointer; outline: none;
  transition: transform .5s var(--ease-out), opacity .35s ease;
  border-radius: 14px;
}
.hub-card.main { z-index: 3; transform: translate(-50%, -50%) rotate(-1.5deg); animation: hubFloat 6s ease-in-out infinite; will-change: translate; }
.hub-card.side { width: 318px; z-index: 1; }
.hub-card.side::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(3, 6, 18, .42); pointer-events: none; transition: opacity .3s ease; }
.hub-card.side:hover::after, .hub-card.side:focus-visible::after { opacity: .3; }
.hub-card.side.left  { transform: translate(-50%, -50%) translate(-330px, 40px) rotate(-9deg); }
.hub-card.side.right { transform: translate(-50%, -50%) translate(330px, 40px) rotate(8deg); }
.hub-card img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
  box-shadow: 0 20px 40px rgba(0,0,0,.6), 0 0 0 2px rgba(255, 220, 150, .22);
  transition: opacity .16s ease, transform .16s ease;
  background: rgba(10, 16, 40, .8);
  user-select: none; -webkit-user-drag: none;
}
.hub-card img:not([src]), .hub-card img[src=""] { opacity: 0; }
.hub-card img.changing { opacity: 0; transform: scale(.97); }
.hub-card.main img { box-shadow: 0 30px 50px rgba(0,0,0,.6), 0 0 0 2px rgba(255, 220, 150, .45), 0 0 40px rgba(255, 150, 40, .4); }
.hub-card-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.hub-card-shine::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: fxSheen 5.5s ease-in-out infinite;
}
.hub-card.side .hub-card-shine { display: none; }

.hub-card.side.left:hover, .hub-card.side.left:focus-visible { transform: translate(-50%, -50%) translate(-350px, 24px) rotate(-7deg); }
.hub-card.side.right:hover, .hub-card.side.right:focus-visible { transform: translate(-50%, -50%) translate(350px, 24px) rotate(6deg); }

@keyframes hubFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

.hub-feature-plate {
  /* Anchor below the featured card instead of to the showcase bottom.
     Long/full names can now wrap downward without climbing under the card. */
  position: absolute; left: 50%; top: 700px; bottom: auto; translate: -50% 0;
  width: min(1280px, calc(100vw - 140px)); min-width: 760px; max-width: none; padding: 16px 42px 18px;
  display: grid; justify-items: center; gap: 6px; text-align: center;
  background: linear-gradient(90deg, transparent, rgba(6, 12, 32, .82) 18%, rgba(6, 12, 32, .82) 82%, transparent);
}
.hub-feature-plate::before, .hub-feature-plate::after { content: ''; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .7), transparent); }
.hub-feature-plate::before { top: 0; }
.hub-feature-plate::after { bottom: 0; }
.hub-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--gold); font: 800 15px/1 var(--f-ui); letter-spacing: .34em; text-transform: uppercase;
}
.hub-kicker::before { content: ''; width: 18px; height: 4px; background: currentColor; transform: skewX(-30deg); box-shadow: 0 0 10px currentColor; }
.hub-feature-name {
  width: 100%; max-width: 1240px;
  color: #fff; font: italic 900 clamp(38px, 3.15vw, 56px)/.95 var(--f-ui); letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 30px rgba(255, 170, 60, .35);
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-wrap: balance;
}
.hub-feature-more { display: flex; flex-wrap: wrap; justify-content: center; white-space: normal; align-items: center; gap: 8px 12px; color: var(--text-dim); font: 700 16px/1.1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.hub-feature-more-label { color: var(--text-mute); letter-spacing: .2em; font-size: 13px; }
.hub-feature-alt { max-width: 460px; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.hub-feature-alt + .hub-feature-alt::before { content: '/'; margin-right: 12px; color: var(--orange); }

/* Main menu tiles */
.hub-menu {
  position: absolute; right: 70px; top: calc(50% - 348px); width: 650px; z-index: 3;
  display: grid; gap: 18px;
  transition: opacity .35s ease, transform .5s var(--ease-out);
}
.hub-menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hub-tile {
  position: relative; display: grid; align-content: end; justify-items: start;
  width: 100%; min-height: 188px; padding: 24px 34px 26px;
  border: 0; border-radius: 0; overflow: hidden;
  background: linear-gradient(135deg, rgba(120, 180, 255, .55), rgba(60, 90, 170, .25) 40%, rgba(120, 180, 255, .4));
  color: var(--text); text-align: left; text-transform: none;
  clip-path: var(--chamfer-l);
  cursor: pointer;
  transition: transform .28s var(--ease-out), filter .2s ease, background .25s ease;
  isolation: isolate;
  animation: fxSlideIn .7s var(--ease-out) both;
}
.hub-menu > :nth-child(2) .hub-tile:first-child { animation-delay: .08s; }
.hub-menu > :nth-child(2) .hub-tile:last-child { animation-delay: .14s; }
.hub-menu > :nth-child(3) { animation-delay: .2s; }
.hub-tile-bg {
  position: absolute; inset: 2px; z-index: -1;
  clip-path: var(--chamfer-l);
  background:
    radial-gradient(ellipse 80% 90% at 100% 0%, rgba(var(--cyan-rgb), .18), transparent 60%),
    linear-gradient(160deg, #15295c 0%, #0b1638 55%, #070e26 100%);
}
.hub-tile-bg::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-130%) skewX(-18deg);
}
.hub-tile:hover .hub-tile-bg::after, .hub-tile:focus-visible .hub-tile-bg::after { animation: fxSheen 1.1s ease-out; }
.hub-tile-kicker { position: relative; color: var(--cyan); font: 800 15px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; }
.hub-tile-label {
  position: relative; margin-top: 8px;
  color: #fff; font: italic 900 64px/.88 var(--f-ui); letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.hub-tile-desc { position: relative; margin-top: 10px; color: var(--text-dim); font: 600 17px/1.1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.hub-tile:hover, .hub-tile:focus-visible {
  transform: translateX(-10px);
  background: linear-gradient(135deg, var(--cyan), rgba(80, 140, 255, .5) 45%, var(--cyan));
  outline: none; filter: none;
}
.hub-tile:active { transform: translateX(-6px) scale(.985); }
.hub-tile.active { background: linear-gradient(135deg, var(--gold), rgba(255, 140, 30, .6) 45%, var(--gold)); color: var(--text); }

/* BATTLE — the hero call-to-action */
.hub-tile-battle { min-height: 318px; padding: 34px 44px 40px; background: linear-gradient(135deg, #ffe08a, #ff8a1c 45%, #ffd36b); }
.hub-tile-battle .hub-tile-bg {
  background:
    repeating-linear-gradient(112deg, transparent 0 46px, rgba(255, 255, 255, .06) 46px 48px),
    radial-gradient(ellipse 70% 120% at 100% 100%, rgba(255, 230, 150, .5), transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(255, 90, 0, .55), transparent 70%),
    linear-gradient(150deg, #ffae2e 0%, #ff7410 45%, #d94800 100%);
}
.hub-tile-battle .hub-tile-kicker { color: #3a1500; letter-spacing: .34em; }
.hub-tile-battle .hub-tile-label { font-size: 132px; line-height: .82; color: #fff; text-shadow: 0 6px 0 rgba(120, 30, 0, .45), 0 0 40px rgba(255, 240, 200, .45); }
.hub-tile-battle .hub-tile-desc { color: rgba(40, 12, 0, .8); font-weight: 700; }
.hub-tile-battle::after {
  content: 'VS'; position: absolute; right: -8px; top: -30px; z-index: -1;
  color: rgba(255, 255, 255, .12); font: italic 900 300px/1 var(--f-ui); letter-spacing: -.04em;
  pointer-events: none;
}
.hub-tile-battle:hover, .hub-tile-battle:focus-visible { background: linear-gradient(135deg, #fff, #ffc04a 45%, #fff); }
.hub-tile-battle.active { background: linear-gradient(135deg, #fff, var(--cyan) 45%, #fff); }
.hub-tile-go { position: absolute; right: 46px; bottom: 46px; width: 84px; height: 58px; transition: transform .3s var(--ease-out); }
.hub-tile-go::before, .hub-tile-go::after { content: ''; position: absolute; top: 0; width: 44px; height: 100%; background: #fff; clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); }
.hub-tile-go::before { left: 0; opacity: .55; }
.hub-tile-go::after { left: 36px; }
.hub-tile-battle:hover .hub-tile-go { transform: translateX(10px); }

.hub-tile-med { min-height: 208px; }
.hub-tile-med .hub-tile-label { font-size: 56px; }
.hub-tile.account-locked { filter: grayscale(.9) brightness(.62); cursor: pointer; }
.hub-tile.account-locked:hover, .hub-tile.account-locked:focus-visible { filter: grayscale(.65) brightness(.82); background: linear-gradient(135deg, rgba(65,72,92,.95), rgba(30,35,52,.95)); box-shadow: inset 0 0 0 1px rgba(255,120,135,.45), inset 5px 0 0 #ff4058; }
.sleeve-account-desc { display: none; color: #ffb2bd; }
.hub-tile.account-locked .sleeve-normal-desc { display: inline; }
.hub-tile.account-locked .sleeve-account-desc { display: none; }
.hub-tile.account-locked:hover .sleeve-normal-desc,
.hub-tile.account-locked:focus-visible .sleeve-normal-desc { display: none; }
.hub-tile.account-locked:hover .sleeve-account-desc,
.hub-tile.account-locked:focus-visible .sleeve-account-desc { display: inline; }
.hub-tile.account-locked::before {
  content: 'ACCOUNT REQUIRED'; position: absolute; right: 22px; top: 18px; z-index: 4; padding: 6px 10px;
  color: #ffd7dd; background: rgba(120,18,38,.72); box-shadow: inset 0 0 0 1px rgba(255,90,112,.55);
  font: 800 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase;
}

.hub-tile-glyph {
  position: absolute; right: 24px; top: 22px; width: 64px; height: 64px;
  opacity: .5; transition: opacity .2s ease, transform .35s var(--ease-out);
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
  color: #bfe6ff;
}
.hub-tile:hover .hub-tile-glyph { opacity: .95; transform: rotate(-8deg) scale(1.08); }
.glyph-sleeves { --glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M20 6h30a4 4 0 0 1 4 4v40a4 4 0 0 1-4 4H20a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4zm2 6v36h26V12zM10 14v38a6 6 0 0 0 6 6h28v-4H16a2 2 0 0 1-2-2V14z' fill='black'/><path d='M35 20l3 7 7 .6-5.4 4.6 1.7 7-6.3-3.8-6.3 3.8 1.7-7L24 27.6l7-.6z' fill='black'/></svg>"); }
.glyph-settings { --glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M27 4h10l1.6 7.2a22 22 0 0 1 5.6 3.2l7-2.3 5 8.7-5.5 4.9a22 22 0 0 1 0 6.5l5.5 4.9-5 8.7-7-2.3a22 22 0 0 1-5.6 3.2L37 60H27l-1.6-7.2a22 22 0 0 1-5.6-3.2l-7 2.3-5-8.7 5.5-4.9a22 22 0 0 1 0-6.5L7.8 26.9l5-8.7 7 2.3a22 22 0 0 1 5.6-3.2zm5 18a10 10 0 1 0 0 20 10 10 0 0 0 0-20z' fill='black'/></svg>"); }
.glyph-power { --glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M29 4h6v28h-6z' fill='black'/><path d='M18 13.5l4 4.5a18 18 0 1 0 20 0l4-4.5A24 24 0 1 1 18 13.5z' fill='black'/></svg>"); }

.hub-tile-quit {
  min-height: 78px; padding: 0 34px;
  grid-auto-flow: column; align-content: center; justify-content: start;
  background: linear-gradient(135deg, rgba(255, 90, 110, .45), rgba(120, 40, 60, .25) 45%, rgba(255, 90, 110, .35));
}
.hub-tile-quit .hub-tile-bg { background: linear-gradient(160deg, #1b1430 0%, #0d0b20 100%); }
.hub-tile-quit .hub-tile-label { margin: 0; font-size: 30px; color: #ffd9de; }
.hub-tile-quit .hub-tile-glyph { width: 30px; height: 30px; right: 30px; top: 50%; translate: 0 -50%; color: #ff8d9c; }
.hub-tile-quit:hover, .hub-tile-quit:focus-visible { background: linear-gradient(135deg, #ff6a7c, rgba(255, 70, 90, .6) 45%, #ff6a7c); }

/* Footer */
.hub-footer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px; z-index: 4;
  display: flex; align-items: center; gap: 40px; padding: 0 58px;
}
.hub-footer::before {
  content: ''; position: absolute; inset: 0 -3000px; z-index: -1;
  background: linear-gradient(0deg, rgba(3, 6, 16, .94) 0%, rgba(3, 6, 16, .6) 70%, transparent 100%);
  border-top: 1px solid rgba(120, 170, 255, .12);
}
.hub-ticker { display: flex; align-items: center; gap: 0; width: 1060px; height: 38px; }
.hub-ticker-tag {
  flex: none; height: 100%; display: grid; place-items: center; padding: 0 22px 0 18px;
  background: var(--btn-primary); color: #2a0e00;
  font: italic 900 17px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.hub-ticker-window {
  position: relative; flex: 1; height: 100%; overflow: hidden;
  background: rgba(10, 18, 44, .78); box-shadow: inset 0 0 0 1px var(--line);
  mask-image: linear-gradient(90deg, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.hub-ticker-track { position: relative; width: 100%; height: 100%; display: flex; align-items: center; white-space: nowrap; }
.hub-ticker-track span { display: none; width: 100%; padding: 0 30px 0 26px; color: var(--text-dim); font: 600 17px/1 var(--f-ui); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
.hub-ticker-track span.is-active { display: block; }
.hub-ticker-track span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 14px; background: var(--cyan); rotate: 45deg; translate: 0 -2px; box-shadow: 0 0 8px var(--cyan); }
.hub-legal { flex: 1; margin: 0; color: rgba(160, 178, 214, .45); font: 500 13px/1.35 var(--f-ui); letter-spacing: .03em; text-align: right; }

/* Sub-screens (Battle lobby, sleeves, settings, DeckPlanet) */
.hub-panels { position: absolute; right: 56px; top: 118px; bottom: 96px; width: 800px; max-height: 900px; margin: auto 0; z-index: 6; pointer-events: none; }
.hub-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08);
  clip-path: var(--chamfer-l);
  pointer-events: auto;
  animation: fxSlideIn .45s var(--ease-out) both;
}
.hub-panel[hidden] { display: none !important; }
.hub-panel::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--orange) 0 26%, var(--gold) 26% 30%, rgba(var(--cyan-rgb), .6) 30% 60%, transparent 90%);
}
.hub-panel-head {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end;
  padding: 32px 36px 20px 44px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .08), transparent);
}
.hub-panel-head .hub-kicker { grid-column: 1; }
.hub-panel-head h2 {
  grid-column: 1; margin: 8px 0 0;
  color: #fff; font: italic 900 58px/.9 var(--f-ui); letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.hub-back {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  width: auto; min-height: 50px; padding: 0 26px 0 20px;
  border: 0; border-radius: 0;
  background: var(--btn-secondary); color: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: italic 800 20px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  clip-path: var(--chamfer-s);
}
.hub-back::before { content: ''; width: 12px; height: 12px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; rotate: 45deg; translate: 3px 0; }
.hub-back:hover, .hub-back:focus-visible { background: linear-gradient(180deg, rgba(var(--cyan-rgb), .5), rgba(20, 70, 140, .85)); outline: none; filter: none; }
.hub-panel-body {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 26px 40px 34px 44px;
  display: flex; flex-direction: column; gap: 18px;
  overscroll-behavior: contain;
}
.hub-panel-intro { margin: 0; color: var(--text-dim); font: 600 19px/1.35 var(--f-ui); letter-spacing: .02em; }
.hub-action-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.hub-section-label {
  display: flex; align-items: baseline; gap: 18px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: #fff; font: italic 800 24px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
}
.hub-section-label > span:first-child::before { content: ''; display: inline-block; width: 6px; height: 20px; margin-right: 12px; background: var(--orange); transform: skewX(-18deg); translate: 0 2px; }
.hub-status { margin: 0; color: var(--text-dim); font: 600 16px/1.3 var(--f-ui); letter-spacing: .03em; text-transform: none; font-style: normal; }
.hub-status:empty { display: none; }
.custom-sleeve-status.error { color: #ff8d9c; }
.hub-list { display: grid; gap: 12px; align-content: start; }
.custom-sleeve-empty, .server-browser-empty, .game-chat-empty {
  padding: 34px 20px; text-align: center;
  color: var(--text-mute); font: 700 18px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase;
  background: repeating-linear-gradient(135deg, rgba(120, 170, 255, .03) 0 12px, transparent 12px 24px);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Shared room card (title lobby + in-match multiplayer) */
.title-server-room, .server-room {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: center;
  padding: 18px 20px 18px 26px;
  background: linear-gradient(100deg, rgba(30, 52, 108, .72), rgba(10, 18, 44, .82));
  box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--cyan);
  clip-path: var(--chamfer-m);
  transition: background .2s ease, box-shadow .2s ease;
}
.title-server-room:hover, .server-room:hover { background: linear-gradient(100deg, rgba(40, 72, 146, .82), rgba(14, 26, 60, .88)); box-shadow: inset 0 0 0 1px var(--line-2), inset 4px 0 0 var(--gold); }
.title-server-room-main, .server-room-main { grid-column: 1; min-width: 0; display: grid; gap: 5px; }
.title-server-room-name, .server-room-name { color: #fff; font: italic 800 26px/1 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-server-room-matchup, .server-room-matchup { color: var(--gold); font: 700 16px/1.2 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-server-room-meta, .server-room-host { color: var(--text-dim); font: 600 15px/1.2 var(--f-ui); letter-spacing: .04em; }
.title-server-room-build {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: start;
  padding: 4px 10px; color: var(--cyan); font: 700 14px/1 var(--f-num);
  box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb), .4); background: rgba(var(--cyan-rgb), .08);
}
.title-server-room-info, .server-room-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.title-server-room-info span, .server-meta-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--line);
  color: #fff; font: 700 14px/1 var(--f-num); letter-spacing: .02em;
}
.title-server-room-info b, .server-meta-item b { color: var(--text-mute); font: 800 12px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; }
.server-status-pill { color: #7dffb0; }
.server-status-pill.waiting { color: var(--gold); }
.server-status-pill.mismatch { color: #ff8d9c; }
.title-server-room-actions, .server-room-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Sleeve importer */
.custom-sleeve-import { display: grid; grid-template-columns: 1fr 170px; gap: 12px; }
.custom-sleeve-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.custom-sleeve-list > .custom-sleeve-empty { grid-column: 1 / -1; }
.custom-sleeve-item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px;
  background: linear-gradient(120deg, rgba(30, 52, 108, .6), rgba(10, 18, 44, .8));
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--chamfer-m);
}
.custom-sleeve-item img { width: 96px; aspect-ratio: 600 / 838; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.15); background: #060b1c; }
.custom-sleeve-item-controls { min-width: 0; display: grid; align-content: start; gap: 10px; }
.custom-sleeve-item-url { color: var(--text-dim); font: 600 13px/1.3 var(--f-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-sleeve-checks { display: grid; gap: 8px; }
.custom-sleeve-checks label { display: flex; align-items: center; gap: 10px; color: #fff; font: 700 17px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }

/* Account */
.account-panel-body { gap: 20px; }
.account-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.account-auth-tabs .hub-btn.active { background: linear-gradient(180deg, rgba(var(--cyan-rgb), .42), rgba(20, 70, 140, .88)); box-shadow: inset 0 0 0 1px var(--line-hi); }
.account-auth-pane { padding: 18px; background: linear-gradient(120deg, rgba(26,44,92,.58), rgba(7,13,32,.82)); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--chamfer-m); }
.account-form { display: grid; gap: 14px; }
.account-form label { display: grid; gap: 7px; color: var(--text-dim); font: 800 13px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.account-form input { width: 100%; }
.account-form .small-note { margin: 0 0 4px; color: var(--text-dim); font: 600 15px/1.4 var(--f-ui); letter-spacing: .02em; text-transform: none; }
.account-text-button { justify-self: start; min-height: 0 !important; padding: 2px 0 !important; background: transparent !important; box-shadow: none !important; color: var(--cyan) !important; font: 700 14px/1.2 var(--f-ui) !important; letter-spacing: .04em !important; text-transform: none !important; clip-path: none !important; }
.account-profile-card { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 18px; background: linear-gradient(120deg, rgba(30,52,108,.72), rgba(9,16,38,.86)); box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--orange); clip-path: var(--chamfer-m); }
.account-profile-copy { min-width: 0; display: grid; gap: 6px; }
.account-profile-copy strong { color: #fff; font: italic 900 34px/1 var(--f-ui); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-profile-stats { display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-dim); font: 700 14px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; }
.account-profile-stats span { padding: 6px 9px; background: rgba(0,0,0,.24); box-shadow: inset 0 0 0 1px var(--line); }
.account-profile-stats b { color: var(--gold); font-family: var(--f-num); }
.account-avatar-preview { display: grid; place-items: center; }
.player-icon { --pi-a:#ffb02e; --pi-b:#fff; display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 28%, var(--pi-b), var(--pi-a) 38%, rgba(4,8,22,.98) 72%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.24), 0 0 0 1px rgba(0,0,0,.8), 0 0 16px var(--pi-a); }
.player-icon > span { color: #050816; font: 1000 13px/1 var(--f-ui); letter-spacing: -.03em; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.player-icon.large { width: 74px; height: 74px; }
.player-icon.large > span { font-size: 20px; }
.player-icon.chat { width: 24px; height: 24px; margin-right: 2px; vertical-align: middle; }
.player-icon.chat > span { font-size: 8px; }
.account-section { display: grid; gap: 12px; }
.account-section .hub-section-label { font-size: 20px; }
.account-section .hub-section-label > span:last-child { margin-left: auto; color: var(--text-mute); font: 600 12px/1.2 var(--f-ui); letter-spacing: .04em; text-transform: none; font-style: normal; }
.account-icon-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.account-icon-choice { display: grid !important; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; gap: 4px 10px; align-items: center; min-height: 76px !important; text-align: left; clip-path: var(--chamfer-s) !important; }
.account-icon-choice .player-icon { grid-row: 1 / span 2; }
.account-icon-choice > span:not(.player-icon) { color: #fff; font: 800 14px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.account-icon-choice small { color: var(--text-mute); font: 700 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.account-icon-choice.selected { background: linear-gradient(180deg, rgba(var(--gold-rgb), .38), rgba(120,62,0,.72)) !important; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .8) !important; }
.account-icon-choice.locked { opacity: .42 !important; filter: grayscale(.9); }
.account-economy-note { padding: 14px 16px; background: rgba(var(--cyan-rgb), .05); box-shadow: inset 0 0 0 1px var(--line); }
.account-economy-note .small-note { margin: 0; color: var(--text-dim); font: 600 15px/1.4 var(--f-ui); }
.account-recovery-notice { display: grid; gap: 10px; padding: 16px; background: linear-gradient(120deg, rgba(100,64,0,.55), rgba(34,24,4,.72)); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .55); }
.account-recovery-notice strong { color: var(--gold); font: italic 900 20px/1 var(--f-ui); text-transform: uppercase; }
.account-recovery-notice p { margin: 0; color: var(--text-dim); font: 600 14px/1.35 var(--f-ui); }
.account-recovery-notice code { padding: 10px 12px; color: #fff; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .35); font: 800 18px/1 var(--f-num); letter-spacing: .1em; }
.account-password-box { margin-top: 2px; }
.game-chat-line { align-items: center; }

/* Home state while a sub-screen is open */
#titleScreen.hub-panel-open .hub-menu { opacity: 0; transform: translateX(90px); pointer-events: none; }
#titleScreen.hub-panel-open .hub-showcase { transform: translateX(-60px) scale(.92); filter: brightness(.7) saturate(.85); }

/* ═══════════════════════════════════════════════════════════════════════
   4. SHARED CONTROLS — buttons, fields, sliders, accordions
   Scoped to UI surfaces so board mechanics keep their own rules.
   ═══════════════════════════════════════════════════════════════════════ */
:is(.hub-panel, .aaa-surface, #settingsModal, #multiplayerModal, #changeSeatModal, .room-dialog, .dice-roll-modal, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal, #cardInspector, .turn-tracker, .game-chat-compose) button,
.hub-btn {
  position: relative;
  min-height: 46px; padding: 10px 18px;
  border: 0; border-radius: 0;
  background: var(--btn-secondary);
  color: #eef4ff;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.12);
  clip-path: var(--chamfer-s);
  font: italic 800 18px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, color .16s ease, transform .12s ease, filter .16s ease;
}
:is(.hub-panel, .aaa-surface, #settingsModal, #multiplayerModal, #changeSeatModal, .room-dialog, .dice-roll-modal, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal, #cardInspector, .turn-tracker, .game-chat-compose) button:hover:not(:disabled),
.hub-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .55), rgba(24, 76, 150, .85));
  box-shadow: inset 0 0 0 1px var(--line-hi), inset 0 0 14px rgba(var(--cyan-rgb), .35);
  color: #fff; filter: none;
}
:is(.hub-panel, .aaa-surface, #settingsModal, #multiplayerModal, #changeSeatModal, .room-dialog, .dice-roll-modal, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal, #cardInspector, .turn-tracker, .game-chat-compose) button:active:not(:disabled),
.hub-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
:is(.hub-panel, .aaa-surface, #settingsModal, #multiplayerModal, #changeSeatModal, .room-dialog, .dice-roll-modal, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal, #cardInspector, .turn-tracker, .game-chat-compose) button:disabled,
.hub-btn:disabled {
  cursor: not-allowed; opacity: .42; filter: grayscale(.6);
}
:is(.hub-panel, .aaa-surface, #settingsModal, #multiplayerModal, #changeSeatModal, .room-dialog, .dice-roll-modal, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal, #cardInspector) button:focus-visible,
.hub-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cyan), inset 0 0 14px rgba(var(--cyan-rgb), .35); }

/* Primary (orange energy) */
.hub-btn-primary,
:is(#settingsModal, #multiplayerModal, .room-dialog, .dice-roll-modal, .card-modifier-modal, #deckImportModal, #cardImportModal, .search-top-modal) button.gold,
#popupImportBtn, #cardImportConfirmBtn, #searchTopConfirm, #confirmHostRoomDialog, #confirmJoinPasswordDialog, #hostPublicLobby, #titleHostPublicGame, #importCustomSleeve,
.join-public-room {
  background: var(--btn-primary) !important;
  color: #2a0e00 !important; text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.2) !important;
}
.hub-btn-primary:hover:not(:disabled),
:is(#settingsModal, #multiplayerModal, .room-dialog, .dice-roll-modal, .card-modifier-modal, #deckImportModal, #cardImportModal, .search-top-modal) button.gold:hover:not(:disabled),
#popupImportBtn:hover:not(:disabled), #cardImportConfirmBtn:hover:not(:disabled), #searchTopConfirm:hover:not(:disabled), #confirmHostRoomDialog:hover:not(:disabled), #confirmJoinPasswordDialog:hover:not(:disabled), #hostPublicLobby:hover:not(:disabled), #titleHostPublicGame:hover:not(:disabled), #importCustomSleeve:hover:not(:disabled),
.join-public-room:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff1c4 0%, #ffb341 45%, #ff7a12 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(0,0,0,.18), inset 0 0 18px rgba(255, 240, 200, .5) !important;
}
/* Accent (cyan) */
.hub-btn-accent, #titleQuickplay, #quickplay {
  background: linear-gradient(180deg, #7fe6ff 0%, #22b8f0 50%, #0a7fc4 100%) !important;
  color: #001a2a !important; text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.2) !important;
}
.hub-btn-accent:hover:not(:disabled), #titleQuickplay:hover:not(:disabled), #quickplay:hover:not(:disabled) { background: linear-gradient(180deg, #e2f9ff 0%, #5fd6ff 50%, #1296d8 100%) !important; }
/* Danger */
:is(#settingsModal, .context-menu, #multiplayerModal, .aaa-surface) button.danger, #settingsQuitGame {
  background: var(--btn-danger) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25) !important;
}
#settingsModal button.danger:hover, #settingsQuitGame:hover { filter: brightness(1.12) !important; }

/* Fields */
:is(.hub-panel, #settingsModal, #multiplayerModal, .room-dialog, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal, .game-chat-compose) :is(input[type="text"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], input:not([type]), textarea, select) {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgba(2, 5, 16, .85), rgba(8, 14, 34, .9));
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 2px 6px rgba(0,0,0,.5);
  font: 600 18px/1.25 var(--f-ui); letter-spacing: .02em; text-transform: none;
  outline: none;
  transition: box-shadow .16s ease;
}
:is(.hub-panel, #settingsModal, #multiplayerModal, .room-dialog, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal, .game-chat-compose) :is(input, textarea, select):focus {
  box-shadow: inset 0 0 0 2px var(--cyan), 0 0 0 3px rgba(var(--cyan-rgb), .12), inset 0 2px 6px rgba(0,0,0,.5);
}
:is(.hub-panel, #settingsModal, #multiplayerModal, .room-dialog, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal, .game-chat-compose) :is(input, textarea)::placeholder { color: rgba(150, 170, 210, .5); }
:is(#deckImportModal, #cardImportModal) textarea, #layoutJson { font: 500 15px/1.45 var(--f-num) !important; min-height: 190px !important; resize: vertical; user-select: text; }
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px !important; height: 22px; min-height: 0 !important; flex: none; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: rgba(2, 5, 16, .85) !important;
  box-shadow: inset 0 0 0 1px var(--line-2) !important;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  cursor: pointer; position: relative;
  display: inline-grid; place-items: center;
}
input[type="checkbox"]::after { content: ''; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform .14s var(--ease-snap); }
input[type="checkbox"]:checked { background: linear-gradient(180deg, rgba(var(--orange-rgb), .45), rgba(120, 40, 0, .6)) !important; box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .9) !important; }
input[type="checkbox"]:checked::after { transform: scale(1); }
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 28px; min-height: 0 !important; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, rgba(var(--orange-rgb), .9), rgba(var(--gold-rgb), .9)) 0 0 / var(--fill, 50%) 100% no-repeat, rgba(20, 34, 72, .9); box-shadow: inset 0 0 0 1px var(--line); }
input[type="range"]::-moz-range-track { height: 6px; background: rgba(20, 34, 72, .9); box-shadow: inset 0 0 0 1px var(--line); }
input[type="range"]::-moz-range-progress { height: 6px; background: linear-gradient(90deg, var(--orange), var(--gold)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 22px; margin-top: -8px; border: 0; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 12px rgba(255,255,255,.8); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 22px; border: 0; border-radius: 0; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.title-audio-control, .game-audio-control, .audio-control {
  display: grid !important; grid-template-columns: 150px minmax(0, 1fr) 64px; align-items: center; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid rgba(120, 170, 255, .1);
}
.title-audio-control > span, .game-audio-control > span { color: #fff; font: 700 18px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.title-audio-control output, .game-audio-control output { color: var(--gold); font: 700 18px/1 var(--f-num); text-align: right; }
.audio-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 16px 0 6px; }
.audio-toggle-grid label {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px;
  background: rgba(10, 18, 44, .6); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text); font: 700 17px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background .15s ease;
}
.audio-toggle-grid label:hover { background: rgba(30, 52, 108, .7); }
.small-note { margin: 10px 0 0; color: var(--text-mute); font: 600 15px/1.4 var(--f-ui); letter-spacing: .02em; }

/* Accordions */
details.aaa-accordion, #settingsModal details.settings-dropdown { position: relative; border: 0; background: none; padding: 0; margin: 0; }
details.aaa-accordion + details.aaa-accordion { margin-top: 10px; }
details.aaa-accordion > summary, #settingsModal details.settings-dropdown > summary {
  position: relative; list-style: none; cursor: pointer;
  display: flex; align-items: center; min-height: 58px; padding: 0 58px 0 26px;
  background: linear-gradient(100deg, rgba(34, 58, 118, .72), rgba(12, 22, 52, .82));
  box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 rgba(var(--cyan-rgb), .45);
  clip-path: var(--chamfer-s);
  color: #fff; font: italic 800 26px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
  transition: background .16s ease, box-shadow .16s ease;
}
details.aaa-accordion > summary::-webkit-details-marker, #settingsModal details.settings-dropdown > summary::-webkit-details-marker { display: none; }
details.aaa-accordion > summary::after, #settingsModal details.settings-dropdown > summary::after {
  content: ''; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px;
  border-right: 3px solid var(--text-dim); border-bottom: 3px solid var(--text-dim);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease-out);
}
details.aaa-accordion[open] > summary::after, #settingsModal details.settings-dropdown[open] > summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--gold); }
details.aaa-accordion > summary:hover, #settingsModal details.settings-dropdown > summary:hover { background: linear-gradient(100deg, rgba(50, 86, 170, .82), rgba(16, 30, 70, .88)); }
details.aaa-accordion[open] > summary, #settingsModal details.settings-dropdown[open] > summary { box-shadow: inset 0 0 0 1px var(--line-2), inset 4px 0 0 var(--orange); }
details.aaa-accordion > .title-settings-dropdown-content, #settingsModal details.settings-dropdown > .settings-dropdown-content { padding: 8px 6px 14px 16px; animation: fxFadeIn .25s ease both; }

/* Controls reference */
.controls-list { display: grid; gap: 18px; padding-top: 14px !important; }
.controls-category { display: grid; gap: 6px; }
.controls-category-title { margin: 0 0 4px; color: var(--gold); font: 800 15px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; }
.control-reference-row { display: grid; grid-template-columns: minmax(130px, .9fr) minmax(0, 1.4fr); gap: 16px; align-items: center; padding: 9px 12px; background: rgba(10, 18, 44, .5); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .1); }
.control-reference-input { color: #fff; font: 700 15px/1.2 var(--f-num); letter-spacing: .02em; }
.control-reference-action { color: var(--text-dim); font: 600 17px/1.25 var(--f-ui); }

/* ═══════════════════════════════════════════════════════════════════════
   5. ARENA — background, playmat and zones
   ═══════════════════════════════════════════════════════════════════════ */
#app {
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(40, 80, 190, .22), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(var(--p1-rgb), .10), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(var(--p2-rgb), .12), transparent 70%),
    linear-gradient(180deg, #050a1c, #070f28 50%, #050a1c);
}
#app::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 110% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.6) 100%);
}
#gameComposition { z-index: 1; }

#table {
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, transparent calc(50% - 2px), rgba(255, 255, 255, .06) calc(50% - 2px), rgba(255, 255, 255, .06) calc(50% + 2px), transparent calc(50% + 2px)),
    radial-gradient(ellipse 60% 30% at 50% 50%, rgba(140, 180, 255, .16), transparent 70%),
    radial-gradient(ellipse 110% 60% at 50% 100%, rgba(var(--p1-rgb), .16), transparent 62%),
    radial-gradient(ellipse 110% 60% at 50% 0%, rgba(var(--p2-rgb), .18), transparent 62%),
    linear-gradient(180deg, #0b1330 0%, #0a1026 50%, #0b1330 100%);
  box-shadow:
    0 0 0 1px rgba(150, 200, 255, .28),
    0 0 0 7px rgba(8, 14, 34, .92),
    0 0 0 8px rgba(150, 200, 255, .18),
    0 30px 80px rgba(0,0,0,.75),
    0 0 90px rgba(40, 90, 220, .25);
}
#table::before {
  content: ''; position: absolute; inset: 10px; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 80px rgba(0, 0, 0, .55);
}

/* Energy seam between the two sides */
.divider {
  position: absolute; left: 40px; right: 40px; top: 489px; height: 2px;
  overflow: visible; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--p1-rgb), .85) 22%, #fff 50%, rgba(var(--p2-rgb), .85) 78%, transparent 100%);
  box-shadow: 0 0 14px rgba(160, 190, 255, .55), 0 0 40px rgba(120, 150, 255, .25);
}
.divider::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 22%; height: 4px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%);
  animation: seamRun 4.2s linear infinite;
  will-change: transform;
}
.divider::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px;
  translate: -50% -50%; rotate: 45deg;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 200, 120, .9) 30%, rgba(255, 120, 40, .0) 72%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 0 24px rgba(255, 170, 60, .8);
}
@keyframes seamRun { from { transform: translateX(-100%); } to { transform: translateX(460%); } }

/* Zones */
.zone {
  --zc: 200, 212, 235;
  border: 1px solid rgba(var(--zc), .34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--zc), .10) 0%, rgba(var(--zc), .03) 38%, rgba(4, 8, 22, .42) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 26px rgba(var(--zc), .06);
}
.zone.p1 { --zc: var(--p1-rgb); }
.zone.p2 { --zc: var(--p2-rgb); }
.zone.shared { --zc: 200, 212, 235; }
/* corner brackets */
.zone::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  --b: rgba(var(--zc), .95);
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 0 / 14px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) 0 100% / 14px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / 2px 14px no-repeat;
  opacity: .85;
}
/* Watermark titles for the large play areas */
.zone::after {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  pointer-events: none; white-space: nowrap;
  color: rgba(var(--zc), .085);
  font: italic 900 78px/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase;
}
.zone[data-type="battle"]::after,
.zone[data-type="combo"]::after,
.zone[data-type="energy"]::after,
.zone[data-type="life"]::after { content: none; display: none; }
.zone.label-flip::after { rotate: 180deg; }
.zone[data-type="leader"] {
  border-color: rgba(var(--gold-rgb), .55);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--gold-rgb), .20), transparent 70%),
    linear-gradient(180deg, rgba(var(--zc), .12), rgba(4, 8, 22, .45));
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .12), inset 0 0 24px rgba(var(--gold-rgb), .18), 0 0 18px rgba(var(--gold-rgb), .12);
}
.zone[data-type="leader"]::before { --b: rgba(var(--gold-rgb), 1); }

/* Zone labels — read from the viewer's side */
.zone .zone-name {
  position: absolute; left: 9px; top: 6px; right: auto; bottom: auto;
  z-index: 180;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; margin: 0; background: none;
  box-shadow: none; clip-path: none;
  color: rgba(var(--zc), .95);
  font: italic 800 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(4,8,22,.95);
  white-space: nowrap; pointer-events: none;
  transform: none; transform-origin: center;
}
.zone .zone-name::before { content: ''; display: block; width: 5px; height: 10px; background: currentColor; transform: skewX(-20deg); box-shadow: 0 0 6px currentColor; }
.zone.label-flip .zone-name { left: auto; top: auto; right: 9px; bottom: 6px; transform: rotate(180deg); }
.zone[data-type="leader"] .zone-name { color: var(--gold); }
.zone[data-type="deck"] .zone-name, .zone[data-type="zdeck"] .zone-name, .zone[data-type="drop"] .zone-name,
.zone[data-type="warp"] .zone-name, .zone[data-type="removed"] .zone-name, .zone[data-type="zenergy"] .zone-name,
.zone[data-type="union"] .zone-name, .zone[data-type="leader"] .zone-name, .zone[data-type="life"] .zone-name { font-size: 11px; letter-spacing: .1em; }

/* V 0.337 — visible zone names live above the card layer without changing XY. */
.zone .zone-name { visibility: hidden; }
.zone-label-overlay {
  --zc: 200, 212, 235;
  position: absolute;
  z-index: 20000;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; margin: 0; background: none;
  color: rgba(var(--zc), .95);
  font: italic 800 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(4,8,22,.95);
  white-space: nowrap; pointer-events: none;
  transform-origin: center;
}
.zone-label-overlay::before { content: ''; display: block; width: 5px; height: 10px; background: currentColor; transform: skewX(-20deg); box-shadow: 0 0 6px currentColor; }
.zone-label-overlay.p1 { --zc: var(--p1-rgb); }
.zone-label-overlay.p2 { --zc: var(--p2-rgb); }
.zone-label-overlay[data-type="leader"] { color: var(--gold); }
.zone-label-overlay[data-type="deck"], .zone-label-overlay[data-type="zdeck"], .zone-label-overlay[data-type="drop"],
.zone-label-overlay[data-type="warp"], .zone-label-overlay[data-type="removed"], .zone-label-overlay[data-type="zenergy"],
.zone-label-overlay[data-type="union"], .zone-label-overlay[data-type="leader"], .zone-label-overlay[data-type="life"] { font-size: 11px; letter-spacing: .1em; }

/* Whose turn is it — the idle side cools down */
#table[data-active-turn="p1"] .zone.p2, #table[data-active-turn="p2"] .zone.p1 { opacity: .62; }
#table[data-active-turn="p1"] .zone.p1, #table[data-active-turn="p2"] .zone.p2 {
  border-color: rgba(var(--zc), .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 30px rgba(var(--zc), .12), 0 0 16px rgba(var(--zc), .14);
}

/* Drop target */
.zone.drop-hi {
  border-color: rgba(var(--cyan-rgb), .95) !important;
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .22), rgba(var(--cyan-rgb), .06)) !important;
  box-shadow: inset 0 0 30px rgba(var(--cyan-rgb), .25), 0 0 26px rgba(var(--cyan-rgb), .45) !important;
  opacity: 1 !important;
}
.zone.drop-hi::before { --b: #fff; opacity: 1; }

/* Union markers */
.union-counter { bottom: -14px; gap: 4px; }
.union-counter button { width: 22px; height: 22px; border: 0; border-radius: 0; background: rgba(var(--orange-rgb), .9); color: #1c0b00; clip-path: var(--chamfer-s); font: 800 15px/1 var(--f-ui); }
.union-counter .uc-val { min-width: 28px; padding: 3px 6px; border: 0; border-radius: 0; background: rgba(4, 8, 22, .92); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .6); color: var(--gold); font: 700 14px/1 var(--f-num); }

/* Cards */
.card.card-selected, .hand-card.card-selected {
  outline: 2px solid var(--cyan) !important; outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 18px rgba(var(--cyan-rgb), .75) !important;
}
.hand-card { border-radius: 9px; border-color: rgba(0,0,0,.9); box-shadow: 0 12px 26px rgba(0,0,0,.7); }
.hand-card:hover, .hand-card.hand-hover {
  box-shadow: 0 18px 36px rgba(0,0,0,.85), 0 0 0 2px rgba(var(--gold-rgb), .85), 0 0 26px rgba(var(--orange-rgb), .45);
}
.card-modifier-marker { border-radius: 0 !important; font-family: var(--f-num) !important; clip-path: var(--chamfer-s); }
.card-custom-counter span { font-family: var(--f-num); }

/* Stack + pile readouts */
#stackTooltip {
  padding: 6px 12px; border: 0; border-radius: 0;
  background: rgba(6, 12, 32, .94); box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 20px rgba(0,0,0,.6);
  clip-path: var(--chamfer-s);
  color: #fff; font: 700 14px/1 var(--f-num); letter-spacing: .04em;
}
.stack-search-badge, .hand-reveal-badge, #opponentHandCount {
  border: 0 !important; border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(20, 36, 80, .96), rgba(6, 12, 32, .96)) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .75), 0 0 14px rgba(var(--gold-rgb), .35) !important;
  clip-path: var(--chamfer-s);
  color: var(--gold) !important; text-shadow: none !important;
  font: italic 800 14px/1 var(--f-ui) !important; letter-spacing: .14em !important; text-transform: uppercase;
}
.stack-search-badge { padding: 5px 12px; }
#opponentHandCount { padding: 7px 14px; color: #fff !important; font-family: var(--f-num) !important; font-style: normal !important; font-size: 13px !important; letter-spacing: .06em !important; }

/* ═══════════════════════════════════════════════════════════════════════
   6. MATCH HUD — authored in the 2048×964 composition
   ═══════════════════════════════════════════════════════════════════════ */
/* Utility buttons — top-left above game history */
.settings-button, .multiplayer-button, .change-seat-button, .chat-history-toggle-button {
  position: fixed !important;
  top: 34px !important; right: auto !important; bottom: auto !important;
  z-index: 9300;
  display: grid !important; place-items: center;
  width: 52px !important; height: 52px !important; min-width: 0; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--glass-soft) !important;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08) !important;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, transform .16s var(--ease-snap);
}
.settings-button::before, .multiplayer-button::before, .change-seat-button::before, .chat-history-toggle-button::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(0 0, 10px 0, 0 10px, 0 0, 100% 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 100%);
  background: var(--cyan); opacity: .8;
}
#settingsButton { left: var(--game-toolbar-left, 40px) !important; }
#multiplayerButton { left: calc(var(--game-toolbar-left, 40px) + 65px) !important; }
#changeSeatButton { left: calc(var(--game-toolbar-left, 40px) + 130px) !important; }
#chatHistoryToggleButton { left: calc(var(--game-toolbar-left, 40px) + 195px) !important; }
.settings-button img, .multiplayer-button img, .change-seat-button img, .chat-history-toggle-button img {
  display: block; width: 26px !important; height: 26px !important; object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(var(--cyan-rgb), .5)); pointer-events: none;
}
.chat-history-toggle-button.panels-hidden img { opacity: .45; }
.settings-button:hover, .multiplayer-button:hover, .change-seat-button:hover, .chat-history-toggle-button:hover,
.settings-button:focus-visible, .multiplayer-button:focus-visible, .change-seat-button:focus-visible, .chat-history-toggle-button:focus-visible {
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .45), rgba(16, 60, 130, .85)) !important;
  box-shadow: inset 0 0 0 1px var(--line-hi), inset 0 0 16px rgba(var(--cyan-rgb), .45) !important;
  transform: translateY(-2px); outline: none; filter: none;
}
.settings-button:active, .multiplayer-button:active, .change-seat-button:active, .chat-history-toggle-button:active { transform: scale(.94); }
/* Tooltips drop below the toolbar */
.game-icon-tooltip { overflow: visible; }
.game-icon-tooltip::after {
  content: attr(data-tooltip);
  position: absolute; z-index: 5; left: 50%; top: calc(100% + 12px);
  padding: 8px 12px;
  background: rgba(4, 8, 22, .96); box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 24px rgba(0,0,0,.6);
  color: #fff; font: italic 800 14px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translate(-50%, -6px);
  transition: opacity .12s ease, transform .12s ease;
}
#chatHistoryToggleButton.game-icon-tooltip::after { left: auto; right: 0; transform: translate(0, -6px); }
.game-icon-tooltip:hover::after, .game-icon-tooltip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
#chatHistoryToggleButton.game-icon-tooltip:hover::after, #chatHistoryToggleButton.game-icon-tooltip:focus-visible::after { transform: translate(0, 0); }

.spectator-indicator {
  position: fixed !important;
  left: calc(var(--game-toolbar-left, 40px) + 260px) !important;
  top: 34px !important; right: auto !important; bottom: auto !important;
  z-index: 9300; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 52px !important; height: 52px !important; min-width: 52px; padding: 0 !important;
  background: var(--glass-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(125, 255, 176, .58), inset 0 1px 0 rgba(255,255,255,.08) !important;
  clip-path: none;
}
.spectator-indicator::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(0 0, 10px 0, 0 10px, 0 0, 100% 100%, calc(100% - 10px) 100%, 100% calc(100% - 10px), 100% 100%);
  background: #7dffb0; opacity: .82;
}
.spectator-indicator[hidden] { display: none !important; }
.spectator-indicator img { width: 22px; height: 22px; filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(125,255,176,.45)); }
.spectator-indicator::after { display: none; }
.spectator-count-badge { color: #7dffb0; font: 800 15px/1 var(--f-num); }
.spectator-hud { display: none !important; }

/* Match chat + game log */
.game-side-panels, #gameComposition .game-side-panels { position: fixed; left: 14px; top: 98px; bottom: 34px; z-index: 9200; width: var(--game-sidebar-width, 300px) !important; max-width: none !important; min-width: 190px; display: flex; flex-direction: column; gap: 12px; pointer-events: none; transition: opacity .15s ease, transform .2s var(--ease-out); }
body.chat-history-hidden .game-side-panels { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(calc(-100% - 30px)); transition: opacity .15s ease, transform .2s ease, visibility 0s linear .2s; }
body.chat-history-hidden .game-side-panels * { pointer-events: none !important; }
.game-history, .game-chat {
  position: relative; width: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 26, 60, .94), rgba(5, 10, 26, .96));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.06);
  clip-path: var(--chamfer-m);
  pointer-events: auto;
}
.game-history { flex: 1.05 1 0; min-height: 0; }
.game-chat { flex: 1 1 0; min-height: 0; height: auto; }
.game-history-head, .game-chat-head {
  position: relative; flex: none; display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(var(--cyan-rgb), .14), transparent 70%);
  color: #fff; font: italic 800 17px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase;
}
.game-history-head::before, .game-chat-head::before { content: ''; width: 5px; height: 16px; background: var(--cyan); transform: skewX(-18deg); box-shadow: 0 0 8px var(--cyan); }
.game-chat-head::before { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.game-history-messages, .game-chat-messages {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px;
  user-select: text;
}
.game-history-line, .game-chat-line {
  display: block; padding: 6px 8px 6px 10px;
  color: var(--text-dim); font: 500 15px/1.3 var(--f-ui); letter-spacing: .01em;
  background: rgba(255, 255, 255, .02); border-left: 2px solid rgba(120, 170, 255, .18);
  word-break: break-word;
}
.game-history-line:last-child { background: rgba(var(--cyan-rgb), .06); border-left-color: var(--cyan); color: #fff; }
.game-history-time { margin-right: 8px; color: var(--text-mute); font: 600 12px/1 var(--f-num); }
.game-history-seat, .game-chat-name { margin-right: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.game-history-seat.account-name { text-transform: none; letter-spacing: .02em; }
.game-history-seat.p1, .game-chat-name.p1 { color: #ff7d8a; }
.game-history-seat.p2, .game-chat-name.p2 { color: #6fb0ff; }
.game-chat-name.spectator { color: #7dffb0; }
.game-chat-name.system, .game-chat-name.game { color: var(--gold); }

.game-history-seat.player-profile-link, .game-chat-name.player-profile-link { cursor: pointer; text-decoration: none; outline: none; }
.game-history-seat.player-profile-link:hover, .game-history-seat.player-profile-link:focus-visible,
.game-chat-name.player-profile-link:hover, .game-chat-name.player-profile-link:focus-visible { color: #fff; text-decoration: none; text-shadow: 0 0 8px currentColor; }
.game-chat-messages .game-chat-empty, .game-history-messages .game-chat-empty { margin: auto 0; padding: 18px 10px; font-size: 14px; box-shadow: none; background: none; }
.game-chat-compose { flex: none; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: rgba(2, 5, 16, .5); }
.game-chat-compose .game-chat-input { min-height: 38px !important; padding: 6px 10px !important; font-size: 15px !important; }
.game-chat-compose .game-chat-action { width: 48px; min-width: 48px; min-height: 38px; padding: 0; font-size: 28px; line-height: 1; color: #001a2a !important; text-shadow: none !important; }
.game-chat-compose .game-chat-send { width: auto; min-height: 38px; padding: 0 16px; font-size: 15px; background: var(--btn-primary) !important; color: #2a0e00 !important; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important; }
body.spectator-mode .game-chat-compose { display: grid; }
.game-chat-line.quick-action { color: #fff; }
.game-chat-line.quick-action.tone-neutral { border-left-color: rgba(196, 225, 255, .68); background: linear-gradient(90deg, rgba(160, 205, 255, .14), rgba(255,255,255,.02) 55%); }
.game-chat-line.quick-action.tone-blue { border-left-color: rgba(var(--cyan-rgb), .9); background: linear-gradient(90deg, rgba(var(--cyan-rgb), .16), rgba(255,255,255,.02) 55%); }
.game-chat-line.quick-action.tone-orange { border-left-color: rgba(var(--orange-rgb), .92); background: linear-gradient(90deg, rgba(var(--orange-rgb), .16), rgba(255,255,255,.02) 55%); }
.game-chat-line.quick-action.tone-green { border-left-color: rgba(84, 230, 120, .9); background: linear-gradient(90deg, rgba(84, 230, 120, .16), rgba(255,255,255,.02) 55%); }
.game-chat-action-pill { display: inline-flex; align-items: center; margin-right: 8px; padding: 2px 7px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: rgba(255,255,255,.86); font: 800 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.game-chat-action-pill.tone-blue { border-color: rgba(var(--cyan-rgb), .45); background: rgba(var(--cyan-rgb), .16); color: #ccf6ff; }
.game-chat-action-pill.tone-orange { border-color: rgba(var(--orange-rgb), .5); background: rgba(var(--orange-rgb), .18); color: #ffe2b2; }
.game-chat-action-pill.tone-green { border-color: rgba(84, 230, 120, .48); background: rgba(84, 230, 120, .16); color: #d9ffe2; }
.game-chat-action-menu { z-index: 100040; min-width: 252px; }
#gameChatActionMenu button[data-action-tone="neutral"]::before { background: #d8e9ff; }
#gameChatActionMenu button[data-action-tone="blue"]::before { background: var(--cyan); }
#gameChatActionMenu button[data-action-tone="orange"]::before { background: var(--orange); }
#gameChatActionMenu button[data-action-tone="green"]::before { background: #53d76f; }
#gameChatActionMenu button[data-action-tone="neutral"]:hover:not(:disabled) { background: linear-gradient(90deg, rgba(168, 214, 255, .28), rgba(168, 214, 255, .04)); }
#gameChatActionMenu button[data-action-tone="blue"]:hover:not(:disabled) { background: linear-gradient(90deg, rgba(var(--cyan-rgb), .28), rgba(var(--cyan-rgb), .04)); }
#gameChatActionMenu button[data-action-tone="orange"]:hover:not(:disabled) { background: linear-gradient(90deg, rgba(var(--orange-rgb), .28), rgba(var(--orange-rgb), .04)); }
#gameChatActionMenu button[data-action-tone="green"]:hover:not(:disabled) { background: linear-gradient(90deg, rgba(84, 230, 120, .25), rgba(84, 230, 120, .04)); }
.quick-action-banner {
  --qa-rgb: 160, 205, 255;
  position: fixed; inset: 0; z-index: 100070; pointer-events: none;
  display: grid; place-items: center;
}
.quick-action-banner[data-tone="blue"] { --qa-rgb: var(--cyan-rgb); }
.quick-action-banner[data-tone="orange"] { --qa-rgb: var(--orange-rgb); }
.quick-action-banner[data-tone="green"] { --qa-rgb: 84, 230, 120; }
.quick-action-banner-frame {
  min-width: min(560px, calc(100vw - 80px)); max-width: min(840px, calc(100vw - 80px));
  padding: 16px 28px 18px;
  background:
    linear-gradient(90deg, rgba(var(--qa-rgb), .08), rgba(8, 14, 34, .94) 26%, rgba(8, 14, 34, .96) 74%, rgba(var(--qa-rgb), .08)),
    linear-gradient(180deg, rgba(14, 28, 68, .95), rgba(5, 10, 24, .97));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.6), inset 0 3px 0 rgba(var(--qa-rgb), .95);
  clip-path: var(--chamfer-m);
  opacity: 0;
  transform: translateY(18px) scale(.975);
}
.quick-action-banner-kicker { color: rgba(255,255,255,.7); font: 800 13px/1 var(--f-ui); letter-spacing: .34em; text-transform: uppercase; }
.quick-action-banner-main { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; text-align: center; }
.quick-action-banner-name { color: rgba(255,255,255,.86); font: 800 clamp(18px, 2vw, 24px)/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.quick-action-banner-text { color: #fff; font: italic 900 clamp(34px, 4.9vw, 64px)/1 var(--f-ui); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 4px 0 rgba(0,0,0,.32), 0 0 26px rgba(var(--qa-rgb), .62); }
.quick-action-banner.play .quick-action-banner-frame { animation: quickActionBannerIn 1.8s var(--ease-out) both; }
@keyframes quickActionBannerIn {
  0% { opacity: 0; transform: translateY(20px) scale(.97); }
  12%, 76% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.02); }
}

/* Turn control plate */
.turn-tracker {
  position: absolute !important;
  left: 1785px !important; right: auto !important; top: 364px !important; bottom: auto !important;
  width: 249px !important;
  z-index: 9300;
  display: grid !important; grid-template-columns: 1fr; gap: 12px;
  padding: 18px 18px 18px !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--seat-rgb, 150, 190, 255), .22), transparent 70%),
    linear-gradient(180deg, rgba(16, 30, 68, .95), rgba(5, 10, 26, .96)) !important;
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 3px 0 rgba(var(--seat-rgb, 150, 190, 255), .9) !important;
  clip-path: var(--chamfer-m);
  color: #fff; white-space: normal;
}
.turn-tracker[data-seat="p1"] { --seat-rgb: var(--p1-rgb); }
.turn-tracker[data-seat="p2"] { --seat-rgb: var(--p2-rgb); }
.turn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.turn-kicker { color: var(--text-mute); font: 800 14px/1 var(--f-ui); letter-spacing: .34em; text-transform: uppercase; }
.turn-num { color: #fff; font: 700 54px/.9 var(--f-num); letter-spacing: -.02em; text-shadow: 0 0 20px rgba(var(--seat-rgb, 150, 190, 255), .6); }
#turnTrackerLabel { display: none; }
.turn-sub {
  display: block; padding: 8px 10px;
  background: rgba(var(--seat-rgb, 120, 150, 210), .14); box-shadow: inset 3px 0 0 rgba(var(--seat-rgb, 150, 190, 255), .95);
  color: #fff; font: italic 800 20px/1.05 var(--f-ui); letter-spacing: .06em; text-transform: uppercase;
}
.turn-sub small { display: block; margin-top: 3px; color: var(--text-dim); font: 600 13px/1.2 var(--f-ui); font-style: normal; letter-spacing: .08em; }
#endTurnButton {
  width: 100%; min-height: 64px !important;
  font-size: 28px !important; letter-spacing: .12em !important;
}
#endTurnButton:not(:disabled) {
  background: var(--btn-primary) !important; color: #2a0e00 !important; text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -4px 0 rgba(0,0,0,.2) !important;
}
#endTurnButton:not(:disabled)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); pointer-events: none; animation: fxGlow 1.8s ease-in-out infinite; }
#endTurnButton:not(:disabled):hover { background: linear-gradient(180deg, #fff3cc, #ffb341 45%, #ff7a12) !important; }
#endTurnButton:disabled { opacity: 1 !important; filter: none !important; background: linear-gradient(180deg, rgba(40, 52, 84, .8), rgba(18, 26, 48, .9)) !important; color: rgba(170, 186, 220, .55) !important; box-shadow: inset 0 0 0 1px rgba(120, 150, 210, .2) !important; }
@keyframes endTurnGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18) saturate(1.15); } }
body.spectator-mode #turnTracker { display: none !important; }

/* Player status plates */
.hud-plates { position: absolute; left: 1785px; top: 0; width: 249px; height: 964px; z-index: 9250; pointer-events: none; }
.hud-plate {
  --seat-rgb: 150, 190, 255;
  position: absolute; left: 0; width: 249px;
  padding: 14px 16px 16px;
  background:
    linear-gradient(135deg, rgba(var(--seat-rgb), .2), transparent 55%),
    linear-gradient(180deg, rgba(14, 26, 60, .92), rgba(5, 10, 26, .94));
  box-shadow: inset 0 0 0 1px rgba(var(--seat-rgb), .38), inset 0 1px 0 rgba(255,255,255,.06);
  clip-path: var(--chamfer-m);
  transition: box-shadow .3s ease, transform .3s var(--ease-out);
  pointer-events: auto;
}
.hud-plate[data-seat="p1"] { --seat-rgb: var(--p1-rgb); }
.hud-plate[data-seat="p2"] { --seat-rgb: var(--p2-rgb); }
.hud-plate[data-pos="top"] { clip-path: var(--chamfer-m); }
.hud-plate[data-pos="bottom"] {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background:
    linear-gradient(45deg, rgba(var(--seat-rgb), .2), transparent 55%),
    linear-gradient(180deg, rgba(14, 26, 60, .92), rgba(5, 10, 26, .94));
}
/* V 0.338 — Red/Blue HUDs use one exact mirrored edge gap. */
.hud-plates { --hud-edge-gap: 34px; }
.hud-plate[data-pos="top"] { top: var(--hud-edge-gap); bottom: auto; }
.hud-plate[data-pos="bottom"] { top: auto; bottom: var(--hud-edge-gap); }
.hud-plate.is-active { box-shadow: inset 0 0 0 2px rgba(var(--seat-rgb), .95), inset 0 0 30px rgba(var(--seat-rgb), .25); }
.hud-plate-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.hud-seat-gem { width: 12px; height: 12px; rotate: 45deg; background: rgb(var(--seat-rgb)); box-shadow: 0 0 10px rgb(var(--seat-rgb)); flex: none; }
.hud-identity { flex: 1; min-width: 0; display: grid; gap: 5px; }
.hud-name { min-width: 0; color: #fff; font: italic 800 20px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-player-name { display: block; justify-self: stretch; width: 100% !important; max-width: 100%; margin: 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; clip-path: none !important; color: rgb(var(--seat-rgb)); font: 800 12px/1.1 var(--f-ui) !important; letter-spacing: .04em; text-align: left !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; opacity: .95; }
.hud-player-name:hover, .hud-player-name:focus-visible { color: #fff; text-decoration: none !important; outline: none; }
.hud-player-name.is-guest { color: var(--text-mute); font-style: italic !important; }
.hud-tag { padding: 3px 7px; color: #041020; background: rgb(var(--seat-rgb)); font: 800 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.hud-tag.is-opp { background: rgba(255,255,255,.14); color: var(--text-dim); }
.hud-turn-flag { display: none; position: absolute; right: 0; top: 8px; color: var(--gold); font: 800 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; animation: fxBlink 1.2s ease-in-out infinite; }
.hud-plate.is-active .hud-turn-flag { display: inline; }
.hud-life { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 4px 12px; padding: 8px 0 12px; border-bottom: 1px solid rgba(var(--seat-rgb), .22); }
.hud-life-label { grid-column: 1 / -1; color: var(--text-mute); font: 800 12px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; }
.hud-life-val { color: #fff; font: 700 50px/.85 var(--f-num); text-shadow: 0 0 18px rgba(var(--seat-rgb), .7); min-width: 1.2ch; }
.hud-life-pips { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 6px; }
.hud-life-pips i { width: 10px; height: 16px; background: rgb(var(--seat-rgb)); transform: skewX(-14deg); box-shadow: 0 0 8px rgba(var(--seat-rgb), .8); }
.hud-life-pips i.lost { background: rgba(255,255,255,.1); box-shadow: none; }
.hud-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding-top: 12px; }
.hud-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 5px 8px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .1); }
.hud-stat b { color: var(--text-mute); font: 800 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; }
.hud-stat span { color: #fff; font: 700 17px/1 var(--f-num); }
.hud-stat span small { color: var(--text-mute); font-size: 12px; }
.hud-plate.is-spectating .hud-tag { display: none; }
.hud-live {
  position: absolute; left: 0; top: 80px; display: none; align-items: center; gap: 8px;
  height: 30px; padding: 0 14px 0 12px;
  background: rgba(6, 12, 32, .9); box-shadow: inset 0 0 0 1px rgba(255, 64, 88, .5);
  clip-path: var(--chamfer-s);
  color: #fff; font: italic 800 14px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase;
}
.hud-live::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); animation: fxBlink 1s ease-in-out infinite; }
body.spectator-mode .hud-live { display: inline-flex; }
body.spectator-mode .spectator-indicator { top: 34px !important; }
body.spectator-mode .hud-plate[data-pos="top"] { top: var(--hud-edge-gap); }
body.spectator-mode .hud-plate[data-pos="bottom"] { bottom: var(--hud-edge-gap); }

/* Build tag */
.playmat-build { left: 16px !important; bottom: 8px !important; color: rgba(150, 175, 220, .5) !important; font: 700 11px/1 var(--f-num) !important; letter-spacing: .12em !important; text-shadow: none !important; position: fixed; z-index: 100005; pointer-events: none; }

/* Cinematic turn banner */
.turn-banner {
  --seat-rgb: 150, 190, 255;
  position: fixed; inset: 0; z-index: 99985; pointer-events: none;
  display: grid; place-items: center; overflow: hidden;
  visibility: hidden;
}
.turn-banner[data-seat="p1"] { --seat-rgb: var(--p1-rgb); }
.turn-banner[data-seat="p2"] { --seat-rgb: var(--p2-rgb); }
.turn-banner-band {
  position: relative; width: 120%; height: clamp(110px, 17vh, 190px);
  display: grid; place-content: center; justify-items: center; gap: 4px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(var(--seat-rgb), .0) 4%, rgba(var(--seat-rgb), .55) 20%, rgba(var(--seat-rgb), .75) 50%, rgba(var(--seat-rgb), .55) 80%, transparent 96%),
    linear-gradient(180deg, rgba(4, 8, 22, .6), rgba(4, 8, 22, .85));
  transform: skewY(-3deg) scaleX(0);
}
.turn-banner-band::before, .turn-banner-band::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent); box-shadow: 0 0 18px rgba(var(--seat-rgb), 1); }
.turn-banner-band::before { top: 0; }
.turn-banner-band::after { bottom: 0; }
.turn-banner-kicker { color: rgba(255,255,255,.85); font: 800 clamp(14px, 1.6vw, 22px)/1 var(--f-ui); letter-spacing: .5em; text-transform: uppercase; transform: skewY(3deg); }
.turn-banner-title { color: #fff; font: italic 900 clamp(56px, 8vw, 128px)/.9 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 40px rgba(var(--seat-rgb), .9); transform: skewY(3deg); }
.turn-banner.play { visibility: visible; }
.turn-banner.play .turn-banner-band { animation: bannerBand 1.9s var(--ease-out) both; }
.turn-banner.play .turn-banner-title { animation: bannerText 1.9s var(--ease-out) both; }
.turn-banner.play .turn-banner-kicker { animation: bannerText 1.9s .05s var(--ease-out) both; }
@keyframes bannerBand { 0% { transform: skewY(-3deg) scaleX(0); opacity: 1; } 18% { transform: skewY(-3deg) scaleX(1); } 78% { transform: skewY(-3deg) scaleX(1); opacity: 1; } 100% { transform: skewY(-3deg) scaleX(1) translateY(-10px); opacity: 0; } }
@keyframes bannerText { 0%, 8% { opacity: 0; translate: 120px 0; } 24% { opacity: 1; translate: 0 0; } 76% { opacity: 1; translate: -20px 0; } 100% { opacity: 0; translate: -160px 0; } }

/* Toasts */
#toast {
  position: fixed; left: 50%; top: 86px; bottom: auto; z-index: 99999;
  min-width: 320px; max-width: min(720px, calc(100vw - 40px));
  padding: 14px 28px 14px 30px;
  background: linear-gradient(90deg, rgba(20, 36, 80, .97), rgba(8, 14, 34, .97));
  box-shadow: inset 0 0 0 1px var(--line-2), inset 4px 0 0 var(--gold);
  clip-path: var(--chamfer-s);
  color: #fff; font: 700 18px/1.3 var(--f-ui); letter-spacing: .03em; text-align: center;
  opacity: 0; transform: translate(-50%, -14px); pointer-events: none;
  transition: opacity .2s ease, transform .3s var(--ease-out);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════════════════════════════════════════════════════════════════
   7. OVERLAYS & MODALS
   ═══════════════════════════════════════════════════════════════════════ */
.settings-overlay, .multiplayer-overlay, .room-dialog-overlay, .board-sync-overlay, .dice-roll-overlay, .search-top-overlay, .deck-search-overlay, #deckImportPopup, #cardImportPopup, .card-modifier-overlay {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  padding: 28px;
  background: radial-gradient(ellipse at 50% 40%, rgba(8, 18, 50, .78), rgba(1, 3, 10, .9));
  overflow-y: auto;
}
.settings-overlay { z-index: 100002; }
.multiplayer-overlay { z-index: 99995; }
.board-sync-overlay { z-index: 100010; }
.dice-roll-overlay { z-index: 99999; }
.search-top-overlay { z-index: 99997; }
.deck-search-overlay { z-index: 99996; }
#deckImportPopup, #cardImportPopup { z-index: 99998; }
.card-modifier-overlay { z-index: 99998; }
.room-dialog-overlay, body > .room-dialog-overlay { position: fixed; z-index: 100060; }
.settings-overlay.show, #settingsOverlay.show, .multiplayer-overlay.show, .room-dialog-overlay.show, .board-sync-overlay.show, .dice-roll-overlay.show, .deck-search-overlay.show, #deckImportPopup.show, #cardImportPopup.show, #cardModifierOverlay.show { display: flex; }
.search-top-overlay { display: none; }

/* The modal shell */
#settingsModal, #multiplayerModal, #changeSeatModal, .room-dialog, .board-sync-window, .dice-roll-modal, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal {
  position: relative; box-sizing: border-box;
  width: min(640px, 100%); max-height: calc(100vh - 56px);
  margin: auto;
  padding: 30px 34px 30px;
  border: 0; border-radius: 0;
  color: var(--text);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08);
  clip-path: var(--chamfer-l);
  animation: modalIn .32s var(--ease-out) both;
  display: flex; flex-direction: column; gap: 16px;
  text-align: left;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
#settingsModal::before, #multiplayerModal::before, #changeSeatModal::before, .room-dialog::before, .board-sync-window::before, .dice-roll-modal::before, .search-top-modal::before, .deck-search-modal::before, #deckImportModal::before, #cardImportModal::before, .card-modifier-modal::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--orange) 0 24%, var(--gold) 24% 28%, rgba(var(--cyan-rgb), .6) 28% 60%, transparent 92%);
}
/* Titles — big italic caps with an energy slash */
#settingsModal .settings-heading, .multiplayer-modal-title, .room-dialog h3, .board-sync-title, .dice-roll-modal > h3, .search-top-title, .deck-search-title, #deckImportModal > h3, #cardImportModal > h3, .card-modifier-modal > h3 {
  position: relative; display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 0; background: none; border: 0;
  color: #fff; font: italic 900 42px/.95 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; text-align: left;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
  transform: none; white-space: normal;
}
.settings-heading::before, .multiplayer-modal-title::before, .room-dialog h3::before, .board-sync-title::before, .dice-roll-modal > h3::before, .search-top-title::before, .deck-search-title::before, #deckImportModal > h3::before, #cardImportModal > h3::before, .card-modifier-modal > h3::before {
  content: ''; flex: none; width: 8px; height: .8em; background: var(--orange); transform: skewX(-18deg); box-shadow: 0 0 12px rgba(var(--orange-rgb), .8);
}
#settingsModal .settings-subheading, .multiplayer-modal-subtitle, .room-dialog-subtitle, .modifier-help { margin: -6px 0 0; color: var(--text-dim); font: 600 17px/1.35 var(--f-ui); letter-spacing: .02em; }
/* Close buttons */
.settings-close, .multiplayer-close, .room-dialog-close, .deck-search-close, #inspectorClose {
  position: absolute !important; top: 22px !important; right: 22px !important; z-index: 30;
  width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important;
  display: grid; place-items: center; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: rgba(10, 18, 44, .85) !important;
  box-shadow: inset 0 0 0 1px var(--line-2) !important;
  clip-path: var(--chamfer-s) !important;
  color: transparent !important; font-size: 0 !important; text-shadow: none !important;
  cursor: pointer;
}
.settings-close::before, .settings-close::after, .multiplayer-close::before, .multiplayer-close::after, .room-dialog-close::before, .room-dialog-close::after, .deck-search-close::before, .deck-search-close::after, #inspectorClose::before, #inspectorClose::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; background: #fff; translate: -50% -50%;
}
.settings-close::before, .multiplayer-close::before, .room-dialog-close::before, .deck-search-close::before, #inspectorClose::before { rotate: 45deg; }
.settings-close::after, .multiplayer-close::after, .room-dialog-close::after, .deck-search-close::after, #inspectorClose::after { rotate: -45deg; }
.settings-close:hover, .multiplayer-close:hover, .room-dialog-close:hover, .deck-search-close:hover, #inspectorClose:hover { background: var(--btn-danger) !important; box-shadow: none !important; filter: none; }

/* Settings */
#settingsModal { width: min(760px, 100%); padding: 0; gap: 0; }
#settingsModal #sidebar { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 36px 32px; display: flex; flex-direction: column; gap: 12px; background: none; border: 0; width: auto; position: static; }
#settingsModal .panel { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
#settingsModal #sidebar > .panel:first-child { padding: 0 60px 10px 0; display: grid; gap: 10px; }
#settingsModal .settings-subheading { margin: 0; }
#settingsModal .panel h3 { margin: 18px 0 10px; color: var(--gold); font: 800 15px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; }
#settingsModal .settings-danger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#settingsModal .row { gap: 10px; }
#settingsModal .camera-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
#settingsModal .camera-field { display: grid; gap: 6px; }
#settingsModal .camera-field span { color: var(--text-mute); font: 800 12px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
#settingsModal .dev-tools-locked { opacity: .45; filter: grayscale(1); pointer-events: none; }
#settingsModal details.dev-tools-locked > summary::after { content: 'Locked'; position: absolute; right: 22px; top: 50%; width: auto; height: auto; border: 0; transform: translateY(-50%); padding: 4px 8px; background: rgba(255,255,255,.08); color: var(--text-mute); font: 800 12px/1 var(--f-ui); letter-spacing: .2em; font-style: normal; }
#settingsModal .game-settings .audio-toggle-grid { grid-template-columns: 1fr !important; }

/* Multiplayer (in-match) */
#multiplayerModal { width: min(860px, 100%); }
#multiplayerModal .multiplayer-modal-header { padding-right: 60px; display: grid; gap: 12px; }
#multiplayerModal .public-lobby-box { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
#multiplayerModal .public-lobby-box > h4 { margin: 4px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: #fff; font: italic 800 22px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
#multiplayerModal .public-lobby-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin: 0; }
.public-lobby-status { margin: 0; color: var(--text-dim); font: 600 16px/1.3 var(--f-ui); }
.server-browser-shell { min-height: 0; max-height: min(460px, 50vh); overflow-y: auto; padding-right: 4px; }
.server-browser { display: grid; gap: 12px; }
.server-room-meta { display: flex; }

/* Change seat */
#changeSeatModal { width: min(560px, 100%); }
#changeSeatModal .multiplayer-modal-header { padding-right: 60px; }
#changeSeatModal .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
#changeSeatModal .row.one { grid-template-columns: 1fr; }
#seatP1, #seatP2 { min-height: 110px !important; font-size: 34px !important; letter-spacing: .06em !important; }
#seatP1 { background: linear-gradient(160deg, #ff6b7a, #d11a33 55%, #7a0716) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.25) !important; }
#seatP2 { background: linear-gradient(160deg, #6fb8ff, #1a6fe0 55%, #07357a) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.25) !important; }
#seatP1.active, #seatP2.active, #seatSpec.active { box-shadow: inset 0 0 0 3px #fff, 0 0 0 0 transparent !important; }
#seatP1:disabled, #seatP2:disabled { opacity: .35 !important; }
#seatSpec { min-height: 56px !important; }

/* Host / password sub-dialogs */
.room-dialog { width: min(560px, 100%); }
.room-dialog > h3 { padding-right: 60px; font-size: 36px; }
.room-dialog-fields { display: grid; gap: 14px; }
.room-dialog-field { display: grid; gap: 7px; }
.room-dialog-field > span { color: var(--text-mute); font: 800 13px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; }
.room-dialog-error { min-height: 0; color: #ff8d9c; font: 700 16px/1.3 var(--f-ui); }
.room-dialog-error:empty { display: none; }
.room-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.autofill-decoy { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; left: -9999px !important; }

/* Board sync */
.board-sync-window { width: min(520px, 100%); text-align: left; }
.board-sync-title { font-size: 38px; }
.board-sync-body { display: grid; gap: 12px; }
.board-sync-bar { position: relative; height: 6px; overflow: hidden; background: rgba(20, 34, 72, .9); box-shadow: inset 0 0 0 1px var(--line); }
.board-sync-bar span { position: absolute; top: 0; left: 0; width: 38%; height: 100%; background: linear-gradient(90deg, transparent, var(--cyan), #fff); box-shadow: 0 0 14px var(--cyan); animation: syncSweep 1.1s ease-in-out infinite; }
@keyframes syncSweep { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
.board-sync-message { margin: 0; color: #fff; font: 700 20px/1.3 var(--f-ui); letter-spacing: .03em; }
.board-sync-detail { margin: 0; color: var(--text-dim); font: 600 15px/1.35 var(--f-ui); }
.board-sync-detail:empty { display: none; }

/* Dice */
.dice-roll-modal { width: min(680px, 100%); text-align: center; }
.dice-roll-modal > h3 { justify-content: flex-start; }
.dice-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dice-choice {
  --seat-rgb: 150, 190, 255;
  display: grid; justify-items: center; gap: 14px; padding: 20px 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--seat-rgb), .3), transparent 70%), rgba(6, 12, 32, .6);
  box-shadow: inset 0 0 0 1px rgba(var(--seat-rgb), .5), inset 0 3px 0 rgb(var(--seat-rgb));
  clip-path: var(--chamfer-m);
}
.dice-choice.red { --seat-rgb: var(--p1-rgb); }
.dice-choice.blue { --seat-rgb: var(--p2-rgb); }
.dice-choice-label { color: #fff; font: italic 800 22px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.dice-choice .simulated-die { width: 104px !important; height: 104px !important; margin: 4px auto !important; border-radius: 18px !important; font: 700 64px/104px var(--f-num) !important; color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 0 rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.5), 0 0 30px rgba(var(--seat-rgb), .5) !important; }
.die-roll-button { width: 100%; }
.dice-roll-result { min-height: 28px; margin: 0; color: #fff; font: 700 20px/1.3 var(--f-ui); letter-spacing: .03em; }
.first-player-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.first-player-choices[hidden] { display: none !important; }
.first-player-choices [data-first-seat="p1"]:not(:disabled) { background: linear-gradient(180deg, #ff6b7a, #c8142e) !important; color: #fff !important; }
.first-player-choices [data-first-seat="p2"]:not(:disabled) { background: linear-gradient(180deg, #6fb8ff, #1560cc) !important; color: #fff !important; }
.dice-close-button { justify-self: center; width: min(240px, 100%); margin: 0 auto; }
.dice-close-button:not(.show) { display: none; }

/* Search Top N */
.search-top-modal { width: min(460px, 100%); }
.search-top-title { font-size: 34px; }
#searchTopN { text-align: center; font: 700 44px/1 var(--f-num) !important; min-height: 72px !important; }
.search-top-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Deck / stack search */
.deck-search-modal { width: min(1180px, 100%); height: min(820px, calc(100vh - 56px)); padding: 28px 30px 26px; }
.deck-search-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 60px; position: static; }
.deck-search-close { top: 24px !important; }
.deck-search-tools { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
#deckSearchCount { padding: 10px 16px; background: rgba(var(--gold-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45); color: var(--gold); font: 700 18px/1 var(--f-num); white-space: nowrap; }
.deck-search-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; padding: 6px 6px 10px 2px; align-content: start; }
.deck-search-list > .small-note { grid-column: 1 / -1; text-align: center; padding: 40px 0; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
.deck-search-card {
  position: relative; display: grid; gap: 8px; align-content: start;
  padding: 10px 10px 12px;
  background: linear-gradient(180deg, rgba(30, 52, 108, .55), rgba(8, 14, 34, .85));
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--chamfer-m);
  cursor: pointer;
  transition: transform .2s var(--ease-out), background .2s ease, box-shadow .2s ease;
}
.deck-search-card:hover { transform: translateY(-4px); background: linear-gradient(180deg, rgba(50, 86, 170, .7), rgba(10, 18, 44, .9)); box-shadow: inset 0 0 0 1px var(--line-hi), inset 0 0 20px rgba(var(--cyan-rgb), .2); }
.deck-search-card img { display: block; width: 100%; aspect-ratio: 600 / 838; height: auto; object-fit: contain; border-radius: 7px; box-shadow: 0 10px 20px rgba(0,0,0,.5); background: rgba(0,0,0,.3); }
.deck-search-name { color: #fff; font: 700 17px/1.15 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.3em; }
.deck-search-code { color: var(--text-mute); font: 600 13px/1 var(--f-num); letter-spacing: .04em; }
.token-in-play-count { color: var(--gold); font: 700 13px/1 var(--f-num); }
.deck-search-actions { display: grid; }
.deck-search-actions button { min-height: 38px !important; font-size: 15px !important; }
/* Live deck/stack search leaves the hand usable */
.deck-search-overlay.card-search-active { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; isolation: isolate; padding-bottom: 238px !important; }
.deck-search-overlay.card-search-active::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 40%, rgba(8, 18, 50, .74), rgba(1, 3, 10, .88)); pointer-events: auto; }
.deck-search-overlay.card-search-active .deck-search-modal { position: relative !important; z-index: 1 !important; pointer-events: auto !important; height: min(760px, calc(100vh - 282px)) !important; }
@media (max-height: 760px) {
  .deck-search-overlay.card-search-active { align-items: flex-start !important; padding-top: 24px !important; padding-bottom: 214px !important; }
  .deck-search-overlay.card-search-active .deck-search-modal { height: min(540px, calc(100vh - 238px)) !important; }
}

/* Deck / card import */
#deckImportModal, #cardImportModal { width: min(720px, 100%); }
#deckImportModal .popup-row, #cardImportModal .popup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
#openDeckPlanetTabBtn { justify-self: start; width: auto !important; padding: 0 22px !important; }
.deck-import-status { color: var(--text-dim); font: 600 16px/1.35 var(--f-ui); }
.deck-import-status:empty { display: none; }
.deck-import-help { color: var(--text-dim); }

/* Card adjust (power / skills) */
.card-modifier-modal { width: min(720px, 100%); }
.modifier-panel { display: grid; gap: 14px; }
.modifier-panel[hidden] { display: none !important; }
.power-preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.power-preset-grid button { font-family: var(--f-num) !important; font-style: normal !important; font-weight: 700 !important; }
.power-preset-grid button[data-power-preset^="-"] { box-shadow: inset 0 0 0 1px rgba(255, 90, 110, .55) !important; color: #ffb3bd !important; }
.power-preset-grid button:not([data-power-preset^="-"]) { box-shadow: inset 0 0 0 1px rgba(90, 255, 160, .5) !important; color: #b8ffd4 !important; }
.modifier-input-label { color: var(--text-mute); font: 800 13px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; }
#powerModifierInput { font: 700 30px/1 var(--f-num) !important; text-align: center; }
.modifier-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.active-skill-modifiers { display: flex; flex-wrap: wrap; gap: 8px; }
.active-skill-modifiers:empty { display: none; }
.active-skill-modifiers button { width: auto; min-height: 34px; padding: 0 14px; font-size: 14px; background: var(--btn-primary) !important; color: #2a0e00 !important; }
.skill-modifier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.skill-modifier-grid button { min-height: 38px; font-size: 14px; letter-spacing: .06em; }
.skill-modifier-grid button.active { background: linear-gradient(180deg, rgba(var(--gold-rgb), .45), rgba(140, 70, 0, .7)) !important; box-shadow: inset 0 0 0 1px var(--gold) !important; color: #fff !important; }
.custom-skill-row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }

/* Context menus */
.context-menu {
  position: fixed; z-index: 99994; display: none;
  min-width: 230px; max-width: 320px; padding: 8px 0;
  background: linear-gradient(170deg, rgba(20, 36, 80, .97), rgba(6, 11, 28, .98));
  box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px rgba(0,0,0,.7);
  clip-path: var(--chamfer-m);
  animation: fxFadeIn .12s ease both;
}
.context-menu::before { content: ''; position: absolute; left: 0; top: 0; width: 60%; height: 3px; background: linear-gradient(90deg, var(--orange), transparent); }
.context-menu button {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 38px; margin: 0;
  padding: 0 20px 0 22px;
  border: 0; border-radius: 0; background: transparent;
  color: var(--text); box-shadow: none; text-align: left;
  font: 700 17px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background .1s ease, color .1s ease, padding .15s var(--ease-out);
}
.context-menu button::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--cyan); opacity: 0; transition: opacity .1s ease; }
.context-menu button:hover:not(:disabled) { background: linear-gradient(90deg, rgba(var(--cyan-rgb), .28), rgba(var(--cyan-rgb), .04)); color: #fff; padding-left: 28px; filter: none; }
.context-menu button:hover:not(:disabled)::before { opacity: 1; }
.context-menu button:disabled { opacity: .35; cursor: not-allowed; }
.context-menu button.danger { color: #ff8d9c; background: transparent !important; box-shadow: none !important; }
.context-menu button.danger:hover:not(:disabled) { background: linear-gradient(90deg, rgba(255, 64, 88, .32), rgba(255, 64, 88, .04)) !important; color: #fff !important; }
.context-menu button.danger::before { background: var(--danger); }
.context-menu .menu-divider { height: 1px; margin: 6px 14px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* Card inspector */
#cardInspector {
  position: fixed; z-index: 99997;
  display: none; flex-direction: row; align-items: stretch; gap: 30px;
  min-width: 560px; min-height: 320px; max-width: min(96vw, 1160px); max-height: min(88vh, 760px);
  padding: 34px 34px 30px;
  border: 0; border-radius: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse 50% 70% at 18% 40%, rgba(255, 150, 40, .16), transparent 70%),
    var(--glass);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.08);
  clip-path: var(--chamfer-l);
  overflow: hidden;
  animation: modalIn .28s var(--ease-out) both;
}
#cardInspector.show { display: flex; }
#cardInspector.title-preview { z-index: 100030; }
#cardInspector::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--orange) 0 24%, var(--gold) 24% 28%, rgba(var(--cyan-rgb), .6) 28% 60%, transparent 92%); }
#cardInspector.dev-edit { outline: 2px dashed rgba(var(--gold-rgb), .9); clip-path: none; }
#inspectorDevBar { display: none; position: absolute; left: 14px; right: 80px; top: 10px; padding: 6px 10px; background: rgba(var(--gold-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45); color: var(--gold); font: 800 12px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; cursor: move; z-index: 25; }
#cardInspector.dev-edit #inspectorDevBar { display: block; }
#inspectorResizeHandle { display: none; position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; background: var(--gold); cursor: nwse-resize; z-index: 26; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
#cardInspector.dev-edit #inspectorResizeHandle { display: block; }
.inspector-card-col { flex: 0 0 330px; width: 330px; max-width: 36%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#cardInspector img, #inspectorImage {
  flex: 0 0 auto; display: block; width: 100%; height: auto; aspect-ratio: 600 / 838; max-width: 330px; max-height: 470px;
  object-fit: contain; align-self: center; margin: 0;
  border: 0; border-radius: 12px; background: transparent;
  box-shadow: 0 26px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(255, 220, 150, .3), 0 0 40px rgba(255, 150, 40, .3);
}
#cardInspector .sub, #inspectorSubtitle { width: 100%; margin: 0; color: var(--text-mute); font: 700 14px/1.2 var(--f-num); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
#inspectorFaceFlip { display: none; width: auto; min-width: 150px; }
#inspectorFaceFlip.show { display: inline-flex; align-items: center; justify-content: center; }
.inspector-info { position: relative; flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 64px 4px 0; display: flex; flex-direction: column; gap: 16px; color: var(--text); user-select: text; }
.inspector-card-name, #inspectorTitle {
  position: static !important; transform: none !important; margin: 0 !important; padding: 0 !important; background: none !important;
  width: auto; max-width: none; overflow: visible; white-space: normal;
  color: #fff !important; font: italic 900 46px/.95 var(--f-ui) !important; letter-spacing: .01em !important; text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 26px rgba(255, 170, 60, .3) !important;
}
#inspectorTitle::before, #inspectorTitle::after { content: none !important; display: none !important; }
.inspector-meta-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 0 !important; border-radius: 0 !important;
  background: rgba(10, 18, 44, .75) !important; box-shadow: inset 0 0 0 1px var(--line) !important;
  color: #fff; font: 700 16px/1 var(--f-ui); letter-spacing: .03em; white-space: nowrap;
}
.meta-chip .label { color: var(--text-mute); font: 800 11px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
.inspector-skill-panel {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px 20px !important; border: 0 !important; border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(2, 5, 16, .55), rgba(6, 12, 32, .75)) !important;
  box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--orange) !important;
}
.inspector-section-title { position: static !important; transform: none !important; margin: 0 !important; padding: 0 !important; background: none !important; color: var(--gold) !important; font: 800 14px/1 var(--f-ui) !important; letter-spacing: .3em !important; text-transform: uppercase; }
.inspector-skill-body { min-height: 0; overflow-y: auto; padding-right: 6px; color: #eef3ff; font: 500 19px/1.5 var(--f-ui); letter-spacing: .01em; }
.skill-paragraph { margin: 0 0 10px; }
.skill-chip { border-radius: 0 !important; font-family: var(--f-ui) !important; font-weight: 800 !important; letter-spacing: .06em; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); padding-inline: 8px !important; }
.inspector-skill-body .card-ref { color: var(--orange) !important; font-weight: 800; font-style: italic; }
@media (max-width: 900px) {
  .inspector-card-col { flex-basis: 250px; width: 250px; }
  #inspectorTitle { font-size: 34px !important; }
}
@media (max-width: 720px) {
  #cardInspector { flex-direction: column; min-width: 320px; }
  .inspector-card-col { width: 100%; max-width: none; flex: 0 0 auto; }
  #cardInspector img { max-width: 220px; max-height: 300px; }
}

/* Small screens: keep modals comfortable */
@media (max-width: 720px) {
  #settingsModal, #multiplayerModal, #changeSeatModal, .room-dialog, .board-sync-window, .dice-roll-modal, .search-top-modal, .deck-search-modal, #deckImportModal, #cardImportModal, .card-modifier-modal { padding: 24px 20px; }
  .settings-heading, .multiplayer-modal-title, .room-dialog h3, .board-sync-title, .dice-roll-modal > h3, .search-top-title, .deck-search-title, #deckImportModal > h3, #cardImportModal > h3, .card-modifier-modal > h3 { font-size: 32px; }
  .title-audio-control, .game-audio-control { grid-template-columns: 1fr 56px; }
  .title-audio-control > span, .game-audio-control > span { grid-column: 1 / -1; }
  .audio-toggle-grid { grid-template-columns: 1fr; }
  #multiplayerModal .public-lobby-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-aura, .ld-aura, .hub-card.main, .hub-card-shine::after, .hub-ticker-track, .divider::before, #endTurnButton::after, #loadingContinue::after { animation: none !important; }
  .turn-banner.play .turn-banner-band, .turn-banner.play .turn-banner-title, .turn-banner.play .turn-banner-kicker { animation-duration: .01s !important; }
}

/* ── Performance: freeze every decorative animation on screens that are not visible ── */
#titleScreen.closed *, #titleScreen.closed *::before, #titleScreen.closed *::after,
#loadingScreen.closed *, #loadingScreen.closed *::before, #loadingScreen.closed *::after { animation-play-state: paused !important; }

/* ── Performance Mode (Settings → Graphics / Game) ─────────────────────────
   Keeps the whole look but removes every continuous animation, the particle
   canvas and the larger soft shadows. Auto-enabled on low frame rates. */
body.fx-lite #titleParticleCanvas,
body.fx-lite #loadingParticleCanvas { display: none; }
body.fx-lite .fx-floor, body.fx-lite .fx-streaks { display: none; }
body.fx-lite :is(.hub-aura, .ld-aura, .hub-card.main, .hub-card-shine::after, .divider::before, #endTurnButton::after, .hud-turn-flag, .hud-live::before, #loadingContinue::after, .hub-ticker-track) { animation: none !important; }
body.fx-lite .hub-card-shine, body.fx-lite .divider::before { display: none; }
body.fx-lite .hub-card img, body.fx-lite .hub-card.main img { box-shadow: 0 12px 24px rgba(0,0,0,.55), 0 0 0 2px rgba(255, 220, 150, .35); }
body.fx-lite .hub-panel, body.fx-lite .hub-tile, body.fx-lite #settingsModal, body.fx-lite #multiplayerModal, body.fx-lite #changeSeatModal, body.fx-lite .room-dialog,
body.fx-lite .dice-roll-modal, body.fx-lite .search-top-modal, body.fx-lite .deck-search-modal, body.fx-lite #deckImportModal, body.fx-lite #cardImportModal,
body.fx-lite .card-modifier-modal, body.fx-lite #cardInspector, body.fx-lite .context-menu { animation: none !important; }
body.fx-lite .deck-search-card, body.fx-lite .hub-card, body.fx-lite .hub-tile { transition: none; }

/* V0.332 account panel cleanup: no avatar/shop/recovery UI. */
.account-profile-card.account-profile-card-simple { grid-template-columns: minmax(0,1fr) auto; }


/* V 0.333 — in-match player profiles */
.player-profile-overlay { position: fixed; inset: 0; z-index: 100030; display: grid; place-items: center; padding: 24px; background: rgba(2, 6, 18, .66); backdrop-filter: blur(4px); }
.player-profile-overlay[hidden] { display: none; }
.player-profile-popup { position: relative; width: min(430px, calc(100vw - 32px)); padding: 24px 26px 26px; background: linear-gradient(145deg, rgba(18, 34, 72, .98), rgba(5, 10, 27, .99)); box-shadow: inset 0 0 0 1px rgba(100, 165, 255, .42), inset 4px 0 0 var(--cyan), 0 24px 70px rgba(0,0,0,.55); clip-path: var(--chamfer-m); }
.player-profile-kicker { color: var(--cyan); font: 800 12px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; }
.player-profile-popup h3 { margin: 9px 48px 5px 0; color: #fff; font: italic 900 34px/1 var(--f-ui); letter-spacing: .025em; text-transform: none; overflow-wrap: anywhere; }
.player-profile-status { color: var(--text-dim); font: 700 14px/1.3 var(--f-ui); }
.player-profile-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.player-profile-grid[hidden] { display: none; }
.player-profile-grid > div { display: grid; gap: 6px; padding: 12px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px var(--line); }
.player-profile-grid span { color: var(--text-mute); font: 800 10px/1.2 var(--f-ui); letter-spacing: .15em; text-transform: uppercase; }
.player-profile-grid strong { color: #fff; font: 700 18px/1 var(--f-num); }
.player-profile-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; padding: 0 !important; min-height: 0 !important; border: 0 !important; background: rgba(255,255,255,.08) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; clip-path: var(--chamfer-s) !important; font: 700 24px/1 var(--f-ui) !important; cursor: pointer; }
.player-profile-close:hover, .player-profile-close:focus-visible { background: rgba(255,255,255,.16) !important; outline: none; }


/* V 0.334 — layout cleanup */
#table .divider, #table .divider::before, #table .divider::after { display: none !important; }

/* V 0.335 — host dialog progress/error visibility */
#hostRoomDialogError.is-progress { color: var(--cyan) !important; }
#confirmHostRoomDialog:disabled { opacity: .72 !important; cursor: wait !important; }


/* V 0.339 — expanded player HUD and spectator chat */
.hud-stat b { white-space: nowrap; }
.hud-stat:has([data-stat="zenergy"]) b { letter-spacing: .10em; font-size: 10px; }


/* V 0.340 — full featured names + static rotating tips */


/* V 0.341 — keep wrapped featured names clear of card artwork */


/* V 0.343 — wider featured leader text area to avoid bottom bar overlap */


/* V 0.344 — align left toolbar/chat rail with mirrored player HUD edges */


/* V 0.345 — account email + password recovery */
.account-link-btn {
  justify-self: center;
  width: auto !important;
  min-height: 0 !important;
  padding: 5px 9px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: var(--cyan) !important;
  font: 800 13px/1 var(--f-ui) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  cursor: pointer;
}
.account-link-btn:hover, .account-link-btn:focus-visible {
  color: #fff !important;
  text-decoration: none !important;
  outline: none;
}
.account-forgot-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.account-forgot-head strong {
  color: #fff; font: italic 900 24px/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase;
}
.account-reset-divider {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--text-mute);
  font: 800 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase;
}
.account-reset-divider::before, .account-reset-divider::after {
  content: ''; height: 1px; background: var(--line);
}
#accountEmailDisplay {
  max-width: 260px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  text-transform: none;
}


/* V 0.346 — deck-search action hierarchy */
.deck-search-actions-main { grid-template-columns: 1fr 1fr; gap: 7px; }
.deck-search-actions-main .deck-search-primary { grid-column: 1 / -1; min-height: 42px !important; }
.deck-search-actions-main .deck-search-secondary { min-height: 32px !important; padding: 5px 6px !important; font-size: 12px !important; letter-spacing: .04em !important; }
.deck-search-view-only { padding: 8px 10px; text-align: center; color: var(--text-mute); font: 800 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(120,170,255,.14); background: rgba(0,0,0,.18); }
#playmatPasteCard[hidden] { display: none !important; }


/* V 0.349 — tutorial stub, display setting, 3-button toolbar, lobby search */
.hub-tile-tutorial,
.hub-tile-tutorial:disabled {
  min-height: 78px !important;
  opacity: .62 !important;
  filter: grayscale(1) saturate(.2) brightness(.78) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, rgba(110, 125, 155, .30), rgba(50, 60, 82, .22) 45%, rgba(110, 125, 155, .26)) !important;
}
.hub-tile-tutorial .hub-tile-bg { background: linear-gradient(160deg, #171c2b 0%, #0b0f1a 100%) !important; }
.hub-tile-tutorial .hub-tile-label { color: rgba(220, 228, 244, .72) !important; }
.hub-tile-tutorial .hub-tile-glyph { color: rgba(180, 195, 225, .55) !important; }
.glyph-tutorial { --glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 12h20c5 0 9 2 12 5 3-3 7-5 12-5h4v38h-4c-5 0-9 2-12 5-3-3-7-5-12-5H8V12zm6 6v26h14c3 0 6 .6 9 2V23c-2-3-5-5-9-5H14zm36 0c-4 0-7 2-9 5v23c3-1.4 6-2 9-2V18z' fill='black'/></svg>"); }

/* Three utility buttons centered over the left rail after removing Hide Chat/History. */
#settingsButton { left: var(--game-toolbar-left, 72px) !important; }
#multiplayerButton { left: calc(var(--game-toolbar-left, 72px) + 65px) !important; }
#changeSeatButton { left: calc(var(--game-toolbar-left, 72px) + 130px) !important; }

.server-search-field {
  display: grid; gap: 7px; width: 100%; margin: 10px 0 12px;
}
.server-search-field > span {
  color: var(--text-mute); font: 800 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase;
}
.server-search-field input[type="search"] {
  width: 100%; min-height: 42px; padding: 8px 12px;
  border: 0; border-radius: 0;
  background: rgba(4, 9, 24, .88);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 3px 0 0 rgba(var(--cyan-rgb), .75);
  color: #fff; font: 600 16px/1 var(--f-ui); letter-spacing: .02em;
  outline: none;
}
.server-search-field input[type="search"]:focus {
  box-shadow: inset 0 0 0 1px var(--line-hi), inset 3px 0 0 var(--cyan), 0 0 16px rgba(var(--cyan-rgb), .12);
}
.server-search-filter-empty { padding: 24px 16px; text-align: center; color: var(--text-mute); font: 700 14px/1.3 var(--f-ui); }


/* V 0.350 — title/in-match exit cleanup */
.hub-tile-coming-soon,
.hub-tile-coming-soon:disabled {
  cursor: default !important;
  filter: grayscale(1) brightness(.55) !important;
  opacity: .72 !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, rgba(95, 105, 125, .25), rgba(32, 38, 50, .2) 45%, rgba(95, 105, 125, .2)) !important;
}
.hub-tile-coming-soon .hub-tile-bg { background: linear-gradient(160deg, #171c2b 0%, #0b0f1a 100%) !important; }
.hub-tile-coming-soon .hub-tile-label { color: rgba(220, 228, 244, .68) !important; }
.hub-tile-coming-soon .hub-tile-glyph { color: rgba(180, 195, 225, .45) !important; opacity: .45 !important; }
#settingsModal .settings-session-single { grid-template-columns: 1fr !important; }


/* V 0.351 — Dragon Vault */
.glyph-vault { --glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='black' d='M10 8h44a5 5 0 0 1 5 5v38a5 5 0 0 1-5 5H10a5 5 0 0 1-5-5V13a5 5 0 0 1 5-5zm4 8v32h36V16H14zm18 5a11 11 0 1 1 0 22 11 11 0 0 1 0-22zm0 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-2 2h4v5h5v4h-5v4h-4v-4h-5v-4h5v-5z'/></svg>"); }
.dragon-vault-body { display: flex; flex-direction: column; min-height: 0; }
.dragon-vault-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; flex: none; }
.dragon-vault-tabs .hub-btn.active { background: var(--btn-primary) !important; color: #2a0e00 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 18px rgba(var(--orange-rgb),.2) !important; }
.dragon-vault-pane { min-height: 0; overflow-y: auto; padding-right: 4px; }
.dragon-vault-pane[hidden] { display: none !important; }
.vault-deck-import { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 12px; }
.vault-deck-list { display: grid; gap: 12px; margin-top: 12px; }
.vault-deck-item { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 106px; padding: 14px; background: linear-gradient(135deg,rgba(16,31,69,.9),rgba(5,10,27,.96)); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--chamfer-s); }
.vault-deck-icon { width: 72px; aspect-ratio: 600/838; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle,rgba(var(--orange-rgb),.24),transparent 62%),linear-gradient(160deg,rgba(var(--gold-rgb),.18),rgba(12,20,48,.8)); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.45); clip-path: var(--chamfer-s); }
.vault-deck-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-deck-icon-placeholder { color: var(--gold); font: italic 900 24px/1 var(--f-num); }
.vault-deck-copy { min-width: 0; display: grid; gap: 4px; }
.vault-deck-live { color: #7dffb0; font: 800 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; }
.vault-deck-copy strong { color: #fff; font: italic 900 22px/1.05 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-deck-creator { color: var(--text-dim); font: 700 13px/1.15 var(--f-ui); }
.vault-deck-url { max-width: 440px; color: var(--text-mute); font: 600 11px/1.2 var(--f-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-deck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 220px; }
.vault-deck-actions .hub-btn { min-height: 38px !important; padding: 0 10px !important; font-size: 13px !important; }
.vault-deck-remove { grid-column: 1/-1; min-height: 30px; border: 0; background: rgba(255,70,90,.09); color: #ff8996; box-shadow: inset 0 0 0 1px rgba(255,70,90,.22); font: 800 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.vault-deck-remove:hover { background: rgba(255,70,90,.18); color: #fff; }
.vault-deck-viewer { min-height: 0; }
.vault-deck-viewer[hidden] { display: none !important; }
.vault-deck-viewer-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 16px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.vault-deck-viewer-head > .hub-btn { width: auto !important; }
.vault-deck-viewer-title-wrap { min-width: 0; }
.vault-deck-viewer-title-wrap h3 { margin: 5px 0 3px; color: #fff; font: italic 900 28px/1 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-deck-viewer-meta { color: var(--text-dim); font: 700 12px/1.2 var(--f-ui); letter-spacing: .06em; }
.vault-deck-viewer-actions { display: flex; gap: 8px; }
.vault-deck-viewer-actions .hub-btn { width: auto !important; padding: 0 14px !important; min-height: 40px !important; font-size: 13px !important; }
.vault-deck-sections { display: grid; gap: 18px; padding-top: 8px; }
.vault-deck-section { display: grid; gap: 10px; }
.vault-deck-section > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 10px; background: linear-gradient(90deg,rgba(var(--cyan-rgb),.12),transparent); border-left: 3px solid var(--cyan); }
.vault-deck-section > header h4 { margin: 0; color: #fff; font: italic 900 18px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.vault-deck-section > header span { color: var(--text-mute); font: 700 12px/1 var(--f-num); }
.vault-section-leader > header { border-left-color: var(--gold); background: linear-gradient(90deg,rgba(var(--gold-rgb),.12),transparent); }
.vault-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(112px,1fr)); gap: 10px; }
.vault-card-tile { min-width: 0; display: grid; gap: 6px; padding: 8px; background: rgba(5,10,27,.78); box-shadow: inset 0 0 0 1px rgba(120,170,255,.13); }
.vault-card-art { position: relative; aspect-ratio: 600/838; background: #050a18; overflow: hidden; border-radius: 5px; }
.vault-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-card-qty { position: absolute; right: 5px; top: 5px; min-width: 28px; padding: 4px 6px; background: rgba(3,7,18,.92); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.7); color: var(--gold); font: 800 13px/1 var(--f-num); text-align: center; }
.vault-card-tile strong { color: #fff; font: 700 12px/1.15 var(--f-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 28px; }
.vault-card-tile > span { color: var(--text-mute); font: 600 10px/1 var(--f-num); }
.vault-deck-loading { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--text-dim); font: italic 800 16px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.vault-deck-loading span { width: 34px; height: 34px; border: 3px solid rgba(var(--cyan-rgb),.2); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* V 0.353 — Dragon Vault saved deck identity */


/* V 0.357 — Dragon Vault cards use the normal DBTS card inspector */
.vault-card-tile[data-vault-card-code] { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.vault-card-tile[data-vault-card-code]:hover, .vault-card-tile[data-vault-card-code]:focus-visible {
  transform: translateY(-2px);
  background: rgba(10,20,48,.94);
  box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb),.62), 0 8px 18px rgba(0,0,0,.24);
  outline: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   CUSTOM SPLASH + HOME ART (V 0.390)
   ═══════════════════════════════════════════════════════════════════════ */
#loadingScreen {
  background: #000;
  opacity: 1;
  visibility: visible;
}
#loadingScreen.closed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#loadingScreen::before {
  display: none !important;
  content: none !important;
}
#loadingScreen .ld-aura,
#loadingScreen .ld-logo,
#loadingScreen .ld-center {
  display: none !important;
}
#loadingScreen .ld-art-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000 url("../assets/dbts-main-menu-bg.jpg?v=0.417") center center / cover no-repeat;
  overflow: hidden;
}
#loadingScreen .fx-backdrop {
  display: block !important;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 5, 12, .88) 0%, rgba(3, 5, 12, .56) 38%, rgba(3, 5, 12, .78) 100%);
}
#loadingScreen .fx-backdrop > span { display: none; }
#loadingParticleCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .8;
}
#loadingScreen .ld-hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1600px, 98vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vh, 18px);
  z-index: 2;
}
#loadingScreen .ld-logo-splash {
  display: block;
  width: min(1460px, 96vw);
  max-height: 76vh;
  height: auto;
  object-fit: contain;
  object-position: center center;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 14px 32px rgba(0,0,0,.38));
}
#loadingScreen .ld-bottom {
  position: static;
  left: auto;
  bottom: auto;
  translate: none;
  z-index: auto;
  width: min(440px, 34vw);
  display: grid;
  gap: 8px;
  padding: 0;
  margin-top: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
#loadingScreen .ld-status-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  padding: 0 4px;
}
#loadingScreen .ld-controls-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
#loadingScreen .ld-meta-row {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  padding: 0 4px;
}
#loadingScreen .ld-spinner {
  width: 10px;
  height: 10px;
  border-width: 0;
  border-radius: 0;
  rotate: 45deg;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 197, 61, .8);
  animation: fxBlink 1.2s ease-in-out infinite;
}
#loadingScreen.is-ready .ld-spinner { width: 10px; height: 10px; margin: 0; }
#loadingScreen #loadingStatus,
#loadingScreen .ld-pct,
#loadingScreen .ld-hint,
#loadingScreen .loading-build {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.95);
}
#loadingScreen #loadingStatus {
  font: 800 17px/1 var(--f-ui);
  letter-spacing: .18em;
  white-space: nowrap;
  text-transform: uppercase;
}
#loadingScreen .ld-pct {
  font: 900 16px/1 var(--f-num);
  letter-spacing: .06em;
}
#loadingScreen .ld-track {
  height: 10px;
  width: 100%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.38);
  clip-path: none;
}
#loadingScreen #loadingBar,
#loadingScreen.is-ready #loadingBar {
  background: linear-gradient(90deg, #f5821f 0%, #ffae38 55%, #fff1c2 100%);
  box-shadow: 0 0 10px rgba(255, 149, 24, .65);
}
#loadingContinue {
  justify-self: center;
  align-self: start;
  min-width: 180px;
  margin: 0;
  padding: 9px 22px;
  font: italic 900 17px/1 var(--f-ui);
  letter-spacing: .12em;
  background: linear-gradient(180deg, #ffb341 0%, #ff8619 50%, #f26b00 100%);
  color: #1b0b00;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.24), 0 12px 30px rgba(0,0,0,.35);
}
#loadingContinue.ready { opacity: 1; visibility: visible; transform: none; }
#loadingContinue::after { display: none; }
#loadingScreen .ld-hint {
  justify-self: center;
  text-align: center;
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.66);
  text-transform: uppercase;
}
#loadingScreen .ld-foot {
  display: block;
  margin-top: 2px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
#loadingScreen.is-ready .ld-foot,
#loadingScreen.is-failed .ld-foot {
  opacity: 1;
  transform: translateY(0);
}
#loadingScreen .ld-disclaimer {
  display: block;
  text-align: center;
  color: rgba(160, 178, 214, .52);
  font: 500 11px/1.45 var(--f-ui);
  letter-spacing: .03em;
  text-shadow: 0 1px 2px rgba(0,0,0,.88);
}
#loadingScreen .loading-build {
  font-size: 12px;
  letter-spacing: .10em;
}

#titleScreen {
  background: #000;
}
#titleScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000;
  background-image: url("../assets/dbts-main-menu-bg.jpg?v=0.417");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
#titleScreen .hub-backdrop {
  background: linear-gradient(90deg, rgba(3, 5, 12, .88) 0%, rgba(3, 5, 12, .56) 38%, rgba(3, 5, 12, .78) 100%);
}
#titleScreen .hub-backdrop > span { display: none; }
#titleScreen .hub-stage { filter: drop-shadow(0 20px 42px rgba(0,0,0,.28)); }

@media (max-width: 1400px) {
  #loadingScreen .ld-hero { width: min(1500px, 97vw); }
  #loadingScreen .ld-logo-splash { width: min(1360px, 94vw); max-height: 72vh; }
  #loadingScreen .ld-bottom { width: min(460px, 36vw); }
}
@media (max-width: 1100px) {
  #loadingScreen .ld-hero { width: min(1320px, 99vw); }
  #loadingScreen .ld-logo-splash { width: min(1200px, 96vw); max-height: 68vh; }
  #loadingScreen .ld-bottom { width: min(440px, 42vw); }
}
@media (max-width: 900px) {
  #loadingScreen .ld-hero { width: min(99vw, 960px); gap: 8px; }
  #loadingScreen .ld-logo-splash { width: min(98vw, 920px); max-height: 62vh; }
  #loadingScreen .ld-bottom { width: min(68vw, 420px); }
  #loadingScreen .ld-controls-row { grid-template-columns: 1fr; gap: 10px; }
  #loadingContinue { justify-self: center; min-width: 170px; padding: 8px 20px; font-size: 16px; }
  #loadingScreen #loadingStatus { font-size: 14px; letter-spacing: .14em; }
  #loadingScreen .ld-pct { font-size: 14px; }
  #loadingScreen .ld-track { height: 8px; }
  #loadingScreen .ld-meta-row { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  #loadingScreen .ld-hint { justify-self: center; text-align: center; }
}