:root {
  --bg: #07090d;
  --surface: #0e1218;
  --raised: #141a23;
  --sunken: #0a0e14;
  --tile: #0c1018;
  --hero: #0b0f16;
  --line: rgba(255, 255, 255, 0.07);
  --hover: rgba(255, 255, 255, 0.04);
  --accent-line: rgba(255, 177, 61, 0.5);
  --accent-fill: rgba(255, 177, 61, 0.08);
  --text: #e8edf4;
  --dim: #8b97a8;
  --accent: #ffb13d;
  --accent2: #ff7847;
  --teal: #41e0c8;
  --danger: #ff5067;
  --bad: #eb4b4b;
  --good: #4ade80;
  --gold: #ffd24d;
  --font-display: 'Chakra Petch', 'Segoe UI Semibold', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --clip: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --clip-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

  --sp-0: 2px;
  --sp-1: 4px;
  --sp-1h: 6px;
  --sp-2: 8px;
  --sp-2h: 10px;
  --sp-3: 12px;
  --sp-3h: 14px;
  --sp-4: 16px;
  --sp-4h: 18px;
  --sp-5: 22px;
  --sp-5h: 26px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 60px;
  --panel-pad: 18px;
  --panel-pad-tight: 14px;
  --topbar-h: 58px;
  --banner-h: 0px;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --fs-3xs: 8px;
  --fs-2xs: 9px;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;
  --fs-xl: 15px;
  --fs-2xl: 16px;
  --fs-3xl: 18px;
  --fs-4xl: 20px;
  --fs-5xl: 22px;
  --fs-6xl: 26px;
  --fs-7xl: 30px;
  --fs-8xl: 34px;
  --fs-9xl: 40px;
  --fs-hero: 56px;

  --lh-none: 1;
  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-normal: 1.55;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 14px 34px rgba(0, 0, 0, 0.55);
  --shadow-2xl: 0 24px 60px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 0 24px rgba(255, 154, 61, 0.35);

  --bw-hair: 1px;
  --bw-thick: 2px;
  --bw-frame: 3px;

  --dur-instant: 0.1s;
  --dur-fast: 0.12s;
  --dur-base: 0.15s;
  --dur-mid: 0.2s;
  --dur-slow: 0.25s;
  --dur-slower: 0.4s;
  --dur-slowest: 0.5s;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-out-soft: cubic-bezier(.25, .9, .3, 1);
  --ease-back: cubic-bezier(.2, .7, .3, 1.2);

  --z-behind: -1;
  --z-sticky: 50;
  --z-drawer-scrim: 55;
  --z-drawer: 60;
  --z-dropdown: 80;
  --z-popover: 90;
  --z-stage-fx-1: 94;
  --z-stage-fx-2: 95;
  --z-stage-fx-3: 96;
  --z-fullscreen: 100;
  --z-modal: 150;
  --z-toast: 200;
  --z-banner: 250;
  --z-spark: 300;
  --z-combobox: 500;
  --z-floattext: 9000;
  --z-reveal: 9500;
}

/* breakpoint ladder, media queries cannot read custom properties:
   400 480 560 640 720 860 900 1000 1280 */
* { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; }

html { color-scheme: dark; -webkit-tap-highlight-color: transparent; }

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255, 122, 61, 0.06), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(65, 224, 200, 0.05), transparent 55%),
    repeating-linear-gradient(125deg, transparent 0 22px, rgba(255, 255, 255, 0.012) 22px 23px),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea, select, [contenteditable],
.flag-name-target, .event-data,
.fair-code, .db-grid td, .support-msg-body, .id-chip {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

h1, h2, h3, h4, .display { font-family: var(--font-display); letter-spacing: 0.02em; }
button { font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }
.dim { color: var(--dim); }
.row { display: flex; align-items: center; }
.gap { gap: var(--sp-2h); }
.grow { flex: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232c38; border-radius: var(--radius-sm); border: var(--bw-thick) solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #32404f; }
@supports (-moz-appearance: none) {
  :root { scrollbar-color: #232c38 transparent; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  color: var(--text);
  padding: var(--sp-2h) var(--sp-4h);
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  clip-path: var(--clip-sm);
  transition: background var(--dur-base), transform var(--dur-instant), box-shadow var(--dur-mid);
  -webkit-user-select: none;
  user-select: none;
}
.btn > .cf-ico, .btn > svg { flex-shrink: 0; }
.btn:hover { background: #1b2330; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.is-off { opacity: 0.45; }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #1a0f02;
  border: none;
  text-transform: uppercase;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}
.btn.primary:hover { box-shadow: var(--glow-accent); }
.btn.danger { border-color: rgba(255, 80, 103, 0.4); color: var(--danger); }
.btn.danger:hover { background: rgba(255, 80, 103, 0.1); }
.btn.teal { border-color: rgba(65, 224, 200, 0.4); color: var(--teal); }
.btn.teal:hover { background: rgba(65, 224, 200, 0.08); }
.btn.big { padding: var(--sp-3h) var(--sp-6); font-size: var(--fs-xl); }
.btn.sm { padding: var(--sp-1h) var(--sp-3h); font-size: var(--fs-base); }
/* greyed-out but still clickable, so the click can surface a "why" toast */
.btn.atmax, .btn.atmax:hover { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(0.5); }

input[type="text"], input[type="password"], input[type="number"], textarea, select {
  background: #0a0e14;
  border: var(--bw-hair) solid var(--line);
  color: var(--text);
  padding: var(--sp-2h) var(--sp-3);
  font-size: var(--fs-lg);
  clip-path: var(--clip-sm);
  outline: none;
  transition: border-color var(--dur-base);
}
input:focus, textarea:focus { border-color: rgba(255, 177, 61, 0.5); }

/* The status banner is fixed to the viewport top, so the shell reserves its
   height here. --banner-h is 0px until the banner mounts. */
#app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-top: var(--banner-h); }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4h);
  padding: 0 max(var(--sp-5), env(safe-area-inset-right)) 0 max(var(--sp-5), env(safe-area-inset-left));
  height: var(--topbar-h);
  background: rgba(10, 13, 18, 0.92);
  border-bottom: var(--bw-hair) solid var(--line);
  position: sticky;
  top: var(--banner-h);
  z-index: var(--z-sticky);
  backdrop-filter: blur(8px);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.logo .mark {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid;
  place-items: center;
  color: #190d02;
  font-size: var(--fs-2xl);
  font-weight: 700;
}
.logo .amber { color: var(--accent); }
/* only the topbar logo is a control; the auth screens reuse .logo as plain art */
.logo[role='link'] {
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.logo[role='link']:focus-visible {
  outline: var(--bw-thick) solid var(--accent);
  outline-offset: var(--sp-0);
}

.ticker {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
  display: flex;
  gap: var(--sp-2h);
  align-items: center;
  height: 100%;
  width: max-content;
  /* slide in from the right once, then hand off to the seamless marquee */
  animation: ticker-intro 0.9s cubic-bezier(.16, .8, .3, 1) both,
             ticker-scroll var(--ticker-dur, 45s) linear 0.9s infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-intro { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--raised);
  border-left: var(--bw-frame) solid var(--rc, var(--dim));
  font-size: var(--fs-base);
  white-space: nowrap;
  clip-path: var(--clip-sm);
}
.tick-item .who { color: var(--dim); }
.tick-item .what { font-weight: 600; color: var(--rc, var(--text)); }
.tick-item .for { color: var(--good); font-weight: 600; }
.tick-item.souvenir {
  background: linear-gradient(90deg, rgba(231, 193, 75, 0.18), rgba(231, 193, 75, 0.06));
  box-shadow: inset 0 0 0 1.5px rgba(231, 193, 75, 0.9), 0 0 11px rgba(231, 193, 75, 0.4);
}

.balance-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--raised);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.25);
  padding: var(--sp-2) var(--sp-4);
  clip-path: var(--clip-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--accent);
  white-space: nowrap;
}
.balance-pill .coin {
  width: 16px; height: 16px;
  background: radial-gradient(circle at 35% 30%, #ffe9b0, var(--accent) 60%, #b86a14);
  border-radius: var(--radius-circle);
}

.icon-btn {
  background: none;
  border: var(--bw-hair) solid var(--line);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  clip-path: var(--clip-sm);
  font-size: var(--fs-xl);
  color: var(--dim);
  transition: color var(--dur-base), border-color var(--dur-base);
}
.icon-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.icon-btn.alert { color: var(--accent); border-color: rgba(255, 177, 61, 0.4); animation: pulse-glow 2s infinite; }
.icon-btn.faded { opacity: 0.4; }
.icon-btn.faded:hover { opacity: 0.75; }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 177, 61, 0); }
  50% { box-shadow: 0 0 14px rgba(255, 177, 61, 0.4); }
}

.shell { display: flex; flex: 1; min-height: 0; }

/* 188px fits the longest label ("No Man's Land", 101px) with 6px of slack. */
.nav-rail {
  width: 188px;
  padding: var(--sp-4h) var(--sp-2h);
  border-right: var(--bw-hair) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2h) var(--sp-3h);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dim);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-align: left;
  clip-path: var(--clip-sm);
  transition: background var(--dur-base), color var(--dur-base);
  position: relative;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(255, 177, 61, 0.16), rgba(255, 177, 61, 0.03));
  color: var(--accent);
}
.nav-item .ico { font-size: var(--fs-2xl); width: 20px; text-align: center; }
.nav-item .lbl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .pip {
  position: absolute;
  right: 10px;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  padding: 0 var(--sp-1);
}
.nav-sep { height: 1px; background: var(--line); margin: var(--sp-2h) var(--sp-1h); }
.nav-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(139, 151, 168, 0.55);
  padding: var(--sp-3h) var(--sp-3h) var(--sp-1);
}
.nav-rail .nav-label:first-child { padding-top: var(--sp-0); }

/* overflow:auto keeps horizontal containment on the pane without reserving a
   vertical gutter; the document is the scroller, so the pane never scrolls Y. */
main.view { flex: 1; padding: var(--sp-5h) var(--sp-6) var(--sp-8); overflow: auto; min-width: 0; }

.page { display: flex; flex-direction: column; gap: var(--sp-5); }
.page > * { min-width: 0; }
.page-body { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-head-titles { flex: 1; min-width: 0; }
.page-head-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; flex-shrink: 0; }
.page-title { display: flex; align-items: center; flex-wrap: wrap; font-size: var(--fs-6xl); text-transform: uppercase; letter-spacing: 0.06em; }
.page-sub { color: var(--dim); margin-top: var(--sp-1); font-size: var(--fs-md); max-width: 560px; }

h1 em, h2 em, h3 em, h4 em { color: var(--accent); font-style: normal; }

.panel {
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip);
  padding: var(--panel-pad);
}
.panel.tight { padding: var(--panel-pad-tight); }
.panel.flush { padding: 0; }
.panel.stack { display: flex; flex-direction: column; gap: var(--sp-3h); min-width: 0; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.panel-heading { display: flex; align-items: center; flex-wrap: wrap; font-size: var(--fs-4xl); text-transform: uppercase; letter-spacing: 0.06em; }
.panel-head .page-sub { margin-top: var(--sp-0); }
.panel-head .panel-label { margin-bottom: 0; }
.panel-head .btn { margin-left: auto; }
.panel-label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--sp-2);
}

.form-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2h); flex-wrap: wrap; margin-top: var(--sp-3); }
.modal-foot.spread { justify-content: space-between; }

.page-tabs { display: flex; gap: var(--sp-1h); flex-wrap: wrap; }
.page-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: var(--bw-hair) solid var(--line);
  color: var(--dim);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  clip-path: var(--clip-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-md);
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.page-tab:hover { background: var(--hover); color: var(--text); }
.page-tab.active { background: var(--accent-fill); border-color: var(--accent-line); color: var(--accent); }
.page-tab.sm { padding: var(--sp-1h) var(--sp-2h); font-size: var(--fs-base); }
.page-tab.seg {
  justify-content: center;
  min-height: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
}
.page-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.page-tab .cf-ico { width: 14px; height: 14px; flex: none; }
.page-tab-label { min-width: 0; }
.page-tab-sub { color: var(--dim); font-size: var(--fs-sm); font-weight: 400; }
.page-tab-pip {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-md);
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.page-tab-pip[hidden] { display: none; }

.page-toolbar { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
/* Keeps a label welded to its control so a wrapping toolbar cannot orphan one. */
.field-inline { display: inline-flex; align-items: center; gap: var(--sp-2h); min-width: 0; }
.page-toolbar > * { margin: 0; }
.page-toolbar.push { margin-left: auto; }
.page-toolbar.controls { gap: var(--sp-2); }

.bet-console { display: flex; flex-direction: column; gap: var(--sp-2h); width: 100%; min-width: 0; }
.bet-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); }
.bet-row { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.bet-row > .dim { white-space: nowrap; }
.bet-go { width: 100%; }

@media (max-width: 620px) {
  .bet-rows { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .bet-row { justify-content: space-between; }
}

.bet-grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-2h); align-items: center;
}
.bet-grid > .bet-row { display: contents; }
.bet-grid .money-field,
.bet-grid > .bet-row > input { width: 100%; min-width: 0; }
.bet-grid .money-field > input { width: 100%; min-width: 0; }

@media (max-width: 460px) {
  .bet-grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); }
  .bet-grid > .bet-row > .dim { grid-column: 1 / -1; }
  .bet-grid > .bet-row + .bet-row > .dim { margin-top: var(--sp-2); }
}
.page-toolbar.controls input,
.page-toolbar.controls select,
.page-toolbar.controls .btn {
  height: 38px;
  box-sizing: border-box;
  font-size: var(--fs-md);
  border-radius: 0;
  clip-path: var(--clip-sm);
}
.page-toolbar.controls input,
.page-toolbar.controls select { padding: 0 var(--sp-3); }

.grid-pager { display: flex; gap: var(--sp-2h); align-items: center; justify-content: center; flex-wrap: wrap; }
.grid-pager:empty { display: none; }

.paged-grid { display: flex; flex-direction: column; gap: var(--sp-3); }

.panel > .page-toolbar { margin-bottom: var(--sp-3); }
.panel > .grid-search { margin-bottom: var(--sp-3); }
.panel > .grid-pager { margin-top: var(--sp-3h); }
.panel.stack > .page-toolbar,
.panel.stack > .grid-search,
.panel.stack > .grid-pager { margin-top: 0; margin-bottom: 0; }

.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  padding: var(--sp-2h) var(--sp-3h);
}
.list-row.tight { padding: var(--sp-2) var(--sp-3); }
.list-row.flush { border: none; clip-path: none; }

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3h) var(--sp-4);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile-c, var(--accent)) 6%, transparent), transparent 45%),
    var(--surface);
  border: var(--bw-hair) solid var(--line);
  border-top: var(--bw-thick) solid var(--tile-c, var(--accent));
  clip-path: var(--clip-sm);
  min-width: 0;
}
.stat-tile.plain { background: var(--bg); border-top: var(--bw-hair) solid var(--line); }
.stat-tile.lift { transition: transform var(--dur-fast), border-color var(--dur-fast); }
.stat-tile.lift:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tile-c, var(--accent)) 40%, var(--line)); }
.stat-tile-k { font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.stat-tile-v { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-tile-s { font-size: var(--fs-sm); color: var(--dim); }

.empty-inline { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.empty-inline-body { flex: 1; min-width: 200px; }
.empty-glyph { font-size: var(--fs-9xl); opacity: 0.5; flex: none; }
.empty-glyph .cf-ico { width: 40px; height: 40px; }
.empty-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); margin-bottom: var(--sp-0); }
.empty-boxed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2h);
  text-align: center;
  color: var(--dim);
  border: var(--bw-hair) dashed var(--line);
  clip-path: var(--clip-sm);
  padding: var(--sp-6) var(--sp-5);
}
.empty-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  letter-spacing: 0;
  text-transform: none;
  color: var(--dim);
  max-width: 240px;
  line-height: var(--lh-normal);
}
.empty-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2h);
  min-height: 260px;
  text-align: center;
  color: var(--dim);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-0) var(--sp-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill.sm { padding: var(--sp-0) var(--sp-1h); font-size: var(--fs-2xs); }
.pill.lg { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.pill.outline { background: none; border: var(--bw-hair) solid var(--line); color: var(--dim); }
.pill.tone-accent { background: rgba(255, 177, 61, 0.16); color: var(--accent); }
.pill.tone-good { background: rgba(74, 222, 128, 0.14); color: var(--good); }
.pill.tone-bad { background: rgba(255, 80, 103, 0.14); color: var(--danger); }
.pill.tone-neutral { background: rgba(139, 151, 168, 0.14); color: var(--dim); }
.pill.solid-good { background: var(--good); color: var(--hero); }
.pill.solid-bad { background: var(--danger); color: #fff; }

.status-tag { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: var(--sp-1) var(--sp-2h); clip-path: var(--clip-sm); white-space: nowrap; }
.status-tag.admin_response { background: rgba(75, 159, 255, 0.16); color: #6db4ff; }
.status-tag.closed { background: rgba(139, 151, 168, 0.14); color: var(--dim); }

.tone-accent { background: rgba(255, 177, 61, 0.16); color: var(--accent); }
.tone-good { background: rgba(74, 222, 128, 0.14); color: var(--good); }
.tone-bad { background: rgba(255, 80, 103, 0.14); color: var(--danger); }
.tone-neutral { background: rgba(139, 151, 168, 0.14); color: var(--dim); }
.tone-teal { background: rgba(65, 224, 200, 0.12); color: var(--teal); }
.tone-warn { background: rgba(255, 154, 71, 0.16); color: #ff9a47; }
.tone-win { background: var(--good); color: var(--hero); }
.tone-loss { background: var(--danger); color: #fff; }
.tone-tie { background: #8d9aa5; color: var(--hero); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-0) var(--sp-2);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.progress-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4h);
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--sp-4) var(--sp-5);
}
.progress-summary-stat { display: flex; flex-direction: column; gap: var(--sp-0); white-space: nowrap; }
.progress-summary-stat .big { font-family: var(--font-display); font-size: var(--fs-5xl); font-weight: 700; }
.progress-summary-stat .dim { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.progress-track { flex: 1; height: var(--sp-2); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: var(--radius-pill); transition: width var(--dur-slower); }
.progress-fill.gold { background: linear-gradient(90deg, #ffd76b, #c98f0a); }
.progress-bar { flex: 1; height: var(--sp-1h); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress-bar > i { display: block; height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-slower); }

.map-tip {
  position: absolute;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  padding: var(--sp-1h) var(--sp-2h);
  background: rgba(10, 14, 20, 0.94);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  font-family: var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--dur-fast);
}
.map-tip.show { opacity: 1; }

@media (max-width: 560px) {
  .page-tab { padding: var(--sp-2h) var(--sp-4); }
  .empty-inline { justify-content: center; text-align: center; }
  .empty-placeholder { min-height: 150px; }
  .progress-summary { gap: var(--sp-3); padding: var(--sp-3h) var(--sp-4); }
}
.auth-wrap {
  min-height: 100vh;
  min-height: calc(100dvh - var(--banner-h));
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}
.auth-box {
  width: 380px;
  max-width: 100%;
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip);
  padding: var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3h);
}
.auth-box .logo { justify-content: center; font-size: var(--fs-6xl); margin-bottom: var(--sp-1); }
.auth-box .tagline { text-align: center; color: var(--dim); font-size: var(--fs-md); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.auth-box input { width: 100%; }
.auth-tabs { display: flex; gap: var(--sp-1h); margin-bottom: var(--sp-1h); }
.auth-tabs button {
  flex: 1;
  background: none;
  border: none;
  border-bottom: var(--bw-thick) solid var(--line);
  color: var(--dim);
  padding: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-err { color: var(--danger); font-size: var(--fs-md); min-height: 18px; text-align: center; }
.profanity-name { display: inline-block; margin-top: var(--sp-1h); font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: 0.02em; color: var(--text); word-break: break-all; }
.profanity-hit { background: var(--danger); color: #fff; border-radius: var(--radius-xs); padding: 0 var(--sp-1); font-weight: 700; }
.auth-note {
  font-size: var(--fs-md);
  line-height: 1.45;
  text-align: center;
  color: var(--accent2);
  background: rgba(255, 122, 61, 0.1);
  border: var(--bw-hair) solid rgba(255, 122, 61, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--sp-2h) var(--sp-3);
}
.auth-maintenance {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: var(--accent);
  background: rgba(255, 177, 61, 0.12);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.35);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.item-card {
  --rc: #4b69ff;
  width: 150px;
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  border-bottom: var(--bw-frame) solid var(--rc);
  clip-path: var(--clip-sm);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base), box-shadow var(--dur-mid);
}
.item-card.small { width: 118px; }
.item-card.selectable { cursor: pointer; }
.item-card.selectable:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.item-card.selected { outline: var(--bw-thick) solid var(--accent); outline-offset: -2px; }
/* the ICON_PATHS 'check' path, inlined because a pseudo-element cannot host a DOM node */
.item-card.selected::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23190d02' d='M9.4 20.2 L2.6 13.4 L4.9 11.1 L9.4 15.6 L19.1 5.9 L21.4 8.2 Z'/%3E%3C/svg%3E") center / 11px 11px no-repeat,
    var(--accent);
  border-radius: var(--radius-circle);
  z-index: 2;
}

.item-art {
  height: 86px;
  flex-shrink: 0;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.item-card.small .item-art { height: 66px; }
.item-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 5px, rgba(255, 255, 255, 0.02) 5px 6px);
  pointer-events: none; /* decorative only - never swallow clicks meant for the favorite button */
}
.art-glyph { width: 80%; max-height: 82%; color: rgba(255, 255, 255, 0.6); opacity: 0.55; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }

.badge {
  position: absolute;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: var(--sp-0) var(--sp-1h);
  letter-spacing: 0.04em;
  z-index: 2;
}
.badge.st { top: 5px; left: 5px; background: rgba(207, 106, 50, 0.92); color: #ffe9d6; }
.badge.souvenir { top: 5px; left: 5px; background: linear-gradient(135deg, #ffd24d, #e0a417); color: #3a2a00; box-shadow: 0 0 8px rgba(255, 210, 77, 0.45); }
.item-card.souvenir { border-color: rgba(231, 193, 75, 0.6); }
.badge.wear { bottom: 5px; right: 5px; background: rgba(0, 0, 0, 0.65); color: var(--dim); }
.badge.fav { top: 5px; right: 5px; background: rgba(255, 210, 77, 0.92); color: #3a2a00; }
.badge.enh {
  bottom: 5px; left: 5px;
  background: linear-gradient(135deg, #ffd24d, #ff7847);
  color: #2a1500; font-weight: 800;
  box-shadow: 0 0 8px rgba(255, 140, 60, 0.5);
}
.badge.mod {
  top: 5px; left: 5px;
  background: linear-gradient(135deg, #b07bff, #6a3bd8);
  color: #f3ebff; font-weight: 800;
  box-shadow: 0 0 8px rgba(150, 100, 255, 0.5);
}
.mod-effect { font-size: var(--fs-xs); font-weight: 700; color: #c9a9ff; white-space: nowrap; }

.socket-pips {
  position: absolute;
  bottom: 5px; left: 5px;
  display: flex; gap: var(--sp-1);
  z-index: 2;
}
.badge.enh ~ .socket-pips { left: 40px; }
.socket-pip {
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: rgba(0, 0, 0, 0.55);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.35);
}
.socket-pip.filled {
  background: var(--pc, #eb4b4b);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 6px var(--pc, #eb4b4b);
}

.art-glyph { position: relative; }
.art-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.art-fx::before, .art-fx::after { content: ''; position: absolute; }
.art-fx.s1 {
  background: radial-gradient(80% 62% at 50% 112%, color-mix(in srgb, var(--pa) 30%, transparent), transparent 72%);
  animation: sockBreathe 6s ease-in-out infinite;
}
.art-fx.s2 {
  background:
    radial-gradient(85% 68% at 50% 112%, color-mix(in srgb, var(--pa) 38%, transparent), transparent 74%),
    radial-gradient(55% 48% at 92% -6%, color-mix(in srgb, var(--pb) 32%, transparent), transparent 70%);
  animation: sockBreathe 5s ease-in-out infinite;
}
.art-fx.s3, .art-fx.s4 {
  background:
    radial-gradient(90% 74% at 50% 114%, color-mix(in srgb, var(--pa) 46%, transparent), transparent 76%),
    radial-gradient(60% 52% at 92% -6%, color-mix(in srgb, var(--pb) 40%, transparent), transparent 70%),
    radial-gradient(55% 46% at 4% -8%, color-mix(in srgb, var(--pa) 26%, transparent), transparent 68%);
  animation: sockBreathe 4.2s ease-in-out infinite;
}
.art-fx.s3 {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pa) 26%, transparent),
    inset 0 -14px 24px -14px color-mix(in srgb, var(--pa) 60%, transparent);
}
.art-fx.s4 {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pa) 45%, transparent),
    inset 0 0 26px -8px color-mix(in srgb, var(--pa) 55%, transparent),
    inset 0 -16px 26px -12px color-mix(in srgb, var(--pb) 60%, transparent);
  animation-duration: 3.6s;
}
.art-fx.s2::after, .art-fx.s3::after, .art-fx.s4::after {
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--pa) 45%, #fff) 50%, transparent 60%);
  transform: translateX(-101%);
  animation: sockSweep 8s linear infinite;
  opacity: 0.12;
}
.art-fx.s3::after { opacity: 0.18; animation-duration: 6.5s; }
.art-fx.s4::after { opacity: 0.26; animation-duration: 5s; }
.art-fx.s4::before {
  inset: -55%;
  background: conic-gradient(from 0deg,
    transparent 0deg 40deg,
    color-mix(in srgb, var(--pa) 65%, transparent) 80deg,
    transparent 120deg 160deg,
    color-mix(in srgb, #fff 35%, var(--pb)) 200deg,
    transparent 240deg 280deg,
    color-mix(in srgb, var(--pa) 50%, transparent) 320deg,
    transparent 360deg);
  opacity: 0.3;
  animation: sockSpin 9s linear infinite;
}
.item-card.conceal .art-fx { display: none; }
.item-card.conceal.sock-lit .item-art { background: linear-gradient(180deg, #10141b, #0b0e14) !important; }
@keyframes sockBreathe {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
@keyframes sockSweep {
  0%, 55% { transform: translateX(-101%); }
  90%, 100% { transform: translateX(101%); }
}
@keyframes sockSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .art-fx, .art-fx::before { animation: none; }
  .art-fx::after { display: none; }
}

.fav-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: var(--dim);
  font-size: var(--fs-lg);
  line-height: var(--lh-none);
  padding: var(--sp-1) var(--sp-1h);
  cursor: pointer;
  clip-path: var(--clip-sm);
  transition: color var(--dur-base), background var(--dur-base);
}
.fav-btn:hover { color: #ffd24d; background: rgba(0, 0, 0, 0.75); }
.fav-btn.on { color: #ffd24d; background: rgba(58, 42, 0, 0.85); }

.item-card.fav-locked { opacity: 0.45; cursor: not-allowed; }

/* equipped marker: a green top rail on the art (survives hover shadow) plus a
   meta pill. Kept off the top-right corner so it never collides with the
   favorite star or the picker's selected check. */
.item-card.equipped { outline: var(--bw-thick) solid #34d38a; outline-offset: -2px; box-shadow: 0 0 0 1px rgba(52, 211, 138, 0.35), 0 0 16px rgba(52, 211, 138, 0.22); }
.item-card.equipped .item-art { box-shadow: inset 0 2px 0 rgba(52, 211, 138, 0.95); }
.item-equip-flag {
  align-self: flex-start;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #05351f;
  background: linear-gradient(135deg, #46e492, #1fa862);
  padding: var(--sp-0) var(--sp-1h);
  border-radius: var(--radius-xs);
  margin-bottom: var(--sp-1);
  box-shadow: 0 0 8px rgba(52, 211, 138, 0.35);
}
.item-card.small .item-equip-flag { font-size: var(--fs-3xs); padding: 0 var(--sp-1); margin-bottom: var(--sp-1); }

.item-meta { padding: var(--sp-2) var(--sp-2h) var(--sp-2h); flex: 1; display: flex; flex-direction: column; }
.item-weapon { font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.item-finish {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-1h); gap: var(--sp-1h); flex-wrap: wrap; }
.item-price { color: var(--good); font-weight: 700; font-size: var(--fs-md); }
.item-rarity { font-size: var(--fs-xs); color: var(--rc); font-weight: 600; margin-top: auto; padding-top: var(--sp-1h); }
.float-wrap { flex: 0 0 auto; width: 52px; }
.item-card.conceal .badge.wear,
.item-card.conceal .item-price,
.item-card.conceal .socket-pips,
.item-card.conceal .float-wrap { visibility: hidden; }
.float-bar { display: block; height: 4px; background: linear-gradient(90deg, #4ade80, #facc15 38%, #f87171 60%, #7f1d1d); border-radius: var(--radius-xs); position: relative; }
.float-fill { position: absolute; top: -2px; height: 8px; width: 0; border-right: var(--bw-thick) solid #fff; }

.card-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4h); }
.case-card {
  --ac: var(--accent);
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip);
  padding: var(--sp-5) var(--sp-5) var(--sp-4h);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-mid), box-shadow var(--dur-slow);
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.case-visual {
  width: 110px;
  height: 96px;
  margin: 0 auto var(--sp-3h);
  position: relative;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
  transition: transform var(--dur-slow);
}
.case-card:hover .case-visual { transform: scale(1.07) rotate(-2deg); }
.case-visual .lid {
  position: absolute;
  inset: 0 0 58% 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 55%, #20242c), #1a1f27);
  clip-path: polygon(8% 30%, 50% 0, 92% 30%, 92% 100%, 8% 100%);
}
.case-visual .body {
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(180deg, #232a35, #11151c);
  clip-path: polygon(8% 0, 92% 0, 100% 80%, 50% 100%, 0 80%);
}
.case-visual .lock {
  position: absolute;
  left: 50%; top: 52%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--ac) 60%, transparent);
}
.case-name { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; text-align: center; }
.case-tag { color: var(--dim); font-size: var(--fs-base); text-align: center; margin-top: var(--sp-0); }
.case-foot { display: flex; justify-content: center; align-items: center; gap: var(--sp-2h); margin-top: var(--sp-3); }
.case-price { font-family: var(--font-display); color: var(--accent); font-weight: 700; font-size: var(--fs-2xl); }
.case-special { font-size: var(--fs-xs); color: var(--ac); border: var(--bw-hair) solid color-mix(in srgb, var(--ac) 50%, transparent); padding: var(--sp-0) var(--sp-2); clip-path: var(--clip-sm); text-transform: uppercase; letter-spacing: 0.08em; }

.case-card.souvenir {
  border-color: rgba(231, 193, 75, 0.5);
  background:
    radial-gradient(130% 100% at 50% -15%, rgba(255, 210, 77, 0.16), transparent 62%),
    linear-gradient(162deg, #1d160b 0%, #15110b 52%, #0e0b07 100%);
  animation: souv-glow 3.4s ease-in-out infinite;
}
@keyframes souv-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(231, 193, 75, 0.16), 0 0 16px rgba(231, 193, 75, 0.1), 0 10px 28px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 0 1px rgba(231, 193, 75, 0.5), 0 0 34px rgba(231, 193, 75, 0.3), 0 10px 28px rgba(0, 0, 0, 0.5); }
}
.case-card.souvenir:hover { box-shadow: 0 0 0 1px rgba(231, 193, 75, 0.6), 0 0 40px rgba(231, 193, 75, 0.4), 0 16px 38px rgba(0, 0, 0, 0.6); }
.case-card.souvenir::before {
  z-index: 0;
  inset: -45%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 236, 165, 0.15) 0deg 4.5deg, transparent 4.5deg 20deg);
  opacity: 1;
  animation: souv-swirl 24s linear infinite;
}
@keyframes souv-swirl { to { transform: rotate(360deg); } }
.case-card.souvenir > .case-visual,
.case-card.souvenir > .case-name,
.case-card.souvenir > .case-tag,
.case-card.souvenir > .case-foot { position: relative; z-index: 1; }

.souv-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.souv-shine { position: absolute; inset: 0; }
.souv-shine::after {
  content: ''; position: absolute; top: -40%; left: -70%; width: 45%; height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(16deg); animation: souv-sweep 3.6s ease-in-out infinite;
}
@keyframes souv-sweep { 0% { left: -70%; } 55%, 100% { left: 140%; } }
.souv-spark {
  position: absolute; width: 6px; height: 6px; border-radius: var(--radius-circle);
  background: radial-gradient(circle, #fff 0%, rgba(255, 220, 110, 0.85) 50%, transparent 75%);
  box-shadow: 0 0 7px rgba(255, 210, 77, 0.85);
  animation: souv-twinkle 2.6s ease-in-out infinite;
}
@keyframes souv-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.25); } }

.souv-visual { overflow: visible; }
.souv-aura {
  position: absolute; inset: -20% -10%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 210, 77, 0.35), rgba(255, 150, 80, 0.12) 45%, transparent 70%);
  filter: blur(4px);
  animation: souv-pulse 2.8s ease-in-out infinite;
}
@keyframes souv-pulse { 0%, 100% { transform: scale(0.92); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }
.souv-crate { position: absolute; inset: 8% 10% 4%; filter: drop-shadow(0 8px 16px rgba(180, 130, 20, 0.5)); }
.souv-crate .lid {
  position: absolute; inset: 0 0 58% 0;
  background: linear-gradient(180deg, #fff4cf 0%, #ffd86b 38%, #d49a1c 100%);
  clip-path: polygon(8% 30%, 50% 0, 92% 30%, 92% 100%, 8% 100%);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.45);
}
.souv-crate .body {
  position: absolute; inset: 45% 0 0 0;
  background: linear-gradient(180deg, #8a6a1e, #3a2c0c);
  clip-path: polygon(8% 0, 92% 0, 100% 80%, 50% 100%, 0 80%);
}
.souv-star {
  position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  background: radial-gradient(circle at 42% 35%, #fffdf2, #ffd24d 45%, #c8920f 85%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: 0 0 26px rgba(255, 215, 90, 1), 0 0 8px #fff;
  animation: souv-spin 5s linear infinite;
  z-index: 2;
}
@keyframes souv-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.case-card.souvenir .case-name {
  background: linear-gradient(92deg, #fff4cf, #ffd24d, #e0a417, #fff4cf);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: souv-text 4.5s linear infinite;
}
@keyframes souv-text { to { background-position: 220% center; } }
.case-card.souvenir .case-special { background: rgba(231, 193, 75, 0.14); border-color: rgba(231, 193, 75, 0.55); }

.case-detail h2 { font-size: var(--fs-5xl); text-transform: uppercase; }
/* contents grid stretches to the modal edge instead of leaving a dead right strip */
.case-detail .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.case-detail .card-grid .item-card { width: 100%; }
.odds-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2h) 0 var(--sp-4); }
.odds-chip { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2h); clip-path: var(--clip-sm); background: var(--raised); border-left: var(--bw-frame) solid var(--rc); }
.odds-chip b { color: var(--rc); }
/* StatTrak is an independent overlay roll, not a rarity tier - the copper StatTrak
   look (not extra spacing) is what sets it apart, so it keeps the row's normal gap. */
.odds-chip.st-chip {
  background: rgba(207, 106, 50, 0.2);
  border-left-width: 4px;
  color: #f3d3c0;
  font-weight: 600;
}
.odds-chip.souv-chip {
  background: rgba(231, 193, 75, 0.2);
  border-left-width: 4px;
  color: #f5e2a8;
  font-weight: 600;
}

.reel-stage { position: relative; margin: var(--sp-4h) 0; }
.reel-window {
  overflow: hidden;
  border: var(--bw-hair) solid var(--line);
  background: #0a0d12;
  clip-path: var(--clip);
  position: relative;
  padding: var(--sp-4) 0;
}
.reel-window::before, .reel-window::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 3;
  pointer-events: none;
}
.reel-window::before { left: 0; background: linear-gradient(90deg, #0a0d12, transparent); }
.reel-window::after { right: 0; background: linear-gradient(-90deg, #0a0d12, transparent); }
.reel-needle {
  position: absolute;
  left: 50%; top: -4px; bottom: -4px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  z-index: 4;
  box-shadow: 0 0 12px rgba(255, 154, 61, 0.8);
}
.reel-needle::before, .reel-needle::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.reel-needle::before { top: 0; border-top-color: var(--accent); }
.reel-needle::after { bottom: 0; border-bottom-color: var(--accent2); }
.reel-track { display: flex; gap: var(--sp-2h); will-change: transform; }

.reveal-row { display: flex; flex-wrap: wrap; gap: var(--sp-3h); justify-content: center; margin: var(--sp-4h) 0; }
.flip-card { perspective: 800px; }
.flip-inner { display: grid; height: 100%; transition: transform var(--dur-slower) var(--ease-back); transform-style: preserve-3d; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }
.flip-front {
  background: linear-gradient(135deg, #1a212c, #10141b);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  display: grid;
  place-items: center;
  color: rgba(255, 177, 61, 0.5);
}

.result-banner {
  text-align: center;
  padding: var(--sp-4h);
  animation: result-pop 0.45s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes result-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.result-banner .headline { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; }
.result-banner .price-line { color: var(--good); font-size: var(--fs-2xl); font-weight: 700; margin-top: var(--sp-1); }
.socket-reward { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2h); margin-top: var(--sp-3h); }
.socket-reward-label {
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.16em;
  color: #c9a9ff; animation: socket-reward-in 0.5s 0.1s both;
}
.socket-reward-pips { display: flex; gap: var(--sp-3); }
.socket-reward-pip {
  width: 15px; height: 15px; transform: rotate(45deg);
  border: var(--bw-thick) solid #b07bff; background: rgba(176, 123, 255, 0.28);
  box-shadow: 0 0 12px rgba(176, 123, 255, 0.65);
  animation: socket-reward-pop 0.55s var(--d, 0ms) both;
}
@keyframes socket-reward-pop {
  0% { transform: rotate(45deg) scale(0); opacity: 0; }
  55% { transform: rotate(45deg) scale(1.35); opacity: 1; }
  100% { transform: rotate(45deg) scale(1); opacity: 1; }
}
@keyframes socket-reward-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* inset pseudos: the card's clip-path swallows outer glows */
.socket-hit .item-card::after, .item-card.socket-hit::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  clip-path: var(--clip-sm);
  border: var(--bw-thick) solid #b07bff;
  animation: socket-hit-bloom 0.9s ease-out both,
    socket-hit-pulse 1.7s 0.9s ease-in-out infinite;
}
.socket-hit .item-card::before, .item-card.socket-hit::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  clip-path: var(--clip-sm);
  background: linear-gradient(115deg, transparent 40%, rgba(201, 169, 255, 0.35) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: socket-hit-sweep 2.4s 0.2s ease-in-out infinite;
}
@keyframes socket-hit-bloom {
  0% { opacity: 0; transform: scale(1.05); filter: brightness(1.5); }
  45% { opacity: 0.85; }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes socket-hit-pulse {
  0%, 100% { border-color: #b07bff; box-shadow: inset 0 0 12px rgba(150, 100, 255, 0.45), inset 0 0 3px rgba(201, 169, 255, 0.8); }
  50% { border-color: #ddc8ff; box-shadow: inset 0 0 24px rgba(150, 100, 255, 0.85), inset 0 0 5px rgba(224, 205, 255, 1); }
}
@keyframes socket-hit-sweep {
  0% { background-position: 120% 0; }
  55%, 100% { background-position: -60% 0; }
}

.glow-special { animation: glow-gold 1.4s ease-in-out infinite; }
@keyframes glow-gold {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 210, 77, 0.35); }
  50% { box-shadow: 0 0 42px rgba(255, 210, 77, 0.75); }
}

.grind-layout { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(330px, 440px); gap: var(--sp-5); align-items: start; }
.tap-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3h);
  padding: var(--sp-5) var(--sp-5) var(--sp-5h);
  position: relative;
  overflow: hidden;
}
.tap-stage {
  --heat: 0;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  padding: var(--sp-6) 0 var(--sp-5h);
  isolation: isolate;
}
.tap-stage::before {
  content: '';
  position: absolute;
  inset: -30% -20%;
  z-index: var(--z-behind);
  background:
    radial-gradient(42% 46% at 50% 58%, rgba(255, 122, 40, 0.34), transparent 70%),
    radial-gradient(70% 65% at 50% 62%, rgba(255, 177, 61, 0.14), transparent 72%);
  opacity: calc(0.35 + var(--heat) * 0.65);
  transform: scale(calc(0.92 + var(--heat) * 0.22));
  transition: opacity var(--dur-slow), transform var(--dur-slow);
  pointer-events: none;
}
.tap-stage::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 8px;
  width: 240px; height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 75%);
  z-index: var(--z-behind);
  pointer-events: none;
}
.tap-crate {
  width: 210px;
  height: 190px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-instant);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)) brightness(calc(1 + var(--heat, 0) * 0.22));
}
.tap-crate:active { transform: scale(0.94); }
.tap-crate .lid {
  position: absolute;
  inset: 0 0 56% 0;
  background: linear-gradient(180deg, #ffb13d, #c46a17);
  clip-path: polygon(8% 32%, 50% 0, 92% 32%, 92% 100%, 8% 100%);
}
.tap-crate .body {
  position: absolute;
  inset: 46% 0 0 0;
  background: linear-gradient(180deg, #2a323f, #151a22);
  clip-path: polygon(8% 0, 92% 0, 100% 78%, 50% 100%, 0 78%);
}
.tap-crate .lock {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -22%);
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #ffe9b0, var(--accent));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 22px rgba(255, 177, 61, 0.7);
}
.tap-value { display: flex; align-items: baseline; gap: var(--sp-2); }
.tap-value b { font-family: var(--font-display); font-size: var(--fs-7xl); font-weight: 800; color: var(--accent); text-shadow: 0 0 24px rgba(255, 177, 61, 0.35); }
.tap-value-sub { color: var(--dim); font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.12em; }

.grind-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.grind-chip {
  display: inline-flex; align-items: baseline; gap: var(--sp-1);
  font-size: var(--fs-base); padding: var(--sp-1h) var(--sp-3);
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-pill);
}
.grind-chip b { font-size: var(--fs-md); }
.grind-chip.crit b { color: #ffd24d; }
.grind-chip.rig b { color: var(--teal); }
.grind-chip.dim0 { opacity: 0.65; }

.heat-wrap { display: flex; align-items: center; gap: var(--sp-2h); width: min(320px, 90%); }
.heat-track { flex: 1; height: 8px; border-radius: var(--radius-pill); background: #1c232e; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.heat-fill {
  height: 100%; width: 0; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #ffb13d, #ff7a28 60%, #ff4040);
  box-shadow: 0 0 12px rgba(255, 122, 40, 0.6);
  transition: width var(--dur-base) linear;
}
.heat-label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.14em; color: var(--dim); width: 62px; }
.heat-label.blazing { color: #ff6a3d; text-shadow: 0 0 12px rgba(255, 106, 61, 0.7); animation: heat-blaze 0.5s ease-in-out infinite alternate; }
@keyframes heat-blaze { from { opacity: 0.75; } to { opacity: 1; } }

.grind-session { display: flex; flex-wrap: wrap; gap: var(--sp-3h); justify-content: center; font-size: var(--fs-base); color: var(--text); }
.grind-ses-chip b { font-variant-numeric: tabular-nums; }

.crit-ring {
  position: fixed;
  width: 24px;
  height: 24px;
  margin: -12px;
  border: var(--bw-frame) solid #ffd24d;
  border-radius: var(--radius-circle);
  pointer-events: none;
  z-index: var(--z-stage-fx-2);
  box-shadow: 0 0 18px rgba(255, 210, 77, 0.8), inset 0 0 12px rgba(255, 210, 77, 0.5);
  animation: crit-ring 0.6s cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes crit-ring {
  to { width: 190px; height: 190px; margin: -95px; opacity: 0; border-width: var(--bw-hair); }
}
.crit-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(50% 50% at var(--crit-x, 50%) var(--crit-y, 55%), rgba(255, 200, 80, 0.18), transparent 70%);
  pointer-events: none;
  z-index: var(--z-stage-fx-1);
  animation: crit-flash 0.5s ease-out forwards;
}
@keyframes crit-flash { from { opacity: 1; } to { opacity: 0; } }
.crit-text {
  position: fixed;
  transform: translate(-50%, 0);
  pointer-events: none;
  z-index: var(--z-stage-fx-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-6xl);
  background: linear-gradient(180deg, #fff3c4, #ffd24d 45%, #ff8a2a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 170, 40, 0.7));
  white-space: nowrap;
}
.tap-crate.crit-shake { animation: crit-shake 0.4s; }
@keyframes crit-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); filter: brightness(1); }
  15% { transform: translate(-7px, 3px) rotate(-3deg); filter: brightness(1.7); }
  35% { transform: translate(6px, -4px) rotate(2.5deg); filter: brightness(1.45); }
  55% { transform: translate(-5px, -2px) rotate(-1.5deg); filter: brightness(1.25); }
  75% { transform: translate(3px, 2px) rotate(1deg); }
}

.float-cash {
  position: fixed;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  z-index: var(--z-popover);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.upgrade-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.shop-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2h);
  font-size: var(--fs-base); color: var(--shc, var(--dim)); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  margin: var(--sp-2h) 0 var(--sp-0); padding-bottom: var(--sp-1h);
  border-bottom: var(--bw-hair) solid color-mix(in srgb, var(--shc, #888) 25%, transparent);
}
.shop-h-note { color: var(--dim); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-base); }
.upgrade-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3h);
  border-left: var(--bw-frame) solid color-mix(in srgb, var(--uc, #888) 55%, transparent);
  transition: background var(--dur-base), border-color var(--dur-base);
}
.upgrade-row:hover { background: #1a212c; border-left-color: var(--uc, #888); }
.upgrade-row .ico {
  font-size: var(--fs-4xl); width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--uc, #888) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uc, #888) 25%, transparent);
}
.upgrade-row .name { font-weight: 700; font-family: var(--font-display); font-size: var(--fs-lg); }
.upgrade-row .desc { color: var(--dim); font-size: var(--fs-base); margin-top: var(--sp-0); }
.upgrade-row .owned { color: var(--teal); font-size: var(--fs-base); font-weight: 700; }
.upgrade-prog { margin-top: var(--sp-2); height: 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.07); overflow: hidden; max-width: 220px; }
.upgrade-prog-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--uc, #ffb13d) 70%, transparent), var(--uc, #ffb13d)); }
.upgrade-buy { min-width: 92px; }
.upgrade-max { min-width: 92px; opacity: 0.6; }

.bj-table {
  max-width: 760px;
  margin: 0 auto;
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(65, 224, 200, 0.07), transparent 60%),
    var(--surface);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip);
  padding: var(--sp-6) var(--sp-5h) var(--sp-5h);
  text-align: center;
}
.bj-row-label { font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--sp-2); }
.bj-hand { display: flex; justify-content: center; gap: var(--sp-2h); min-height: 96px; flex-wrap: wrap; }
.bj-value {
  display: inline-flex;
  align-items: center;
  margin: var(--sp-2) 0 var(--sp-4h);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  padding: var(--sp-0) var(--sp-3h);
  background: var(--raised);
  clip-path: var(--clip-sm);
}
.playing-card {
  width: 66px;
  height: 94px;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, 0.022) 7px 8px),
    linear-gradient(158deg, #262f3b, #161c25 62%, #10151c);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.16);
  clip-path: var(--clip-sm);
  color: #e9f0f8;
  font-family: var(--font-display);
  font-weight: 700;
  position: relative;
  box-shadow: var(--shadow-md);
  animation: card-in 0.35s cubic-bezier(.2,.8,.3,1.15);
}
@keyframes card-in { from { transform: translateY(-26px) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.playing-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--bw-thick);
  background: currentColor;
  opacity: 0.55;
}
.playing-card.red { color: #ff7183; }
.playing-card .corner { position: absolute; top: 7px; left: 8px; font-size: var(--fs-2xl); line-height: 1.05; display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); letter-spacing: 0.02em; }
.playing-card .corner-suit { width: 0.72em; height: 0.72em; }
.playing-card .pip-big { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-8xl); filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 40%, transparent)); }
.playing-card .pip-suit { width: 0.72em; height: 0.72em; }
.playing-card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 177, 61, 0.14) 0 5px, transparent 5px 10px),
    linear-gradient(158deg, #1b222c, #0d1218);
  border-color: var(--accent-line);
  color: var(--accent);
}
.playing-card.back::before { opacity: 1; }
.bj-controls { display: flex; justify-content: center; gap: var(--sp-2h); margin-top: var(--sp-4h); flex-wrap: wrap; }
.bj-outcome { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 700; margin: var(--sp-3) 0 var(--sp-1); text-transform: uppercase; letter-spacing: 0.08em; }
.bj-outcome.win { color: var(--good); }
.bj-outcome.lose { color: var(--danger); }
.bj-outcome.push { color: var(--dim); }

.upg-layout { display: grid; grid-template-columns: 1fr 300px 1fr; gap: var(--sp-5); align-items: start; }
.upg-gauge { text-align: center; padding: var(--sp-5) var(--sp-2h); }
.gauge-svg { width: 230px; height: 230px; }
.gauge-chance { font-family: var(--font-display); font-size: var(--fs-8xl); font-weight: 700; fill: var(--text); }
.gauge-sub { font-size: var(--fs-sm); fill: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; }
.split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4h); align-items: start; }
.split-col > .bj-row-label { margin-bottom: var(--sp-3); }
.upg-slot {
  min-height: 200px;
  display: grid;
  place-items: center;
  border: var(--bw-hair) dashed rgba(255, 255, 255, 0.15);
  clip-path: var(--clip);
  color: var(--dim);
  font-size: var(--fs-md);
}

.tradeup-slots { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: var(--sp-2h); max-width: 720px; margin-inline: auto; }
.tu-slot {
  aspect-ratio: 4/4.4;
  border: var(--bw-hair) dashed rgba(255, 255, 255, 0.14);
  clip-path: var(--clip-sm);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: var(--fs-5xl);
  font-family: var(--font-display);
}
/* aspect-ratio only sizes the empty placeholder; a filled slot must take the
   card's intrinsic height or the card clips its own rarity line away */
.tu-slot:has(.item-card) { aspect-ratio: auto; }
.tu-slot .item-card { width: 100%; height: auto; }

.chip-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3h) 0;
  flex-wrap: wrap;
}
.chip-custom { display: inline-flex; align-items: center; gap: var(--sp-1h); margin-left: var(--sp-1h); }

.chip {
  --chip-size: 46px;
  --chip-c: #4b69ff;
  --chip-ink: #fff;
  --chip-edge: color-mix(in srgb, var(--chip-c) 58%, #000);
  --chip-spot: color-mix(in srgb, var(--chip-ink) 85%, transparent);
  --chip-ring: 0 0 0 0 transparent;
  width: var(--chip-size);
  height: var(--chip-size);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--chip-ink);
  background:
    repeating-conic-gradient(from 22.5deg, var(--chip-spot) 0 12deg, transparent 12deg 45deg),
    linear-gradient(180deg, color-mix(in srgb, var(--chip-c) 86%, #fff), var(--chip-c) 44%, var(--chip-edge));
  box-shadow: var(--chip-ring), var(--shadow-sm);
  transition: transform var(--dur-fast), filter var(--dur-fast), opacity var(--dur-fast);
}
.chip-face {
  width: 78%;
  height: 78%;
  border-radius: var(--radius-circle);
  background: var(--chip-c);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  color: var(--chip-ink);
  white-space: nowrap;
  box-shadow: inset 0 0 0 var(--bw-hair) color-mix(in srgb, #000 40%, transparent);
}
.chip:hover { transform: translateY(-4px) scale(1.06); }
.chip:active { transform: translateY(-1px) scale(1.02); }
.chip:focus-visible { outline: var(--bw-thick) solid var(--accent); outline-offset: 3px; }
/* The picked chip wears an amber band over a dark isolation hairline, so the band
   holds its own against a near-white chip and a black one alike, and the rest of
   the row steps back so the choice reads at a glance. */
.chip.on {
  --chip-ring:
    0 0 0 var(--bw-hair) var(--bg),
    0 0 0 calc(var(--bw-hair) + var(--bw-frame)) var(--accent),
    var(--glow-accent);
  filter: brightness(1.14);
  transform: translateY(-5px) scale(1.08);
  z-index: 1;
}
.chip.on:hover { transform: translateY(-7px) scale(1.12); }
.chip.on:active { transform: translateY(-3px) scale(1.04); }
.chip.on .chip-face {
  box-shadow:
    inset 0 0 0 var(--bw-hair) color-mix(in srgb, #000 40%, transparent),
    inset 0 0 0 var(--bw-frame) var(--accent);
}
.chip-picker .chip:not(.on) { opacity: 0.5; filter: saturate(0.7); }
.chip-picker .chip:not(.on):hover { opacity: 1; filter: none; }
.chip[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }

/* A click that cannot move the stake pulses the chip it came from instead of
   redrawing the readout, so a clamped total never looks like a miscount. */
.chip.capped .chip-face { animation: chip-capped var(--dur-slower) var(--ease-out); }
@keyframes chip-capped {
  from, to { box-shadow: inset 0 0 0 var(--bw-hair) color-mix(in srgb, #000 40%, transparent); }
  50% { box-shadow: inset 0 0 0 var(--bw-frame) var(--accent); }
}

/* The amount box hugs its glyphs so a centred badge lines up with the digits.
   Baseline alignment would drop the badge by its own padding and border. */
.stake-amount { line-height: 1; }

.stake-cap {
  display: inline-block;
  align-self: center;
  flex: none;
  margin-left: var(--sp-1h);
  padding: var(--sp-0) var(--sp-1h);
  border: var(--bw-hair) solid var(--accent-line);
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

/* Casino value colours: white 1, pink 2.50, red 5, blue 10, green 25, orange 50,
   black 100, light blue 250, purple 500, repeating every thousandfold. Amber is
   held back for brand, so the traditional yellow high roller is not used. */
.chip[data-tone="0"] { --chip-c: #eef1f6; --chip-ink: #0b0f14; }
.chip[data-tone="1"] { --chip-c: #e07098; --chip-ink: #0b0f14; }
.chip[data-tone="2"] { --chip-c: #bf2d3c; --chip-ink: #fff; }
.chip[data-tone="3"] { --chip-c: #2d68cc; --chip-ink: #fff; }
.chip[data-tone="4"] { --chip-c: #15804a; --chip-ink: #fff; }
.chip[data-tone="5"] { --chip-c: #cf6f1b; --chip-ink: #0b0f14; }
.chip[data-tone="6"] { --chip-c: #22262d; --chip-ink: #fff; }
.chip[data-tone="7"] { --chip-c: #5cc0ea; --chip-ink: #0b0f14; }
.chip[data-tone="8"] { --chip-c: #7a3ec4; --chip-ink: #fff; }

.chip.chip-max { --chip-c: #3a4250; --chip-ink: #fff; --chip-spot: rgba(255, 255, 255, 0.42); }
.chip.chip-max .chip-face {
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  line-height: var(--lh-none);
  text-align: center;
  box-shadow: inset 0 0 0 var(--bw-hair) rgba(255, 255, 255, 0.35);
  border: var(--bw-hair) dashed rgba(255, 255, 255, 0.4);
}

/* Grey on grey vanishes, so the maximum chip takes the amber treatment on its own
   face as well as its ring. */
.chip.chip-max.on .chip-face {
  box-shadow: inset 0 0 0 var(--bw-frame) var(--accent);
  border-color: var(--accent);
}

.chip.mark {
  --chip-size: 32px;
  cursor: inherit;
  pointer-events: none;
}
.chip.mark .chip-face { font-size: var(--fs-2xs); letter-spacing: 0; }
.chip.drop { animation: chip-drop 0.22s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes chip-drop { from { transform: translateY(-14px) scale(1.4); opacity: 0.4; } to { transform: none; opacity: 1; } }

@media (max-width: 480px) {
  .chip.mark { --chip-size: 28px; }
}
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3h); }
.admin-live { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-1); }
.admin-live-stamp { font-size: var(--fs-base); color: var(--dim); font-variant-numeric: tabular-nums; }
.admin-live-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; -webkit-user-select: none; user-select: none; font-size: var(--fs-base); color: var(--dim); }
.admin-live-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.admin-live-toggle .switch { position: relative; width: 38px; height: 20px; border-radius: var(--radius-pill); background: var(--line); border: var(--bw-hair) solid var(--line); transition: background var(--dur-mid), border-color var(--dur-mid); flex: 0 0 auto; }
.admin-live-toggle .switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: var(--radius-circle); background: #8b97a8; transition: transform var(--dur-mid), background var(--dur-mid); }
.admin-live-toggle input:checked + .switch { background: rgba(255, 177, 61, 0.3); border-color: rgba(255, 177, 61, 0.5); }
.admin-live-toggle input:checked + .switch::after { transform: translateX(18px); background: var(--accent); }
.admin-live-toggle input:focus-visible + .switch { box-shadow: 0 0 0 2px rgba(255, 177, 61, 0.4); }
.admin-live-toggle.muted { opacity: 0.4; cursor: default; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn:disabled:hover { color: var(--dim); border-color: var(--line); }
.admin-live-now.spinning { animation: admin-spin 0.6s linear infinite; }
@keyframes admin-spin { to { transform: rotate(360deg); } }

.feature-tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-0) var(--sp-1h);
  border-radius: var(--radius-sm);
  background: rgba(255, 80, 103, 0.16);
  color: #ff8591;
  white-space: nowrap;
}
.nav-item.disabled { opacity: 0.55; flex-wrap: wrap; }
.nav-item.disabled .lbl { flex: 1 1 auto; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4); }
.nav-item.disabled .pip { display: none; }
/* The label grows to fill the row, so the tag wraps onto its own line under the
   label - it can never overlap the text or spill past the rail, whatever the
   label length. */
.nav-item .feature-tag { margin: var(--sp-0) 0 0 var(--sp-6); font-size: var(--fs-2xs); padding: var(--sp-0) var(--sp-1h); }

.config-group-h {
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--dim);
  margin: 0 0 var(--sp-2);
}
.config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3h) var(--sp-4);
  border-bottom: var(--bw-hair) solid var(--line);
}
.config-row:last-child { border-bottom: none; }
.config-row.off { opacity: 0.6; }
.config-row-name { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.config-row-toggle { flex: 0 0 auto; }

.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }
.hero-stat {
  position: relative;
  padding: var(--sp-4) var(--sp-4h) var(--sp-3h);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--hc) 10%, transparent), transparent 55%),
    var(--surface);
  border: var(--bw-hair) solid color-mix(in srgb, var(--hc) 30%, var(--line));
  clip-path: var(--clip-sm);
  overflow: hidden;
}
.hero-stat::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--hc), transparent);
}
.hero-stat-k { font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.hero-stat-v { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 800; margin-top: var(--sp-1h); color: var(--hc); text-shadow: 0 0 22px color-mix(in srgb, var(--hc) 35%, transparent); font-variant-numeric: tabular-nums; }
.hero-stat-sub { font-size: var(--fs-sm); margin-top: var(--sp-1); }

.wr-pill {
  display: inline-block;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em;
  color: var(--danger);
  border: var(--bw-hair) solid color-mix(in srgb, currentcolor 45%, transparent);
  border-radius: var(--radius-pill);
  padding: var(--sp-0) var(--sp-2);
  margin-left: var(--sp-2);
  vertical-align: 1px;
  text-transform: none;
}
.wr-pill.hot { color: var(--good); }

.profit-panel { display: flex; flex-direction: column; gap: var(--sp-2); }
.profit-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); }
.profit-name { width: 110px; flex: none; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profit-track { flex: 1; display: flex; height: 12px; }
.profit-half { flex: 1; position: relative; overflow: hidden; }
.profit-half.neg { border-right: var(--bw-hair) solid rgba(255, 255, 255, 0.22); }
.profit-fill { position: absolute; top: 1px; bottom: 1px; border-radius: var(--radius-xs); }
.profit-fill.pos { left: 0; background: linear-gradient(90deg, rgba(74, 222, 128, 0.85), rgba(74, 222, 128, 0.35)); box-shadow: 0 0 10px rgba(74, 222, 128, 0.25); }
.profit-fill.neg { right: 0; background: linear-gradient(270deg, rgba(255, 80, 103, 0.85), rgba(255, 80, 103, 0.35)); box-shadow: 0 0 10px rgba(255, 80, 103, 0.25); }
.profit-amt { width: 84px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.profit-amt.v-pos { color: var(--good); }
.profit-amt.v-neg { color: var(--danger); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.stat-tile-v.v-pos { color: var(--good); }
.stat-tile-v.v-neg { color: var(--danger); }

.level-panel { padding: var(--sp-5) var(--sp-5); }
.level-panel-head { display: flex; align-items: center; gap: var(--sp-5); }
.level-panel-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; margin-bottom: var(--sp-1); }
.level-bar { margin-top: var(--sp-3); height: 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.level-bar-fill {
  height: 100%; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #ffd24d, #ff7847);
  transition: width var(--dur-slower) ease;
}
.xp-grid { gap: var(--sp-4); }

.stat-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.stat-group > * { margin: 0; }
.stat-group-h {
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sc, var(--dim));
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
}
.stat-group-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 35%, transparent), transparent);
}

.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th { text-align: left; font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw-hair) solid var(--line); }
.lb-table td { padding: var(--sp-2h) var(--sp-3); border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.04); font-size: var(--fs-lg); }
.lb-table tr.me td { background: rgba(255, 177, 61, 0.06); }
.lb-rank { font-family: var(--font-display); font-weight: 700; color: var(--dim); }
.lb-rank.top { color: var(--accent); }

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.inv-grid .item-card { width: 100%; }
.inv-summary { margin-left: auto; display: flex; gap: var(--sp-4); font-size: var(--fs-md); color: var(--dim); }
.inv-summary b { color: var(--text); font-family: var(--font-display); }
.sell-bar {
  position: sticky;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(16, 20, 27, 0.95);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.35);
  clip-path: var(--clip);
  padding: var(--sp-3) var(--sp-5);
  backdrop-filter: blur(6px);
}

.paged-grid .card-grid, .fill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.paged-grid .card-grid .item-card, .fill-grid .item-card { width: 100%; }
.modal .paged-grid .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* empty/placeholder note spans the whole grid so it centers across the panel and
   only wraps when the panel itself is narrow, instead of being boxed into one column */
.paged-grid .card-grid .empty-note { grid-column: 1 / -1; font-size: var(--fs-2xl); font-weight: 500; color: var(--text); }
.grid-search { width: 100%; }
.page-toolbar .grid-search { flex: 1; width: auto; min-width: 120px; }
.grid-filter, .grid-clear { flex: 0 0 auto; }
.grid-page-label { font-size: var(--fs-md); color: var(--dim); font-variant-numeric: tabular-nums; }

.ac-box { display: inline-block; }
.ac-menu {
  position: fixed;
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  z-index: var(--z-combobox);
  max-height: min(240px, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-xl);
}
.ac-item { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-md); cursor: pointer; white-space: nowrap; }
.ac-item:hover, .ac-item.active { background: rgba(255, 177, 61, 0.12); color: var(--accent); }

.toast-stack {
  position: fixed;
  top: calc(max(70px, calc(var(--topbar-h) + env(safe-area-inset-top))) + var(--banner-h));
  right: max(18px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast {
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  border-left: var(--bw-frame) solid var(--accent);
  padding: var(--sp-3) var(--sp-4h);
  font-size: var(--fs-md);
  font-weight: 500;
  clip-path: var(--clip-sm);
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--dur-slow), transform var(--dur-slow);
  max-width: 320px;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--good); }
.toast.achievement { border-left-color: var(--accent); max-width: 360px; padding: var(--sp-3) var(--sp-4); }

.ach-toast { display: flex; gap: var(--sp-3); align-items: center; }
.ach-toast-icon {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.ach-toast-body { min-width: 0; }
.ach-toast-label { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.ach-toast-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); margin: var(--sp-0) 0; }
.ach-toast-sub { color: var(--dim); font-size: var(--fs-base); }
.ach-toast-avatar { display: flex; align-items: center; gap: var(--sp-1h); margin-top: var(--sp-1h); font-size: var(--fs-sm); color: var(--good); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 9, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--dur-slow);
  padding: var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-overlay.show { opacity: 1; }
.modal {
  background: var(--surface);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.1);
  clip-path: var(--clip);
  padding: var(--sp-5h);
  width: 560px;
  max-width: 100%;
  margin: auto;
  position: relative;
  transform: scale(0.95);
  transition: transform var(--dur-slow);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-overlay.show .modal { transform: scale(1); }
.modal.wide { width: 940px; }
.modal:has(.clan-join-modal) { padding: var(--sp-6); }
.modal-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--fs-2xl);
  cursor: pointer;
  z-index: 2;
}
.modal-close:hover { color: var(--text); }
.confirm-box { display: flex; flex-direction: column; gap: var(--sp-3); }
.confirm-box .row { justify-content: flex-end; }

.spark {
  position: fixed;
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  pointer-events: none;
  z-index: var(--z-spark);
}

.empty-note { color: var(--dim); text-align: center; padding: var(--sp-7) var(--sp-5); font-size: var(--fs-lg); }

.skip-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  font-size: var(--fs-base);
  padding: var(--sp-1h) var(--sp-3h);
  background: rgba(20, 26, 35, 0.9);
  border-color: rgba(255, 177, 61, 0.4);
  color: var(--accent);
}
.skip-btn.static { position: static; margin-top: var(--sp-2h); }

.role-chip {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: var(--sp-0) var(--sp-2);
  margin-left: var(--sp-2);
  clip-path: var(--clip-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--dim);
  vertical-align: middle;
}
.role-chip.admin { background: rgba(255, 177, 61, 0.16); color: var(--accent); }
.role-chip.banned { background: rgba(255, 80, 103, 0.16); color: var(--danger); }
.role-chip.bot { background: rgba(139, 151, 168, 0.16); color: var(--dim); }
.role-chip.user { background: rgba(74, 222, 128, 0.13); color: var(--good); }
.role-chip.rename { background: rgba(255, 122, 61, 0.18); color: var(--accent2); }

.flag-name-target {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  background: var(--raised);
  border: var(--bw-hair) dashed var(--line);
  clip-path: var(--clip-sm);
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
.flag-name-target::selection { background: var(--danger); color: #fff; }

input.grayed { opacity: 0.35; }

.role-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3h);
  margin-bottom: var(--sp-2h);
  flex-wrap: wrap;
}
.role-row .role-key {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-base);
  width: 60px;
}
.role-row .role-chip { margin-left: 0; min-width: 64px; text-align: center; }
.role-row input[type="color"] {
  width: 42px;
  height: 34px;
  padding: var(--sp-0);
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  cursor: pointer;
}

.build-update {
  position: fixed;
  left: max(var(--sp-4), env(safe-area-inset-left));
  bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3h);
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  border-left: var(--bw-frame) solid var(--accent);
  box-shadow: var(--shadow-lg);
  clip-path: var(--clip-sm);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow), transform var(--dur-slow);
}
.build-update.show { opacity: 1; transform: none; }
.build-update > .cf-ico { color: var(--accent); }
.build-update-text { font-size: var(--fs-md); font-weight: 600; }
.build-update-go { padding: var(--sp-1h) var(--sp-3h); font-size: var(--fs-base); }
.build-update-close { width: 28px; height: 28px; }

@media (max-width: 560px) {
  .build-update { right: max(var(--sp-4), env(safe-area-inset-right)); }
  .build-update-text { flex: 1 1 auto; }
}

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--sp-3h); }
.chart-box { padding: var(--sp-2h) var(--sp-3h) var(--sp-1h); }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); margin-bottom: var(--sp-1h); flex-wrap: wrap; }
.chart-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.06em; }
.chart-legend { display: flex; gap: var(--sp-3h); font-size: var(--fs-sm); color: var(--dim); flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: var(--sp-1h); }
.legend-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); display: inline-block; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-tick { font-size: var(--fs-xs); fill: var(--dim); font-family: var(--font-body); }
.chart-big { padding: var(--sp-4h) var(--sp-5) var(--sp-3); }
.chart-big .chart-tick { font-size: var(--fs-base); }
.chart-big .chart-title { font-size: var(--fs-xl); }
.chart-big .chart-legend { font-size: var(--fs-md); }

.admin-table td { vertical-align: middle; }
.admin-table td > .role-chip { margin-left: 0; }
.admin-actions { display: flex; gap: var(--sp-1h); flex-wrap: wrap; }
.icon-btn.sm { width: 28px; height: 28px; font-size: var(--fs-md); }
.banned-row td { opacity: 0.55; }

.mini-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-1h); }
.mini-stat {
  font-size: var(--fs-base);
  color: var(--dim);
  background: var(--raised);
  padding: var(--sp-1) var(--sp-2h);
  clip-path: var(--clip-sm);
}
.mini-stat b { color: var(--text); }

.spark-box { position: relative; }
.spark-tip {
  position: absolute;
  top: 38px;
  pointer-events: none;
  background: rgba(7, 9, 13, 0.92);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-1h) var(--sp-2h);
  font-size: var(--fs-sm);
  min-width: 96px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 3;
  box-shadow: var(--shadow-lg);
}
.spark-tip-t { color: var(--dim); margin-bottom: var(--sp-1); font-variant-numeric: tabular-nums; }
.spark-tip-r { display: flex; align-items: center; gap: var(--sp-1h); }
.spark-tip-r span:last-child { font-variant-numeric: tabular-nums; }

.metrics-lower { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--sp-3h); }

.avail-head { display: flex; align-items: baseline; gap: var(--sp-2h); margin: var(--sp-1h) 0 var(--sp-2); flex-wrap: wrap; }
.avail-pct { font-family: var(--font-display); font-size: var(--fs-7xl); font-weight: 700; line-height: var(--lh-none); }
.avail-bar { margin-bottom: var(--sp-3); }

.deploy-list { display: flex; flex-direction: column; gap: var(--sp-0); max-height: 232px; overflow-y: auto; }
.deploy-row { display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-1h) var(--sp-1); border-bottom: var(--bw-hair) solid var(--line); font-size: var(--fs-md); }
.deploy-row:last-child { border-bottom: 0; }
.deploy-row.live { background: rgba(74, 222, 128, 0.05); }
.deploy-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--dim); flex: none; }
.deploy-dot.pulse { background: var(--good); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: pulse-glow 2s infinite; }
.deploy-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.deploy-label { margin-left: var(--sp-0); font-size: var(--fs-base); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.down-badge { flex: none; margin-left: auto; font-size: var(--fs-sm); padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); white-space: nowrap; font-weight: 600; }
.down-badge.first { background: var(--raised); color: var(--dim); }

.tbar-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.tbar-row { display: flex; align-items: center; gap: var(--sp-2h); font-size: var(--fs-base); }
.tbar-name { width: 120px; flex: none; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbar-val { width: 56px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

.db-explorer { display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-3h); align-items: start; }
.db-tablelist-wrap { padding: var(--sp-2h); display: flex; flex-direction: column; gap: var(--sp-2); }
.db-list-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--sp-1); }
.db-list-title { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
.db-list-total { font-size: var(--fs-sm); color: var(--dim); opacity: 0.8; font-variant-numeric: tabular-nums; }
.db-tablefilter { width: 100%; font-size: var(--fs-md); padding: var(--sp-1h) var(--sp-2h); }
.db-tablelist { display: flex; flex-direction: column; gap: var(--sp-1); overflow-y: auto; max-height: 540px; scrollbar-width: thin; }
.db-table-btn {
  display: flex; flex-direction: column; gap: var(--sp-1h); flex: none;
  width: 100%; text-align: left; padding: var(--sp-2) var(--sp-2h);
  background: transparent; border: var(--bw-hair) solid transparent; border-radius: var(--radius-md);
  color: var(--dim); cursor: pointer; font-size: var(--fs-md);
}
.db-table-btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.db-table-btn.active { background: rgba(255, 177, 61, 0.08); border-color: rgba(255, 177, 61, 0.35); color: var(--accent); }
.db-table-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; min-width: 0; }
.db-table-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-table-count { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); opacity: 0.8; flex: none; }
.db-table-btn.active .db-table-fill,
.db-table-btn.active .db-table-meter .meter-fill { opacity: 1; }
.db-tableview { padding: var(--sp-3h) var(--sp-4); min-width: 0; }
.db-view-title { font-family: var(--font-display); font-size: var(--fs-xl); display: flex; align-items: baseline; gap: var(--sp-2); }
.db-rowcount { font-weight: 400; font-size: var(--fs-base); }
.db-search { margin-left: auto; width: 220px; max-width: 100%; }
.db-grid-scroll { overflow-x: auto; border: var(--bw-hair) solid var(--line); border-radius: var(--radius-sm); }
.db-grid { width: 100%; font-size: var(--fs-base); }
.db-grid th { white-space: nowrap; }
.db-grid td { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-pk { font-size: var(--fs-2xs); color: var(--accent); margin-left: var(--sp-1h); border: var(--bw-hair) solid rgba(255, 177, 61, 0.4); border-radius: var(--radius-xs); padding: 0 var(--sp-1); }
.db-null { color: var(--dim); font-style: italic; opacity: 0.6; }
.db-mask { color: var(--danger); letter-spacing: 1px; }

.bulk-area {
  width: 100%; resize: vertical; min-width: 0;
  background: var(--raised); border: var(--bw-hair) solid var(--line); color: var(--text);
  border-radius: var(--radius-sm); padding: var(--sp-2h); font: inherit; font-size: var(--fs-md); line-height: 1.5;
}

.item-card-acts { gap: var(--sp-1); }
.item-card-id { flex: 0 0 auto; }
.item-card-rm { flex: 1 1 auto; }

@media (max-width: 860px) {
  .db-explorer { grid-template-columns: 1fr; }
  .db-tablelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-1h); max-height: 230px; }
  .db-search { width: 100%; margin-left: 0; }
}

.fair-title { font-family: var(--font-display); font-size: var(--fs-3xl); }
.fair-intro { font-size: var(--fs-md); margin-bottom: var(--sp-3); line-height: var(--lh-normal); }
.fair-field { margin-bottom: var(--sp-3); }
.fair-field-label { font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-1h); }
.fair-field-row { display: flex; align-items: center; gap: var(--sp-2); }
.fair-code {
  display: block; flex: 1; min-width: 0; background: var(--raised); border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-2h); font-family: var(--font-mono); font-size: var(--fs-base);
  color: var(--text); overflow-wrap: anywhere; word-break: break-all;
}
.fair-code.mono { letter-spacing: 0.02em; }
.copy-btn { flex: none; }
.fair-rotate { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; margin: var(--sp-3h) 0; }
.fair-prev { margin-top: var(--sp-2h); padding: var(--sp-3h); }
.fair-prev-h { font-family: var(--font-display); font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: var(--sp-2h); }

.fair-bets { display: flex; flex-direction: column; gap: var(--sp-2); }
.fair-bet-row { border: var(--bw-hair) solid var(--line); border-radius: var(--radius-md); padding: var(--sp-2h) var(--sp-3); background: var(--raised); }
.fair-bet-main { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.fair-game-tag { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); }
.fair-game-tag.mines { background: rgba(255, 80, 103, 0.16); color: #ff7a86; }
.fair-game-tag.plinko { background: rgba(136, 71, 255, 0.16); color: #b18cff; }
.fair-game-tag.crash { background: rgba(74, 222, 128, 0.16); color: var(--good); }
.fair-game-tag.blackjack { background: rgba(65, 224, 200, 0.16); color: var(--teal); }
.fair-game-tag.upgrade { background: rgba(211, 44, 230, 0.16); color: #e36ff0; }
.fair-game-tag.tradeup { background: rgba(75, 159, 255, 0.16); color: #6db3ff; }
.fair-bet-time { font-size: var(--fs-base); white-space: nowrap; }
.fair-bet-wager { font-variant-numeric: tabular-nums; }
.fair-bet-mult { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.fair-bet-profit { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.fair-bet-profit.pos { color: var(--good); }
.fair-bet-profit.neg { color: var(--danger); }
.fair-bet-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-sm); flex-wrap: wrap; }
.fair-bet-meta .fair-code { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2); }
.fair-meta-tag { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-xs); opacity: 0.7; }
.fair-nonce { display: inline-flex; align-items: center; gap: var(--sp-1h); flex: none; background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-1) var(--sp-0) var(--sp-2h); }
.fair-nonce-k { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-xs); opacity: 0.7; }
.fair-nonce-v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2); font-size: var(--fs-sm); }
.fair-verify-result { display: block; margin-top: var(--sp-2); font-size: var(--fs-base); font-weight: 600; }
.fair-verify-result.pass { color: var(--good); }
.fair-verify-result.fail { color: var(--danger); }
.fair-verify-result.pending { color: var(--accent); }

.fair-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--raised); border: var(--bw-hair) solid var(--line); color: var(--dim);
  border-radius: var(--radius-pill); padding: var(--sp-1h) var(--sp-3); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
.fair-badge:hover { color: var(--text); border-color: rgba(74, 222, 128, 0.4); }
.fair-badge-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--good); box-shadow: 0 0 6px rgba(74, 222, 128, 0.7); }
.fair-badge.off { border-color: rgba(255, 80, 103, 0.4); }
.fair-badge.off .fair-badge-dot { background: var(--danger); box-shadow: 0 0 6px rgba(255, 80, 103, 0.7); }

.fair-disabled-banner {
  background: rgba(255, 80, 103, 0.1); border: var(--bw-hair) solid rgba(255, 80, 103, 0.4);
  border-radius: var(--radius-md); padding: var(--sp-2h) var(--sp-3h); margin-bottom: var(--sp-3h); font-size: var(--fs-md); color: var(--text);
}
.fair-disabled-banner strong { color: var(--danger); display: block; margin-bottom: var(--sp-1); }
.fair-disabled-banner div { color: var(--dim); }

.fair-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.fair-calc-field { display: flex; flex-direction: column; gap: var(--sp-1h); }
.fair-calc-field .fair-field-label { margin: 0; }
.fair-calc-in, .fair-calc-field input, .fair-calc-field select { width: 100%; min-width: 0; }
.fair-calc-out { margin-top: var(--sp-3h); display: flex; flex-direction: column; gap: var(--sp-2h); }
.fair-calc-headline { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--accent); }

.pb-banner { display: flex; align-items: center; gap: var(--sp-2h); background: color-mix(in srgb, var(--accent) 10%, transparent); border: var(--bw-hair) solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius-md); padding: var(--sp-2h) var(--sp-3); font-size: var(--fs-md); color: var(--dim); flex-wrap: wrap; }
.pb-tag { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.12em; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill); flex: none; }
.pb-hand-val { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.pb-reveal { animation: pb-pop var(--dur-slow) both; }
/* game titles are proper names, so the .panel-heading uppercase is cancelled */
.pb-title { display: flex; align-items: center; gap: var(--sp-2h); min-width: 0; font-family: var(--font-display); font-size: var(--fs-3xl); text-transform: none; letter-spacing: normal; }
.pb-title-text { min-width: 0; overflow-wrap: anywhere; }
.pb-caption { text-align: center; font-size: var(--fs-md); color: var(--text); }

/* explicit width: pb-body is a flex column and the auto margin cancels
   stretch, so a max-width-only grid would collapse to fit-content */
.pb-mines { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); width: min(320px, 100%); margin: 0 auto; }
.pb-cell { aspect-ratio: 1; border-radius: var(--radius-md); border: var(--bw-hair) solid var(--line); }
.pb-cell.covered { background: var(--raised); }
.pb-cell.safe { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.4); }
.pb-cell.safe.reveal { animation: pb-pop var(--dur-slow) both; }
.pb-cell.mine { background: rgba(255, 80, 103, 0.22); border-color: rgba(255, 80, 103, 0.55); }
.pb-cell.mine.dim { background: rgba(255, 80, 103, 0.12); opacity: 0.55; }
.pb-cell.mine.boom { background: rgba(255, 80, 103, 0.5); border-color: var(--danger); box-shadow: 0 0 14px rgba(255, 80, 103, 0.7); animation: pb-pop var(--dur-slow) both; }
@keyframes pb-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.pb-plinko { width: min(560px, 100%); margin: 0 auto; }
.pb-plinko-lane { position: relative; height: 60px; }
.pb-plinko-ball {
  position: absolute; width: 12px; height: 12px; border-radius: var(--radius-circle);
  background: radial-gradient(circle at 35% 30%, #ffe4a3, var(--accent) 72%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transform: translateX(-50%); animation: pb-drop 0.8s ease-in both;
}
@keyframes pb-drop { from { top: -10px; opacity: 0; } to { top: var(--rest, 48px); opacity: 1; } }
.pb-plinko-row { display: flex; gap: var(--sp-1h); }
.pb-slot { flex: 1; text-align: center; font-size: var(--fs-xs); padding: var(--sp-1h) var(--sp-1); border-radius: var(--radius-sm); background: var(--raised); color: var(--dim); font-variant-numeric: tabular-nums; }
.pb-slot.hit { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #1a1208; font-weight: 700; }

.pb-cards { display: flex; gap: var(--sp-2); }
/* Same visual language as the live .playing-card in blackjack-upgrader-tradeup.css,
   at playback's compact size. Keep the two in step. */
.pb-card {
  width: 46px;
  height: 64px;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, 0.022) 7px 8px),
    linear-gradient(158deg, #262f3b, #161c25 62%, #10151c);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.16);
  clip-path: var(--clip-sm);
  color: #e9f0f8;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  position: relative;
  box-shadow: var(--shadow-md);
  animation: pb-pop var(--dur-slower) both;
}
.pb-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--bw-thick);
  background: currentColor;
  opacity: 0.55;
}
.pb-card .pb-card-suit { width: 0.9em; height: 0.9em; }
.pb-card.red { color: #ff7183; }

.pb-upg { display: flex; flex-direction: column; gap: var(--sp-5); width: 100%; }

.pb-upg-trade { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-3h); }
.pb-upg-trade.tu { grid-template-columns: minmax(0, 1fr) auto; }
.pb-upg-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.pb-upg-col-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.pb-upg-col-k { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.pb-upg-state { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--sp-0) var(--sp-1h); clip-path: var(--clip-sm); }
.pb-upg-state.gone { background: rgba(255, 80, 103, 0.16); color: #ff8b96; }
.pb-upg-state.used, .pb-upg-state.kept { background: rgba(74, 222, 128, 0.16); color: var(--good); }
.pb-upg-plain {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1);
  padding: var(--sp-3h); background: var(--sunken); box-shadow: inset 0 0 0 var(--bw-hair) var(--line); clip-path: var(--clip-sm);
}
.pb-upg-plain-v { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.pb-upg-plain-k { font-size: var(--fs-base); color: var(--dim); }
.pb-upg-ids { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--dim); overflow-wrap: anywhere; }
.pb-upg-note { font-size: var(--fs-sm); color: var(--dim); line-height: var(--lh-snug); opacity: 0.8; }
.pb-upg-slot { display: flex; justify-content: center; }
/* one spent treatment: the target that was not awarded and the items that were
   consumed read the same way */
.pb-upg-slot.missed .item-card,
.pb-stakes .item-card { filter: grayscale(0.7); opacity: 0.55; }
.pb-upg-plain.stakes { justify-content: flex-start; gap: var(--sp-2h); }
.pb-upg-plain.stakes .pb-upg-plain-v { font-size: var(--fs-3xl); }
.pb-stakes-h { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.pb-stakes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-2); justify-items: center; }
.pb-stakes:empty { display: none; }
.pb-upg-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0); min-width: 96px; }
.pb-upg-chance { font-family: var(--font-display); font-size: var(--fs-7xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: var(--lh-none); }
.pb-upg-chance-k { font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.pb-upg-mid-arrow { display: block; color: var(--dim); margin: var(--sp-2) 0; }
.pb-upg-mid-arrow .cf-ico { width: 22px; height: 22px; }
.pb-upg-odds { font-size: var(--fs-base); color: var(--dim); font-variant-numeric: tabular-nums; }

.pb-upg-track { display: flex; justify-content: center; }
.pb-upg-plot { --pb-bar-h: 32px; --pb-chip-half: 30px; width: 100%; max-width: 560px; padding: var(--sp-5h) var(--sp-0) 0; box-sizing: border-box; }
.pb-upg-bar { position: relative; height: var(--pb-bar-h); border-radius: var(--radius-pill); background: rgba(255, 80, 103, 0.14); box-shadow: inset 0 0 0 var(--bw-hair) rgba(255, 80, 103, 0.3); }
.pb-upg-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; box-sizing: border-box;
  border-right: var(--bw-thick) solid var(--good);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.34), rgba(74, 222, 128, 0.16));
}
.pb-upg-ticks { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 var(--bw-hair), transparent var(--bw-hair) 10%); }
.pb-upg-flag {
  position: absolute; bottom: calc(100% + var(--sp-1h)); left: var(--pb-chip-half); transform: translateX(-50%);
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-sm);
  background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 var(--bw-hair) var(--line);
}
.pb-upg-needle {
  position: absolute; top: calc(var(--sp-1h) * -1); height: calc(100% + var(--sp-3)); left: 0;
  width: var(--bw-frame); transform: translateX(-50%); border-radius: var(--radius-pill);
  color: var(--text); background: currentColor;
}
.pb-upg-bar.won .pb-upg-needle { color: var(--good); }
.pb-upg-bar.lost .pb-upg-needle { color: var(--danger); }
.pb-upg-bar.won .pb-upg-flag { color: var(--good); box-shadow: inset 0 0 0 var(--bw-hair) rgba(74, 222, 128, 0.5); }
.pb-upg-bar.lost .pb-upg-flag { color: var(--danger); box-shadow: inset 0 0 0 var(--bw-hair) rgba(255, 80, 103, 0.5); }

/* the replay is pure CSS: the .run class is removed, layout is flushed, then
   re-added, so re-pressing Replay restarts instead of stacking. The verification
   pane never fires rAF, so nothing here may depend on it. */
.pb-upg-bar.run .pb-upg-fill { width: var(--zone); transition: width var(--dur-slowest) var(--ease-out); }
.pb-upg-bar.run .pb-upg-needle {
  left: var(--roll);
  transition: left calc(var(--dur-slowest) * 1.8) var(--ease-out-soft);
  animation: pb-upg-land var(--dur-slower) calc(var(--dur-slowest) * 1.8) both;
}
.pb-upg-bar.run .pb-upg-flag {
  left: clamp(var(--pb-chip-half), var(--roll), calc(100% - var(--pb-chip-half)));
  transition: left calc(var(--dur-slowest) * 1.8) var(--ease-out-soft);
  animation: pb-upg-flag-in var(--dur-slower) calc(var(--dur-slowest) * 1.8) both;
}
@keyframes pb-upg-land { from { box-shadow: 0 0 0 currentColor; } to { box-shadow: 0 0 10px currentColor; } }
@keyframes pb-upg-flag-in {
  from { opacity: 0.4; transform: translateX(-50%) scale(0.92); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.pb-upg-axis { position: relative; height: var(--sp-5); margin-top: var(--sp-1h); }
.pb-upg-axis::before { content: ''; position: absolute; top: 0; left: var(--zone); width: var(--bw-hair); height: var(--sp-2); background: var(--good); opacity: 0.55; }
.pb-upg-edge {
  position: absolute; top: var(--sp-2h); left: clamp(var(--pb-chip-half), var(--zone), calc(100% - var(--pb-chip-half)));
  transform: translateX(-50%); white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--good);
}

.pb-upg-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-base); }
.pb-upg-key { display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-1) var(--sp-2h); color: var(--dim); background: var(--sunken); box-shadow: inset 0 0 0 var(--bw-hair) var(--line); clip-path: var(--clip-sm); }
.pb-upg-swatch { flex: none; width: 10px; height: 10px; border-radius: var(--radius-xs); background: var(--dim); }
.pb-upg-key.win .pb-upg-swatch { background: rgba(74, 222, 128, 0.55); }
.pb-upg-key.lose .pb-upg-swatch { background: rgba(255, 80, 103, 0.45); }
.pb-upg-key.roll .pb-upg-swatch { width: var(--bw-frame); height: 14px; border-radius: var(--radius-pill); }
.pb-upg-key.roll.win .pb-upg-swatch { background: var(--good); }
.pb-upg-key.roll.lose .pb-upg-swatch { background: var(--danger); }
.pb-upg-key-v { color: var(--text); font-variant-numeric: tabular-nums; }

.pb-ver { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3h); background: var(--sunken); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-lg); }
.pb-ver-h { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pb-ver-ico { width: 16px; height: 16px; color: var(--accent); flex: none; }
.pb-ver-title { font-family: var(--font-display); font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.08em; }
.pb-ver-nonce { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.pb-ver-nonce b { color: var(--accent); font-variant-numeric: tabular-nums; font-size: var(--fs-base); }
.pb-ver-recipe { margin: 0; font-size: var(--fs-base); color: var(--dim); line-height: var(--lh-snug); }
.pb-ver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-2h); }
.pb-ver-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pb-ver-field:has(.wide) { grid-column: 1 / -1; }
.pb-ver-k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); }
.pb-ver-v {
  display: block; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text);
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-1h) var(--sp-2); overflow-wrap: anywhere; user-select: all;
}
.pb-ver-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); line-height: var(--lh-snug); }
.pb-ver-check .cf-ico { flex: none; width: 14px; height: 14px; }
.pb-ver-check.pass { color: var(--good); }
.pb-ver-check.fail { color: var(--danger); }

.pb-ver-layer { display: flex; flex-direction: column; gap: var(--sp-2h); padding: var(--sp-3) var(--sp-3h) var(--sp-3h); background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-md); }
.pb-ver-layer-h { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pb-ver-step {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-none);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); clip-path: var(--clip-sm);
}
.pb-ver-layer-t { font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: 0.06em; text-transform: uppercase; }
.pb-ver-chip {
  margin-left: auto; flex: 0 1 auto; min-width: 0;
  font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-snug);
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05); color: var(--dim); overflow-wrap: anywhere;
}
.pb-ver-chip.ok { background: rgba(74, 222, 128, 0.14); color: var(--good); }
.pb-ver-chip.warn { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pb-ver-chip.bad { background: rgba(255, 80, 103, 0.14); color: var(--danger); }
.pb-ver-chip.wait { background: rgba(255, 255, 255, 0.05); color: var(--dim); }
.pb-ver-lead { margin: 0; font-size: var(--fs-base); color: var(--dim); line-height: var(--lh-snug); }
.pb-ver-note { font-size: var(--fs-sm); color: var(--dim); line-height: var(--lh-snug); opacity: 0.85; margin: 0; }
.pb-ver-note:empty { display: none; }

.pb-ver-rows { display: flex; flex-direction: column; gap: var(--sp-1h); }
.pb-ver-rows:empty { display: none; }
.pb-ver-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sp-2); align-items: start; }
.pb-ver-row-ico { width: 13px; height: 13px; margin-top: var(--sp-0); color: var(--dim); }
.pb-ver-row.ok .pb-ver-row-ico { color: var(--good); }
.pb-ver-row.bad .pb-ver-row-ico { color: var(--danger); }
.pb-ver-row.warn .pb-ver-row-ico { color: var(--accent); }
.pb-ver-row-body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-0); }
.pb-ver-row-k { font-size: var(--fs-base); color: var(--dim); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.pb-ver-row.bad .pb-ver-row-k, .pb-ver-row.ok .pb-ver-row-k { color: var(--text); }
.pb-ver-row-vals { display: flex; align-items: baseline; gap: var(--sp-1h); flex-wrap: wrap; min-width: 0; }
.pb-ver-row-v {
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text);
  background: var(--sunken); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-xs);
  padding: var(--sp-0) var(--sp-1h); overflow-wrap: anywhere; user-select: all; min-width: 0;
}
.pb-ver-row-v.match { color: var(--good); border-color: rgba(74, 222, 128, 0.32); }
.pb-ver-row.bad .pb-ver-row-v { border-color: rgba(255, 80, 103, 0.35); }
.pb-ver-row-vs { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); flex: none; }
.pb-ver-row-why { font-size: var(--fs-sm); color: var(--accent); line-height: var(--lh-snug); opacity: 0.9; }

.pb-ver-acts { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.pb-ver-hint { flex: 1 1 220px; min-width: 0; font-size: var(--fs-sm); color: var(--dim); line-height: var(--lh-snug); }

.pb-item-wrap { display: flex; justify-content: center; }
.pb-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }

/* a side-by-side column is too narrow for more than one consumed card per row,
   so the trade layout stacks well before the phone breakpoint */
@media (max-width: 860px) {
  .pb-upg-trade, .pb-upg-trade.tu { grid-template-columns: minmax(0, 1fr); }
  .pb-upg-mid { flex-direction: row; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--sp-2h); }
  .pb-upg-mid-arrow { display: none; }
}
@media (max-width: 640px) {
  .pb-upg { gap: var(--sp-4); }
  .pb-upg-chance { font-size: var(--fs-6xl); }
}
@media (max-width: 400px) {
  .pb-upg-plot { --pb-chip-half: 26px; }
  .pb-upg-plain-v { font-size: var(--fs-5xl); }
}

/* the verdict chip is a sentence, so it takes its own line before it can squeeze
   the layer title into vertical text */
@media (max-width: 560px) {
  .pb-ver { padding: var(--sp-3); }
  .pb-ver-layer { padding: var(--sp-2h) var(--sp-3) var(--sp-3); }
  .pb-ver-chip { margin-left: 0; flex-basis: 100%; }
  .pb-ver-row { grid-template-columns: 14px minmax(0, 1fr); gap: var(--sp-1h); }
  .fair-bet-profit { margin-left: 0; }
  .fair-bet-meta { flex-wrap: wrap; }
  .fair-calc-grid { grid-template-columns: 1fr; }
}

.avatar {
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  overflow: hidden;
  vertical-align: middle;
}
.avatar svg { width: 68%; height: 68%; }

.profile-wrap { position: relative; }
.profile-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  padding: var(--sp-1h) var(--sp-3) var(--sp-1h) var(--sp-1h);
  cursor: pointer;
  clip-path: var(--clip-sm);
  transition: border-color var(--dur-base), background var(--dur-base);
}
.profile-chip:hover { border-color: rgba(255, 177, 61, 0.4); background: #1a212c; }
.profile-name {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.profile-chip .caret { display: grid; place-items: center; color: var(--dim); }
.profile-chip .caret .cf-ico { width: 10px; height: 10px; }
.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--raised);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.1);
  clip-path: var(--clip-sm);
  padding: var(--sp-1h);
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-xl);
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  padding: var(--sp-2h) var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  clip-path: var(--clip-sm);
}
.profile-menu-item:hover { background: rgba(255, 177, 61, 0.1); color: var(--accent); }
.profile-menu-item .ico { width: 16px; text-align: center; }
.profile-menu-item.disabled { color: var(--dim); }
.profile-menu-item.disabled:hover { background: rgba(255, 80, 103, 0.08); color: var(--dim); }
.profile-menu-item .feature-tag { margin-left: auto; }

.notif-wrap { position: relative; display: flex; }
.notif-bell { position: relative; }
.notif-bell.has-unread { color: var(--accent); }
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 var(--sp-1);
  display: grid; place-items: center; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 800; line-height: var(--lh-none); font-variant-numeric: tabular-nums;
  color: #1a0f00; background: linear-gradient(135deg, #ffd24d, #ff7a2f);
  box-shadow: 0 0 0 2px #0e1420, 0 0 10px rgba(255, 154, 61, 0.55);
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(384px, 92vw);
  max-height: min(72vh, 560px); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(24, 30, 40, 0.98), rgba(15, 19, 27, 0.98));
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl); backdrop-filter: blur(12px);
  z-index: var(--z-popover); animation: notif-pop 0.16s ease-out;
}
@keyframes notif-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h);
  padding: var(--sp-3h) var(--sp-4); border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02);
}
.notif-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.14em; color: var(--text); }
.notif-clear {
  background: none; border: var(--bw-hair) solid var(--line); color: var(--dim);
  font-size: var(--fs-sm); font-weight: 700; padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill); cursor: pointer;
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.notif-clear:hover { color: var(--danger); border-color: rgba(255, 80, 103, 0.5); background: rgba(255, 80, 103, 0.08); }
.notif-list { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-1h); }
.notif-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: var(--radius-lg); position: relative; transition: background var(--dur-base); }
.notif-item:hover { background: rgba(255, 255, 255, 0.04); }
.notif-item.unread { background: rgba(255, 177, 61, 0.06); }
.notif-item.unread::before {
  content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: var(--radius-xs); background: var(--accent);
}
.notif-ico {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05); border: var(--bw-hair) solid rgba(255, 255, 255, 0.08); color: var(--accent);
}
.notif-ico .cf-ico { width: 17px; height: 17px; }
.notif-main { flex: 1; min-width: 0; }
.notif-row-top { display: flex; align-items: baseline; gap: var(--sp-2); }
.notif-name { font-size: var(--fs-md); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { margin-left: auto; font-size: var(--fs-sm); color: var(--dim); white-space: nowrap; flex: none; }
.notif-body { font-size: var(--fs-base); color: #b9c4d2; line-height: 1.45; margin-top: var(--sp-0); word-break: break-word; }
.notif-body b { color: var(--text); font-weight: 700; }
.notif-actions { flex: none; display: flex; align-items: center; gap: var(--sp-1h); align-self: center; }
.notif-act { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-md); cursor: pointer; border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.04); transition: background var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base); }
.notif-act .cf-ico { width: 15px; height: 15px; }
.notif-act.accept { color: var(--good); }
.notif-act.accept:hover { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.6); box-shadow: 0 0 12px rgba(74, 222, 128, 0.25); }
.notif-act.reject { color: var(--danger); }
.notif-act.reject:hover { background: rgba(255, 80, 103, 0.16); border-color: rgba(255, 80, 103, 0.6); box-shadow: 0 0 12px rgba(255, 80, 103, 0.2); }
.notif-resolved { flex: none; align-self: center; transform: translateY(-2px); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); border: var(--bw-hair) solid var(--line); white-space: nowrap; text-transform: uppercase; }
.notif-act.jump { color: var(--accent); }
.notif-act.jump:hover { background: rgba(255, 177, 61, 0.14); border-color: rgba(255, 177, 61, 0.55); box-shadow: 0 0 12px rgba(255, 177, 61, 0.22); }
.notif-resolved.accept { color: var(--good); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); }
.notif-resolved.reject { color: var(--dim); }
.notif-resolved.expired { color: var(--dim); border-color: var(--line); }
.notif-item.expired { opacity: 0.55; }
.notif-item.clickable { cursor: pointer; }
.notif-panel .empty-note .cf-ico { width: 30px; height: 30px; opacity: 0.4; }
.notif-backdrop { display: none; }

@media (max-width: 720px) {
  .notif-panel {
    position: fixed; top: 64px; right: 8px; left: auto; bottom: auto;
    width: min(360px, calc(100vw - 16px)); max-width: none; max-height: min(74vh, 560px);
  }
  .notif-head { padding: var(--sp-3h) var(--sp-4) var(--sp-3); }
  .notif-list { padding: var(--sp-1h) var(--sp-1h) var(--sp-2h); }
  .notif-item { padding: var(--sp-3h); gap: var(--sp-3); }
  .notif-ico { width: 38px; height: 38px; }
  .notif-act { width: 34px; height: 34px; }
  .notif-name { font-size: var(--fs-lg); }
  .notif-body { font-size: var(--fs-md); }
}
@media (max-width: 400px) {
  .notif-item { flex-wrap: wrap; }
  .notif-actions { width: 100%; justify-content: flex-end; padding-left: calc(38px + var(--sp-3)); }
}

.avatar-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2h); }
.avatar-pick {
  background: none;
  border: var(--bw-thick) solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--sp-1);
  cursor: pointer;
  transition: transform var(--dur-fast), border-color var(--dur-base);
}
.avatar-pick:hover { transform: scale(1.08); }
.avatar-pick.active { border-color: var(--accent); }
.avatar-pick.locked { position: relative; cursor: not-allowed; }
.avatar-pick.locked .avatar { filter: grayscale(1) brightness(0.5); opacity: 0.6; }
.avatar-pick.locked:hover { transform: none; }
.avatar-lock {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-3xl); pointer-events: none;
}


.ach-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-4h); align-items: start; }
.ach-nav { display: flex; flex-direction: column; gap: var(--sp-2); position: sticky; top: 76px; }
.ach-cat {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2);
  background: var(--raised); border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-3h) var(--sp-3h);
  color: var(--text); font: inherit;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.ach-cat:hover { border-color: color-mix(in srgb, var(--ac) 40%, var(--line)); }
.ach-cat.active {
  border-color: color-mix(in srgb, var(--ac) 60%, var(--line));
  background: color-mix(in srgb, var(--ac) 12%, var(--raised));
}
.ach-cat-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: 0.02em; }
.ach-cat-count { font-size: var(--fs-base); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ach-cat.active .ach-cat-count { color: var(--text); }
.ach-cat-bar {
  grid-column: 1 / -1; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(255, 255, 255, 0.06);
}
.ach-cat-fill { height: 100%; background: var(--ac); transition: width var(--dur-slower); }
.ach-panel { min-width: 0; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }

.ach-card {
  display: flex; gap: var(--sp-3h); align-items: flex-start;
  background: var(--raised); border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-xl); padding: var(--sp-3h);
  transition: border-color var(--dur-base), transform var(--dur-fast);
}
.ach-card.unlocked { border-color: color-mix(in srgb, var(--ac) 45%, var(--line)); }
.ach-card.locked { opacity: 0.74; }
.ach-card.locked .ach-icon { filter: grayscale(0.85) brightness(0.72); }
.ach-icon {
  width: 50px; height: 50px; flex: 0 0 50px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.ach-icon .cf-ico { width: 27px; height: 27px; color: #190d02; }
.ach-body { min-width: 0; flex: 1; }
.ach-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ach-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); }
.ach-state { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); font-weight: 700; white-space: nowrap; }
.ach-state.done { color: var(--good); }
.ach-req { color: var(--dim); font-size: var(--fs-base); margin-top: var(--sp-0); }
.ach-rewards { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.ach-xp {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--accent); background: rgba(255, 177, 61, 0.13);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.3); border-radius: var(--radius-sm); padding: var(--sp-0) var(--sp-2);
}
.ach-avatar-reward {
  display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-sm); color: var(--dim);
  background: rgba(255, 255, 255, 0.04); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-0) var(--sp-2) var(--sp-0) var(--sp-1);
}
.ach-progress { display: flex; align-items: center; gap: var(--sp-2h); margin-top: var(--sp-2h); }
.ach-progress-num { font-size: var(--fs-sm); color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ach-unlocked-at { font-size: var(--fs-sm); color: var(--dim); margin-top: var(--sp-2); }

@media (max-width: 720px) {
  .ach-layout { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ach-nav {
    position: static; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-2); max-height: 260px; overflow-y: auto; padding: var(--sp-0);
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .ach-cat { min-width: 0; padding: var(--sp-2h) var(--sp-3) var(--sp-3); }
}

.lb-player { display: inline-flex; align-items: center; gap: var(--sp-2); }
.lb-name-cell { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.lb-name-cell .role-chip { margin-left: 0; }

.rank-badge { display: inline-grid; place-items: center; flex-shrink: 0; vertical-align: middle; }
.rank-badge svg { width: 100%; height: 100%; }

.level-badge { display: inline-grid; place-items: center; flex: none; vertical-align: middle; line-height: 0; }
.level-badge svg { width: 100%; height: 100%; }
.level-badge.max { animation: lvl-pulse 2.4s ease-in-out infinite; }
@keyframes lvl-pulse { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255,120,71,.5)); } 50% { filter: drop-shadow(0 0 6px rgba(255,120,71,.85)); } }

.env-badge {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: var(--sp-1) var(--sp-2);
  background: rgba(255, 80, 103, 0.16);
  color: var(--danger);
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.4);
  clip-path: var(--clip-sm);
  margin-left: var(--sp-2);
  animation: pulse-glow 3s infinite;
}
.captcha-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; }
.captcha-q { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); color: var(--accent); white-space: nowrap; }
/* beats the .auth-box input { width: 100% } rule so the row stays on one line */
.auth-box .captcha-in, .captcha-in { width: 70px; flex: 0 0 70px; text-align: center; }
.captcha-row .icon-btn { flex: 0 0 auto; }
.captcha-q svg { display: block; height: 40px; width: auto; max-width: 100%; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mines-layout { display: grid; grid-template-columns: minmax(320px, 520px) minmax(280px, 360px); gap: var(--sp-5); align-items: start; }
.mines-board { display: grid; place-items: center; }
.mines-grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); width: min(440px, 100%); }
.mine-tile {
  aspect-ratio: 1;
  background: linear-gradient(160deg, #1b2330, #11161f);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-base), transform var(--dur-instant), border-color var(--dur-base), opacity var(--dur-slowest), filter var(--dur-slowest);
}
.mine-tile .mt-face { display: block; font-size: var(--fs-4xl); line-height: var(--lh-none); }
.mine-tile:hover:not(:disabled) { background: #232d3d; border-color: rgba(255, 210, 77, 0.45); transform: translateY(-2px); }
.mine-tile:active:not(:disabled) { transform: translateY(0) scale(0.96); }
.mine-tile:disabled { cursor: default; }
.mine-tile.safe { background: radial-gradient(circle at 50% 42%, rgba(74, 222, 128, 0.22), rgba(74, 222, 128, 0.05) 75%); border-color: rgba(74, 222, 128, 0.5); color: var(--good); }
.mine-tile.safe .mt-face { animation: gem-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); text-shadow: 0 0 12px rgba(74, 222, 128, 0.8); }
.mine-tile.dud { opacity: 0.32; filter: grayscale(0.7); }
.mine-tile.armed { border-color: var(--danger); animation: mine-armed 0.17s steps(2) infinite; }
.mine-tile.mine { background: rgba(255, 80, 103, 0.1); border-color: rgba(255, 80, 103, 0.45); color: var(--danger); }
.mine-tile.mine.chain .mt-face { animation: mine-chain 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mine-tile.mine.defused { background: rgba(120, 150, 190, 0.08); border-color: rgba(120, 150, 190, 0.35); filter: saturate(0.3); }
.mine-tile.hit {
  background: radial-gradient(circle, #ffdf8a 0%, #ff9a3d 26%, #e8452f 48%, #2a0d0b 78%);
  border-color: #ff9a3d;
  animation: mine-boom 0.65s;
}
.mine-tile.hit .mt-face { animation: mine-boom-face 0.65s cubic-bezier(0.22, 1.6, 0.36, 1); filter: drop-shadow(0 0 14px rgba(255, 160, 60, 0.9)); }
.mines-grid.quake { animation: mine-quake 0.7s; }
.mines-grid.cashed .safe { animation: gem-glint 0.6s both; }
.mines-grid.cashed .safe .mt-face { animation: none; }

.mine-shock, .mine-flash, .mine-frag, .gem-ring, .gem-mult { position: absolute; pointer-events: none; z-index: 3; }
.mine-flash {
  width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(255, 240, 205, 0.95), rgba(255, 160, 80, 0.4) 45%, transparent 72%);
  animation: mine-flash 0.32s forwards;
}
.mine-shock {
  width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: var(--radius-circle);
  border: var(--bw-frame) solid rgba(255, 190, 90, 0.9);
  box-shadow: 0 0 30px rgba(255, 140, 50, 0.8), inset 0 0 18px rgba(255, 140, 50, 0.5);
  animation: mine-shock 0.7s cubic-bezier(0.16, 0.85, 0.3, 1) forwards;
}
.mine-frag {
  width: 7px; height: 7px; margin: -4px 0 0 -4px; border-radius: var(--radius-circle);
  background: #ffb347;
  box-shadow: 0 0 10px rgba(255, 150, 60, 0.9);
  animation: mine-frag 0.85s cubic-bezier(0.16, 0.85, 0.3, 1) forwards;
}
.mine-frag.shard { width: 9px; height: 4px; border-radius: var(--radius-xs); background: #6b7686; box-shadow: none; }
.gem-ring {
  width: 18px; height: 18px; margin: -10px 0 0 -10px; border-radius: var(--radius-circle);
  border: var(--bw-thick) solid rgba(74, 222, 128, 0.85);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.6);
  animation: gem-ring 0.55s ease-out forwards;
}
.gem-mult {
  width: 64px; margin-left: -32px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  color: var(--good); text-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
  animation: gem-mult 0.9s ease-out forwards;
}
@keyframes mine-flash { from { opacity: 1; transform: scale(0.35); } to { opacity: 0; transform: scale(1.25); } }
@keyframes mine-shock { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(9); } }
@keyframes mine-frag {
  from { opacity: 1; transform: translate(0, 0) scale(var(--sc, 1)) rotate(0deg); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(calc(var(--sc, 1) * 0.4)) rotate(220deg); }
}
@keyframes gem-ring { from { opacity: 1; transform: scale(0.5); } to { opacity: 0; transform: scale(3.2); } }
@keyframes gem-mult { from { opacity: 0; transform: translateY(2px); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-26px); } }
@keyframes mine-armed { from { background: rgba(255, 80, 103, 0.55); box-shadow: 0 0 18px rgba(255, 80, 103, 0.7); } to { background: rgba(255, 80, 103, 0.12); box-shadow: none; } }
@keyframes mine-boom { 0% { filter: brightness(3); } 30% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
@keyframes mine-boom-face { 0% { transform: scale(0.2); } 55% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes mine-chain { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes gem-pop { 0% { transform: scale(0.2) rotate(-90deg); } 60% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes gem-glint { 0% { filter: brightness(1); } 40% { filter: brightness(1.9); transform: scale(1.08); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes mine-quake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(-7px, 3px) rotate(-0.7deg); }
  24% { transform: translate(6px, -4px) rotate(0.6deg); }
  40% { transform: translate(-5px, -2px) rotate(-0.4deg); }
  55% { transform: translate(4px, 3px) rotate(0.3deg); }
  72% { transform: translate(-2px, 1px) rotate(-0.15deg); }
  88% { transform: translate(1px, -1px) rotate(0.1deg); }
}
.mines-odds {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-md);
  color: var(--dim);
  margin-bottom: var(--sp-3);
}

.mines-mult { text-align: center; margin: var(--sp-4) 0; }
.mines-mult .k { font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; }
.mines-mult .v { font-family: var(--font-display); font-size: var(--fs-8xl); font-weight: 700; color: var(--good); }

.plinko-layout { display: grid; grid-template-columns: minmax(380px, 680px) minmax(260px, 340px); gap: var(--sp-5); align-items: start; }
.plinko-board { width: 100%; max-width: 620px; margin: 0 auto; }
.plinko-svg { width: 100%; height: auto; display: block; }
.plinko-ball-svg { filter: drop-shadow(0 0 6px rgba(255, 177, 61, 0.8)); }
.plinko-bucket-g rect {
  fill: var(--raised);
  stroke: rgba(255, 255, 255, 0.08);
  transition: transform var(--dur-base), fill var(--dur-mid);
}
.plinko-bucket-g.hit rect { fill: rgba(255, 177, 61, 0.3); }
.plinko-bucket-g.hit { transform: translateY(4px); transition: transform var(--dur-base); }
.plinko-bucket-label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.plinko-last { display: flex; flex-wrap: wrap; gap: var(--sp-1h); }
.plinko-session { display: flex; flex-direction: column; gap: var(--sp-1); }
.session-row { display: flex; justify-content: space-between; font-size: var(--fs-md); padding: var(--sp-1) 0; }
.plinko-tag { font-size: var(--fs-base); font-weight: 700; padding: var(--sp-1) var(--sp-2h); clip-path: var(--clip-sm); background: var(--raised); color: var(--dim); }
.plinko-tag.ok { color: var(--good); }
.plinko-tag.big { color: var(--accent); background: rgba(255, 177, 61, 0.14); }
.plinko-tag.meh { color: var(--danger); }

:root { --cr-void: #02040a; }

.crash-layout { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(260px, 340px); gap: var(--sp-5); align-items: start; }
.crash-stage { position: relative; padding: 0; overflow: hidden; min-width: 0; }
.crash-history { display: flex; flex-wrap: wrap; gap: var(--sp-1h); }
.crash-chip { font-size: var(--fs-base); font-weight: 700; padding: var(--sp-1) var(--sp-2h); clip-path: var(--clip-sm); background: var(--raised); font-variant-numeric: tabular-nums; }
.crash-chip.won { color: var(--good); }
.crash-chip.lost { color: var(--danger); }

.cr-feed, .pb-crash-feed { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--cr-void); }
.cr-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cr-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(220, 235, 255, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(120% 92% at 50% 44%, transparent 42%, color-mix(in srgb, var(--cr-void) 62%, transparent) 100%);
  animation: cr-scan calc(var(--dur-slowest) * 16) linear infinite;
}
@keyframes cr-scan { from { background-position: 0 0, 0 0; } to { background-position: 0 3px, 0 0; } }

.cr-hud {
  --cr-tone: var(--dim);
  --cr-pad: var(--sp-3) var(--sp-3h);
  --cr-pad-tight: var(--sp-2h) var(--sp-3);
  --cr-mult-s1: var(--fs-hero);
  --cr-mult-s2: var(--fs-9xl);
  --cr-mult-s3: var(--fs-8xl);
  --cr-mult-s4: var(--fs-7xl);
  --cr-mult-s5: var(--fs-6xl);
  --cr-mult-fs: var(--cr-mult-s1);
  --cr-mult-fs-tight: var(--cr-mult-s2);
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'top top' 'mult ladder' 'bot bot';
  gap: var(--sp-2h);
  padding: var(--cr-pad);
  font-family: var(--font-display);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
/* mini drops the telemetry row and the ladder together, so an untouched template
   would keep an empty bot row and an empty ladder column plus both their gaps and
   push the multiplier off centre; the row span is what actually recentres it,
   because collapsing the bot row alone drops the mult track half a gap lower */
.cr-hud:not(:has(.cr-hud-bottom)):not(:has(.cr-ladder)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: 'top' 'mult';
}
.cr-hud:not(:has(.cr-hud-bottom)):not(:has(.cr-ladder)) .cr-mult-wrap { grid-row: 1 / -1; }
.cr-hud[data-tone='live'] { --cr-tone: var(--accent); }
.cr-hud[data-tone='good'] { --cr-tone: var(--good); }
.cr-hud[data-tone='bad'] { --cr-tone: var(--danger); }
.cr-hud[data-tone='idle'] { --cr-tone: var(--dim); }

.cr-hud-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); min-width: 0; }
.cr-status {
  display: inline-flex; align-items: center; gap: var(--sp-1h); min-width: 0;
  padding: var(--sp-0) var(--sp-2h); border-radius: var(--radius-pill); color: var(--cr-tone);
  border: var(--bw-hair) solid color-mix(in srgb, var(--cr-tone) 45%, transparent);
  background: color-mix(in srgb, var(--cr-tone) 12%, rgba(3, 6, 11, 0.6));
}
.cr-status-dot { flex: none; width: 7px; height: 7px; border-radius: var(--radius-circle); background: currentColor; box-shadow: 0 0 8px currentColor; }
.cr-status-text { font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-hud[data-tone='live'] .cr-status-dot { animation: cr-blip calc(var(--dur-slowest) * 2.2) ease-in-out infinite; }
@keyframes cr-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.cr-clock { flex: none; font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.1em; color: color-mix(in srgb, var(--text) 78%, transparent); font-variant-numeric: tabular-nums; }

.cr-mult-wrap { grid-area: mult; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); min-width: 0; }
.cr-mult {
  display: flex; align-items: baseline; gap: var(--sp-1); letter-spacing: normal; line-height: var(--lh-none);
  font-size: var(--cr-mult-fs); font-weight: 700; color: var(--cr-tone);
  text-shadow: 0 0 30px color-mix(in srgb, var(--cr-tone) 45%, transparent), 0 2px 6px rgba(0, 0, 0, 0.8);
}
/* 7ch of reserved right-aligned tabular width holds 1000.00, the cap, so the
   multiplier grows leftwards and the x never shifts as digits arrive */
.cr-mult-n { flex: none; min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; }
.cr-mult-x { flex: none; font-size: 0.5em; opacity: 0.7; }
.cr-mult-sub {
  min-width: 17ch; text-align: center; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--text) 72%, transparent); font-variant-numeric: tabular-nums;
}

.cr-hud-bottom { grid-area: bot; display: flex; align-items: flex-end; min-width: 0; }
.cr-tel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1h) var(--sp-2); width: 100%; }
.cr-tel-cell { display: flex; flex-direction: column; gap: var(--sp-0); min-width: 0; }
.cr-tel-k { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.16em; color: var(--dim); }
.cr-tel-v { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.06em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cr-ladder { grid-area: ladder; display: flex; flex-direction: column-reverse; align-items: flex-end; justify-content: center; gap: var(--sp-0); min-width: 0; }
.cr-rung { display: flex; align-items: center; gap: var(--sp-1h); color: var(--dim); opacity: 0.45; }
.cr-rung-tick { flex: none; width: var(--sp-2h); height: var(--bw-thick); background: currentColor; }
.cr-rung-name { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.12em; white-space: nowrap; }
/* hud.js writes data-on as off, on or now on every rung, so these selectors have to
   match the value: testing presence alone lights the whole ladder from 1.00x and
   pins the current-band highlight to the last rung in the DOM */
.cr-rung[data-on='on'], .cr-rung[data-on='now'] { color: var(--text); opacity: 1; }
.cr-rung[data-on='on'] .cr-rung-tick { width: var(--sp-4); }
.cr-rung[data-on='now'] { color: var(--cr-tone); }
.cr-rung[data-on='now'] .cr-rung-tick { width: var(--sp-5); height: var(--bw-frame); box-shadow: 0 0 8px currentColor; }
.cr-arm {
  order: -1; white-space: nowrap; color: var(--gold);
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.12em;
  padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-xs);
  border: var(--bw-hair) solid color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 14%, rgba(3, 6, 11, 0.55));
}
.cr-arm:empty { display: none; }

.cr-idle {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--sp-2); padding: calc(var(--sp-8) + var(--sp-4)) var(--sp-5) var(--sp-5);
  text-align: center;
  font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 700; color: var(--text);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  background: radial-gradient(64% 34% at 50% 24%, color-mix(in srgb, var(--cr-void) 62%, transparent), transparent 74%);
  animation: cr-idle-pulse calc(var(--dur-slowest) * 5.2) ease-in-out infinite;
}
.cr-idle-sub { max-width: 34ch; font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-snug); color: var(--dim); }
.cr-idle-sub:empty { display: none; }
@keyframes cr-idle-pulse { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.55; } }

/* display: contents hands the .pb-body gap the spacing between feed, track,
   facts and the verify pane; the auto margin then cancels flex stretch, so each
   band carries an explicit width instead of collapsing to its content */
.pb-crash { display: contents; }
.pb-crash-feed, .pb-crash-track, .pb-crash-facts { width: min(580px, 100%); margin-inline: auto; }
.pb-crash-feed { border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); }
.pb-crash-feed .cr-hud { --cr-pad: var(--cr-pad-tight); --cr-mult-fs: var(--cr-mult-fs-tight); }

.pb-crash-track { display: flex; flex-direction: column; gap: var(--sp-1h); }
/* no clip-path on the rail: it clips its children, which ate the crash mark at
   100% and the deliberate vertical overhang on both marks */
.pb-crash-rail { position: relative; height: var(--sp-2); background: var(--sunken); box-shadow: inset 0 0 0 var(--bw-hair) var(--line); }
.pb-crash-runway {
  position: absolute; inset-block: 0; left: var(--from, 100%); right: 0;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--danger) 34%, transparent) 0 var(--sp-1),
    color-mix(in srgb, var(--danger) 10%, transparent) var(--sp-1) var(--sp-2));
}
.pb-crash-mark { position: absolute; inset-block: calc(var(--sp-0) * -1); left: var(--at, 0%); width: var(--bw-thick); transform: translateX(-50%); background: var(--dim); }
.pb-crash-mark.good { background: var(--good); box-shadow: 0 0 8px color-mix(in srgb, var(--good) 70%, transparent); }
.pb-crash-mark.bad { background: var(--danger); box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 70%, transparent); }
.pb-crash-range { width: 100%; min-width: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }

.pb-crash-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--sp-2h); }
.pb-crash-facts > * {
  padding: var(--sp-2) var(--sp-2h); background: var(--sunken);
  box-shadow: inset 0 0 0 var(--bw-hair) var(--line); clip-path: var(--clip-sm);
}
.pb-crash-facts .cr-tel-v { white-space: normal; overflow: visible; }

@media (max-width: 860px) {
  .cr-hud { --cr-mult-fs: var(--cr-mult-s2); --cr-mult-fs-tight: var(--cr-mult-s3); }
}
@media (max-width: 720px) {
  .cr-feed, .pb-crash-feed { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .cr-rung { display: none; }
  .cr-ladder:has(.cr-arm:empty) { display: none; }
  .cr-hud:has(.cr-arm:empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'top' 'mult' 'bot'; }
}
@media (max-width: 560px) {
  .cr-hud { --cr-pad: var(--cr-pad-tight); --cr-mult-fs: var(--cr-mult-s3); --cr-mult-fs-tight: var(--cr-mult-s4); }
  .cr-idle { font-size: var(--fs-5xl); }
}
@media (max-width: 480px) {
  .cr-tel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .cr-hud { --cr-mult-fs: var(--cr-mult-s4); --cr-mult-fs-tight: var(--cr-mult-s5); }
  .pb-crash-facts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cr-grain, .cr-idle, .cr-hud[data-tone='live'] .cr-status-dot { animation: none; }
}
.slot-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: var(--sp-3h); align-items: start; }

.slot-cabinet {
  min-width: 0;
  container-type: inline-size;
  background:
    radial-gradient(120% 86% at 50% 0%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 58%),
    var(--surface);
}
.slot-frame {
  position: relative; min-width: 0;
  padding: var(--sp-1h);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #3a3225, #171410 34%, #100e0b 70%, #241d13);
  box-shadow:
    0 var(--sp-3) var(--sp-6) calc(var(--sp-3) * -1) rgba(0, 0, 0, 0.75),
    0 0 0 var(--bw-hair) rgba(255, 206, 122, 0.34),
    inset 0 var(--bw-hair) 0 rgba(255, 232, 186, 0.4),
    inset 0 calc(var(--bw-hair) * -1) 0 rgba(0, 0, 0, 0.7);
}
.slot-screen {
  position: relative; height: 100%; width: 100%; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sunken);
  box-shadow:
    inset 0 0 0 var(--bw-hair) rgba(255, 206, 122, 0.5),
    inset 0 var(--sp-1) var(--sp-3) rgba(0, 0, 0, 0.85);
}
.slot-stage {
  flex: 0 0 auto;
  height: var(--slot-stage-h);
  width: auto; aspect-ratio: var(--slot-ar);
}
.slot-canvas { display: block; width: 100%; height: 100%; }

.slot-console {
  --slot-ar: 1.6;
  --slot-lev-ar: 0.24;
  --slot-lev-gap: var(--sp-2);
  --slot-stage-min: 220px;
  --slot-stage-h: min(
    (100cqw - var(--slot-lev-gap)) / var(--slot-ar),
    max(
      var(--slot-stage-min),
      min(
        clamp(var(--slot-stage-min), 44vh, 520px),
        (100cqw - var(--slot-lev-gap)) / (var(--slot-ar) + var(--slot-lev-ar))
      )
    )
  );
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: fit-content; max-width: 100%; align-self: center; min-width: 0;
}
.slot-machine-row { display: flex; align-items: stretch; gap: var(--slot-lev-gap); min-width: 0; }
.sl-lev-host {
  flex: 0 1 calc(var(--slot-stage-h) * var(--slot-lev-ar));
  min-width: 0;
  cursor: grab;
  touch-action: none;
  border-radius: var(--radius-md);
}
.sl-lev-host:focus-visible { outline: var(--bw-thick) solid var(--gold); outline-offset: var(--sp-0); }
.sl-lev-host.pulling { cursor: grabbing; }
.sl-lev-host.spent { cursor: default; opacity: 0.5; }
.sl-lev { display: block; width: 100%; height: 100%; }
.sl-lev-mount { fill: #14100a; stroke: rgba(255, 206, 122, 0.3); }
.sl-lev-plate { fill: #2c2010; stroke: rgba(255, 206, 122, 0.16); }
.sl-lev-boss { fill: #a97a30; }
.sl-lev-pin { fill: #150f06; }
.sl-lev-shaft { fill: #c79a3f; }
.sl-lev-shine { fill: rgba(255, 240, 200, 0.55); }
.sl-lev-knob { fill: #ad2029; }
.sl-lev-spec { fill: rgba(255, 255, 255, 0.38); }

@media (max-width: 700px) {
  .slot-console { --slot-lev-ar: 0; --slot-lev-gap: 0px; }
  .sl-lev-host { display: none; }
}
.slot-canvas.mini { aspect-ratio: 3 / 2; }

.slot-banner {
  --slot-pay-s1: var(--fs-6xl);
  --slot-pay-s2: var(--fs-8xl);
  --slot-pay-fs: var(--slot-pay-s1);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: var(--sp-1) var(--sp-2h);
  min-height: var(--sp-6);
  font-family: var(--font-display); color: var(--dim);
}
.slot-banner.win { color: var(--good); animation: slot-pop var(--dur-slower) var(--ease-back); }
.slot-banner.win.big { --slot-pay-fs: var(--slot-pay-s2); color: var(--gold); }
.slot-pay {
  max-width: 100%; overflow-wrap: anywhere;
  font-size: var(--slot-pay-fs); font-weight: 800; line-height: var(--lh-none);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px color-mix(in srgb, currentColor 40%, transparent);
}
.slot-mult { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.14em; opacity: 0.75; }
@keyframes slot-pop { from { transform: scale(0.74); } 70% { transform: scale(1.06); } to { transform: scale(1); } }

.slot-paytable { min-width: 0; }
.slot-paylist { display: flex; flex-direction: column; gap: var(--sp-1); }
.slot-payrow {
  display: grid; grid-template-columns: var(--sp-8) minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 72%);
}
.slot-payrow:first-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 15%, transparent), transparent 78%);
  box-shadow: inset 0 0 0 var(--bw-hair) color-mix(in srgb, var(--gold) 30%, transparent);
}
.slot-paysym { display: inline-flex; align-items: center; justify-content: center; }
.slot-paysym canvas { display: block; }
.slot-payname { font-size: var(--fs-md); min-width: 0; }
.slot-payx { text-align: right; white-space: nowrap; }
.slot-payx em {
  display: block; font-style: normal; font-weight: 800; font-size: var(--fs-xl);
  color: var(--text); font-variant-numeric: tabular-nums; line-height: var(--lh-none);
}
.slot-payx i {
  display: block; font-style: normal; font-weight: 600;
  font-size: var(--fs-2xs); color: var(--dim); letter-spacing: 0.06em;
}
.slot-payrow:first-child .slot-payx em { color: var(--gold); }
.slot-note { font-size: var(--fs-sm); line-height: var(--lh-snug); }

@media (max-width: 900px) {
  .slot-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .slot-console { --slot-ar: 1.3333; }
}
@media (max-width: 480px) {
  .slot-banner { --slot-pay-s1: var(--fs-5xl); --slot-pay-s2: var(--fs-6xl); }
}

@media (prefers-reduced-motion: reduce) {
  .slot-banner.win { animation: none; }
}
.arena-h { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin: 0 0 var(--sp-3); }
.page > .arena-h { margin: 0; }
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3h); }
.lobby-card { display: flex; flex-direction: column; gap: var(--sp-2h); }
/* identity row: a 16-char host name must ellipsize before it shoves the
   coin side + countdown out of the card on phones */
.lobby-card > .row { min-width: 0; }
.lobby-card > .row > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-stake { display: flex; align-items: baseline; gap: var(--sp-2h); }
.lobby-value { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; color: var(--good); }

.battle-statbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3h); }
.battle-stat {
  display: inline-flex; align-items: baseline; gap: var(--sp-1h);
  font-size: var(--fs-md); padding: var(--sp-2h) var(--sp-3h);
  background: var(--raised); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
}
.battle-stat b { font-variant-numeric: tabular-nums; }
.battle-create { margin-left: auto; }
.battle-create.atmax { opacity: 0.55; }

.battle-card { position: relative; padding-top: var(--sp-4); overflow: hidden; }
.battle-card.mine { border-color: rgba(255, 177, 61, 0.35); }
.lobby-timebar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.06); }
.lobby-timebar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), #ffd24d);
  transition: width 1s linear;
}
.lobby-timebar-fill.urgent { background: linear-gradient(90deg, #ff5067, #ff9a3d); }

.battle-vs { display: flex; align-items: center; gap: var(--sp-2h); }
.battle-vs-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.battle-vs-id { display: flex; align-items: center; justify-content: center; gap: var(--sp-1h); min-width: 0; max-width: 100%; }
.battle-vs-name { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-vs-mid {
  flex: none;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: 0.08em;
  color: var(--accent);
  padding: var(--sp-1h) var(--sp-2h);
  background: rgba(255, 177, 61, 0.08);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.3);
  clip-path: var(--clip-sm);
  text-shadow: 0 0 14px rgba(255, 177, 61, 0.5);
}
.battle-vs-slot {
  width: 44px; height: 44px; border-radius: var(--radius-circle);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-4xl); color: var(--dim);
  border: var(--bw-thick) dashed rgba(255, 255, 255, 0.22);
  animation: vs-slot-pulse 1.8s ease-in-out infinite;
}
@keyframes vs-slot-pulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.18); color: var(--dim); }
  50% { border-color: rgba(255, 177, 61, 0.55); color: var(--accent); }
}
.battle-vs-wait { font-size: var(--fs-sm); }

.cf-side-chip {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm);
  color: var(--accent); background: rgba(255, 177, 61, 0.1); border: var(--bw-hair) solid rgba(255, 177, 61, 0.28);
}
.cf-side-chip .cf-ico { width: 15px; height: 15px; }
.cf-card .battle-vs-slot .cf-ico { width: 22px; height: 22px; opacity: 0.85; }

.battle-pot { display: flex; align-items: baseline; gap: var(--sp-2h); }
.battle-pot-cases {
  font-size: var(--fs-sm); font-weight: 700; color: var(--dim);
  padding: var(--sp-0) var(--sp-2h); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-pill);
}
.battle-clock { margin-left: auto; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.battle-join { width: 100%; }

.empty-boxed .dim { font-size: var(--fs-md); max-width: 380px; }

.battle-pick-count {
  font-size: var(--fs-base); font-weight: 700; color: var(--dim);
  border: var(--bw-hair) solid var(--line); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2h);
  vertical-align: 2px; margin-left: var(--sp-2);
}
.battle-pick-count.full { color: var(--danger); border-color: rgba(255, 80, 103, 0.5); }
.battle-modal-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.battle-modal-bar .btn { margin-left: auto; }
.battle-pick-grid { max-height: 320px; overflow-y: auto; padding-right: var(--sp-1); scrollbar-width: thin; }
.coin-side { font-size: var(--fs-2xl); color: var(--accent); }

.coin-stage { text-align: center; padding: var(--sp-6) var(--sp-2h); perspective: 900px; }
.coin3d {
  width: 150px;
  height: 150px;
  margin: 0 auto var(--sp-5);
  position: relative;
  transform-style: preserve-3d;
}
.coin-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  font-size: 60px;
  backface-visibility: hidden;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.45);
}
.coin-face.front {
  background: radial-gradient(circle at 35% 30%, #ffe9b0, #ffb13d 55%, #9a5a10);
  color: #3a2204;
}
.coin-face.back {
  background: radial-gradient(circle at 35% 30%, #d9e2ec, #8d9aa5 55%, #3c4654);
  color: #141c26;
  transform: rotateY(180deg);
}
.coin-label { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; margin-bottom: var(--sp-4h); min-height: 26px; }
.coin-label.win { color: var(--good); }
.coin-label.lose { color: var(--danger); }
.coin-pick { font-size: var(--fs-lg); }

.battle-case-list { display: flex; flex-wrap: wrap; gap: var(--sp-1h); }
.battle-case-chip {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-2h);
  clip-path: var(--clip-sm);
  background: var(--raised);
  border: none;
  border-left: var(--bw-frame) solid var(--ac, var(--dim));
  color: var(--text);
  cursor: default;
}
button.battle-case-chip { cursor: pointer; }
button.battle-case-chip:hover { background: #1d2530; }
.battle-case-pick {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: flex-start;
  border-left: var(--bw-frame) solid var(--ac);
  cursor: pointer;
  color: var(--text);
  transition: background var(--dur-base), transform var(--dur-fast);
}
.battle-case-pick:hover { background: #1d2530; transform: translateY(-2px); }

.battle-stage { text-align: center; }
.battle-case-label {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  min-height: 20px;
  margin-bottom: var(--sp-2);
}
.battle-reels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.reel-window.mini { padding: var(--sp-2h) 0; }
.battle-stage .skip-btn.static { margin: 0 0 var(--sp-3); }
.battle-heads { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.battle-head { display: flex; align-items: center; gap: var(--sp-2h); font-size: var(--fs-xl); }
.battle-total { font-family: var(--font-display); font-weight: 700; color: var(--good); font-size: var(--fs-2xl); }
.battle-vs { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: var(--fs-3xl); }
.battle-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3h); min-height: 190px; }
.battle-col { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-content: flex-start; justify-content: center; }
.battle-drop { animation: result-pop 0.35s cubic-bezier(.2,.9,.3,1.3); }
.battle-verdict {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  margin-top: var(--sp-4h);
  min-height: 28px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.battle-verdict.win { color: var(--good); }
.battle-verdict.lose { color: var(--danger); }
.battle-verdict.push { color: var(--dim); }

.jp-layout { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(280px, 380px); gap: var(--sp-5); align-items: start; }
.jp-stage { text-align: center; padding: var(--sp-5h) var(--sp-5); }
.jp-pot {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  color: var(--good);
  text-shadow: 0 0 30px rgba(74, 222, 128, 0.25);
}
.jp-timer {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  font-weight: 700;
  color: var(--accent);
  margin-top: var(--sp-1);
}
.jp-timer.hot { color: var(--danger); animation: pulse-glow 1s infinite; }
.jp-players { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; min-height: 30px; }
.jp-player-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  background: var(--raised);
  padding: var(--sp-1h) var(--sp-3);
  clip-path: var(--clip-sm);
}
.jp-odds { display: flex; align-items: baseline; gap: var(--sp-3); }
.jp-odds-pct { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: var(--fs-xl); }
.jp-name-tile {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4h) var(--sp-2);
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  font-size: var(--fs-lg);
}
/* long names ellipsize inside the 150px tile instead of bleeding into the
   neighbouring reel entries */
.jp-name-tile > .row { min-width: 0; max-width: 100%; }
.jp-name-tile b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-shares { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-4); }

/* ALL IN - symmetric cut corners (the default clip is lopsided) + unhinged hover */
.allin-btn {
  position: relative;
  overflow: hidden;
  border: none;
  color: #fff;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #ff5067, #ff7847, #ffb13d, #ff5067);
  background-size: 250% 250%;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  transition: filter var(--dur-base);
}
.allin-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.allin-btn:hover {
  animation: allin-rage 0.38s infinite, allin-lava 1.1s linear infinite;
  filter: drop-shadow(0 0 16px rgba(255, 100, 30, 0.95)) brightness(1.2) saturate(1.4);
}
.allin-btn:hover::after { animation: allin-shine 0.65s linear infinite; }
@keyframes allin-rage {
  0%, 100% { transform: scale(1.08) rotate(-1.7deg); }
  25% { transform: scale(1.13) rotate(1.4deg); }
  50% { transform: scale(1.06) rotate(-0.8deg); }
  75% { transform: scale(1.14) rotate(2deg); }
}
@keyframes allin-lava {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes allin-shine {
  from { left: -70%; }
  to { left: 130%; }
}

.events-table td { font-size: var(--fs-md); }
.event-type {
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: var(--sp-0) var(--sp-2);
  clip-path: var(--clip-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--teal);
  white-space: nowrap;
}
.event-type.auth, .event-type.admin { color: var(--accent); }
.event-type.case, .event-type.tradeup, .event-type.upgrade { color: #d32ce6; }
.event-type.bj, .event-type.mines, .event-type.plinko, .event-type.crash { color: #8847ff; }
.event-type.collections { color: #e0a93b; }
.event-type.equipment { color: #5aa9ff; }
.event-type.clan { color: #f0a020; }
.event-data { max-width: 420px; white-space: normal; overflow-wrap: anywhere; line-height: 1.8; }
.flagged-panel {
  background: rgba(255, 80, 103, 0.06);
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.3);
  clip-path: var(--clip);
  padding: var(--sp-3h) var(--sp-4);
}
.flagged-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  background: var(--raised);
  padding: var(--sp-1h) var(--sp-3);
  clip-path: var(--clip-sm);
  border: none;
  color: var(--text);
  cursor: pointer;
}
.flagged-chip:hover { background: #1d2530; }

.player-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  background: none;
  border: none;
  color: var(--text);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgba(255, 177, 61, 0.35);
  text-underline-offset: 3px;
}
.player-link:hover { color: var(--accent); }

.id-chip {
  background: rgba(65, 224, 200, 0.1);
  border: var(--bw-hair) solid rgba(65, 224, 200, 0.35);
  color: var(--teal);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: var(--sp-0) var(--sp-2);
  clip-path: var(--clip-sm);
  cursor: pointer;
  margin: 0 var(--sp-0);
}
.id-chip:hover { background: rgba(65, 224, 200, 0.22); }
.role-chip.flagged { background: rgba(255, 122, 61, 0.18); color: var(--accent2); }
.history-list { display: flex; flex-direction: column; gap: var(--sp-1h); }
.history-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-md);
}
.history-row .event-data { white-space: normal; max-width: none; color: var(--dim); }

.daily-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-md);
  width: 100%;
}
.daily-row .grow { min-width: 0; }
@media (max-width: 400px) { .daily-row { flex-wrap: wrap; } }
.daily-row .daily-ico { font-size: var(--fs-5xl); flex: none; }
.daily-row .daily-ico.dim0 { opacity: 0.5; filter: grayscale(0.6); }
.daily-row .daily-sub { font-size: var(--fs-base); margin-top: var(--sp-0); }
.daily-row.ready {
  border-color: rgba(255, 177, 61, 0.45);
  background:
    linear-gradient(100deg, rgba(255, 177, 61, 0.12), rgba(255, 122, 40, 0.05) 55%, transparent),
    var(--raised);
  animation: daily-glow 1.6s ease-in-out infinite;
}
@keyframes daily-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 177, 61, 0); }
  50% { box-shadow: 0 0 22px rgba(255, 177, 61, 0.25); }
}

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 460px)); gap: var(--sp-4h); }
.blocked-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.blocked-row { display: flex; align-items: center; gap: var(--sp-2h); }
.blocked-row .grow { flex: 1; }

.profanity-list { display: flex; flex-direction: column; gap: var(--sp-1h); padding: var(--sp-3); }
.profanity-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.profanity-term { font-size: var(--fs-lg); color: var(--text); word-break: break-all; }
.profanity-list + .grid-pager { margin-top: 0; padding: 0 var(--sp-3) var(--sp-3h); }
.panel-title {
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-bottom: var(--sp-3h);
}
.profile-rows { display: flex; flex-direction: column; }
.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2h) 0;
  border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.05);
  font-size: var(--fs-lg);
}
.profile-row:last-child { border-bottom: none; }
.settings-form { display: flex; flex-direction: column; gap: var(--sp-2h); max-width: 320px; }
select:focus { border-color: rgba(255, 177, 61, 0.5); }
.region-preview { margin-top: var(--sp-3); font-size: var(--fs-lg); }

.market-toolbar .ac-box,
.market-toolbar .ac-box input,
.market-pill,
.market-price-range,
.market-sort {
  height: 38px;
  box-sizing: border-box;
  margin: 0;
}
.market-pill { font-size: var(--fs-md); border-radius: 0; clip-path: var(--clip-sm); }
.market-toolbar .btn { display: inline-flex; align-items: center; justify-content: center; }
.market-toolbar .grid-search { width: 200px; }
.market-toolbar .ac-box { width: 160px; }
.market-toolbar .ac-box input { width: 100%; }
.market-price-range { display: flex; align-items: center; gap: var(--sp-1h); }
.market-price-in { width: 92px; }
.market-sort { display: flex; align-items: center; gap: var(--sp-2); }
.market-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3h);
  border: var(--bw-hair) solid var(--line);
  background: #0a0e14;
  color: var(--dim);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}
.market-pill input { accent-color: var(--accent); }
.market-pill.on { border-color: rgba(255, 177, 61, 0.6); background: rgba(255, 177, 61, 0.12); color: var(--accent); }
.market-count { font-size: var(--fs-md); }

.market-card { width: 168px; }
.market-card .item-art { height: 96px; }
/* top-right corner: bottom of the art is owned by the enh badge, mod pips
   and wear chip, and top-left by the Souvenir ribbon */
.market-kind-tag {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--sp-0) var(--sp-1h);
  border-radius: var(--radius-sm);
  background: rgba(75, 159, 255, 0.85);
  color: #06121f;
}
.market-kind-tag.auction { background: rgba(65, 224, 200, 0.9); }
.market-kind-tag.both { background: rgba(255, 177, 61, 0.9); }
.market-meta { padding: var(--sp-2) var(--sp-2h) 0; }
.market-prices { display: flex; flex-direction: column; gap: var(--sp-0); font-size: var(--fs-base); }
.market-prices b { color: var(--text); }
.market-ends { font-size: var(--fs-sm); margin-top: var(--sp-1); }
.market-foot {
  padding: var(--sp-2) var(--sp-2h) var(--sp-2h);
  margin-top: var(--sp-2);
  border-top: var(--bw-hair) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.market-seller { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--dim); min-width: 0; }
.market-foot .btn { width: 100%; justify-content: center; }
.market-own { font-size: var(--fs-sm); color: var(--dim); text-align: center; font-style: italic; padding: var(--sp-1) 0; }

.market-sell-blurb { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; font-size: var(--fs-md); }

.market-list-modal { width: 100%; }
.market-list-body { display: flex; gap: var(--sp-5); margin-top: var(--sp-3); flex-wrap: wrap; }
.market-list-art { flex-shrink: 0; }
.market-list-form { flex: 1; min-width: 220px; }
.market-breakdown { font-size: var(--fs-md); line-height: 1.7; padding: var(--sp-2h) var(--sp-3); background: var(--surface); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-md); }

.market-detail-grid { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: flex-start; }
.market-detail-right { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: var(--sp-3h); }
.market-detail-info { display: flex; flex-direction: column; gap: var(--sp-2); }
.market-detail-actions { display: flex; flex-direction: column; gap: var(--sp-2h); }
.market-detail-actions .btn { justify-content: center; }
.market-bid-row { display: flex; flex-direction: column; gap: var(--sp-1h); padding-top: var(--sp-2); border-top: var(--bw-hair) solid var(--line); }
.market-you { color: var(--accent); font-weight: 600; }
.market-mine-row { background: rgba(255, 177, 61, 0.05); }

.market-section-h {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-1h);
  border-bottom: var(--bw-hair) solid var(--line);
  color: var(--text);
}
.market-section-h:first-child { margin-top: 0; }
.market-history th, .market-history td { font-size: var(--fs-md); }
.market-hist-link { background: none; border: none; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.market-hist-link:hover .market-hist-item { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.market-hist-item { border-left: var(--bw-frame) solid var(--rc); padding-left: var(--sp-2); color: var(--text); }
.rarity-chip {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--sp-0) var(--sp-2);
  border: var(--bw-hair) solid var(--rc, var(--line));
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.market-hist-modal { width: 100%; }
.market-hist-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sp-2);
}
.market-hist-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0);
  padding: var(--sp-2) var(--sp-2h);
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-md);
}
.market-hist-stat .dim { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; }
.market-hist-stat b { font-size: var(--fs-lg); }
.market-chart-wrap { position: relative; }
.market-chart-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--dim);
  font-size: var(--fs-md);
  background: var(--surface);
  border: var(--bw-hair) dashed var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-3h);
}
.market-tip {
  position: absolute;
  transform: translate(-50%, -130%);
  background: #0b0e14;
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-1h) var(--sp-2);
  font-size: var(--fs-base);
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: var(--sp-0);
  z-index: 2;
  box-shadow: var(--shadow-lg);
}
.market-tip .dim { font-size: var(--fs-xs); }
.market-depth { margin-top: var(--sp-1); }
.market-depth-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-1h) var(--sp-2h);
  font-size: var(--fs-md);
  border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.05);
}
.market-depth-row:last-child { border-bottom: none; }

.note-toast { display: flex; flex-direction: column; gap: var(--sp-1); }
.note-toast-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.note-toast-body { font-size: var(--fs-md); line-height: 1.5; }

.support-modal { width: 100%; }
.support-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.support-ticket-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px 152px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2h) var(--sp-3);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-base);
}
.support-ticket-row:hover { border-color: rgba(255, 177, 61, 0.4); }
.support-ticket-subject { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.support-ticket-subject > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-row .status-tag { justify-self: end; }
.support-ticket-msgs { text-align: right; white-space: nowrap; }
.support-ticket-date { text-align: right; white-space: nowrap; }

.support-filters .grid-search { flex: 1; min-width: 200px; }
.support-filters .grid-filter { flex: 0 0 auto; }
.support-thread {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 46vh;
  overflow-y: auto;
  margin: var(--sp-3) 0;
  padding-right: var(--sp-1);
}
.support-msg {
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-2h);
  max-width: 86%;
  align-self: flex-start;
}
.support-msg.admin { align-self: flex-end; background: rgba(255, 177, 61, 0.08); border-color: rgba(255, 177, 61, 0.3); }
.support-msg-head { display: flex; gap: var(--sp-2h); justify-content: space-between; font-size: var(--fs-sm); color: var(--dim); margin-bottom: var(--sp-1); }
.support-msg-body { font-size: var(--fs-md); line-height: 1.5; white-space: pre-wrap; color: var(--text); }
.support-unread { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--danger); display: inline-block; flex-shrink: 0; }
.support-title { display: flex; align-items: center; }
.support-title .head-ico { width: 26px; height: 26px; }
.support-ticket-row.has-unread { border-color: rgba(255, 80, 103, 0.35); }
.support-msg-sender { display: inline-flex; align-items: center; gap: var(--sp-1h); color: var(--text); }
.support-staff-chip {
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.08em;
  padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-xs);
  background: rgba(255, 177, 61, 0.18); color: var(--accent);
}
.support-reply-count { font-size: var(--fs-sm); margin-left: auto; }
.support-ticket-meta { font-size: var(--fs-base); }
.support-form { display: flex; flex-direction: column; gap: var(--sp-2h); max-width: 520px; }
.support-form textarea,
.support-reply { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; font-size: var(--fs-md); padding: var(--sp-2) var(--sp-2h); }
.ticket-row { cursor: pointer; }
.ticket-row.unread td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.feedback-card { margin-bottom: var(--sp-2h); }
.feedback-card.archived { opacity: 0.55; }
.feedback-head { display: flex; align-items: center; gap: var(--sp-2h); margin-bottom: var(--sp-1h); flex-wrap: wrap; }
.feedback-cat { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-sm); font-weight: 700; }
.feedback-body { font-size: var(--fs-md); line-height: 1.5; white-space: pre-wrap; }

@media (max-width: 640px) {
  .market-toolbar > * { flex: 1 1 130px; }
  .market-toolbar .grid-search,
  .market-toolbar .ac-box { flex-basis: 100%; width: 100%; }
  .market-price-range { flex: 1 1 100%; min-width: 0; }
  /* min-width:0 lets the inputs shrink below their intrinsic size attr,
     otherwise the pair overflows the row at phone widths */
  .market-price-in { flex: 1; width: auto; min-width: 0; }
  .market-sort { flex: 1 1 100%; justify-content: space-between; }
  .market-sort select { flex: 1; }
  .market-card { width: calc(50% - 6px); }
  .market-card .item-art { height: 84px; }
  .market-detail-grid { gap: var(--sp-3); }
  .market-detail-grid > .market-list-art { width: 100%; display: flex; justify-content: center; }
  .market-history th:nth-child(2),
  .market-history td:nth-child(2),
  .market-history th:nth-child(3),
  .market-history td:nth-child(3) { display: none; }
}

@media (max-width: 1000px) {
  /* minmax(0,1fr): a plain 1fr track bottoms out at content min-width, so one
     no-wrap row inside a panel can push the whole page past the viewport. */
  .grind-layout, .upg-layout, .split-cols, .mines-layout, .plinko-layout, .crash-layout, .jp-layout { grid-template-columns: minmax(0, 1fr); }
  .nav-label { visibility: hidden; padding: var(--sp-1h); }
  .nav-rail { width: 60px; }
  .nav-item span.lbl { display: none; }
  .nav-item .feature-tag { display: none; }
  .trade-cols { grid-template-columns: 1fr; }
  .ticker { display: none; }
  .profile-name { display: none; }
}

@media (max-width: 860px) {
  .topbar { gap: var(--sp-3); padding: 0 var(--sp-3h); }
  .env-badge { display: none; }

  .shell { flex-direction: column; min-height: 0; }

  .nav-rail {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--sp-1h);
    padding: var(--sp-2) var(--sp-2h);
    border-right: none;
    border-bottom: var(--bw-hair) solid var(--line);
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
  }
  .nav-rail::-webkit-scrollbar { height: 6px; }
  .nav-label, .nav-sep { display: none; }
  .nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    padding: var(--sp-2h) var(--sp-3h);
    justify-content: center;
  }
  .nav-item span.lbl { display: inline; }
  .nav-item .ico { width: auto; }
  .nav-item .pip {
    position: static;
    right: auto;
    margin-left: var(--sp-0);
  }
  .nav-item.disabled { flex-wrap: nowrap; }
  .nav-item .feature-tag { display: none; }

  main.view { padding: var(--sp-5) var(--sp-5) var(--sp-7); }

  .upg-layout { grid-template-columns: 1fr; }

  .chart-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid > * { min-width: 0; }

  .panel:has(> table),
  .panel:has(> .lb-table),
  .panel:has(> .admin-table),
  .panel:has(> .events-table),
  .panel:has(.admin-table),
  .panel:has(.events-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .event-data { max-width: 320px; }

  .modal.wide { width: 100%; }
  .admin-table th, .admin-table td { white-space: nowrap; }
  td.admin-actions { min-width: 178px; gap: var(--sp-1h); }
  .admin-actions .icon-btn.sm { width: 36px; height: 36px; font-size: var(--fs-xl); }
}

@media (max-width: 560px) {
  /* six fixed-width children share 360px: tighter gaps, a slimmer balance
     pill and no caret keep the profile chip from sliding off-screen */
  .topbar { gap: var(--sp-1h); padding: 0 var(--sp-2); }
  .logo { font-size: var(--fs-2xl); gap: var(--sp-2); }
  .logo .mark { width: 26px; height: 26px; font-size: var(--fs-lg); }
  .logo > span:not(.mark) { display: none; }
  .balance-pill { font-size: var(--fs-md); padding: var(--sp-1h) var(--sp-2h); gap: var(--sp-1h); }
  .balance-pill .coin { width: 14px; height: 14px; flex: none; }
  .profile-chip { padding: var(--sp-1h) var(--sp-2) var(--sp-1h) var(--sp-1h); }
  .profile-chip .caret { display: none; }

  main.view { padding: var(--sp-4) var(--sp-3h) var(--sp-7); }

  .page { gap: var(--sp-4); }
  .page-body { gap: var(--sp-4); }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-title { font-size: var(--fs-4xl); }
  .case-detail h2 { font-size: var(--fs-3xl); }

  .case-grid { grid-template-columns: 1fr; }
  .lobby-grid { grid-template-columns: 1fr; }
  .ach-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .paged-grid .card-grid, .fill-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .modal .paged-grid .card-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

  .battle-reels, .split-cols { grid-template-columns: 1fr; }
  /* keep host vs joiner side by side so the drops never collapse into one
     sad left-aligned column; each drop centres inside its half */
  .battle-cols { gap: var(--sp-2); min-height: 0; }
  .battle-col .item-card.small { width: 100%; max-width: 150px; }

  .tradeup-slots { grid-template-columns: repeat(3, 1fr); }

  .modal-overlay { padding: var(--sp-3); }
  .modal, .modal.wide { width: 100%; padding: var(--sp-4h) var(--sp-4); max-height: 88vh; }
  .modal .row { flex-wrap: wrap; }
  .modal .ac-box { flex: 1; min-width: 0; }
  .modal .ac-box > input { width: 100% !important; box-sizing: border-box; }

  .gauge-svg { max-width: 100%; height: auto; }
  .coin3d { width: 120px; height: 120px; }
  .jp-pot { font-size: var(--fs-9xl); }

  .inv-summary { margin-left: 0; width: 100%; }
  .event-data { max-width: 200px; }

  .settings-grid .row { flex-wrap: wrap; }
  .settings-grid .ac-box { flex: 1; min-width: 0; }
  .settings-grid .ac-box > input { width: 100% !important; box-sizing: border-box; }

  .auth-box { width: 100%; padding: var(--sp-6) var(--sp-5); }
  .auth-wrap { padding: var(--sp-4); }
  .toast-stack { right: 10px; left: 10px; }
  .toast, .toast.achievement { max-width: 100%; }

  .battle-modal-bar { flex-wrap: wrap; }
}

/* 360px + a six-figure balance is the worst case; shave the pill so the
   profile chip always stays on screen */
@media (max-width: 400px) {
  .balance-pill { font-size: var(--fs-base); padding: var(--sp-1h) var(--sp-2); }
}

@media (max-width: 860px) {
  /* 16px is the threshold below which iOS auto-zooms a focused field */
  input[type="text"], input[type="password"], input[type="number"],
  input[type="email"], input[type="search"], textarea, select,
  .page-toolbar.controls input, .page-toolbar.controls select,
  .support-form textarea, .support-reply, .bulk-area,
  .db-search, .grid-search, .captcha-in {
    font-size: var(--fs-2xl);
  }
  /* the bump keeps fixed-height toolbars from clipping 16px text */
  .page-toolbar.controls input, .page-toolbar.controls select, .page-toolbar.controls .btn,
  .market-pill, .market-price-range, .market-sort,
  .market-toolbar .ac-box, .market-toolbar .ac-box input { height: 44px; }

  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; padding: var(--sp-2h) var(--sp-3h); font-size: var(--fs-md); }
  .icon-btn, .icon-btn.sm, .topbar .icon-btn,
  .admin-actions .icon-btn.sm { width: 40px; height: 40px; }
  .icon-btn.sm { font-size: var(--fs-xl); }
  .nav-item { min-height: 44px; }
  .db-table-btn { padding: var(--sp-3) var(--sp-3); }
  .fav-btn { padding: var(--sp-1h) var(--sp-2h); font-size: var(--fs-xl); }
  .clan-icon-btn { width: 36px; height: 36px; }
  .clan-icon-btn.sm { width: 30px; height: 30px; font-size: var(--fs-md); }
  .equip-tab-edit { padding: var(--sp-1h) var(--sp-2); font-size: var(--fs-lg); }

  /* fade the rail edges so off-screen tabs are discoverable, and give
     the active tab an underline that reads in the horizontal strip */
  .nav-rail {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .nav-item.active { box-shadow: inset 0 -2px 0 var(--accent); }

  /* scope the grid conversion to touch widths so desktop is untouched */
  .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
  .market-card { width: 100%; }

  /* never floor wider than the screen, so columns degrade smoothly */
  .case-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }

  /* the shell stacks vertically here, so main.view is full content
     height and the document scrolls; a nested overflow scroller would
     just trap touch gestures and never scroll */
  main.view {
    overflow: visible;
    padding-left: max(var(--sp-5), env(safe-area-inset-left));
    padding-right: max(var(--sp-5), env(safe-area-inset-right));
  }

  .allin-btn:active { filter: brightness(1.15); transform: scale(0.98); }
}

@media (max-width: 560px) {
  main.view {
    padding-left: max(var(--sp-3h), env(safe-area-inset-left));
    padding-right: max(var(--sp-3h), env(safe-area-inset-right));
  }

  .jp-pot { font-size: var(--fs-8xl); }

  .bj-table { padding: var(--sp-4h) var(--sp-3h); }
  .playing-card { width: 54px; height: 78px; }

  /* stack host / VS / joiner vertically so VS sits centred between them and
     never collides with the modal close button in the top-right corner */
  .battle-heads { flex-direction: column; align-items: center; gap: var(--sp-1h); }
  .battle-head { justify-content: center; }
  .battle-vs { order: 0; }

  .support-ticket-row { grid-template-columns: 1fr auto; row-gap: var(--sp-1h); }
  .support-ticket-msgs { display: none; }
  .support-ticket-date { grid-column: 1 / -1; text-align: left; }

  .lb-table th:nth-child(5), .lb-table td:nth-child(5) { display: none; }
  .lb-table th, .lb-table td { padding: var(--sp-2); }
}


.coll-layout { display: flex; gap: var(--sp-5); align-items: flex-start; }
.coll-main { flex: 1; min-width: 0; }
/* desktop: a vertical case menu that echoes the left nav rail and sticks in
   view while the grid scrolls */
.coll-cases {
  width: 232px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-1h);
  position: sticky; top: 6px; max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px - var(--banner-h)); overflow-y: auto;
  padding-right: var(--sp-1);
}
.coll-tab {
  display: flex; align-items: center; gap: var(--sp-2h); width: 100%; text-align: left;
  background: none; border: var(--bw-hair) solid var(--line); color: var(--dim);
  padding: var(--sp-3) var(--sp-3h); cursor: pointer; clip-path: var(--clip-sm);
  font-weight: 600; font-size: var(--fs-md); position: relative;
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.coll-tab:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.coll-tab-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll-tab-count {
  flex-shrink: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--dim);
  background: rgba(255, 255, 255, 0.06); padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill);
}
.coll-tab.done { border-color: rgba(74, 222, 128, 0.35); }
.coll-tab.done .coll-tab-count { color: #4ade80; background: rgba(74, 222, 128, 0.14); }
.coll-tab.active { border-color: var(--cc); background: rgba(255, 255, 255, 0.05); color: var(--text); box-shadow: inset 3px 0 0 var(--cc); }
.coll-tab.active .coll-tab-name { color: var(--cc); }

/* tablets and phones: drop the sticky rail for a wrapping, vertically scrolling
   grid of cases (same pattern as the achievements nav) which reads far better
   than a horizontal scroll strip on touch */
@media (max-width: 860px) {
  /* stacking the menu on top means the main panel must stretch to full width,
     otherwise align-items:flex-start collapses the grid to a single column */
  .coll-layout { flex-direction: column; gap: 0; align-items: stretch; }
  .coll-cases {
    position: static; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    width: auto; max-height: 260px; overflow-y: auto; gap: var(--sp-2);
    padding: var(--sp-0); margin-bottom: var(--sp-3h);
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .coll-tab.active { box-shadow: inset 0 -2px 0 var(--cc); }
}

.coll-case-head { margin-bottom: var(--sp-4); }
.coll-case-title { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; }
.coll-done-badge {
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.03em;
  color: #4ade80; background: rgba(74, 222, 128, 0.12); border: var(--bw-hair) solid rgba(74, 222, 128, 0.35);
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill);
}
.coll-case-sub { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.coll-case-sub .dim { font-size: var(--fs-md); white-space: nowrap; }
.coll-row .progress-bar { max-width: 340px; }

.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.coll-grid .item-card { width: 100%; }

/* a slot the player still needs. Addable = they own a fitting skin: accent
   prompt, slightly revived art, clickable. Non-addable = a plain "Missing"
   marker. Both markers stay visible on touch (no hover) via the block below. */
.item-card.coll-missing { cursor: default; border-bottom-color: rgba(255, 255, 255, 0.12); }
.item-card.coll-addable { cursor: pointer; }
.item-card.coll-missing .item-meta { opacity: 0.5; }
.coll-missing-art { filter: grayscale(1); opacity: 0.3; }
.item-card.coll-addable .coll-missing-art { filter: grayscale(0.25); opacity: 0.6; }
.coll-add-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 11, 16, 0.42); opacity: 0; transition: opacity var(--dur-base);
  font-weight: 700; font-size: var(--fs-base); color: var(--dim); text-align: center; padding: var(--sp-1h);
}
.item-card.coll-addable .coll-add-overlay { color: var(--accent); background: rgba(8, 11, 16, 0.62); opacity: 1; }
.item-card.coll-missing:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.item-card.coll-missing:hover .coll-add-overlay { opacity: 1; }
.badge.coll-check { top: 5px; right: 5px; background: rgba(74, 222, 128, 0.92); color: #06210f; }

.coll-pick-grid { margin-top: var(--sp-1h); }
.coll-pick-grid .empty-note { grid-column: 1 / -1; }
.coll-pick-controls { align-items: center; margin: var(--sp-2h) 0 var(--sp-0); }
.coll-pick-pager { margin-top: var(--sp-3); }
.tick-item.collection .for { color: var(--rc); }

/* phones and tablets can't hover to reveal the marker, so on any touch pointer
   or narrow screen the Add / Missing label is always shown */
@media (hover: none), (pointer: coarse), (max-width: 860px) {
  .item-card.coll-missing .coll-add-overlay { opacity: 1; }
}
@media (max-width: 560px) {
  .progress-summary { flex-wrap: wrap; }
  .progress-summary .progress-track { order: 3; flex-basis: 100%; }
  .coll-grid { grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: var(--sp-2h); }
}

/* Admin "give items" multi-select tray: the running basket of picks, shown
   below the catalog so selections stay visible while searching. */
.give-tray { margin-top: var(--sp-3h); border-top: var(--bw-hair) solid var(--line); padding-top: var(--sp-3); }
.give-tray-empty { font-size: var(--fs-base); line-height: 1.6; }
.give-tray-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.give-tray-head .btn.sm { margin-left: auto; }
.give-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1h); max-height: 122px; overflow-y: auto; }
.give-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-1h) var(--sp-1) var(--sp-3); font-size: var(--fs-base); font-weight: 600;
}
.give-chip-wear { font-size: var(--fs-xs); color: var(--dim); }
.give-mod-groups { display: flex; flex-direction: column; gap: var(--sp-2); }
.give-mod-group {
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02); padding: var(--sp-2) var(--sp-2h);
}
.give-mod-group-head {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1h);
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim);
}
.give-mod-group-ico { color: var(--accent); font-size: var(--fs-md); }
.give-mod-group-n { margin-left: auto; letter-spacing: 0; opacity: 0.6; }
.give-mod-rar { display: flex; align-items: flex-start; gap: var(--sp-1h); padding: var(--sp-1) 0; }
.give-mod-rar + .give-mod-rar { border-top: var(--bw-hair) dashed rgba(255, 255, 255, 0.05); }
.give-mod-rar-tag { flex: 0 0 82px; padding-top: var(--sp-1h); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.give-mod-rar-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1h); min-width: 0; flex: 1; }
@media (max-width: 560px) {
  .give-mod-rar { flex-direction: column; gap: var(--sp-1); }
  .give-mod-rar-tag { flex: none; padding-top: 0; }
}
.give-mod-chip {
  display: inline-flex; align-items: center; gap: var(--sp-0);
  background: var(--raised); border: var(--bw-hair) solid var(--line); color: var(--dim);
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-lg); font: inherit; font-size: var(--fs-base); cursor: pointer; transition: var(--dur-fast);
}
.give-mod-chip:hover { color: var(--text); }
.give-mod-chip.on { color: var(--text); border-color: var(--accent); background: rgba(255, 177, 61, 0.1); }
.give-chip-x {
  background: rgba(255, 255, 255, 0.06); border: none; color: var(--dim); cursor: pointer;
  width: 18px; height: 18px; border-radius: var(--radius-circle); font-size: var(--fs-xs); display: grid; place-items: center;
}
.give-chip-x:hover { background: var(--danger); color: #fff; }

/* Loaded immediately before views/locker/equipment.css, the module these rules
   were extracted from, so every view that restyles a pill (warzone.css) or
   restyles the line as a caller class (contracts.css, clan-war-ranked.css)
   still lands after the base and keeps winning. The line carries no vertical
   margin on purpose: it is a flex/grid item in four horizontal contexts, so
   the containing card owns the rhythm. */
.combat-line { display: flex; gap: var(--sp-1h); justify-content: center; flex-wrap: wrap; }
.combat-pill {
  font-size: var(--fs-sm); font-weight: 600; color: var(--dim);
  border: var(--bw-hair) solid var(--line); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2h); background: rgba(255, 255, 255, 0.02);
}
.combat-pill b { font-family: var(--font-display); }
.combat-pill.atk b { color: #ff7a6b; }
.combat-pill.def b { color: #5aa9ff; }

.gear-pill {
  font-size: var(--fs-sm); font-weight: 600; color: var(--gc);
  border: var(--bw-hair) solid var(--gc); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2h);
  background: rgba(255, 255, 255, 0.02);
}
.gear-pill b { font-family: var(--font-display); color: var(--gc); }

/* .item-meta is a flex column with no gap, so the separation is stated here
   once for any card that gets a line appended rather than per call site. */
.item-meta > .combat-line { margin-top: var(--sp-1h); }
/* Row 1 is just the loadout tabs; row 2 packs the stat totals and the Clear
   action together, left-aligned, so a long loadout name never shoves anything
   around and there is no dead horizontal gap. */
.equip-bar { display: flex; flex-direction: column; gap: var(--sp-2h); }
.equip-switcher { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.equip-stats-row { display: flex; align-items: stretch; gap: var(--sp-2h); flex-wrap: wrap; }
/* Clear sits at the end of the stat tiles as a danger-tinted tile that matches
   their height, so it reads as a deliberate, separate action, not a tab. */
.equip-clear {
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.35); border-radius: var(--radius-lg); padding: 0 var(--sp-4h);
  background: rgba(255, 80, 103, 0.07); color: var(--danger);
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.02em;
  transition: background var(--dur-base), border-color var(--dur-base), opacity var(--dur-base);
}
.equip-clear:hover:not(:disabled) { background: rgba(255, 80, 103, 0.16); border-color: var(--danger); }
.equip-clear:disabled { opacity: 0.32; cursor: default; }
.equip-clear-ico { font-size: var(--fs-xl); line-height: var(--lh-none); }
.page-tab .equip-tab-name { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equip-tab-edit { font-size: var(--fs-base); color: var(--dim); padding: 0 var(--sp-0); cursor: pointer; }
.equip-tab-edit:hover { color: var(--accent); }

.equip-totals { display: flex; gap: var(--sp-2h); flex-wrap: wrap; }
.equip-total {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-0);
  border: var(--bw-hair) solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-2) var(--sp-4); min-width: 80px; background: var(--surface);
}
.equip-total .lbl { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.equip-total .val { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; white-space: nowrap; }
.equip-total.atk .val { color: #ff7a6b; }
.equip-total.def .val { color: #5aa9ff; }
.equip-total.mods { border-color: rgba(150, 100, 255, 0.35); background: rgba(150, 100, 255, 0.05); justify-content: center; }
.equip-total.mods .lbl { color: #c9a9ff; }
.equip-mod-pills { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; max-width: 260px; }

.equip-board {
  display: grid; gap: var(--sp-3h);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "gloves helmet primary"
    "knife armor secondary";
}
.equip-slot {
  --rc: var(--line);
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; text-align: center;
  border: var(--bw-hair) solid var(--line); border-radius: var(--radius-xl); padding: var(--sp-4h) var(--sp-3h) var(--sp-4); cursor: pointer;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.03), transparent 60%), var(--surface);
  position: relative; min-height: 206px; min-width: 0; justify-content: center;
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
.equip-slot-weapon, .equip-slot-finish { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equip-slot:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.equip-slot.filled { border-color: var(--rc); }
.equip-slot-label {
  position: absolute; top: 10px; left: 14px; font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim);
}
.equip-slot-art { position: relative; width: 96px; height: 70px; display: grid; place-items: center; margin-top: var(--sp-1h); }
.slot-glyph { width: 100%; height: 100%; color: var(--rc); }
.equip-slot-art.ghost .slot-glyph { color: rgba(255, 255, 255, 0.12); }
.equip-slot-art .badge { transform: scale(0.92); }
.equip-slot-weapon { font-weight: 700; font-size: var(--fs-md); line-height: 1.25; }
.equip-slot-finish { font-size: var(--fs-base); color: var(--dim); }
.equip-empty-hint { font-size: var(--fs-base); color: var(--dim); }
.equip-slot-actions { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: var(--sp-1h); margin-top: var(--sp-0); }

.equip-gear {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 124px;
  border: var(--bw-hair) solid var(--gc); border-radius: var(--radius-lg); padding: var(--sp-1h) var(--sp-5); background: var(--surface);
  box-shadow: inset 0 0 24px -12px var(--gc);
}
.equip-gear .lbl { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.equip-gear .val { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 800; line-height: 1.05; color: var(--gc); text-shadow: 0 0 16px var(--gc); }
.equip-gear .tier { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gc); }

.equip-tab-live { color: var(--good); font-size: var(--fs-2xs); line-height: var(--lh-none); text-shadow: 0 0 6px var(--good); }

.equip-pick-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4h); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.equip-pick-filters { display: flex; align-items: center; gap: var(--sp-3h); flex-wrap: wrap; font-size: var(--fs-md); }
.equip-filter-chk { display: inline-flex; align-items: center; gap: var(--sp-1h); cursor: pointer; color: var(--text); }
.equip-filter-chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.equip-unequip { background: none; border: var(--bw-hair) solid rgba(255, 80, 103, 0.5); color: var(--danger); }
.equip-unequip:hover { background: rgba(255, 80, 103, 0.12); color: #ff8a96; }

.btn.sm.ghost { background: none; border: var(--bw-hair) solid var(--line); color: var(--dim); }
.btn.sm.ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }

.equip-picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2h); }
.equip-picker-head h3 { font-size: var(--fs-3xl); }
.equip-picker .empty-note { padding: var(--sp-6) var(--sp-4); }
.equip-rename h3 { margin-bottom: var(--sp-3); }
.equip-rename-in { width: 100%; }

@media (max-width: 720px) {
  .equip-board {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "helmet helmet"
      "armor armor"
      "primary secondary"
      "gloves knife";
  }
  .equip-slot { min-height: 184px; }
}
@media (max-width: 480px) {
  .equip-totals { width: 100%; margin-left: 0; gap: var(--sp-2); }
  .equip-gear { flex-basis: 100%; flex-direction: row; align-items: baseline; justify-content: center; gap: var(--sp-2h); padding: var(--sp-2) var(--sp-3h); }
  .equip-gear .val { font-size: var(--fs-5xl); }
  .equip-total { flex: 1; min-width: 0; padding: var(--sp-1h) var(--sp-2); }
}

.clan-tag { color: var(--clan, var(--accent)); font-family: var(--font-display); font-weight: 700; margin-right: var(--sp-2); }
/* GLOBAL clan-tag treatment (applies on EVERY surface the tag renders before a
   name: leaderboard rows, the top-right profile chip, the PLAYER inspect card,
   clan/ops/standings rows, kill feed, trading, tickers, etc.).
   - margin-right:0 so the tag sits SNUG before the name: every container that
     holds it is a flex row with its own `gap`, which alone provides the spacing,
     so a legacy margin here would double that gap (the "too wide" gap bug).
   - text-decoration:none (incl. on hover) so the tag NEVER picks up the underline
     of a clickable name/button it is nested inside, and never looks like a link. */
.clan-tag-color {
  font-family: var(--font-display); font-weight: 700; margin-right: 0;
  text-decoration: none;
}
.clan-tag-color:hover, a:hover > .clan-tag-color, button:hover > .clan-tag-color { text-decoration: none; }

/* clan banner art (logo over background) */
.clan-banner {
  position: relative; display: inline-block; overflow: hidden;
  clip-path: var(--clip-sm); border: var(--bw-hair) solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.clan-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.clan-banner-logo { position: absolute; inset: 14%; width: 72%; height: 72%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }

.clan-hero { display: flex; align-items: center; gap: var(--sp-4h); flex-wrap: wrap; }
.clan-hero-emblem { flex: 0 0 auto; }
.clan-hero-body { flex: 1; min-width: 220px; }
.clan-hero-body h2 { font-size: var(--fs-3xl); }
.clan-hero-body p { color: var(--dim); font-size: var(--fs-md); margin: var(--sp-1h) 0 var(--sp-3); }
.clan-gate-note { font-size: var(--fs-base); color: var(--bad); margin-top: var(--sp-1h); }

.clan-browse-tools .grid-search { width: 240px; max-width: 100%; }
.clan-invites-btn { position: relative; }
.clan-invites-btn.active { border-color: var(--accent); color: var(--text); background: rgba(255, 177, 61, 0.08); }
.clan-invites-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  margin-left: var(--sp-2); padding: 0 var(--sp-1h); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 800;
  color: #fff; background: var(--bad);
}

/* browser table */
.clan-browse-body { overflow-x: auto; }
.clan-browse-table { display: flex; flex-direction: column; min-width: 960px; }
.clan-browse-table.view { min-width: 825px; }
.clan-browse-row {
  display: grid;
  grid-template-columns: 50px minmax(160px, 1fr) 130px 84px 78px 80px 112px 150px;
  align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3h);
  border: var(--bw-hair) solid var(--line); border-top: none; background: var(--raised);
}
.clan-browse-table.view .clan-browse-row {
  grid-template-columns: 50px minmax(170px, 1fr) 130px 88px 82px 84px 120px;
}
.clan-browse-row:first-child { border-top: var(--bw-hair) solid var(--line); }
.clan-browse-row.head {
  background: var(--bg); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim); font-weight: 700; padding: var(--sp-2h) var(--sp-3h);
}
.clan-browse-row .cb-meta { display: contents; }
.clan-browse-row .cb-name { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.clan-browse-row .clan-card-name { font-size: var(--fs-xl); }
.cb-motto { font-size: var(--fs-base); color: var(--dim); font-style: italic; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-rank { display: flex; align-items: center; justify-content: center; min-width: 0; }
.cb-rank .tier-chip { min-width: 0; }
.cb-rep { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cb-members, .cb-leader { font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cb-founded { font-size: var(--fs-md); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-action { display: flex; justify-content: flex-end; }
.cb-action .btn { white-space: nowrap; }
.clan-browse-body > .empty-note { padding: var(--sp-5h); }

/* request-sent + invite cards */
.clan-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.clan-card-grid > .empty-note { grid-column: 1 / -1; }
.clan-card {
  background: var(--raised); border: var(--bw-hair) solid var(--line);
  border-left: var(--bw-frame) solid var(--clan, var(--accent)); clip-path: var(--clip-sm); padding: var(--sp-3h);
}
.clan-card-top { display: flex; align-items: center; gap: var(--sp-3); }
.clan-card-id { min-width: 0; }
.clan-card-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); overflow-wrap: anywhere; }
.clan-stat { font-size: var(--fs-md); color: var(--dim); font-variant-numeric: tabular-nums; }
.clan-stat b { color: var(--text); }
.clan-req-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1h); margin-top: var(--sp-2); }
.clan-req-chip {
  font-size: var(--fs-sm); font-weight: 600; color: var(--dim); padding: var(--sp-0) var(--sp-2);
  background: var(--bg); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-lg);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.clan-recruit-tag {
  font-size: var(--fs-sm); font-weight: 600; padding: var(--sp-0) var(--sp-2h); border-radius: var(--radius-pill);
  border: var(--bw-hair) solid var(--line); color: var(--dim); white-space: nowrap;
}
.clan-recruit-tag.open { color: var(--good); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); }
.clan-recruit-tag.closed { color: var(--dim); }

.clan-band {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--clan) 24%, transparent), transparent 70%),
    var(--surface);
  border: var(--bw-hair) solid var(--line); border-top: var(--bw-frame) solid var(--clan, var(--accent));
  clip-path: var(--clip); padding: var(--sp-5) var(--sp-5);
}
.clan-band-emblem { flex: 0 0 auto; }
.clan-band-body { flex: 1; min-width: 220px; }
.clan-band-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-6xl); display: flex; align-items: baseline; gap: 0 var(--sp-2); flex-wrap: wrap; overflow-wrap: anywhere; }
.clan-band-motto { color: var(--dim); font-size: var(--fs-lg); font-style: italic; margin: var(--sp-1) 0 var(--sp-3); overflow-wrap: anywhere; }
.clan-band-stats { display: flex; gap: var(--sp-3h); flex-wrap: wrap; align-items: center; }

.clan-rank-chip {
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill); border: var(--bw-hair) solid var(--line); color: var(--dim); white-space: nowrap;
}
.clan-rank-chip.gm { color: var(--accent); border-color: rgba(255, 177, 61, 0.45); background: rgba(255, 177, 61, 0.1); }
.clan-rank-chip.officer { color: var(--teal); border-color: rgba(65, 224, 200, 0.4); background: rgba(65, 224, 200, 0.08); }

.clan-pip {
  margin-left: var(--sp-2); font-size: var(--fs-sm); font-weight: 800; min-width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--sp-1);
  border-radius: var(--radius-pill); color: #1a0f04; background: var(--accent);
}

.clan-rep { display: flex; align-items: center; gap: var(--sp-2h); margin: var(--sp-2) 0 var(--sp-3); max-width: 460px; }
.clan-rep-badge {
  flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base);
  letter-spacing: 0.06em; color: var(--clan, var(--accent));
  padding: var(--sp-0) var(--sp-2); border: var(--bw-hair) solid color-mix(in srgb, var(--clan, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--clan, var(--accent)) 12%, transparent); clip-path: var(--clip-sm);
}
.clan-rep-badge.sm { font-size: var(--fs-sm); padding: var(--sp-0) var(--sp-1h); }
.clan-rep-bar { flex: 1; height: 8px; background: rgba(0, 0, 0, 0.35); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.clan-rep-fill { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--clan, var(--accent)) 70%, #fff), var(--clan, var(--accent))); transition: width var(--dur-slower) ease; }
.clan-rep-next { font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.clan-overview { display: flex; flex-direction: column; gap: var(--sp-3h); }
.clan-overview-hero {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  border-left: var(--bw-frame) solid var(--clan, var(--accent));
}
.clan-ovh-banner { flex: 0 0 auto; }
.clan-ovh-body { flex: 1; min-width: 240px; }
.clan-ovh-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5xl); display: flex; align-items: baseline; gap: 0 var(--sp-2); flex-wrap: wrap; overflow-wrap: anywhere; }
.clan-ovh-motd { font-size: var(--fs-md); color: var(--text); margin: var(--sp-1h) 0; overflow-wrap: anywhere; }
.clan-ovh-tier { margin-top: var(--sp-1); }

.clan-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3h); }
.clan-stat-card .stat-tile-v { font-size: var(--fs-3xl); }

.clan-loadout-list { display: flex; flex-direction: column; gap: var(--sp-2h); }
.clan-loadout-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.clan-loadout-meta { display: flex; align-items: center; gap: var(--sp-3h); margin-left: auto; flex-wrap: wrap; }
.clan-loadout-name { font-size: var(--fs-md); color: var(--dim); font-style: italic; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-loadout-stats { display: flex; gap: var(--sp-3); font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.clan-loadout-stats .gs { color: var(--accent); }
.clan-loadout-stats .atk { color: var(--bad); }
.clan-loadout-stats .def { color: var(--teal); }
.clan-loadout-hint { font-size: var(--fs-base); margin: var(--sp-0) 0 var(--sp-2h); }

.clan-lo-view { display: flex; flex-direction: column; gap: var(--sp-3h); }
.clan-lo-head { display: flex; align-items: center; gap: var(--sp-3h); flex-wrap: wrap; }
.clan-lo-head-meta { display: flex; align-items: center; gap: var(--sp-3h); margin-left: auto; flex-wrap: wrap; }
.clan-lo-body { min-height: 150px; }
.clan-lo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--sp-2h); justify-items: center; }
.clan-lo-empty {
  width: 100%;
  min-height: 150px;
  display: grid;
  place-items: center;
  border: var(--bw-hair) dashed var(--line);
  clip-path: var(--clip-sm);
  color: var(--dim);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
}

.clan-id-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.clan-member-name { font-weight: 600; font-size: var(--fs-lg); }
button.clan-member-name { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.clan-member-meta { font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; display: inline-flex; align-items: center; }

.clan-invite-bar { display: flex; gap: var(--sp-2h); align-items: center; margin-bottom: var(--sp-3h); flex-wrap: wrap; }
.clan-invite-bar .ac-box { flex: 1; min-width: 160px; }
.clan-invite-bar .ac-box input { width: 100%; }
.clan-roster-toggle { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); color: var(--dim); cursor: pointer; }
.clan-roster-count { font-size: var(--fs-base); color: var(--dim); margin-left: auto; font-variant-numeric: tabular-nums; }
.clan-roster-host { display: flex; flex-direction: column; gap: var(--sp-2); }
.clan-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px minmax(0, 260px);
  align-items: center;
  gap: var(--sp-3h);
}
.clan-presence-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-circle);
  background: var(--dim); flex-shrink: 0; vertical-align: middle; margin-right: var(--sp-2);
}
.clan-presence-dot.on { background: var(--good, #4ade80); box-shadow: 0 0 6px rgba(74, 222, 128, 0.75); }
.clan-identity-zone { display: flex; flex-direction: column; gap: var(--sp-1h); min-width: 0; }
.clan-role-zone { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.clan-role-zone .clan-rank-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-actions-zone { display: flex; gap: var(--sp-1h); align-items: center; justify-content: flex-end; flex-wrap: wrap; min-height: 28px; }
.clan-rank-select {
  background: var(--bg); border: var(--bw-hair) solid var(--line); color: var(--text);
  padding: var(--sp-1h) var(--sp-2); clip-path: var(--clip-sm); font: inherit; font-size: var(--fs-base); cursor: pointer; max-width: 130px;
}
.clan-roster-actions { display: flex; gap: var(--sp-2h); margin-top: var(--sp-4); flex-wrap: wrap; }

/* roster notes */
.clan-member-notes { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-0); }
.clan-note { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); }
.clan-note-icon { flex-shrink: 0; font-size: var(--fs-sm); opacity: 0.85; }
.clan-note-text { min-width: 0; overflow-wrap: anywhere; }
.clan-note-text.empty { color: var(--dim); font-style: italic; }
.clan-note.officer .clan-note-text { color: var(--teal); }
.clan-icon-btn {
  flex-shrink: 0; background: none; border: var(--bw-hair) solid var(--line); color: var(--dim);
  width: 28px; height: 28px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--dur-base); font-size: var(--fs-md);
}
.clan-icon-btn.sm { width: 22px; height: 22px; font-size: var(--fs-sm); }
.clan-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 177, 61, 0.08); }

/* requests + sent invites rows */
.clan-sub-panel { margin-top: var(--sp-4); }
.clan-req-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3h);
}
.clan-req-body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.clan-req-message { font-size: var(--fs-base); color: var(--text); font-style: italic; overflow-wrap: anywhere; }

.clan-bank-balance { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
.clan-bank-balance b { font-size: var(--fs-5xl); font-family: var(--font-display); color: var(--accent); }
.clan-bank-row { display: flex; flex-direction: column; gap: var(--sp-2); }
.clan-bank-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); flex-wrap: wrap; min-height: 22px; }
.clan-bank-row-head .clan-field-label { margin: 0; }
.clan-bank-controls { display: flex; gap: var(--sp-2h); align-items: center; flex-wrap: wrap; }
.clan-bank-input { width: 200px; max-width: 100%; flex: 1; min-width: 140px; }
.clan-bank-cash { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4h); }
.clan-allowance {
  display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-0) var(--sp-2h);
  font-size: var(--fs-base); font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums;
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-lg); white-space: nowrap;
}
.clan-allowance.blocked { color: var(--bad, #eb4b4b); border-color: rgba(235, 75, 75, 0.35); background: rgba(235, 75, 75, 0.08); }
.clan-vault-head {
  display: flex; align-items: center; gap: var(--sp-3) var(--sp-2h); flex-wrap: wrap;
  margin: var(--sp-5) 0 var(--sp-3); padding-bottom: var(--sp-3); border-bottom: var(--bw-hair) solid var(--line);
}
.clan-vault-title { display: flex; align-items: center; gap: var(--sp-2h); margin-right: auto; }
.clan-vault-title-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); text-transform: uppercase; letter-spacing: 0.06em; }
.clan-vault-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 var(--sp-2); font-size: var(--fs-base); font-weight: 700;
  color: var(--accent); background: rgba(255, 177, 61, 0.12);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.3); border-radius: var(--radius-lg); font-variant-numeric: tabular-nums;
}
.clan-vault-count.full { color: var(--bad); background: rgba(235, 75, 75, 0.12); border-color: rgba(235, 75, 75, 0.35); }
.clan-vault-deposit { flex-shrink: 0; }
.clan-vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-1); }
.clan-vault-grid .item-card { width: 100%; }
.clan-vault-item { display: flex; flex-direction: column; }
.clan-vault-foot { margin-top: var(--sp-1h); display: flex; }
.clan-vault-foot .btn { flex: 1; justify-content: center; }
.clan-deposit-picker .paged-grid .card-grid { max-height: 56vh; overflow-y: auto; }

.clan-pool-section { margin-top: var(--sp-1h); }
.clan-pool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.clan-pool-chip {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3h);
  background: var(--bg); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
  border-left: var(--bw-frame) solid var(--rc, var(--accent));
}
.clan-pool-chip.zero { opacity: 0.5; }
.clan-pool-glyph { color: var(--rc, var(--accent)); font-size: var(--fs-3xl); line-height: var(--lh-none); }
.clan-pool-meta { display: flex; flex-direction: column; gap: var(--sp-0); min-width: 0; }
.clan-pool-amount { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); color: var(--text); font-variant-numeric: tabular-nums; }
.clan-pool-label { font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }

.clan-distrib-pool { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-1) 0 var(--sp-1); }
.clan-distrib-pool-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-1) var(--sp-2h); font-size: var(--fs-md); font-weight: 700;
  color: var(--text); background: var(--bg); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-xl);
  font-variant-numeric: tabular-nums;
}
.clan-distrib-pool-chip.zero { opacity: 0.45; }
.clan-distrib-methods { margin-bottom: var(--sp-1h); }
.clan-distrib-toolbar { justify-content: space-between; }
.clan-distrib-preview-head { margin: var(--sp-3h) 0 var(--sp-1h); }
/* Preview table: member column + one fixed column per resource, with a sticky
   header row and a totals footer, so every allocation lines up vertically. */
.clan-distrib-table { display: flex; flex-direction: column; gap: var(--sp-1h); max-height: 46vh; overflow-y: auto; }
/* While a fresh preview loads, the current table stays put and just dims - it is
   never torn down for a placeholder, so a method switch does not flicker. */
.clan-distrib-table.loading { opacity: 0.5; pointer-events: none; transition: opacity var(--dur-fast) ease; }
.clan-distrib-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 78px);
  align-items: center;
  gap: var(--sp-2h);
}
.clan-distrib-row.head { background: var(--bg); padding: var(--sp-1h) var(--sp-3); position: sticky; top: 0; z-index: 1; }
.clan-distrib-row.head .clan-distrib-col-member {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 700;
}
.clan-distrib-row.head .clan-distrib-col { font-size: var(--fs-xl); }
.clan-distrib-row.totals { background: var(--bg); border-left: var(--bw-frame) solid var(--accent); }
.clan-distrib-row.totals .clan-distrib-col-member {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); font-weight: 700;
}
.clan-distrib-col-member { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.clan-distrib-col {
  text-align: right; font-weight: 700; font-size: var(--fs-md); min-width: 0;
  color: var(--rc, var(--accent)); font-variant-numeric: tabular-nums;
}
.clan-distrib-col.amt.zero { color: var(--dim); opacity: 0.5; font-weight: 500; }
.clan-distrib-col.amt.over { color: var(--bad, #eb4b4b); }
.clan-distrib-row-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); }
.clan-distrib-row-meta .clan-presence-dot { margin-right: 0; }
.clan-distrib-basis { display: inline-flex; align-items: center; gap: var(--sp-1h); color: var(--dim); font-variant-numeric: tabular-nums; }
.clan-distrib-mit { color: var(--rc, #4ade80); }
.clan-distrib-input {
  width: 100%; min-width: 0; padding: var(--sp-1) var(--sp-2);
  background: var(--bg); border: var(--bw-hair) solid var(--line); border-bottom: var(--bw-thick) solid var(--rc, var(--accent));
  color: var(--text); caret-color: var(--text); font: inherit; font-size: var(--fs-md); text-align: right; font-variant-numeric: tabular-nums;
}
.clan-distrib-input::placeholder { color: var(--dim); opacity: 1; }
.clan-distrib-input:focus { outline: none; border-color: var(--rc, var(--accent)); }
.clan-rank-chip.sm { font-size: var(--fs-xs); padding: var(--sp-0) var(--sp-2); }

.clan-config-body > .panel { margin-top: 0; }

.clan-settings h3 .clan-tag-color { margin-right: var(--sp-2); }
.clan-field-label { display: block; font-size: var(--fs-sm); color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em; margin: var(--sp-3h) 0 var(--sp-1h); }
.clan-settings input[type="text"], .clan-create input[type="text"] { width: 100%; }
.clan-note-input { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-3h); min-height: 48px; }
.clan-settings h3 + .dim { margin-bottom: var(--sp-0); }
.clan-join-modal { display: flex; flex-direction: column; gap: var(--sp-3h); }
.clan-join-modal > * { margin: 0; }
.clan-join-modal h3 + .dim { margin: 0; }
.clan-desc-input {
  width: 100%; min-height: 64px; resize: vertical; font: inherit;
  background: var(--bg); border: var(--bw-hair) solid var(--line); color: var(--text); padding: var(--sp-2h) var(--sp-3); clip-path: var(--clip-sm);
}
.clan-req-hint { font-size: var(--fs-base); margin: var(--sp-0) 0 var(--sp-2); }
.clan-req-editor { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-1h); }
.clan-req-field { display: flex; flex-direction: column; }
.clan-req-field .clan-field-label { margin-bottom: var(--sp-1h); }
.clan-req-input { width: 100%; }

.clan-cut-row { display: flex; align-items: center; gap: var(--sp-2); max-width: 160px; }
.clan-cut-input { width: 100%; background: var(--bg); border: var(--bw-hair) solid var(--line); color: var(--text); padding: var(--sp-2h) var(--sp-3); font: inherit; clip-path: var(--clip-sm); }
.clan-cut-suffix { font-weight: 700; color: var(--dim); }
.ct-clan-cut { font-size: var(--fs-base); margin-top: var(--sp-2); }

.clan-recruit-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2h); }
.clan-recruit-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); text-align: left;
  padding: var(--sp-3); background: var(--raised); color: var(--text);
  border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); cursor: pointer; transition: var(--dur-base);
}
.clan-recruit-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(255, 177, 61, 0.06); }
.clan-recruit-btn.on { border-color: var(--accent); background: rgba(255, 177, 61, 0.1); }
.clan-recruit-glyph { font-size: var(--fs-3xl); }
.clan-recruit-name { font-weight: 700; font-size: var(--fs-md); }
.clan-recruit-desc { font-size: var(--fs-sm); color: var(--dim); line-height: 1.3; }

/* color picker (swatches + wheel/hex) */
.clan-color-picker { display: flex; flex-direction: column; gap: var(--sp-2); }
.clan-swatch-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.clan-swatch {
  width: 28px; height: 28px; border-radius: var(--radius-circle); cursor: pointer; padding: 0;
  border: var(--bw-thick) solid transparent; transition: var(--dur-base);
}
.clan-swatch:hover { transform: scale(1.12); }
.clan-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 8px rgba(255, 255, 255, 0.25); }
.clan-color-custom { display: flex; gap: var(--sp-2h); align-items: center; }
.clan-color-wheel { width: 38px; height: 30px; padding: 0; border: var(--bw-hair) solid var(--line); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.clan-hex-input { width: 110px; text-transform: lowercase; }

/* banner editor */
.clan-banner-editor { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.clan-banner-editor-preview { flex: 0 0 auto; }
.clan-banner-preview { display: inline-block; }
.clan-banner-editor-fields { flex: 1; min-width: 240px; }
.clan-logo-grid, .clan-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: var(--sp-2); }
.clan-logo-btn, .clan-bg-btn {
  background: var(--raised); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
  padding: var(--sp-1h); cursor: pointer; display: grid; place-items: center; transition: var(--dur-base);
}
.clan-logo-btn:hover, .clan-bg-btn:hover { background: rgba(255, 255, 255, 0.05); }
.clan-logo-btn.on, .clan-bg-btn.on { border-color: var(--accent); background: rgba(255, 177, 61, 0.1); }

/* tag editor */
.clan-tag-input { width: 120px; max-width: 100%; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; }
.clan-tag-edit-row { display: flex; gap: var(--sp-5h); align-items: flex-end; flex-wrap: wrap; }
.clan-tag-preview-wrap { display: flex; flex-direction: column; gap: var(--sp-1h); }
.clan-tag-preview { font-size: var(--fs-4xl); }

/* create modal */
.clan-create-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.clan-create-col { min-width: 0; }
.clan-ack { display: flex; align-items: flex-start; gap: var(--sp-2h); margin-top: var(--sp-3h); font-size: var(--fs-md); cursor: pointer; }
.clan-ack-cb { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; margin-top: var(--sp-0); }
.clan-contract {
  background: linear-gradient(135deg, rgba(255, 177, 61, 0.06), transparent 70%), var(--bg);
  border: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid var(--accent); clip-path: var(--clip-sm); padding: var(--sp-4h) var(--sp-5);
}
.clan-contract-seal { font-size: var(--fs-6xl); }
.clan-contract h4 { margin: var(--sp-1h) 0 var(--sp-2h); font-family: var(--font-display); font-size: var(--fs-2xl); }
.clan-contract p { font-size: var(--fs-md); line-height: 1.5; margin: 0 0 var(--sp-2h); }

.clan-rank-create { display: flex; gap: var(--sp-2h); margin: var(--sp-3) 0 var(--sp-4); flex-wrap: wrap; }
.clan-rank-create input { flex: 1; min-width: 180px; }
.clan-rank-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.clan-rank-edit { border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); background: var(--raised); overflow: hidden; }
.clan-rank-edit.gm { border-left: var(--bw-frame) solid var(--accent); }
.clan-rank-edit.locked { opacity: 0.75; }
.clan-rank-swatch { width: 13px; height: 13px; border-radius: var(--radius-xs); border: var(--bw-hair) solid rgba(255, 255, 255, 0.25); flex-shrink: 0; }
.clan-rank-edit-head {
  display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2h) var(--sp-3h);
  background: var(--bg); border-bottom: var(--bw-hair) solid var(--line); flex-wrap: wrap;
}
.clan-rank-pos { font-size: var(--fs-base); font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.clan-rank-edit-name { font-weight: 700; font-size: var(--fs-xl); font-family: var(--font-display); }
.clan-rank-count { font-size: var(--fs-base); color: var(--dim); }
.clan-rank-tools { display: flex; gap: var(--sp-1h); margin-left: auto; align-items: center; }
.clan-rank-gm-tag { font-size: var(--fs-base); font-weight: 700; color: var(--accent); }
.clan-rank-edit-body { padding: var(--sp-3h); }
.clan-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2) var(--sp-3h); }
.clan-perm-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); cursor: pointer; }
.clan-perm-item.locked { opacity: 0.5; cursor: not-allowed; }
.clan-perm-cb { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.clan-cap-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-3h); border-top: var(--bw-hair) solid var(--line); padding-top: var(--sp-3); }
.clan-cap-controls { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.clan-cap-input { width: 130px; max-width: 100%; }
.clan-cap-unlimited { display: flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-base); color: var(--dim); white-space: nowrap; }
.clan-danger-zone { margin-top: var(--sp-1h); }

.clan-codex + .clan-codex { margin-top: var(--sp-4); }
.clan-codex-table { display: flex; flex-direction: column; margin-top: var(--sp-1h); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); overflow: hidden; }
.clan-codex-table.rep .clan-codex-row { grid-template-columns: 0.8fr 1fr 1fr 1.2fr; }
.clan-codex-table.league .clan-codex-row { grid-template-columns: 1.4fr 1fr 1fr; }
.clan-codex-row {
  display: grid; align-items: center; gap: var(--sp-3); padding: var(--sp-2h) var(--sp-3h);
  border-bottom: var(--bw-hair) solid var(--line); font-size: var(--fs-md); font-variant-numeric: tabular-nums;
}
.clan-codex-row:last-child { border-bottom: none; }
.clan-codex-row.head { background: var(--bg); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 700; }
.clan-codex-row.current { background: rgba(255, 177, 61, 0.1); box-shadow: inset 3px 0 0 var(--accent); }
.clan-codex-table.league .clan-codex-row.current { background: color-mix(in srgb, var(--tier) 14%, transparent); box-shadow: inset 3px 0 0 var(--tier); }
.clan-codex-lvl { font-weight: 700; font-family: var(--font-display); }
.clan-codex-tier { display: flex; align-items: center; gap: var(--sp-2); }
.clan-codex-you {
  margin-left: var(--sp-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em;
  color: #1a0f04; background: var(--accent); padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-pill);
}
.clan-codex-table.league .clan-codex-you { color: #fff; background: var(--tier); }

.clan-log-toolbar .grid-search { flex: 1; min-width: 180px; }
.clan-log-feed { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-1); }
.clan-log-row {
  display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2h);
  background: var(--raised); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
  border-left: var(--bw-frame) solid var(--lc, var(--line));
}
.clan-log-glyph {
  font-size: var(--fs-lg); flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--lc, #8d9aa5) 16%, transparent); border-radius: var(--radius-md);
}
.clan-log-text { flex: 1; min-width: 0; font-size: var(--fs-md); overflow-wrap: anywhere; }
.clan-log-skin { font-weight: 600; }
.clan-log-opp { display: inline-flex; align-items: baseline; gap: var(--sp-1); font-weight: 600; }
.clan-log-mmr { font-weight: 700; font-variant-numeric: tabular-nums; }
.clan-log-mmr.up { color: var(--good, #4ade80); }
.clan-log-mmr.down { color: var(--bad, #eb4b4b); }
.clan-log-time {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-0);
  white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.clan-log-rel { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.clan-log-abs { font-size: var(--fs-xs); color: var(--dim); }

@media (max-width: 1280px) {
  .clan-browse-table, .clan-browse-table.view { min-width: 0; }
  .clan-browse-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2h) var(--sp-3h); }
  .clan-browse-row.head { display: none; }
  .clan-browse-row .cb-banner { flex: 0 0 auto; }
  .clan-browse-row .cb-name { flex: 1 1 0; min-width: 0; }
  .clan-browse-row .cb-meta { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4h); }
  .clan-browse-row .cb-rank { justify-content: flex-start; }
  .clan-browse-row .cb-members::before { content: 'Members '; color: var(--dim); }
  .clan-browse-row .cb-founded::before { content: 'Founded '; color: var(--dim); }
  .clan-browse-row .cb-leader::before { content: 'Led by '; color: var(--dim); }
  .clan-browse-row .cb-action { flex: 1 1 100%; justify-content: stretch; }
  .clan-browse-row .cb-action .btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .clan-band-name { font-size: var(--fs-4xl); }
  .clan-card-grid { grid-template-columns: 1fr; }
  .clan-ovh-name { font-size: var(--fs-3xl); }
  .clan-stat-grid { grid-template-columns: 1fr 1fr; }

  .page-toolbar.clan-browse-tools { width: 100%; margin-left: 0; }
  .clan-browse-tools .grid-search { width: 100%; }

  .clan-member-row { grid-template-columns: 1fr; gap: var(--sp-2h); }
  .clan-role-zone { justify-content: flex-start; }
  .clan-actions-zone { justify-content: flex-start; min-height: 0; }
  .clan-rank-select { max-width: none; flex: 1; }
  .clan-req-row { grid-template-columns: 1fr; }
  .clan-loadout-row { gap: var(--sp-2); }
  .clan-loadout-meta { margin-left: 0; width: 100%; }
  .clan-loadout-name { max-width: none; }
  .clan-lo-head-meta { margin-left: 0; width: 100%; }
  .clan-lo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .clan-roster-actions .btn { flex: 1; justify-content: center; }
  .clan-recruit-row { grid-template-columns: 1fr; }
  .clan-bank-input { width: 100%; }
  .clan-bank-controls { flex-direction: column; align-items: stretch; }
  .clan-bank-controls .btn { width: 100%; justify-content: center; }
  .clan-bank-cash { grid-template-columns: 1fr; gap: var(--sp-3h); }
  .clan-perm-grid { grid-template-columns: 1fr; }
  .clan-cap-row { grid-template-columns: 1fr; }
  .clan-vault-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .clan-vault-head .clan-allowance { white-space: normal; }
  .clan-vault-deposit { width: 100%; justify-content: center; order: 2; margin-left: auto; }
  .clan-pool-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .clan-distrib-row { grid-template-columns: repeat(4, 1fr); gap: var(--sp-1h) var(--sp-2); }
  .clan-distrib-col-member { grid-column: 1 / -1; }
  .clan-config-tabs .page-tab { flex: 1; justify-content: center; }
  .clan-req-editor { grid-template-columns: 1fr; }
  .clan-rank-tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .clan-create-cols { grid-template-columns: 1fr; }
  .clan-codex-table.rep .clan-codex-row { grid-template-columns: 0.6fr 1fr 1fr 1.1fr; font-size: var(--fs-base); gap: var(--sp-1h); padding: var(--sp-2h) var(--sp-2h); }
  .clan-codex-table.league .clan-codex-row { font-size: var(--fs-base); gap: var(--sp-1h); padding: var(--sp-2h) var(--sp-2h); }
  .clan-log-time { display: none; }
}

.ops-host { gap: var(--sp-4h); }

.ops-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
.ops-tab {
  display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-3) var(--sp-3h); cursor: pointer; text-align: left;
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-bottom: var(--bw-thick) solid transparent;
  clip-path: var(--clip-sm); color: var(--text); transition: var(--dur-base); min-width: 0;
}
.ops-tab:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: rgba(255, 177, 61, 0.05); }
.ops-tab.active {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); border-bottom-color: var(--accent);
  background: linear-gradient(180deg, rgba(255, 177, 61, 0.12), rgba(255, 177, 61, 0.03));
}
.ops-tab-glyph {
  flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; font-size: var(--fs-4xl);
  border-radius: var(--radius-md); background: #0c1018; border: var(--bw-hair) solid var(--line);
}
.ops-tab.active .ops-tab-glyph { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 10px rgba(255, 177, 61, 0.25); }
.ops-tab-body { display: flex; flex-direction: column; gap: var(--sp-0); min-width: 0; }
.ops-tab-label { font-weight: 700; font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-tab.active .ops-tab-label { color: var(--accent); }
.ops-tab-sub { font-size: var(--fs-sm); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-tabs .mn-open { align-self: center; justify-self: end; }
.ops-section { display: block; }

.ops-card {
  position: relative; display: flex; gap: var(--sp-3h); padding: var(--sp-4);
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--boss) 16%, transparent) 0%, transparent 60%),
    var(--raised);
  border: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid var(--boss);
  clip-path: var(--clip); cursor: pointer; transition: var(--dur-base); overflow: hidden;
}
.ops-card.live:hover { transform: translateY(-2px); border-color: var(--boss); box-shadow: var(--shadow-lg); }
.ops-card-timer { font-size: var(--fs-base); font-weight: 600; color: var(--dim); }
.ops-card-timer.hot { color: #ff5067; }

.ops-badge {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-xs); flex-shrink: 0;
}
.ops-badge.victory { color: #0a1409; background: var(--good); }
.ops-badge.defeat { color: #fff; background: var(--danger); }
.ops-badge.cancelled { color: var(--dim); background: rgba(255, 255, 255, 0.07); }

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

.ops-dev { display: flex; gap: var(--sp-2); flex-wrap: wrap; border-top: var(--bw-hair) dashed var(--line); padding-top: var(--sp-2h); }
.ops-mvp-crown { font-size: var(--fs-xl); }

@keyframes ops-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes ops-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.tier-badge { display: inline-flex; flex-shrink: 0; line-height: 0; }
.tier-badge svg { width: 100%; height: 100%; display: block; }
.tier-chip { display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-0) var(--sp-2) var(--sp-0) var(--sp-1); border-radius: var(--radius-pill);
  border: var(--bw-hair) solid color-mix(in srgb, var(--tier) 45%, transparent); background: color-mix(in srgb, var(--tier) 10%, transparent); }
.tier-chip-name { font-size: var(--fs-base); font-weight: 700; color: color-mix(in srgb, var(--tier) 75%, #fff); }
.tier-chip-mmr { font-size: var(--fs-sm); font-weight: 700; color: var(--dim); }
.cw { display: block; margin-bottom: var(--sp-5h); }
.cw-hero {
  position: relative; overflow: hidden; padding: var(--sp-4h) var(--sp-5); clip-path: var(--clip); margin-bottom: var(--sp-4);
  --boss: #ff2d78;
  border: var(--bw-hair) solid color-mix(in srgb, var(--boss) 34%, var(--line));
  background:
    radial-gradient(80% 130% at 92% 14%, color-mix(in srgb, var(--boss) 24%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--boss) 13%, #0b0f16), #080b11 72%);
}
.cw-hero-glow {
  position: absolute; inset: -50% -8% auto auto; width: 55%; height: 200%;
  background: radial-gradient(circle, color-mix(in srgb, var(--boss) 38%, transparent), transparent 60%);
  filter: blur(26px); opacity: 0.55; pointer-events: none;
}
.cw-badge {
  position: relative; display: inline-block; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.12em;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); margin-bottom: var(--sp-2h); color: var(--boss);
  border: var(--bw-hair) solid color-mix(in srgb, var(--boss) 50%, transparent); background: color-mix(in srgb, var(--boss) 12%, transparent);
}
.cw-hero-main { position: relative; display: flex; gap: var(--sp-4h); align-items: center; flex-wrap: nowrap; }
.cw-emblem { flex-shrink: 0; display: grid; place-items: center; padding: var(--sp-1h); border-radius: var(--radius-xl);
  border: var(--bw-hair) solid color-mix(in srgb, var(--boss) 40%, transparent); background: color-mix(in srgb, var(--boss) 10%, transparent); }
.cw-hero-body { flex: 1; min-width: 0; }
.cw-title-row { display: flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-6xl); line-height: 1.1; }
.cw-name { min-width: 0; overflow-wrap: anywhere; }
.cw-title-row .clan-tag-color { margin-right: 0; }
.cw-rank-line { display: flex; align-items: center; gap: var(--sp-2h); margin-top: var(--sp-2h); flex-wrap: wrap; }
.cw-rank-name { font-weight: 800; font-size: var(--fs-xl); }
.cw-rank-mmr { font-size: var(--fs-base); color: var(--dim); }
.cw-record { display: flex; gap: var(--sp-2); margin-left: var(--sp-1); padding-left: var(--sp-2h); border-left: var(--bw-hair) solid var(--line); }
.cw-record-w { font-size: var(--fs-md); font-weight: 800; color: var(--good); }
.cw-record-l { font-size: var(--fs-md); font-weight: 800; color: #ff7a87; }
.cw-info-btn {
  flex-shrink: 0; align-self: flex-start; width: 28px; height: 28px; border-radius: var(--radius-circle); font-weight: 800; font-size: var(--fs-lg); cursor: pointer;
  color: var(--dim); border: var(--bw-hair) solid var(--line); background: var(--bg); transition: var(--dur-base);
}
.cw-info-btn:hover { color: var(--boss); border-color: var(--boss); }

.cw-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.cw-stage { display: flex; flex-direction: column; gap: var(--sp-3h); }
.cw-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2h); }

.cw-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.cw-empty .empty-inline { flex-direction: column; align-items: center; max-width: 460px; }
.cw-empty .empty-sub { max-width: none; }

.cw-roster-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2h); }
.cw-roster-count { font-size: var(--fs-base); font-weight: 800; color: var(--accent); }
.cw-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--sp-2h); }
.cw-fighter { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2h) var(--sp-3); border-radius: var(--radius-md); min-width: 0;
  background: #0c1018; border: var(--bw-hair) solid var(--line); }
.cw-fighter > * { max-width: 100%; }
.cw-fighter.mine { border-color: rgba(255, 177, 61, 0.5); background: rgba(255, 177, 61, 0.05); }
.cw-fighter.empty { justify-content: center; color: var(--dim); border-style: dashed; opacity: 0.7; }
.cw-slot-ico { font-size: var(--fs-3xl); font-weight: 700; opacity: 0.6; }
.cw-you-tag { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; color: #0b0f16; background: var(--accent); padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-xs); }
.cw-stat-chips { display: flex; gap: var(--sp-1h); flex-wrap: wrap; }

.cw-actions-panel { display: flex; }
.cw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2h); width: 100%; }
.cw-committed { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cw-committed-lbl { font-weight: 700; font-size: var(--fs-md); color: var(--good); }
.cw-no-weapon { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); color: #ffb454; line-height: var(--lh-snug); }
.cw-equip-link { background: none; border: none; color: var(--accent); font-weight: 700; font-size: var(--fs-base); cursor: pointer; padding: 0; text-decoration: underline; }

.cw-radar { position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-circle);
  border: var(--bw-hair) solid color-mix(in srgb, var(--accent) 50%, transparent); background: radial-gradient(circle, rgba(255, 177, 61, 0.08), transparent); overflow: hidden; }
.cw-radar-sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--accent) 45%, transparent) 50deg, transparent 60deg); animation: cw-sweep 2s linear infinite; }
.cw-radar-ico { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-5xl); }
@keyframes cw-sweep { to { transform: rotate(360deg); } }

.cw-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--sp-3h); align-items: stretch; }
.cw-result-badge { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-xs); flex-shrink: 0; align-self: flex-start; }
.cw-delta-pill { font-size: var(--fs-sm); font-weight: 800; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); }

.cw-summary { text-align: center; }
.cw-summary-banner { font-size: var(--fs-6xl); font-weight: 900; letter-spacing: 0.1em; }
.cw-summary.victory .cw-summary-banner { color: var(--good); text-shadow: 0 0 22px rgba(74, 222, 128, 0.5); }
.cw-summary.defeat .cw-summary-banner { color: #ff5067; }

/* rank info modal */
.cw-info-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2h); margin: var(--sp-3h) 0; }
.cw-info-tier { display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2h) var(--sp-3); border-radius: var(--radius-md);
  border: var(--bw-hair) solid color-mix(in srgb, var(--tier) 40%, var(--line)); background: color-mix(in srgb, var(--tier) 8%, transparent); }
.cw-info-tier-name { font-weight: 800; font-size: var(--fs-lg); color: color-mix(in srgb, var(--tier) 78%, #fff); }
.cw-info-rewards { margin-top: var(--sp-2); }

/* history */
.cw-history .bj-row-label .cf-ico { margin-right: var(--sp-2h); }
.cw-history-rows { display: flex; flex-direction: column; gap: var(--sp-1h); }
/* One clean line per match: result badge, tier and opponent packed left; MMR
   delta and date pushed right. Flex (not grid) so the tier chip never clips and
   the date can never wrap to a second line. */
.cw-history-row {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2h) var(--sp-3h); border-radius: var(--radius-md);
  background: #0c1018; border: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid var(--line);
}
.cw-history-row.won { border-left-color: var(--good); }
.cw-history-row.lost { border-left-color: #ff5067; }
.cw-history-row.tie { border-left-color: #8d9aa5; }
.cw-history-badge { flex: 0 0 auto; min-width: 46px; text-align: center; font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; letter-spacing: 0.3px; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); }
.cw-history-tier { flex: 0 0 auto; display: flex; align-items: center; }
.cw-history-opp { flex: 0 1 auto; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.cw-history-opp .clan-banner { flex-shrink: 0; }
.cw-history-opp-id { display: flex; align-items: baseline; gap: var(--sp-1); min-width: 0; font-weight: 600; font-size: var(--fs-md); }
.cw-history-opp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cw-history-delta { flex: 0 0 auto; margin-left: auto; font-weight: 800; text-align: right; }
.cw-history-date { flex: 0 0 auto; font-size: var(--fs-base); white-space: nowrap; }

@media (max-width: 860px) {
  .cw-info-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ops-tabs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cw-result-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ops-tabs { gap: var(--sp-1h); }
  .ops-tab { padding: var(--sp-2h) var(--sp-2h); gap: var(--sp-2); }
  .ops-tab-glyph { width: 30px; height: 30px; font-size: var(--fs-2xl); }
  .ops-tab-label { font-size: var(--fs-md); }
  .ops-tab-sub { display: none; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { justify-content: center; flex: 1; }
  .cw-badge { margin-bottom: var(--sp-2); }
  .cw-hero-main { flex-direction: column; text-align: center; }
  .cw-hero-body { width: 100%; }
  .cw-title-row { justify-content: center; }
  .cw-name { white-space: normal; }
  .cw-rank-line { justify-content: center; }
  .cw-record { margin-left: 0; }
  .cw-info-btn { position: absolute; top: 16px; right: 16px; }
  .cw-roster-grid { grid-template-columns: 1fr; }
  .page-toolbar.cw-mgr { margin-left: 0; width: 100%; }
  .cw-empty-btn { margin-left: 0; width: 100%; justify-content: center; }
  /* Tighten the row and hide the date + opponent banner so the badge, tier and
     name fit on one line on narrow screens. */
  .cw-history-date { display: none; }
  .cw-history-row { gap: var(--sp-2); padding: var(--sp-2h) var(--sp-3); }
  .cw-history-opp { gap: var(--sp-1h); }
  .cw-history-opp > .clan-banner { display: none; }
}

.forge-wallet { display: flex; flex-wrap: wrap; gap: var(--sp-2h); }

.forge-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

.forge-anvil-grid { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--sp-4h); align-items: start; }
.forge-card-wrap { position: relative; }
.forge-card-wrap .item-card { margin: 0; }
.forge-level {
  position: absolute; top: -10px; right: -10px; z-index: 3;
  min-width: 38px; height: 38px; padding: 0 var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl);
  color: #2a1500; background: linear-gradient(135deg, #ffd24d, #ff7847);
  border-radius: var(--radius-circle); box-shadow: 0 0 16px rgba(255, 140, 60, 0.55);
}

.forge-panel-right { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.forge-item-name { display: flex; flex-direction: column; gap: var(--sp-0); }
.forge-item-name b { font-size: var(--fs-xl); }
.forge-item-name .dim { font-size: var(--fs-base); }

.forge-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.forge-stat {
  border: var(--bw-hair) solid var(--line); padding: var(--sp-2) var(--sp-1h); text-align: center;
  background: rgba(255, 255, 255, 0.02); clip-path: var(--clip-sm);
}
.forge-stat-lbl { display: block; font-size: var(--fs-sm); color: var(--dim); letter-spacing: 0.05em; }
.forge-stat-row { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-lg); }
.forge-stat.gear .forge-stat-row b { color: var(--accent); }
.forge-stat.atk .forge-stat-row b { color: #ff8f6b; }
.forge-stat.def .forge-stat-row b { color: #62b9ff; }
.forge-stat-next { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--dim); }
.forge-stat-next .cf-ico { width: 12px; height: 12px; }
.forge-stat-next.up b { color: var(--good); }

.forge-costs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.forge-cost-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1h);
  padding: var(--sp-1h) var(--sp-2h); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
  background: rgba(255, 255, 255, 0.03); font-size: var(--fs-md);
}
.forge-cost-ico { color: var(--accent); }
.forge-cost-lbl { color: var(--dim); font-size: var(--fs-sm); }
.forge-cost-chip.short { border-color: rgba(255, 80, 103, 0.6); background: rgba(255, 80, 103, 0.1); color: var(--danger); }
.forge-cost-chip.short .forge-cost-ico, .forge-cost-chip.short .forge-cost-lbl { color: var(--danger); }

.forge-risk { display: flex; flex-direction: column; gap: var(--sp-1h); }
.forge-risk-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); }
.forge-risk-head b { font-size: var(--fs-2xl); }
.forge-fail { font-size: var(--fs-base); font-weight: 600; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); }
.forge-fail.safe { color: var(--good); background: rgba(74, 222, 128, 0.07); border: var(--bw-hair) solid rgba(74, 222, 128, 0.25); }
.forge-fail.danger {
  color: var(--danger);
  background: rgba(255, 80, 103, 0.08);
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.35);
  animation: forge-danger-pulse 1.8s ease-in-out infinite;
}
@keyframes forge-danger-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 80, 103, 0); }
  50% { box-shadow: 0 0 16px rgba(255, 80, 103, 0.22); }
}

.forge-ladder { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: var(--sp-1); margin-bottom: var(--sp-4); }
.forge-step {
  text-align: center; padding: var(--sp-1h) var(--sp-0) var(--sp-1h);
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-sm);
  color: var(--dim); min-width: 0;
}
.forge-step b { display: block; font-family: var(--font-display); font-size: var(--fs-base); }
.forge-step-pct { display: block; font-size: var(--fs-xs); opacity: 0.85; margin-top: var(--sp-0); }
.forge-step.safe { border-bottom: var(--bw-thick) solid rgba(74, 222, 128, 0.45); }
.forge-step.deadly { border-bottom: var(--bw-thick) solid rgba(255, 80, 103, 0.45); }
.forge-step.done { background: rgba(255, 177, 61, 0.1); border-color: rgba(255, 177, 61, 0.45); color: var(--accent); }
.forge-step.done.deadly { border-bottom-color: rgba(255, 177, 61, 0.6); }
.forge-step.next { border-color: var(--accent); color: var(--text); animation: forge-next-pulse 1.6s ease-in-out infinite; }
@keyframes forge-next-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 177, 61, 0); }
  50% { box-shadow: 0 0 13px rgba(255, 177, 61, 0.4); }
}

.forge-anvil { position: relative; overflow: hidden; }
.forge-anvil::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 110px;
  background: linear-gradient(180deg, transparent, rgba(255, 110, 40, 0.05) 45%, rgba(255, 110, 40, 0.12));
  pointer-events: none;
}

.forge-aegis {
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); cursor: pointer;
  padding: var(--sp-2) var(--sp-2h); border: var(--bw-hair) solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.07); clip-path: var(--clip-sm);
}
.forge-aegis.disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--line); background: rgba(255, 255, 255, 0.02); }
.forge-aegis-ico { color: var(--good); }

.forge-go { width: 100%; }
.forge-warn { font-size: var(--fs-base); color: var(--danger); text-align: center; }

.forge-sockets { display: flex; flex-direction: column; gap: var(--sp-2); }
.forge-socket-row {
  display: flex; align-items: center; gap: var(--sp-2h);
  padding: var(--sp-2) var(--sp-2h);
  background: rgba(255, 255, 255, 0.03);
  border: var(--bw-hair) solid var(--line);
}
.forge-socket-row .socket-pip { position: static; flex: 0 0 auto; }
.forge-socket-row.filled { border-color: rgba(176, 123, 255, 0.35); }
.forge-socket-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-socket-row .btn { margin-left: auto; flex: 0 0 auto; }
.forge-socket-row .dim { flex: 1; }
.forge-socket-row.inactive { border-style: dashed; opacity: 0.7; }
.socket-pip.locked { background: rgba(255, 255, 255, 0.06); border-style: dashed; box-shadow: none; }

.carve-stamp {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: grid; place-items: center;
  color: #b07bff;
  animation: carve-stamp 1s cubic-bezier(0.5, 0, 0.6, 1) both;
}
@keyframes carve-stamp {
  0% { opacity: 0; transform: scale(3.2) rotate(-24deg); filter: blur(6px); }
  22% { opacity: 1; transform: scale(0.9) rotate(0deg); filter: blur(0); }
  30% { transform: scale(1.18); }
  38% { transform: scale(1); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}
.carve-wave {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px;
  border: var(--bw-thick) solid rgba(176, 123, 255, 0.85); border-radius: var(--radius-circle);
  transform: translate(-50%, -50%); z-index: 4; pointer-events: none;
  animation: carve-wave 0.7s 0.2s ease-out both;
}
@keyframes carve-wave {
  from { width: 20px; height: 20px; opacity: 1; }
  to { width: 250px; height: 250px; opacity: 0; }
}
.forge-carving .item-card { animation: carve-shake 0.5s 0.2s; }
@keyframes carve-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-4px, 2px) rotate(-1deg); }
  40% { transform: translate(4px, -2px) rotate(1deg); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(2px, 2px); }
}

.forge-socket-buy {
  margin-top: var(--sp-3); padding: var(--sp-3);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.35);
  background: rgba(255, 177, 61, 0.06);
  clip-path: var(--clip-sm);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.forge-socket-buy.dimmed { opacity: 0.7; }
.forge-socket-buy-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.forge-socket-buy-head b { color: var(--accent); font-size: var(--fs-md); }
.forge-socket-buy-sub { font-size: var(--fs-base); }
.forge-socket-activate { width: 100%; }
.forge-modhint { padding: var(--sp-4h) var(--sp-3); text-align: center; font-size: var(--fs-md); }
.forge-mods-label { margin-top: var(--sp-4h); }

@keyframes forgeSuccess {
  0% { box-shadow: 0 0 0 rgba(255, 210, 77, 0); }
  30% { box-shadow: 0 0 32px rgba(255, 210, 77, 0.85); transform: translateY(-3px); }
  100% { box-shadow: 0 0 0 rgba(255, 210, 77, 0); transform: translateY(0); }
}
.forge-reveal-success .item-card { animation: forgeSuccess 0.9s ease; }
.forge-reveal-success .forge-level { animation: forgeLevelSlam 0.6s cubic-bezier(0.2, 0.85, 0.3, 1.2); }
@keyframes forgeLevelSlam {
  0% { transform: scale(2.6); opacity: 0; }
  55% { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); }
}

.forge-hammer {
  position: absolute; right: -14px; top: -46px; z-index: 6;
  line-height: var(--lh-none); pointer-events: none;
  transform: rotate(52deg); transform-origin: 82% 82%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.forge-hammer.swing { animation: forgeSwing 0.36s cubic-bezier(0.5, 0, 0.6, 1); }
@keyframes forgeSwing {
  0% { transform: rotate(52deg); }
  42% { transform: rotate(-38deg); }
  58% { transform: rotate(-34deg); }
  100% { transform: rotate(52deg); }
}
.forge-clang {
  position: absolute; left: 50%; top: 42%;
  width: 16px; height: 16px; border-radius: var(--radius-circle);
  border: var(--bw-frame) solid rgba(255, 240, 200, 0.95);
  box-shadow: 0 0 22px rgba(255, 210, 77, 0.8);
  transform: translate(-50%, -50%);
  animation: forgeClang 0.5s ease-out forwards;
}
@keyframes forgeClang {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; }
}
.forge-station.forge-quake { animation: forgeQuake 0.3s ease; }
@keyframes forgeQuake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -1px); }
}
.forge-ember {
  position: absolute; left: var(--x); bottom: 8%;
  width: 4px; height: 4px; border-radius: var(--radius-circle);
  background: #ffb13d; box-shadow: 0 0 8px rgba(255, 150, 50, 0.9);
  transform: scale(var(--s));
  animation: forgeEmber var(--t) ease-out forwards;
}
@keyframes forgeEmber {
  0% { opacity: 0; transform: translateY(0) scale(var(--s)); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120px) scale(calc(var(--s) * 0.4)); }
}
.forge-rise {
  position: absolute; left: var(--x); bottom: 0;
  width: 5px; height: 14px; border-radius: var(--radius-xs);
  background: linear-gradient(180deg, var(--c), transparent);
  box-shadow: 0 0 10px var(--c);
  animation: forgeRise var(--t) cubic-bezier(0.2, 0.7, 0.4, 1) var(--d) forwards;
  opacity: 0;
}
@keyframes forgeRise {
  0% { opacity: 0; transform: translateY(10px) scaleY(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-150px) scaleY(1.4); }
}
.forge-dome {
  position: absolute; inset: -8px; border-radius: var(--radius-xl);
  border: var(--bw-thick) solid rgba(74, 222, 128, 0.9);
  background: radial-gradient(ellipse at 50% 30%, rgba(74, 222, 128, 0.28), transparent 70%);
  box-shadow: 0 0 30px rgba(74, 222, 128, 0.5), inset 0 0 26px rgba(74, 222, 128, 0.3);
  animation: forgeDome 1.3s ease forwards;
}
@keyframes forgeDome {
  0% { opacity: 0; transform: scale(1.25); }
  18% { opacity: 1; transform: scale(1); }
  62% { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 0; transform: scale(1.12); filter: brightness(2); }
}

.forge-fuse-orb {
  position: fixed; z-index: var(--z-spark); pointer-events: none;
  width: 22px; height: 22px; border-radius: var(--radius-circle);
  background: radial-gradient(circle at 35% 30%, #fff, var(--oc) 55%);
  box-shadow: 0 0 18px var(--oc), 0 0 40px var(--oc);
}
.forge-mod-spent { opacity: 0.25; transition: opacity var(--dur-slower) ease; pointer-events: none; }
.forge-mark-ring {
  position: absolute; inset: -14px; border-radius: var(--radius-circle);
  border: var(--bw-thick) dashed var(--oc); opacity: 0;
  animation: forgeMarkRing 1.6s ease forwards;
}
.forge-mark-ring.inner { inset: 4px; border-style: dotted; animation-direction: reverse; }
@keyframes forgeMarkRing {
  0% { opacity: 0; transform: rotate(0deg) scale(1.2); }
  20% { opacity: 0.9; }
  80% { opacity: 0.9; transform: rotate(160deg) scale(1); }
  100% { opacity: 0; transform: rotate(200deg) scale(0.92); }
}
.forge-mark {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  line-height: 0; color: var(--oc);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-74px) rotate(calc(var(--a) * -1));
  animation: forgeMark 1.5s ease var(--d) forwards;
  opacity: 0;
}
.forge-mark .cf-ico { width: 16px; height: 16px; display: block; filter: drop-shadow(0 0 6px var(--oc)); }
@keyframes forgeMark {
  0% { opacity: 0; filter: brightness(0.6); }
  22% { opacity: 1; filter: brightness(1.7); }
  72% { opacity: 1; }
  100% { opacity: 0; filter: brightness(2.2); }
}

@media (max-width: 860px) {
  .forge-layout { grid-template-columns: 1fr; }
  .forge-step-pct { display: none; }
  .forge-ladder { gap: var(--sp-1); }
}
@media (max-width: 560px) {
  .forge-anvil-grid { grid-template-columns: 1fr; justify-items: center; }
  .forge-panel-right { width: 100%; }
  .forge-card-wrap { max-width: 200px; }
  .forge-wallet { gap: var(--sp-2); }
  .forge-wallet .metric-chip-label { display: none; }
  .forge-step b { font-size: var(--fs-sm); }
}

.clanp { display: flex; flex-direction: column; gap: var(--sp-3); }
.clanp-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.clanp-head > .clan-banner { flex-shrink: 0; }
.clanp-head-id { min-width: 0; }
/* tag -> name gap: a small, consistent space on EVERY tag-before-name surface */
.clanp-title { display: flex; align-items: center; gap: var(--sp-1h); flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5xl); line-height: var(--lh-tight); }
.clanp-title > .tier-badge { flex-shrink: 0; }
.clanp-name { overflow-wrap: anywhere; }
.clanp-motto { font-size: var(--fs-md); color: var(--dim); margin-top: var(--sp-1); font-style: italic; }
.clanp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4h); padding: var(--sp-2h) 0; border-top: var(--bw-hair) solid var(--line); border-bottom: var(--bw-hair) solid var(--line); }
.clanp-stat { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); min-width: 0; min-height: 36px; }
.clanp-stat-k { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.clanp-stat-v { font-size: var(--fs-md); font-weight: 600; }
.clanp-w { color: var(--good); }
.clanp-l { color: var(--danger); }
.clanp-desc { font-size: var(--fs-md); line-height: 1.5; }
.clanp-section-head { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: 0.04em; color: var(--dim); margin-top: var(--sp-1); }
.clanp-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.clanp-member { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2h); border-radius: var(--radius-md); background: #0c1018; border: var(--bw-hair) solid var(--line); min-width: 0; }
.clanp-member.leader { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.clanp-member-id { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.clanp-member-id > .avatar, .clanp-member-id > .rank-badge, .clanp-member-id > .level-badge { flex-shrink: 0; }
.clanp-member-name { font-weight: 600; font-size: var(--fs-md); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.clanp-member-name { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.clanp-member-name.static { color: var(--dim); }
.clanp-member .role-chip { margin-left: 0; flex-shrink: 0; }
.clanp-member .role-chip.gm { background: rgba(255, 177, 61, 0.16); color: var(--accent); }
.clanp-warehouse { display: flex; flex-direction: column; gap: var(--sp-2); }
.clanp-wh-row { display: flex; align-items: center; gap: var(--sp-2h); font-size: var(--fs-md); }
.clanp-wh-row.res { align-items: flex-start; }
.clanp-wh-k { color: var(--dim); min-width: 96px; flex-shrink: 0; }
.clanp-wh-v { font-weight: 600; }
.clanp-res-row { display: flex; flex-wrap: wrap; gap: var(--sp-1h); }
.clanp-res { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: 600; background: color-mix(in srgb, var(--rc) 14%, transparent); border: var(--bw-hair) solid color-mix(in srgb, var(--rc) 35%, transparent); }
.clanp-res-ico { color: var(--rc); }
.clanp-wars { display: flex; flex-direction: column; gap: var(--sp-1h); }
.clanp-war { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--sp-2h); padding: var(--sp-1h) var(--sp-2h); border-radius: var(--radius-md); background: #0c1018; border: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid var(--line); min-width: 0; }
.clanp-war.won { border-left-color: var(--good); }
.clanp-war.lost { border-left-color: var(--danger); }
.clanp-war.tie { border-left-color: var(--accent); }
.clanp-war-badge { font-size: var(--fs-sm); font-weight: 800; text-align: left; }
.clanp-war-badge.win { color: var(--good); }
.clanp-war-badge.loss { color: var(--danger); }
.clanp-war-badge.tie { color: var(--accent); }
.clanp-war-opp { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.clanp-war-opp > .tier-chip, .clanp-war-opp > .clan-tag-color { flex-shrink: 0; }
.clanp-war-opp-name { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clanp-war-delta { font-weight: 700; font-size: var(--fs-base); }
.clanp-war-delta.up { color: var(--good); }
.clanp-war-delta.down { color: var(--danger); }
.clanp-war-delta.neutral { color: var(--dim); }
.clanp-war-date { font-size: var(--fs-sm); white-space: nowrap; }

.inspect-name { font-weight: 700; }
.inspect-clan-name { background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; }
.inspect-clan .tier-chip, .inspect-clan .clan-tag-color { flex-shrink: 0; }
.inspect-viewclan { margin-left: auto; }

.cw-live-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-3h) 0 var(--sp-1h); }
.cw-lm-row { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4h); border-radius: var(--radius-md); background: #0c1018; border: var(--bw-hair) solid var(--line); min-width: 0; }
.cw-lm-team { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; justify-content: flex-end; }
.cw-lm-team.away { justify-content: flex-start; }
.cw-lm-team > .clan-banner { flex-shrink: 0; }
.cw-lm-team-id { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.cw-lm-team-id > .clan-tag-color { flex-shrink: 0; }
.cw-lm-team-name { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-lm-mid { display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); flex-shrink: 0; }
.cw-lm-score { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); display: flex; align-items: center; gap: var(--sp-1h); }
.cw-lm-map { font-size: var(--fs-sm); color: var(--dim); display: flex; align-items: center; gap: var(--sp-1h); white-space: nowrap; }
.cw-lm-map-name { font-weight: 700; letter-spacing: 0.04em; }

.ops-clanboard-row.clickable { cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.ops-clanboard-row.clickable:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: rgba(255, 177, 61, 0.05); }
.ops-clanboard-row.clickable:focus-visible, .hvt-clanboard-row.clickable:focus-visible { outline: var(--bw-thick) solid var(--accent); outline-offset: 1px; }

@media (max-width: 560px) {
  .cw-lm-row { grid-template-columns: 1fr auto 1fr; row-gap: var(--sp-2); }
  .clanp-wh-k { min-width: 80px; }
  /* The tier chip alone is wider than the opponent column gets on a phone, so the
     opponent takes the full row and the delta and date drop to a second line. */
  .clanp-war { grid-template-columns: 52px minmax(0, 1fr) auto; row-gap: var(--sp-1); }
  .clanp-war-opp { grid-column: 2 / -1; flex-wrap: wrap; }
  .clanp-war-delta { grid-column: 2; }
  .clanp-war-date { grid-column: 3; justify-self: end; }
}

.admin-clan-cell { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.admin-clan-cell > .clan-banner { flex-shrink: 0; }
.admin-clan-cell .player-link { display: inline-flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.admin-clan-cell .clan-tag-color { flex-shrink: 0; }
.admin-mmr-preview { display: flex; align-items: center; gap: var(--sp-1h); min-height: 26px; font-weight: 600; }

/* admin Clans: sortable headers + expandable detail drawer */
.admin-sort { cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.admin-sort:hover, .admin-sort.on { color: var(--accent); }
.admin-sort-arrow { font-size: var(--fs-2xs); }
.admin-clan-caret { flex-shrink: 0; }
.admin-clan-open td { background: rgba(255, 177, 61, 0.05); }
.admin-clans-table .admin-clan-drawer-row td { padding: 0; background: var(--bg); }
/* The drawer cell spans the whole (possibly horizontally scrolled) table, so the
   content block sticks to the visible left edge and never exceeds the viewport:
   on a phone the drawer reads full-width without panning. */
.admin-clan-drawer { padding: var(--sp-3h) var(--sp-4); position: sticky; left: 0; max-width: calc(100vw - 40px); box-sizing: border-box; white-space: normal; }
.admin-clan-member-id { min-width: 0; }
.admin-clan-member-id .player-link { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.admin-clan-drawer-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2) var(--sp-5h); align-items: start; }
.admin-clan-drawer-head {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim); font-weight: 700; margin: var(--sp-3h) 0 var(--sp-1h);
}
.admin-clan-drawer-col > .admin-clan-drawer-head:first-child { margin-top: 0; }
.admin-clan-ranks { display: flex; gap: var(--sp-1h); flex-wrap: wrap; }
.admin-clan-roster { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 280px; overflow-y: auto; padding-right: var(--sp-1); }
.admin-clan-member {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h);
  padding: var(--sp-1) var(--sp-2); background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-sm);
}
.admin-clan-member-id { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.admin-clan-member .role-chip { margin-left: 0; flex-shrink: 0; }
.admin-clan-wh { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.admin-clan-res {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2h);
  font-size: var(--fs-base); font-weight: 700; color: var(--rc, var(--accent));
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-lg); font-variant-numeric: tabular-nums;
}
.admin-clan-res.zero { opacity: 0.45; }
.admin-clan-wars { display: flex; flex-direction: column; gap: var(--sp-1); }
.admin-clan-war { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); flex-wrap: wrap; }
.admin-clan-log { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 280px; overflow-y: auto; padding-right: var(--sp-1); }
.admin-clan-log .clan-log-row { padding: var(--sp-1h) var(--sp-2h) var(--sp-1h) var(--sp-2); }
@media (max-width: 900px) {
  .admin-clan-drawer-body { grid-template-columns: 1fr; }
}

.art-foot {
  position: absolute;
  left: 5px; right: 5px; bottom: 5px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-1);
  z-index: 2;
  min-width: 0;
  overflow: hidden;
}
.art-foot .badge { position: static; flex: 0 0 auto; white-space: nowrap; }
.art-foot .socket-pips { position: static; display: flex; flex: 0 0 auto; }
.art-foot-slot { display: flex; align-items: center; min-width: 0; }
.art-foot-slot.l { justify-content: flex-start; }
.art-foot-slot.c { justify-content: center; }
.art-foot-slot.r { justify-content: flex-end; }

.item-foot .mod-effect { white-space: normal; flex: 1 1 100%; text-align: left; line-height: var(--lh-snug); min-width: 0; }

.mod-bonus-line { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1h); }
.mod-bonus-pill {
  font-size: var(--fs-xs); font-weight: 700;
  color: #c9a9ff;
  background: rgba(150, 100, 255, 0.12);
  border: var(--bw-hair) solid rgba(150, 100, 255, 0.35);
  padding: var(--sp-0) var(--sp-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.mod-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1h); justify-content: center; align-items: center; margin-top: var(--sp-1h); }
.mod-chip.filled {
  font-size: var(--fs-xs); font-weight: 700;
  color: color-mix(in srgb, var(--pc, #b07bff) 78%, #fff);
  background: color-mix(in srgb, var(--pc, #b07bff) 14%, transparent);
  border: var(--bw-hair) solid color-mix(in srgb, var(--pc, #b07bff) 45%, transparent);
  padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); white-space: nowrap;
}
.mod-chip.empty {
  width: 12px; height: 12px; border-radius: var(--radius-circle);
  border: var(--bw-hair) dashed rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
}

.socket-chance-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1h);
  font-size: var(--fs-sm); font-weight: 600; color: #c9a9ff;
  background: rgba(150, 100, 255, 0.1);
  border: var(--bw-hair) solid rgba(150, 100, 255, 0.3);
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill); white-space: nowrap;
}
.socket-chance-badge.sm { font-size: var(--fs-xs); padding: var(--sp-0) var(--sp-2); }
.socket-chance-pct { color: var(--text); font-weight: 700; }
.socket-chance-pip {
  width: 7px; height: 7px; transform: rotate(45deg); flex: 0 0 auto;
  background: #b07bff; box-shadow: 0 0 6px rgba(150, 100, 255, 0.7);
}

.inspect-mods { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }

.forge-modinfo {
  margin-top: var(--sp-4);
  padding: var(--sp-3h) var(--sp-4);
  border: var(--bw-hair) solid rgba(176, 123, 255, 0.25);
  background: rgba(176, 123, 255, 0.05);
}
.forge-modinfo-title { margin: 0 0 var(--sp-1h); font-size: var(--fs-md); letter-spacing: 0.06em; text-transform: uppercase; color: #c9a9ff; }
.forge-modinfo-sub { font-size: var(--fs-md); margin-bottom: var(--sp-2h); }
.forge-modinfo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2h); margin-bottom: var(--sp-2h); }
.forge-modinfo-src b { font-size: var(--fs-md); display: block; margin-bottom: var(--sp-1h); }
.forge-modinfo-tiers { display: flex; flex-direction: column; gap: var(--sp-1); }
.forge-modinfo-tier { display: flex; justify-content: space-between; gap: var(--sp-2h); font-size: var(--fs-base); background: rgba(255, 255, 255, 0.03); padding: var(--sp-1) var(--sp-2); }
.forge-modinfo-rar { display: flex; flex-wrap: wrap; gap: var(--sp-1h); align-items: center; font-size: var(--fs-base); }
.forge-modinfo-rarpill { border: var(--bw-hair) solid var(--rc); color: var(--rc); padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); font-size: var(--fs-base); white-space: nowrap; }

.forge-anvil.forge-heat { animation: forgeHeatBg 0.6s ease-in-out infinite alternate; }
@keyframes forgeHeatBg {
  from { background: rgba(255, 120, 40, 0.02); }
  to { background: rgba(255, 120, 40, 0.10); }
}
.forge-card-wrap.forge-charging .item-card { animation: forgeChargePulse 0.5s ease-in-out infinite alternate; }
@keyframes forgeChargePulse {
  from { box-shadow: 0 0 10px rgba(255, 150, 40, 0.25); filter: brightness(1); }
  to { box-shadow: 0 0 34px rgba(255, 150, 40, 0.8), 0 0 70px rgba(255, 90, 20, 0.35); filter: brightness(1.28); }
}
.forge-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.forge-spark {
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px;
  border-radius: var(--radius-circle);
  background: #ffd24d;
  box-shadow: 0 0 8px #ff9a3d;
  animation: forgeSparkFly var(--t, 0.7s) ease-out forwards;
}
@keyframes forgeSparkFly {
  from { opacity: 1; transform: rotate(var(--a, 0deg)) translateX(6px) scale(var(--s, 1)); }
  to { opacity: 0; transform: rotate(var(--a, 0deg)) translateX(var(--d, 60px)) scale(0.3); }
}
.forge-ringwave {
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px;
  border: var(--bw-frame) solid var(--rc, #ffd24d);
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0.95;
  box-shadow: 0 0 18px var(--rc, #ffd24d), inset 0 0 12px var(--rc, #ffd24d);
  animation: forgeRingOut 0.95s ease-out forwards;
}
@keyframes forgeRingOut {
  to { transform: translate(-50%, -50%) scale(9); opacity: 0; border-width: var(--bw-hair); }
}
.forge-flashout {
  position: absolute; inset: -10px;
  background: radial-gradient(circle, rgba(255, 80, 103, 0.85) 0%, rgba(255, 80, 103, 0) 70%);
  animation: forgeFlashOut 0.55s ease-out forwards;
}
@keyframes forgeFlashOut { from { opacity: 1; } to { opacity: 0; } }
.forge-shardbit {
  position: absolute; left: 50%; top: 40%;
  width: var(--w, 8px); height: var(--w, 8px);
  background: linear-gradient(135deg, #2a3444, #16202e);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.25);
  clip-path: polygon(50% 0, 100% 60%, 20% 100%);
  animation: forgeShardFly var(--t, 0.9s) ease-in forwards;
}
@keyframes forgeShardFly {
  from { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  to { transform: translate(var(--dx, 40px), var(--dy, 90px)) rotate(var(--r, 180deg)); opacity: 0; }
}
.forge-reveal-destroyed .item-card { animation: forgeDoom 1.15s ease forwards; }
@keyframes forgeDoom {
  0% { filter: brightness(1.6) saturate(1.4); transform: translate(0, 0); }
  18% { transform: translate(-4px, 2px) rotate(-1deg); }
  34% { transform: translate(4px, -2px) rotate(1.2deg); }
  50% { transform: translate(-3px, 1px) rotate(-0.8deg); filter: brightness(1.2); }
  100% { transform: translate(0, 12px) scale(0.9); opacity: 0; filter: brightness(0.25) saturate(0.2); }
}
.forge-reveal-protected .item-card { animation: forgeProtected 0.9s ease; }
@keyframes forgeProtected {
  0% { box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
  30% { box-shadow: 0 0 34px rgba(74, 222, 128, 0.85); filter: brightness(1.2); }
  100% { box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
}
.forge-card-wrap.forge-socket-pop .item-card { animation: forgeSocketPop 0.7s ease; }
@keyframes forgeSocketPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.07); filter: brightness(1.35) hue-rotate(20deg); }
  100% { transform: scale(1); }
}


.cf-ico { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.nav-item .ico { display: grid; place-items: center; }
.nav-item .ico .cf-ico { width: 17px; height: 17px; }
.profile-menu-item .ico { display: grid; place-items: center; width: 20px; }
.profile-menu-item .ico .cf-ico { width: 16px; height: 16px; }
.head-ico {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: var(--sp-2h);
  vertical-align: -6px;
  color: var(--accent);
  background: rgba(255, 177, 61, 0.09);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.25);
  clip-path: var(--clip-sm);
}
.head-ico .cf-ico { width: 20px; height: 20px; }
.head-ico-glyph { font-size: var(--fs-3xl); line-height: var(--lh-none); }
.btn .cf-ico { width: 15px; height: 15px; margin-right: var(--sp-1h); vertical-align: -2px; display: inline-block; }
.btn .cf-ico:only-child { margin-right: 0; }
.bj-row-label .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1h); }
.note-toast-title .cf-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1h); }
.clan-icon-btn .cf-ico { width: 12px; height: 12px; display: inline-block; vertical-align: middle; margin: 0; }
.ops-tab-glyph .cf-ico, .clan-recruit-glyph .cf-ico, .clan-pool-glyph .cf-ico { width: 18px; height: 18px; }
.ops-mod-ico .cf-ico, .cw-radar-ico .cf-ico, .cw-prep-bot .cf-ico { width: 22px; height: 22px; }
.cw-badge .cf-ico, .cw-vs-badge .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1h); }
.cw-committed-lbl .cf-ico, .clan-rank-gm-tag .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1); }
.ops-mvp-crown .cf-ico { width: 15px; height: 15px; }
.cw-no-weapon .cf-ico { width: 14px; height: 14px; }
.clan-req-chip .cf-ico, .clan-recruit-tag .cf-ico { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; margin-right: var(--sp-1); }
.clan-loadout-stats .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: var(--sp-1); }
.clan-note-icon .cf-ico { width: 12px; height: 12px; }
.clan-ovh-motd .cf-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1h); }
.clan-contract-seal .cf-ico { width: 26px; height: 26px; margin: 0 auto; }
.clan-log-glyph .cf-ico { width: 15px; height: 15px; }

.nav-rail { gap: var(--sp-0); overflow-y: auto; scrollbar-width: thin; }
.nav-group { display: flex; flex-direction: column; }
.nav-group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-3h) var(--sp-3h) var(--sp-1h);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: inherit;
  color: rgba(139, 151, 168, 0.55);
  transition: color var(--dur-base);
}
.nav-group-head:hover { color: rgba(200, 210, 225, 0.85); }
.nav-group:first-child .nav-group-head { padding-top: var(--sp-0); }
.nav-group-lbl { flex: 1; text-align: left; }
.nav-group-caret { display: grid; place-items: center; color: rgba(200, 210, 225, 0.75); transition: transform var(--dur-slow); }
.nav-group-caret .cf-ico { width: 12px; height: 12px; }
.nav-group.collapsed .nav-group-caret { transform: rotate(-90deg); }
.nav-group-dot { width: 7px; height: 7px; border-radius: var(--radius-circle); background: var(--danger); display: none; }
.nav-group.collapsed.pip-alert .nav-group-dot { display: inline-block; }
.nav-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-slow) cubic-bezier(.2, .7, .3, 1);
}
.nav-group.collapsed .nav-group-body { grid-template-rows: 0fr; }
.nav-group-inner { display: flex; flex-direction: column; gap: var(--sp-0); min-height: 0; overflow: hidden; }

.nav-burger { display: none; }
.nav-burger-ico { display: flex; flex-direction: column; gap: var(--sp-1); width: 16px; }
.nav-burger-ico span { height: 2px; background: currentColor; border-radius: var(--radius-xs); transition: transform var(--dur-mid), opacity var(--dur-mid); }
body.nav-open .nav-burger-ico span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-burger-ico span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger-ico span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-backdrop { display: none; }

/* the document is the scroller at every width, so the rail pins itself below
   the topbar instead of riding a full-page-height column out of view */
/* The rail scrolls itself so it can stay pinned, but its scrollbar is hidden:
   a reserved gutter would narrow the rail and a visible bar reads as chrome. */
@media (min-width: 861px) {
  .nav-rail {
    position: sticky;
    top: calc(var(--topbar-h) + var(--banner-h));
    height: calc(100dvh - var(--topbar-h) - var(--banner-h));
    scrollbar-width: none;
  }
  .nav-rail::-webkit-scrollbar { width: 0; height: 0; }
}

@media (max-width: 1000px) and (min-width: 861px) {
  .nav-rail { width: 62px; padding: var(--sp-3) var(--sp-2); }
  .nav-group-head { pointer-events: none; padding: var(--sp-2h) var(--sp-1h) var(--sp-1); justify-content: center; }
  .nav-group-lbl, .nav-group-caret, .nav-group-dot { display: none !important; }
  .nav-group-head::before { content: ''; display: block; width: 24px; height: 1px; background: var(--line); }
  .nav-group:first-child .nav-group-head::before { display: none; }
  .nav-group.collapsed .nav-group-body { grid-template-rows: 1fr; }
  .nav-item { justify-content: center; padding: var(--sp-3) var(--sp-2); }
  .nav-item .ico { width: auto; }
}

@media (max-width: 860px) {
  .nav-burger { display: grid; flex-shrink: 0; }
  .shell { flex-direction: column; }
  .nav-rail {
    position: fixed;
    top: calc(var(--topbar-h) + var(--banner-h));
    left: 0;
    bottom: 0;
    width: min(300px, 84vw);
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    gap: var(--sp-0);
    background: rgba(11, 14, 20, 0.985);
    border-right: var(--bw-hair) solid var(--line);
    border-bottom: none;
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-5) + env(safe-area-inset-bottom));
    transform: translateX(-104%);
    transition: transform var(--dur-slow) cubic-bezier(.2, .7, .3, 1);
    z-index: var(--z-drawer);
    -webkit-mask-image: none;
    mask-image: none;
    backdrop-filter: blur(10px);
  }
  body.nav-open .nav-rail { transform: translateX(0); box-shadow: 14px 0 44px rgba(0, 0, 0, 0.55); }
  body.nav-open { overflow: hidden; }
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: calc(var(--topbar-h) + var(--banner-h)) 0 0 0;
    background: rgba(4, 6, 10, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow);
    z-index: var(--z-drawer-scrim);
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav-item { flex: 0 0 auto; justify-content: flex-start; min-height: 44px; padding: var(--sp-2h) var(--sp-3h); white-space: nowrap; }
  .nav-item span.lbl { display: inline; }
  .nav-item .ico { width: 22px; }
  .nav-item .pip { position: static; margin-left: auto; }
  .nav-item.active { box-shadow: inset 2px 0 0 var(--accent); }
  .nav-item .feature-tag { display: inline-block; margin-left: var(--sp-1h); }
  .nav-group-head { min-height: 36px; }
}

.pager-btn { padding: var(--sp-1h) var(--sp-2h); min-width: 34px; }
.pager-strip { display: inline-flex; gap: var(--sp-1); align-items: center; }
.pager-num {
  background: none;
  border: var(--bw-hair) solid var(--line);
  color: var(--dim);
  min-width: 30px;
  height: 30px;
  padding: 0 var(--sp-2);
  cursor: pointer;
  clip-path: var(--clip-sm);
  font-family: inherit;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base), border-color var(--dur-base);
}
.pager-num:hover:not(:disabled) { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.pager-num.current { color: var(--accent); border-color: rgba(255, 177, 61, 0.55); background: rgba(255, 177, 61, 0.1); font-weight: 700; }
.pager-ellipsis { color: var(--dim); padding: 0 var(--sp-0); font-size: var(--fs-base); -webkit-user-select: none; user-select: none; }
.pager-jump { width: 64px; padding: var(--sp-1h) var(--sp-2); font-size: var(--fs-md); text-align: center; margin-bottom: 0; }
.grid-scan-note { width: 100%; text-align: center; font-size: var(--fs-base); }
@media (max-width: 860px) {
  .pager-num { min-width: 38px; height: 38px; }
}
@media (max-width: 560px) {
  .pager-strip .pager-num:not(.current) { display: none; }
  .pager-strip .pager-ellipsis { display: none; }
  .pager-jump { display: none; }
}

.ticker-track { animation: none; will-change: transform; }
.ticker:hover .ticker-track { animation: none; }
.tick-placeholder { border-left-color: rgba(255, 177, 61, 0.45); }
.tick-item { align-self: center; }

.mines-layout { grid-template-columns: minmax(360px, 660px) minmax(280px, 360px); justify-content: center; }
.mines-grid { width: min(560px, 100%); gap: var(--sp-2h); }
.mine-tile .mt-face { font-size: var(--fs-6xl); }
.mines-mult .v { font-size: var(--fs-9xl); }
.plinko-layout { justify-content: center; }
.plinko-board { max-width: 660px; }
.crash-layout { grid-template-columns: minmax(380px, 940px) minmax(260px, 340px); justify-content: center; }

.pvp-overlay-note { font-size: var(--fs-md); color: var(--dim, #8d9aa5); margin-bottom: var(--sp-2); text-align: center; }
.pvp-skip { margin-top: var(--sp-2h); opacity: 0.8; }

.event-fam-chip { display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-lg); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; color: var(--fc, #8b97a8); background: color-mix(in srgb, var(--fc, #8b97a8) 14%, transparent); border: var(--bw-hair) solid color-mix(in srgb, var(--fc, #8b97a8) 30%, transparent); }
.event-fam-ico { font-size: var(--fs-base); line-height: var(--lh-none); }
.event-time { line-height: 1.25; white-space: nowrap; }
.event-time-rel { font-size: var(--fs-md); font-weight: 600; }
.event-time-abs { font-size: var(--fs-sm); color: var(--dim, #8d9aa5); }
.event-data .ev-money { font-variant-numeric: tabular-nums; }
.event-data .ev-money.good { color: var(--good, #4ade80); }
.event-data .ev-money.bad { color: #ff5067; }
.id-chip-list { display: inline; }

.obs-row { cursor: pointer; }
.obs-row:hover td { background: rgba(255, 255, 255, 0.03); }
.obs-msg { font-size: var(--fs-md); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-status { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; }
.obs-status.open { color: #ff7847; }
.obs-status.resolved { color: var(--good, #4ade80); }
.obs-stat { font-size: var(--fs-base); color: var(--dim, #8d9aa5); display: inline-flex; gap: var(--sp-1); align-items: baseline; }
.obs-stat b { color: #e8edf4; font-size: var(--fs-md); }
.obs-detail { width: min(960px, calc(100vw - 36px)); min-width: 0; max-width: 100%; }
.obs-detail-msg { font-size: var(--fs-lg); font-weight: 600; margin-top: var(--sp-1h); word-break: break-word; }
.obs-detail-body { margin-top: var(--sp-2h); min-height: 200px; max-height: min(66vh, 640px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.obs-detail table { table-layout: fixed; width: 100%; }
.obs-detail td { overflow-wrap: anywhere; }

.obs-list { display: flex; flex-direction: column; }
.obs-card {
  padding: var(--sp-3) var(--sp-3h) var(--sp-3);
  border-bottom: var(--bw-hair) solid var(--line);
  cursor: pointer;
  transition: background var(--dur-fast);
  border-left: var(--bw-frame) solid transparent;
}
.obs-card:hover { background: rgba(255, 255, 255, 0.03); border-left-color: #ff5067; }
.obs-card.resolved { opacity: 0.6; }
.obs-card.resolved:hover { border-left-color: var(--good); }
.obs-card-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.obs-card-id { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.obs-card-time { margin-left: auto; font-size: var(--fs-base); white-space: nowrap; }
.obs-card-del { flex: none; opacity: 0.55; }
.obs-card:hover .obs-card-del { opacity: 1; }
.obs-card-msg {
  font-size: var(--fs-md); font-weight: 600; margin-top: var(--sp-1h);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.obs-card-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-base); margin-top: var(--sp-1h); min-width: 0; }
.obs-card-route { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.obs-card-sep { opacity: 0.5; }
.obs-replay-pill {
  font-size: var(--fs-sm); font-weight: 700; color: #4b9fff;
  border: var(--bw-hair) solid rgba(75, 159, 255, 0.4); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2);
  white-space: nowrap;
}
.obs-subtabs { margin: var(--sp-2h) 0; }
.obs-pre { background: rgba(0, 0, 0, 0.35); border: var(--bw-hair) solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-md); padding: var(--sp-2h); font-size: var(--fs-base); line-height: 1.5; overflow: auto; max-height: 260px; white-space: pre-wrap; word-break: break-word; }
.obs-pre.tall { max-height: 420px; }
.obs-replay { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-3h); }
@media (max-width: 900px) { .obs-replay { grid-template-columns: 1fr; } }
.obs-frame-wrap { position: relative; overflow: hidden; border: var(--bw-hair) solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); background: #0b0e14; }
.obs-frame { border: 0; transform-origin: 0 0; pointer-events: none; background: #0f1218; }
.obs-frame-wrap .obs-click-marker { position: absolute; width: 18px; height: 18px; margin: -10px 0 0 -10px; border-radius: var(--radius-circle); border: var(--bw-thick) solid #ff7847; box-shadow: 0 0 12px rgba(255, 120, 71, 0.8); pointer-events: none; animation: obsPing 1s ease-out infinite; }
@keyframes obsPing { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0.4; } }
.obs-steps { max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-0); }
.obs-step { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left; padding: var(--sp-1h) var(--sp-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: #cfd6df; font-size: var(--fs-base); cursor: pointer; }
.obs-step:hover { background: rgba(255, 255, 255, 0.05); }
.obs-step.active { background: rgba(255, 120, 71, 0.16); color: #fff; }
.obs-step.bad .obs-step-label { color: #ff5067; }
.obs-step-ico { flex: 0 0 auto; }
.obs-step-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-step-t { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--dim, #8d9aa5); font-variant-numeric: tabular-nums; }
.obs-net { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-3); }
@media (max-width: 900px) { .obs-net { grid-template-columns: 1fr; } }
.obs-net-list { max-height: 380px; overflow: auto; }
.obs-net-row { cursor: pointer; }
.obs-net-row:hover td { background: rgba(255, 255, 255, 0.03); }
.obs-net-url { font-size: var(--fs-base); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-net-status { font-weight: 700; font-size: var(--fs-base); }
.obs-net-status.good { color: var(--good, #4ade80); }
.obs-net-status.warn { color: #ffd24d; }
.obs-net-status.bad { color: #ff5067; }
.obs-net-meta { font-size: var(--fs-md); font-weight: 600; word-break: break-all; margin-bottom: var(--sp-1h); }
.obs-net-detail { min-width: 0; }
.obs-console { max-height: 380px; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-0); font-family: var(--font-mono, monospace); font-size: var(--fs-base); }
.obs-console-line { display: flex; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1h); border-radius: var(--radius-xs); align-items: baseline; }
.obs-console-line.error { background: rgba(255, 80, 103, 0.09); color: #ff8496; }
.obs-console-line.warn { background: rgba(255, 210, 77, 0.07); color: #ffd24d; }
.obs-console-line.log, .obs-console-line.info { color: #aeb8c4; }
.obs-console-level { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; flex: 0 0 38px; }
.obs-ctx-grid { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-1h) var(--sp-3h); font-size: var(--fs-md); }
.obs-ctx-grid > div { min-width: 0; word-break: break-word; }

.nml-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-3h); align-items: start; }
@media (max-width: 900px) { .nml-layout { grid-template-columns: 1fr; } }
.nml-road-wrap { padding: var(--sp-3h); overflow-x: auto; }
.nml-road { display: flex; gap: var(--sp-1); min-height: 220px; }
.nml-road.shake { animation: nml-shake 0.4s; }
@keyframes nml-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.nml-kerb { flex: 0 0 44px; background: repeating-linear-gradient(45deg, #2a2f1c, #2a2f1c 8px, #1c2013 8px, #1c2013 16px); border-radius: var(--radius-sm); display: grid; place-items: center; position: relative; }
.nml-kerb-label { writing-mode: vertical-rl; font-size: var(--fs-xs); letter-spacing: 3px; color: #8d9aa5; font-weight: 700; }
.nml-lane {
  flex: 1 1 0; min-width: 34px;
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(255, 255, 255, 0.05) 14px 18px),
    linear-gradient(180deg, #14181f, #0e1116);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-sm);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: var(--sp-1h); gap: var(--sp-1);
}
.nml-lane.cleared { background: linear-gradient(180deg, #16211a, #0e1512); border-color: rgba(74, 222, 128, 0.25); }
.nml-lane.next { border-color: rgba(255, 210, 77, 0.65); box-shadow: 0 0 16px rgba(255, 210, 77, 0.18) inset; animation: nml-next-pulse 1.6s ease-in-out infinite; }
@keyframes nml-next-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 210, 77, 0.1) inset; }
  50% { box-shadow: 0 0 22px rgba(255, 210, 77, 0.3) inset; }
}
.nml-lane.bust { background: rgba(255, 80, 103, 0.15); border-color: var(--danger); }
.nml-hazard { position: absolute; inset: 0; pointer-events: none; }
.nml-truck { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--fs-2xl); animation: nml-sweep var(--lane-speed, 2.4s) linear infinite; animation-delay: var(--lane-delay, 0s); opacity: 0.9; filter: grayscale(0.4) drop-shadow(0 6px 8px rgba(255, 230, 150, 0.25)); }
.nml-lane.cleared .nml-truck { opacity: 0.18; }
@keyframes nml-sweep { 0% { top: -22px; } 100% { top: 105%; } }
.nml-mult {
  font-size: var(--fs-md); font-weight: 800; font-family: var(--font-display);
  color: #fff; z-index: 1;
  background: rgba(6, 9, 13, 0.82);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  padding: var(--sp-0) var(--sp-2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.nml-odds {
  font-size: var(--fs-sm); font-weight: 700; color: #b8c4d2; z-index: 1;
  background: rgba(6, 9, 13, 0.72);
  border-radius: var(--radius-pill);
  padding: var(--sp-0) var(--sp-2);
}
.nml-lane.cleared .nml-mult { color: var(--good); border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 10px rgba(74, 222, 128, 0.25); }
.nml-lane.next .nml-mult { color: #ffd24d; border-color: rgba(255, 210, 77, 0.55); box-shadow: 0 0 12px rgba(255, 210, 77, 0.3); }
.nml-op { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); font-size: var(--fs-5xl); z-index: 2; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); animation: nml-bob 1s ease-in-out infinite; }
@keyframes nml-bob { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: var(--sp-1); } }
.nml-boom { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: var(--fs-7xl); z-index: 3; animation: nml-boom 0.5s ease-out; }
@keyframes nml-boom { 0% { transform: translate(-50%, -50%) scale(0.3); } 60% { transform: translate(-50%, -50%) scale(1.6); } 100% { transform: translate(-50%, -50%) scale(1); } }

.rl-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--sp-3h); align-items: start; }
@media (max-width: 1000px) { .rl-layout { grid-template-columns: 1fr; } }
.rl-wheel-panel {
  padding: var(--sp-4h) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2h); position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-fill), transparent 55%),
    var(--surface);
}
.rl-pointer {
  position: relative;
  z-index: 2;
  width: 30px; height: 22px;
  margin-bottom: -8px;
  display: grid; place-items: center;
  color: #190d02;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75));
}
.rl-pointer .cf-ico { width: 13px; height: 13px; margin-top: -3px; }
.rl-wheel {
  width: min(300px, 80vw); aspect-ratio: 1;
  border-radius: var(--radius-circle);
  padding: var(--sp-2);
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.06) 0 2.4deg, transparent 2.4deg 4.8deg),
    conic-gradient(#2b323d, #545e6d, #1c222b, #6a7482, #2b323d);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.7), 0 0 0 var(--bw-hair) rgba(255, 255, 255, 0.09);
}
.rl-wheel-svg { width: 100%; height: 100%; transform-origin: 50% 50%; border-radius: var(--radius-circle); }
.rl-wheel-num { font-size: var(--fs-3xs); fill: #fff; font-weight: 700; font-family: inherit; paint-order: stroke; stroke: rgba(0, 0, 0, 0.7); stroke-width: 1.4px; }
.rl-hub { margin-top: -4px; }
.rl-history { display: flex; gap: var(--sp-1h); align-items: center; flex-wrap: wrap; justify-content: center; }
.rl-hist-dot { width: 22px; height: 22px; border-radius: var(--radius-circle); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: #fff; border: var(--bw-hair) solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.45); }
.rl-hist-dot.big { width: 36px; height: 36px; font-size: var(--fs-xl); box-shadow: 0 0 16px rgba(255, 210, 77, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.45); }
.rl-result { min-height: 40px; display: flex; align-items: center; gap: var(--sp-2h); font-size: var(--fs-3xl); font-family: var(--font-display); opacity: 0; transition: opacity var(--dur-slow); }
.rl-result.show { opacity: 1; }
.rl-result.win b { color: var(--good); text-shadow: 0 0 18px rgba(74, 222, 128, 0.5); }
.rl-result.lose b { color: var(--danger); }
.rl-board-panel {
  padding: var(--sp-4h) var(--sp-4) var(--sp-3h);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(255, 255, 255, 0.015) 11px 12px),
    linear-gradient(180deg, var(--raised), var(--sunken) 70%);
  border: var(--bw-hair) solid var(--line);
}
.rl-board { display: grid; grid-template-columns: 34px repeat(12, 1fr) 44px; grid-template-rows: repeat(3, 42px) 36px 36px; gap: var(--sp-1); margin-bottom: var(--sp-3); min-width: 560px; }
/* The board keeps its 560px floor on phones and the panel scrolls instead: letting
   the grid squeeze shrinks the number cells to 15px, which cannot be tapped. */
@media (max-width: 720px) { .rl-board-panel { overflow-x: auto; } }
/* The panel is already a scroller at phone widths, so a wider floor costs nothing
   but buys number cells that can actually be tapped. */
@media (max-width: 560px) { .rl-board { min-width: 664px; } }
.rl-cell {
  position: relative;
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xs);
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); cursor: pointer;
  display: grid; place-items: center;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 45%),
    var(--rlc, #1a1f29);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  transition: filter var(--dur-base), transform var(--dur-instant), box-shadow var(--dur-base);
}
.rl-cell:hover { filter: brightness(1.3); transform: translateY(-1px); box-shadow: 0 0 12px rgba(255, 210, 77, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.35); }
.rl-cell.num.zero { grid-row: 1 / span 3; grid-column: 1; }
.rl-cell.split-arm { outline: var(--bw-thick) solid #ffd24d; }
.rl-cell.hit { animation: rl-hit 0.6s ease-in-out 3; }
@keyframes rl-hit { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(2.2); outline: var(--bw-thick) solid #ffd24d; } }
.rl-cell.out { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 45%), #151b25; color: #aeb8c4; font-size: var(--fs-base); grid-auto-flow: column; gap: var(--sp-1); }
.rl-cell-ico { width: 10px; height: 10px; }
.rl-cell.out.red { color: #ff8496; }
.rl-cell.col.c1 { grid-column: 14; grid-row: 1; }
.rl-cell.col.c2 { grid-column: 14; grid-row: 2; }
.rl-cell.col.c3 { grid-column: 14; grid-row: 3; }
.rl-cell.dz { grid-row: 4; }
.rl-cell.dz.d1 { grid-column: 2 / span 4; }
.rl-cell.dz.d2 { grid-column: 6 / span 4; }
.rl-cell.dz.d3 { grid-column: 10 / span 4; }
.rl-cell.ev { grid-row: 5; }
.rl-cell.ev.e1 { grid-column: 2 / span 2; }
.rl-cell.ev.e2 { grid-column: 4 / span 2; }
.rl-cell.ev.e3 { grid-column: 6 / span 2; }
.rl-cell.ev.e4 { grid-column: 8 / span 2; }
.rl-cell.ev.e5 { grid-column: 10 / span 2; }
.rl-cell.ev.e6 { grid-column: 12 / span 2; }
.cv-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-3h); align-items: start; }
@media (max-width: 900px) { .cv-layout { grid-template-columns: 1fr; } }
.cv-table-wrap { padding: var(--sp-4h); }
.cv-route { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); position: relative; }
@media (max-width: 640px) { .cv-route { grid-template-columns: repeat(2, 1fr); } }
.cv-stop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); border-radius: var(--radius-lg); border: var(--bw-hair) dashed rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); }
.cv-stop.active { border-color: rgba(92, 201, 245, 0.6); background: rgba(92, 201, 245, 0.06); box-shadow: 0 0 18px rgba(92, 201, 245, 0.08) inset; }
.cv-stop.bust { border-color: var(--danger); background: rgba(255, 80, 103, 0.08); }
.cv-stop-label { font-size: var(--fs-sm); letter-spacing: 0.5px; text-transform: uppercase; color: #8d9aa5; text-align: center; }
.cv-stop-mult { font-weight: 800; color: #5cc9f5; }
.cv-stop.bust .cv-stop-mult { color: var(--danger); }
.cv-card-slot { perspective: 400px; }
.cv-card-slot.flip .playing-card { animation: cv-flip 0.45s ease-out; }
@keyframes cv-flip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.cv-blurb { font-size: var(--fs-base); margin-top: var(--sp-3h); text-align: center; }
.cv-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.cv-choice { font-weight: 800; letter-spacing: 0.5px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding-top: var(--sp-2h); padding-bottom: var(--sp-2h); }
.cv-choice-glyph { display: grid; place-items: center; }
.cv-choice-glyph .cf-ico { width: 20px; height: 20px; }
.cv-choice-lbl { font-size: var(--fs-md); line-height: var(--lh-none); }
.cv-choice.red { color: #ff8496; }

.rl-mark { position: absolute; top: -9px; right: -7px; z-index: 1; }

.rl-chip-row { justify-content: flex-start; margin: var(--sp-1) 0 0; }
.rl-chip-label { color: var(--dim); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.16em; }
.rl-chip-row .chip-custom { margin-left: var(--sp-2); }

@media (max-width: 480px) {
  .rl-mark { top: -7px; right: -6px; }
}
.hd-lobby-row { display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2h) var(--sp-3h); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.hd-lobby-row > :nth-child(2) { flex: 0 0 auto; }
.hd-lobby-row > button:last-child { margin-left: auto; }
/* width:100% is load-bearing: .page is a flex column, and cross-axis auto
   margins suppress the default stretch, collapsing the table to fit-content. */
.hd-table { width: 100%; max-width: 900px; margin: 0 auto; padding: var(--sp-3h) var(--sp-3h) var(--sp-3); background: linear-gradient(180deg, #171c26 0%, #10141c 100%); border: var(--bw-hair) solid rgba(255, 255, 255, 0.07); }
.hd-reconnect {
  text-align: center; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: #ffd24d; padding-bottom: var(--sp-1h); animation: hd-blink 1.4s ease-in-out infinite;
}
@keyframes hd-blink { 50% { opacity: 0.45; } }
.hd-felt {
  position: relative;
  padding: var(--sp-4) var(--sp-5) var(--sp-4h);
  border-radius: 150px;
  border: 7px solid #43301d;
  background: radial-gradient(ellipse at 50% 30%, #22683c 0%, #175232 42%, #0f3a23 78%, #0a2b1a 100%);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    0 14px 34px rgba(0, 0, 0, 0.4);
}
.hd-arc { position: relative; }
/* Heads-up gets extra clearance so the lone pod is not crowding the pot plaque. */
.hd-arc.n1 { height: 200px; }
.hd-arc.n2 { height: 168px; }
.hd-arc.n3 { height: 200px; }
.hd-arc.n4 { height: 226px; }
.hd-arc .hd-pod { position: absolute; transform: translateX(-50%); width: 160px; }
.hd-pod.a1k0 { left: 50%; top: 6px; }
.hd-pod.a2k0 { left: 28%; top: 6px; }
.hd-pod.a2k1 { left: 72%; top: 6px; }
.hd-pod.a3k0 { left: 15%; top: 36px; }
.hd-pod.a3k1 { left: 50%; top: 0; }
.hd-pod.a3k2 { left: 85%; top: 36px; }
.hd-pod.a4k0 { left: 11%; top: 56px; }
.hd-pod.a4k1 { left: 36%; top: 0; }
.hd-pod.a4k2 { left: 64%; top: 0; }
.hd-pod.a4k3 { left: 89%; top: 56px; }
.hd-pod { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); }
.hd-pod .hd-seat { width: 100%; min-width: 0; }
.hd-pod .hd-hand { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2h); }
.hd-seat {
  position: relative;
  background: rgba(8, 12, 18, 0.78);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--sp-2) var(--sp-3);
  min-width: 170px;
  box-shadow: var(--shadow-md);
}
.hd-seat.turn { border-color: rgba(255, 210, 77, 0.7); box-shadow: 0 0 0 1px rgba(255, 210, 77, 0.35), 0 0 18px rgba(255, 210, 77, 0.18); }
.hd-seat.folded { opacity: 0.5; filter: saturate(0.5); }
.hd-seat-id { display: flex; align-items: center; gap: var(--sp-1h); row-gap: var(--sp-1); min-width: 0; flex-wrap: wrap; }
.hd-seat-id > span { flex: 0 0 auto; }
.hd-seat-id b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-btn-chip { flex: 0 0 auto; background: #ffd24d; color: #33270a; font-size: var(--fs-2xs); font-weight: 800; width: 16px; height: 16px; border-radius: var(--radius-circle); display: grid; place-items: center; }
.hd-seat-stack { font-weight: 800; color: #dfe9f5; margin-top: var(--sp-1); font-variant-numeric: tabular-nums; }
.hd-seat-bet { font-size: var(--fs-base); color: #ffd24d; font-variant-numeric: tabular-nums; }
.hd-seat-bet.push { animation: hd-chip-push 0.7s cubic-bezier(0.3, 1.2, 0.4, 1); }
@keyframes hd-chip-push { 35% { transform: translateY(9px) scale(1.25); } }
.hd-ribbon {
  position: absolute; top: 50%; left: 50%; z-index: 3; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-11deg);
  background: linear-gradient(100deg, #a80f28, #e2334c);
  color: #fff; font-weight: 900; font-size: var(--fs-base); letter-spacing: 2.5px;
  padding: var(--sp-1) var(--sp-4); border-radius: var(--radius-xs);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 16px rgba(226, 51, 76, 0.45);
}
.hd-seat.slam { animation: hd-slam-flash 0.7s ease-out; }
.hd-seat.slam .hd-ribbon { animation: hd-stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
@keyframes hd-stamp {
  from { transform: translate(-50%, -50%) rotate(-11deg) scale(3); opacity: 0; }
  55% { opacity: 1; }
  70% { transform: translate(-50%, -50%) rotate(-11deg) scale(0.94); }
  to { transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
}
@keyframes hd-slam-flash {
  0% { box-shadow: 0 0 0 0 rgba(226, 51, 76, 0); }
  30% { box-shadow: 0 0 0 3px rgba(226, 51, 76, 0.65), 0 0 34px rgba(226, 51, 76, 0.5); }
  100% { box-shadow: var(--shadow-md); }
}
.hd-timer { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-xs); margin-top: var(--sp-1h); overflow: hidden; }
.hd-timer-fill { height: 100%; background: var(--good); transition: width var(--dur-base) linear; }
.hd-timer-fill.low { background: var(--danger); }
.hd-center { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-0) 0 var(--sp-2); }
.hd-street { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, 0.4); min-height: 14px; }
.hd-me { display: flex; justify-content: center; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-2h) 0 var(--sp-0); }
.hd-pot-plaque {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.38));
  border: var(--bw-hair) solid rgba(255, 210, 77, 0.4);
  border-radius: var(--radius-2xl); padding: var(--sp-1h) var(--sp-4h);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(255, 255, 255, 0.04);
}
.hd-pot-cap { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 2.5px; color: rgba(255, 210, 77, 0.65); }
.hd-pot-amt { font-weight: 800; font-size: var(--fs-xl); color: #ffd24d; font-variant-numeric: tabular-nums; letter-spacing: 0.4px; }
.hd-pot-plaque.huge { border-color: rgba(255, 210, 77, 0.85); animation: hd-gold-pulse 1.5s ease-in-out infinite; }
.hd-pot-plaque.bump { animation: hd-pot-bump 0.45s ease; }
.hd-pot-plaque.huge.bump { animation: hd-pot-bump 0.45s ease, hd-gold-pulse 1.5s ease-in-out infinite; }
@keyframes hd-pot-bump {
  30% { transform: scale(1.1); box-shadow: 0 0 22px rgba(255, 210, 77, 0.4); }
}
@keyframes hd-gold-pulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45), 0 0 6px rgba(255, 210, 77, 0.2); }
  50% { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 210, 77, 0.55); }
}
.hd-cards { display: flex; gap: var(--sp-1h); min-height: 64px; align-items: center; }
.hd-hand { padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-xl); font-size: var(--fs-base); font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; background: rgba(77, 166, 255, 0.12); border: var(--bw-hair) solid rgba(77, 166, 255, 0.35); color: #9fd0ff; white-space: nowrap; }
.hd-hand.win { background: rgba(74, 222, 128, 0.14); border-color: rgba(74, 222, 128, 0.5); color: #7ef0a5; }
.hd-hand.pop { animation: hd-hand-pop 0.4s cubic-bezier(0.2, 0.85, 0.3, 1.2); }
@keyframes hd-hand-pop { 30% { transform: scale(1.12); } }
.hd-cards .playing-card.slot { opacity: 0.15; border-style: dashed; }
.hd-cards .playing-card.deal { animation: hd-deal 0.4s cubic-bezier(0.2, 0.85, 0.3, 1.12) backwards; }
@keyframes hd-deal {
  from { transform: translateY(-18px) rotate(-6deg) scale(0.8); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.hd-result {
  text-align: center; padding: var(--sp-3);
  background: linear-gradient(180deg, rgba(255, 210, 77, 0.1), rgba(255, 210, 77, 0.04));
  border: var(--bw-hair) solid rgba(255, 210, 77, 0.3); border-radius: var(--radius-lg); margin: var(--sp-2h) 0 0;
  animation: hd-result-in 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.12) backwards;
}
@keyframes hd-result-in {
  from { transform: translateY(16px) scale(0.95); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.hd-win-hand { color: #7ef0a5; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.hd-console {
  margin-top: var(--sp-3); padding: var(--sp-2h) var(--sp-3);
  background: rgba(0, 0, 0, 0.32);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
}
.hd-console-status { text-align: center; color: #8d9aa5; font-size: var(--fs-md); padding: var(--sp-1h); }
.hd-controls { display: flex; gap: var(--sp-4); align-items: stretch; flex-wrap: wrap; }
.hd-controls-left { display: flex; gap: var(--sp-2); align-items: center; }
.hd-betbox { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: var(--sp-2); }
.hd-presets { display: flex; gap: var(--sp-1h); flex-wrap: wrap; }
.hd-preset { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2h); }
.hd-slider-row { display: flex; align-items: center; gap: var(--sp-2h); }
.hd-raise-slider { flex: 1; min-width: 120px; accent-color: #ffd24d; }
.hd-raise-label {
  font-weight: 800; min-width: 96px; text-align: right; font-size: var(--fs-lg); color: #ffe9b0;
  font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace;
}
.hd-bet-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }
.hd-allin-btn { border: var(--bw-hair) solid rgba(255, 80, 103, 0.55); color: #ff8496; font-weight: 900; letter-spacing: 1.5px; background: rgba(255, 80, 103, 0.08); }
.hd-allin-btn:hover { background: rgba(255, 80, 103, 0.18); }
@media (max-width: 720px) {
  .hd-felt { border-radius: var(--radius-2xl); padding: var(--sp-3); border-width: 5px; }
  .hd-arc, .hd-arc.n1, .hd-arc.n2, .hd-arc.n3, .hd-arc.n4 {
    height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2h);
  }
  .hd-arc .hd-pod { position: static; transform: none; width: 150px; }
  .hd-controls { flex-direction: column; align-items: stretch; }
  .hd-controls-left { justify-content: center; }
  .hd-bet-actions { justify-content: center; }
}
.hd-seats-tag {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.5px; color: #9fd0ff;
  background: rgba(77, 166, 255, 0.12); border: var(--bw-hair) solid rgba(77, 166, 255, 0.35);
  padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-lg);
}
.hd-cards.sm { min-height: 46px; gap: var(--sp-1); }
.hd-cards.sm .playing-card { width: 44px; height: 63px; border-radius: var(--radius-sm); }
.hd-cards.sm .playing-card .corner { top: 4px; left: 5px; font-size: var(--fs-base); }
.hd-cards.sm .playing-card .pip-big { font-size: var(--fs-5xl); }
.hd-cards.sm .playing-card.back { border-width: var(--bw-frame); }
.hd-seat.empty { border-style: dashed; opacity: 0.45; }
.hd-seat-empty { font-size: var(--fs-sm); color: #8d9aa5; text-align: center; padding: var(--sp-2) 0; letter-spacing: 0.5px; }
.hd-btn-chip.sb { background: #9fd0ff; color: #0d2338; width: auto; padding: 0 var(--sp-1h); border-radius: var(--radius-md); }
.hd-btn-chip.bb { background: #ffab6b; color: #38200d; width: auto; padding: 0 var(--sp-1h); border-radius: var(--radius-md); }
.hd-pots { display: flex; gap: var(--sp-1h); flex-wrap: wrap; justify-content: center; }
.hd-pot-side {
  font-size: var(--fs-sm); font-weight: 800; color: #ffd24d;
  background: rgba(0, 0, 0, 0.35); border: var(--bw-hair) solid rgba(255, 210, 77, 0.25);
  padding: var(--sp-0) var(--sp-2h); border-radius: var(--radius-xl);
}
.hd-result-pots { display: flex; gap: var(--sp-3h); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-1); font-size: var(--fs-base); color: #ffd24d; }
.hd-result-line { display: inline-flex; align-items: center; gap: var(--sp-1h); flex-wrap: wrap; justify-content: center; }

.sb-markets { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 860px; }
.sb-market-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); flex-wrap: wrap; }
.sb-clans { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sb-vs { color: #6c7683; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 1px; padding: 0 var(--sp-1); }
.sb-tag { font-weight: 800; font-size: var(--fs-base); }
.sb-phase { font-size: var(--fs-sm); font-weight: 800; letter-spacing: 1px; padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-xl); }
.sb-phase.prep { background: rgba(159, 210, 255, 0.12); color: #9fd2ff; }
.sb-phase.live { background: rgba(255, 80, 103, 0.14); color: #ff8496; animation: sb-blink 1.6s ease-in-out infinite; }
.sb-phase.final { background: rgba(255, 210, 77, 0.14); color: #ffd24d; }
@keyframes sb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.sb-head-right { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sb-market.final { border-color: rgba(255, 210, 77, 0.25); }
.sb-result { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2h); align-items: center; margin-top: var(--sp-3); }
.sb-result-side { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-2h) var(--sp-3); border: var(--bw-hair) solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); opacity: 0.55; }
.sb-result-side:last-child { justify-content: flex-end; }
.sb-result-side.win { opacity: 1; border-color: rgba(74, 222, 128, 0.55); background: rgba(74, 222, 128, 0.07); }
.sb-result-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-result-badge { font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.08em; color: #0b0f16; background: var(--good); padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-xs); flex-shrink: 0; }
.sb-result-score { font-size: var(--fs-5xl); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-progress { height: 4px; background: rgba(255, 255, 255, 0.07); border-radius: var(--radius-xs); margin: var(--sp-2h) 0 var(--sp-0); overflow: hidden; }
.sb-progress-fill { height: 100%; background: linear-gradient(90deg, #ff8496, #ffd24d); transition: width 1s linear; }
.sb-odds-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2h); margin-top: var(--sp-3); }
.sb-odds { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2h) var(--sp-3h); background: rgba(255, 255, 255, 0.04); border: var(--bw-hair) solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); cursor: pointer; color: inherit; transition: border-color var(--dur-base), background var(--dur-base); }
.sb-odds:hover:not(:disabled) { border-color: rgba(192, 132, 252, 0.6); background: rgba(192, 132, 252, 0.08); }
.sb-odds:disabled { opacity: 0.45; cursor: not-allowed; }
.sb-odds-side { font-weight: 700; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-odds-val { font-weight: 800; font-size: var(--fs-2xl); color: #c084fc; }
.sb-odds.up .sb-odds-val { color: var(--good); }
.sb-odds.down .sb-odds-val { color: var(--danger); }
.sb-odds-drift { font-size: var(--fs-sm); }
.sb-odds.up .sb-odds-drift { color: var(--good); }
.sb-odds.down .sb-odds-drift { color: var(--danger); }
.sb-note { margin-top: var(--sp-2); font-size: var(--fs-base); color: #8d9aa5; font-style: italic; }
.sb-slip { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2h); padding: var(--sp-2h); background: rgba(0, 0, 0, 0.25); border-radius: var(--radius-md); flex-wrap: wrap; }
.sb-bets { max-width: 860px; }

/* open bets: bookmaker slips */
.sb-slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--sp-2h); }
.sb-bslip { position: relative; padding: var(--sp-3) var(--sp-3h) var(--sp-2h) var(--sp-4h); overflow: hidden; }
.sb-bslip::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--slip-accent, #c084fc); }
.sb-bslip-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.sb-bslip-kind { font-size: var(--fs-xs); letter-spacing: 0.12em; font-weight: 800; color: #6c7683; white-space: nowrap; }
.sb-chip { font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.06em; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-lg); white-space: nowrap; flex-shrink: 0; }
.sb-chip.inplay { background: rgba(255, 80, 103, 0.14); color: #ff8496; animation: sb-blink 1.6s ease-in-out infinite; }
.sb-chip.final { background: rgba(255, 210, 77, 0.14); color: #ffd24d; }
.sb-chip.upcoming { background: rgba(159, 210, 255, 0.12); color: #9fd2ff; }
.sb-chip.settling { background: rgba(255, 255, 255, 0.08); color: #8d9aa5; }
.sb-chip.won { background: rgba(74, 222, 128, 0.15); color: var(--good); }
.sb-chip.lost { background: rgba(255, 80, 103, 0.14); color: #ff5067; }
.sb-chip.void { background: rgba(255, 255, 255, 0.08); color: #8d9aa5; }
.sb-bslip-sel { display: flex; align-items: baseline; gap: var(--sp-1h); margin-top: var(--sp-2h); font-size: var(--fs-lg); min-width: 0; }
.sb-bslip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-bslip-price { margin-left: auto; font-weight: 800; color: #c084fc; font-size: var(--fs-xl); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sb-bslip-vs { font-size: var(--fs-base); margin-top: var(--sp-0); }
.sb-bslip-money { display: flex; gap: var(--sp-5); margin-top: var(--sp-2h); padding-top: var(--sp-2h); border-top: var(--bw-hair) dashed rgba(255, 255, 255, 0.14); }
.sb-bslip-money > span { display: flex; flex-direction: column; gap: var(--sp-0); font-variant-numeric: tabular-nums; }
.sb-mk { font-size: var(--fs-2xs); letter-spacing: 0.12em; color: #6c7683; font-weight: 800; }
.sb-ret { color: var(--good); }
.sb-bslip-foot { font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* settled bets: receipt ledger */
.sb-receipts { padding: 0; overflow: hidden; }
/* fixed tracks so the money columns line up across every row */
.sb-receipt {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 96px 128px 92px 92px 132px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2h) var(--sp-3h);
  font-size: var(--fs-md);
  border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.05);
}
.sb-receipt:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.sb-receipt.head {
  padding: var(--sp-2) var(--sp-3h);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6c7683;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.08);
}
.sb-receipt.head span:nth-child(n+4) { text-align: right; }
.sb-receipt .sb-chip { text-align: center; justify-self: stretch; }
.sb-receipt-reason { justify-self: start; }
.sb-receipt-reason .sb-draw-note { margin: 0; }
.sb-receipt-sel { display: flex; align-items: baseline; gap: var(--sp-1h); min-width: 0; }
.sb-receipt-sel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-receipt-sel .dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 4; }
.sb-receipt-num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sb-receipt-net { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sb-receipt-net.pos { color: var(--good); }
.sb-receipt-net.neg { color: var(--danger); }
.sb-receipt-when { font-size: var(--fs-sm); white-space: nowrap; text-align: right; }
@media (max-width: 860px) {
  .sb-receipt { grid-template-columns: 58px minmax(0, 1fr) 96px; row-gap: var(--sp-1); }
  .sb-receipt.head { display: none; }
  .sb-receipt-num, .sb-receipt-when { grid-column: 2 / 3; text-align: left; }
  .sb-receipt-net { grid-column: 3 / 4; grid-row: 1; }
  .sb-receipt-reason { grid-column: 2 / -1; justify-self: start; }
}
.sb-summary { display: flex; gap: var(--sp-4h); flex-wrap: wrap; align-items: center; padding: var(--sp-2h) var(--sp-3h); font-size: var(--fs-base); color: #8d9aa5; background: rgba(255, 255, 255, 0.03); border-top: var(--bw-hair) solid rgba(255, 255, 255, 0.08); }
.sb-summary b { color: var(--text); }
.sb-summary b.pos { color: var(--good); }
.sb-summary b.neg { color: var(--danger); }

.sb-markets, .sb-bets, .sb-receipts, .sb-void-legend { max-width: 920px; }
.sb-market {
  position: relative;
  padding: var(--sp-4) var(--sp-4h);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(192, 132, 252, 0.07), transparent 58%),
    linear-gradient(180deg, rgba(24, 28, 39, 0.94), rgba(13, 16, 23, 0.97));
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.sb-market.live {
  border-color: rgba(255, 80, 103, 0.4);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), 0 0 22px rgba(255, 80, 103, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sb-market.final { border-color: rgba(255, 210, 77, 0.3); }
.sb-market-head { padding-bottom: var(--sp-3); border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.07); }
.sb-tag { font-size: var(--fs-md); }
.sb-vs { color: #59616f; }
.sb-phase { text-transform: uppercase; }
.sb-phase.live { box-shadow: 0 0 14px rgba(255, 80, 103, 0.28); }

.sb-odds-row { gap: var(--sp-3); margin-top: var(--sp-3h); }
.sb-odds {
  padding: var(--sp-3h) var(--sp-4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
}
.sb-odds:hover:not(:disabled) {
  border-color: rgba(192, 132, 252, 0.7);
  background: linear-gradient(180deg, rgba(192, 132, 252, 0.15), rgba(192, 132, 252, 0.05));
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.sb-odds-val { font-size: var(--fs-3xl); letter-spacing: 0.3px; text-shadow: 0 0 12px rgba(192, 132, 252, 0.25); }

/* live badge, in-play indicator */
.sb-market-body { display: contents; }
.sb-live-dot { width: 7px; height: 7px; border-radius: var(--radius-circle); background: #ff5067; display: inline-block; margin-right: var(--sp-1h); vertical-align: middle; box-shadow: 0 0 8px rgba(255, 80, 103, 0.8); animation: sb-blink 1.6s ease-in-out infinite; }

/* inspect / spectate controls */
.sb-inspect, .sb-spectate { font-size: var(--fs-sm); padding: var(--sp-1h) var(--sp-2h); }
.sb-spectate { border-color: rgba(255, 132, 150, 0.4); color: #ff8496; }
.sb-spectate:hover { background: rgba(255, 80, 103, 0.1); }

/* open-slip live pricing */
.sb-slip { background: rgba(0, 0, 0, 0.3); border: var(--bw-hair) solid rgba(255, 255, 255, 0.06); }
.sb-slip-live { font-size: var(--fs-2xs); font-weight: 900; letter-spacing: 0.08em; color: #0b0f16; background: #ff8496; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-xs); }
.sb-slip-price { font-size: var(--fs-md); }
.sb-note.inplay { color: #ff8496; font-style: normal; }

/* void legend / draw note */
.sb-void-legend { display: flex; align-items: center; gap: var(--sp-2h); margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3h); background: rgba(255, 255, 255, 0.03); border: var(--bw-hair) solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); }
.sb-void-legend-txt { font-size: var(--fs-base); color: #8d9aa5; line-height: 1.45; }
.sb-draw-note { font-size: var(--fs-2xs); font-weight: 900; letter-spacing: 0.08em; color: #ffd24d; background: rgba(255, 210, 77, 0.14); padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-xs); margin-left: var(--sp-1h); }

/* inspect modal */
.sb-inspect-modal { display: flex; flex-direction: column; gap: var(--sp-3h); }
.sb-inspect-head { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.sb-inspect-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3); align-items: center; }
.sb-inspect-team { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.sb-inspect-team:last-child { justify-content: flex-end; }
.sb-inspect-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-inspect-score { font-size: var(--fs-6xl); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-inspect-feed, .sb-inspect-board { display: flex; flex-direction: column; gap: var(--sp-1); }
.sb-inspect-feed-row, .sb-inspect-line { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1h) var(--sp-2); background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-sm); font-size: var(--fs-md); }
.sb-inspect-feed-rnd { min-width: 28px; }
.sb-inspect-feed-wpn { font-size: var(--fs-sm); }
.sb-inspect-feed-crit { font-size: var(--fs-2xs); font-weight: 900; color: #ffd24d; }
.sb-inspect-line-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-inspect-line-kda { font-variant-numeric: tabular-nums; }
.sb-inspect-mvp { font-size: var(--fs-2xs); font-weight: 900; color: #ffd24d; background: rgba(255, 210, 77, 0.14); padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-xs); }

.war-spec { display: flex; flex-direction: column; gap: var(--sp-3h); width: 100%; max-width: 640px; margin: 0 auto; }
.war-spec-title { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; }
.war-spec-title .cf-ico { width: 18px; height: 18px; color: #ff8496; }
.war-spec-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3); align-items: center; padding: var(--sp-3h); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(24, 28, 39, 0.9), rgba(13, 16, 23, 0.96)); border: var(--bw-hair) solid rgba(255, 255, 255, 0.08); }
.war-spec-team { display: flex; flex-direction: column; gap: var(--sp-0); min-width: 0; }
.war-spec-team.right { text-align: right; }
.war-spec-tag { font-weight: 900; font-size: var(--fs-xl); }
.war-spec-name { font-size: var(--fs-base); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-spec-mid { text-align: center; }
.war-spec-score { font-size: var(--fs-7xl); font-weight: 900; font-variant-numeric: tabular-nums; }
.war-spec-phase { font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--sp-1); display: flex; align-items: center; justify-content: center; }
.war-spec-phase.live { color: #ff8496; }
.war-spec-phase.final { color: #ffd24d; }
.war-spec-map { font-size: var(--fs-sm); margin-top: var(--sp-0); }
.war-spec-feed { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 300px; overflow-y: auto; }
.war-spec-kill { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1h) var(--sp-2h); background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-sm); font-size: var(--fs-md); }
.war-spec-killer { font-weight: 700; }
.war-spec-kill-ico { width: 14px; height: 14px; color: #ff8496; }
.war-spec-wpn { margin-left: auto; font-size: var(--fs-sm); }
.war-spec-note { font-size: var(--fs-sm); text-align: center; }
.war-spec-rounds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2h); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.02); border: var(--bw-hair) solid rgba(255, 255, 255, 0.08); }
.war-spec-rpip { box-sizing: border-box; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 800; line-height: var(--lh-none); background: #161d29; border: var(--bw-hair) solid var(--line); }
.war-spec-rpip .cf-ico { width: 12px; height: 12px; }
.war-spec-rpip.home { border-color: #2ee6a8; box-shadow: inset 0 0 0 1px rgba(46, 230, 168, 0.25); color: #2ee6a8; }
.war-spec-rpip.away { border-color: #ff5067; box-shadow: inset 0 0 0 1px rgba(255, 80, 103, 0.25); color: #ff5067; }
.war-spec-rpip.now { border-style: dashed; border-color: #ff8496; color: #ff8496; animation: warSpecPulse 1.2s ease-in-out infinite; }
@keyframes warSpecPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.war-spec-live-dot { display: inline-block; width: 7px; height: 7px; margin-right: var(--sp-1h); border-radius: var(--radius-circle); background: #ff5067; box-shadow: 0 0 0 3px rgba(255, 80, 103, 0.18); animation: warSpecPulse 1.2s ease-in-out infinite; }
.war-spec-obj { display: inline-flex; align-items: center; gap: var(--sp-1h); margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: 700; color: #ffce54; }
.war-spec-obj .cf-ico { width: 13px; height: 13px; }

/* ---------- clan [TAG] underline bleed fix ----------
   .player-link draws an underline; text-decoration propagates through plain
   inline children and a nested text-decoration:none cannot cancel it. Atomic
   inlines are exempt from that propagation, so the tag becomes inline-block. */
.clan-tag-color { display: inline-block; }

.inspect-head { flex-wrap: wrap; }
.inspect-presence {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  margin-left: auto;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--dim);
  white-space: nowrap;
}
.inspect-presence-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--dim); flex: 0 0 auto; }
.inspect-presence.online { color: var(--good); font-weight: 600; }
.inspect-presence.online .inspect-presence-dot { background: var(--good); box-shadow: 0 0 6px rgba(74, 222, 128, 0.7); }
.inspect-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
}
.inspect-fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-0);
  min-width: 88px;
}
.inspect-fact-k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }
.inspect-fact-v { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.inspect-actions { margin-top: var(--sp-3); flex-wrap: wrap; }
.inspect-action { display: inline-flex; align-items: center; gap: var(--sp-2); }
.inspect-action .cf-ico { width: 15px; height: 15px; margin: 0; color: var(--accent); }

.lb-clans { display: flex; flex-direction: column; gap: var(--sp-3); }
.lb-clans > .panel-head { margin-bottom: 0; }
.lb-clans-panel { padding: var(--sp-1h) 0; }
.lb-clan-row {
  display: grid;
  grid-template-columns: 40px 34px minmax(160px, 1.4fr) minmax(130px, 1fr) 90px 100px 90px;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
  padding: var(--sp-2h) var(--sp-4);
  background: none;
  border: none;
  border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  text-align: left;
  transition: background var(--dur-base);
}
.lb-clan-row:last-child { border-bottom: none; }
.lb-clan-row:hover:not(.head) { background: rgba(255, 255, 255, 0.035); }
.lb-clan-row.head {
  cursor: default;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-4) var(--sp-1h);
}
.lb-clan-rank { justify-self: center; }
.lb-clan-id { display: flex; flex-direction: column; gap: var(--sp-0); min-width: 0; }
.lb-clan-name-row { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.lb-clan-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-clan-league { font-size: var(--fs-sm); }
.lb-clan-record { display: flex; flex-direction: column; gap: var(--sp-1); }
.lb-clan-wl { display: flex; gap: var(--sp-2); font-size: var(--fs-md); }
.lb-clan-wl .w { color: var(--good); }
.lb-clan-wl .l { color: var(--danger); }
.lb-clan-meter { background: rgba(255, 80, 103, 0.25); max-width: 130px; }
.lb-clan-cell { font-size: var(--fs-md); }
.lb-clan-mmr { font-family: var(--font-display); font-size: var(--fs-xl); text-align: right; }
.lb-clan-mmr .dim { font-size: var(--fs-xs); font-family: var(--font-body, inherit); }
/* The seven-column track needs 716px plus row padding, which the rail leaves only
   above 1000px, so the reduction covers the whole band below it. */
@media (max-width: 1000px) {
  .lb-clan-row { grid-template-columns: 28px 30px minmax(120px, 1.5fr) minmax(100px, 1fr) 74px; }
  .lb-clan-row > :nth-child(6) { display: none; }
  .lb-clan-row > :nth-child(5) { display: none; }
  .lb-clan-row.head > :nth-child(6), .lb-clan-row.head > :nth-child(5) { display: none; }
}

.item-card.coll-replaceable { cursor: pointer; }
.coll-replace-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent);
  background: rgba(8, 11, 16, 0.66);
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
}
.item-card.coll-replaceable { position: relative; }
.item-card.coll-replaceable:hover .coll-replace-overlay { opacity: 1; }
.coll-current-slot { display: block; font-size: var(--fs-base); margin: var(--sp-1h) 0 var(--sp-2h); }
@media (hover: none) {
  .coll-replace-overlay { opacity: 1; background: none; place-items: end center; padding-bottom: var(--sp-1); font-size: var(--fs-sm); }
}

.trade-create-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); padding: var(--sp-2h) var(--sp-4h); }
.trade-create-btn .cf-ico { width: 13px; height: 13px; }
@media (max-width: 560px) {
  .trade-create-btn { align-self: stretch; justify-content: center; }
}
.clan-loadout-btn { flex-shrink: 0; }
.war-fire-btn .cf-ico { width: 30px; height: 30px; }

/* Offer grid: card width sets the column count, so it lands ~2 per row on a
   laptop and scales up on wider screens, collapsing to 1 on mobile. */
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: var(--sp-3h); align-items: stretch; }
.trade-card2.tc { display: flex; flex-direction: column; gap: var(--sp-2h); padding: var(--sp-3h) var(--sp-4); margin: 0; position: relative; }
.trade-card2.tc.declined, .trade-card2.tc.cancelled { opacity: 0.72; }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0; }
.tc-dir { display: inline-flex; align-items: center; gap: var(--sp-1h); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; padding: var(--sp-1) var(--sp-2h); clip-path: var(--clip-sm); }
.tc-dir .cf-ico { width: 11px; height: 11px; }
.tc-dir.in { color: var(--good); background: rgba(74, 222, 128, 0.12); }
.tc-dir.out { color: var(--accent); background: rgba(255, 177, 61, 0.12); }
.tc-dir.in .cf-ico { transform: scaleX(-1); }
.tc-status { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: var(--sp-1) var(--sp-2h); clip-path: var(--clip-sm); }
.tc-status.open { background: rgba(75, 159, 255, 0.16); color: #6db4ff; }
.tc-status.accepted { background: rgba(74, 222, 128, 0.16); color: var(--good); }
.tc-status.declined, .tc-status.cancelled { background: rgba(255, 80, 103, 0.14); color: var(--danger); }
.tc-status.countered { background: rgba(255, 177, 61, 0.16); color: var(--accent); }
.tc-status.expired { background: rgba(154, 165, 181, 0.14); color: #9aa5b5; }
.tc-expiry {
  display: inline-flex; align-items: center; gap: var(--sp-1h); margin-left: auto;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em;
  padding: var(--sp-1) var(--sp-2); clip-path: var(--clip-sm); color: var(--dim);
  background: rgba(255, 255, 255, 0.05); border: var(--bw-hair) solid var(--line);
  font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.tc-expiry .cf-ico { width: 11px; height: 11px; }
.tc-expiry.warn { color: var(--accent); border-color: rgba(255, 177, 61, 0.4); background: rgba(255, 177, 61, 0.08); }
.tc-expiry.hot { color: #ff5f74; border-color: rgba(255, 95, 116, 0.45); background: rgba(255, 95, 116, 0.08); animation: tcFuse 1.6s ease-in-out infinite; }
@keyframes tcFuse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .tc-expiry.hot { animation: none; } }
.tc-head .tc-status { margin-left: 0; }
.tc-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.tc-side { display: flex; flex-direction: column; gap: var(--sp-1h); padding: var(--sp-2); clip-path: var(--clip-sm); background: rgba(255, 255, 255, 0.012); }
.tc-side.me { background: rgba(75, 159, 255, 0.06); }
.tc-side-id { display: flex; align-items: center; gap: var(--sp-1h); flex-wrap: wrap; }
.tc-side-name { font-size: var(--fs-md); }
.tc-you { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-pill); background: rgba(75, 159, 255, 0.18); color: #6db4ff; }
.tc-side-val { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--good); font-variant-numeric: tabular-nums; }
.tc-side-cash { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--accent); }
.tc-side-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1h); align-items: stretch; }
.tc-side-items.clickable { cursor: pointer; }
.tc-side-items .item-card { width: 100%; }
.tc-slot-empty { min-height: 160px; border: var(--bw-hair) dashed var(--line); clip-path: var(--clip-sm); background: rgba(255, 255, 255, 0.02); }
.tc-side-items-full { gap: var(--sp-2); }
.tc-side-items-full .item-card { width: 108px; }
/* Reserved even when empty so a side with >3 items is no taller than one with
   fewer, keeping the swap divider and both identity rows aligned across cards. */
.tc-more { min-height: 18px; display: flex; align-items: center; }
.tc-more-btn { align-self: flex-start; background: none; border: none; padding: 0; color: var(--accent); font-size: var(--fs-base); font-weight: 700; cursor: pointer; }
.tc-more-btn:hover { text-decoration: underline; }
.tc-side-empty { font-size: var(--fs-base); padding: var(--sp-1) 0; }
.tc-swap { display: flex; align-items: center; justify-content: center; color: var(--dim); }
.tc-swap::before, .tc-swap::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tc-swap .cf-ico { width: 16px; height: 16px; margin: 0 var(--sp-2); }
.trade-balance.tc-bar { height: 5px; margin: var(--sp-0) 0; }
/* Pins message/date/actions to the card bottom so cards in a row keep an equal
   height and their dates line up whether or not a message is present. */
.tc-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2h); }
.tc-msg { padding: var(--sp-2) var(--sp-3); background: var(--raised); clip-path: var(--clip-sm); font-size: var(--fs-md); font-style: italic; color: var(--dim); }
.tc-date { font-size: var(--fs-base); color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.tc-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-0); }
.tc-actions:empty { display: none; }
.tc-actions .btn { flex: 1; }
.tc-detail { display: flex; flex-direction: column; gap: var(--sp-3); min-width: min(560px, 84vw); }
.tc-detail-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.tc-detail-title .cf-ico { width: 18px; height: 18px; }
.tc-detail-body { display: flex; flex-direction: column; gap: var(--sp-2h); }
@media (max-width: 480px) { .trade-grid { grid-template-columns: 1fr; } }

.tc-stamp {
  position: absolute; top: 50%; left: 50%;
  width: min(58%, 234px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 3;
  color: var(--stamp);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px color-mix(in srgb, var(--stamp) 42%, transparent));
}
.tc-stamp.ok { --stamp: #4fe693; }
.tc-stamp.no { --stamp: #ff5f74; }
.tc-stamp.warn { --stamp: #ffb13d; }
.tc-stamp svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-13deg); transform-origin: center; animation: tc-stamp-slam 0.6s cubic-bezier(0.2, 1.35, 0.32, 1) both; }
.tc-stamp-arc { fill: currentColor; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 2px; }
.tc-stamp-word { fill: currentColor; font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 800; }
.tc-stamp-sub { fill: currentColor; font-family: var(--font-display); font-size: var(--fs-3xs); font-weight: 700; letter-spacing: 2.4px; opacity: 0.9; }
/* impact shockwave (once) */
.tc-stamp::before {
  content: ""; position: absolute; inset: -2%; border-radius: var(--radius-circle);
  border: var(--bw-thick) solid var(--stamp); opacity: 0;
  animation: tc-stamp-wave 0.6s ease-out both;
}
/* light sweep across the seal (once, just after it lands) */
.tc-stamp::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-circle);
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
  background-size: 250% 100%; background-position: 150% 0;
  mix-blend-mode: screen; animation: tc-stamp-sheen 1s ease-out 0.35s both;
}
@keyframes tc-stamp-slam {
  0% { opacity: 0; transform: rotate(-13deg) scale(1.8); }
  55% { opacity: 1; transform: rotate(-13deg) scale(0.92); }
  72% { transform: rotate(-13deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(-13deg) scale(1); }
}
@keyframes tc-stamp-wave { 0% { opacity: 0.5; transform: scale(0.55); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tc-stamp-sheen { 0% { background-position: 150% 0; opacity: 0; } 25% { opacity: 1; } 100% { background-position: -90% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tc-stamp svg { animation: none; }
  .tc-stamp::before, .tc-stamp::after { display: none; }
}

.trade-tabs .page-tab { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); }
.trade-tab-pip {
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  padding: 0 var(--sp-1);
}

.trade-card2 {
  margin-bottom: var(--sp-4);
  border-left: var(--bw-frame) solid var(--line);
}
.trade-card2.incoming.open { border-left-color: var(--good); }
.trade-card2.outgoing.open { border-left-color: var(--accent); }
.trade-card2.declined, .trade-card2.cancelled { opacity: 0.75; }
.trade-card-head { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.trade-dir {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: var(--sp-1) var(--sp-2);
  clip-path: var(--clip-sm);
  background: var(--raised);
  color: var(--dim);
}
.trade-dir.in { color: var(--good); background: rgba(74, 222, 128, 0.1); }
.trade-dir.out { color: var(--accent); background: rgba(255, 177, 61, 0.1); }
.trade-who { display: inline-flex; align-items: center; gap: var(--sp-1h); }
.trade-arrow { color: var(--dim); }
.trade-when { margin-left: auto; font-size: var(--fs-base); }
.trade-card-actions { margin-top: var(--sp-3); justify-content: flex-end; }
.trade-balance {
  height: 5px;
  margin-top: var(--sp-3);
  background: rgba(255, 177, 61, 0.22);
  clip-path: var(--clip-sm);
  overflow: hidden;
}
.trade-balance-fill { display: block; height: 100%; background: var(--good); }

.trade-res-row { display: flex; flex-wrap: wrap; gap: var(--sp-1h); margin-top: var(--sp-2); }
.trade-res-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  padding: var(--sp-1) var(--sp-2h);
  font-size: var(--fs-base);
  background: color-mix(in srgb, var(--rc) 12%, transparent);
  border: var(--bw-hair) solid color-mix(in srgb, var(--rc) 45%, transparent);
  color: var(--rc);
  clip-path: var(--clip-sm);
}
.trade-res-chip .g { font-size: var(--fs-md); }

/* compose */
.trade-compose-top { margin-bottom: var(--sp-4); }
.trade-partner-badge { font-size: var(--fs-md); }
.trade-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2h); margin-bottom: var(--sp-2h); }
.trade-side-title { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.trade-side-sum { font-size: var(--fs-lg); }
.trade-side-sum b { color: var(--good); }
.trade-cash-row { margin-bottom: var(--sp-2h); }
.trade-res-details { margin: 0 0 var(--sp-3); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); }
.trade-res-details summary {
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--dim);
  -webkit-user-select: none;
  user-select: none;
}
.trade-res-details[open] summary { border-bottom: var(--bw-hair) solid var(--line); color: var(--accent); }
.trade-res-steppers { padding: var(--sp-2h) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.trade-res-step { display: flex; align-items: center; gap: var(--sp-2h); }
.trade-res-step.none { opacity: 0.45; }
.trade-res-name { display: inline-flex; align-items: center; gap: var(--sp-2); width: 130px; color: var(--rc); font-size: var(--fs-md); font-weight: 600; }
.trade-res-owned { font-size: var(--fs-sm); margin-left: auto; }
.trade-res-ctl { display: flex; align-items: center; gap: var(--sp-1h); }
.trade-res-ctl .btn.sm { min-width: 30px; padding: var(--sp-1h) var(--sp-2h); }
.trade-res-ctl .btn.sm .cf-ico { width: 11px; height: 11px; }
.trade-res-in { width: 68px; text-align: center; padding: var(--sp-1h) var(--sp-1h); font-size: var(--fs-md); margin: 0; }
.trade-send-bar {
  position: sticky;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3h);
  margin-top: var(--sp-4h);
  padding: var(--sp-3) var(--sp-4h);
  background: rgba(12, 16, 22, 0.95);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip);
  backdrop-filter: blur(6px);
  z-index: 5;
}
.trade-send-bar > span { font-size: var(--fs-md); }
@media (max-width: 860px) {
  .trade-send-bar { flex-direction: column; align-items: stretch; text-align: center; bottom: 8px; }
  .trade-res-name .lbl { display: none; }
  .trade-res-name { width: 34px; }
}

/* One gap owns the rhythm between every section of every replay: caption, the
   game visualisation, the consumed panel and the verify pane. Children must not
   add their own top or bottom margin here or it doubles up. */
.pb-body { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5); min-height: calc(var(--sp-8) * 2); }
.pb-game-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--accent);
  background: rgba(255, 177, 61, 0.09);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.25);
  clip-path: var(--clip-sm);
}
.pb-game-ico .cf-ico { width: 17px; height: 17px; }

/* close (X) for the playback modal: sit it inside the header band aligned with
   the title instead of floating above the banner. >=44px hit area, on-theme. */
.modal:has(.pb-modal) { padding-top: var(--sp-5); }
.modal:has(.pb-modal) .modal-close {
  top: 14px; right: 26px;
  width: 44px; height: 44px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.03);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  font-size: var(--fs-xl);
  transition: color var(--dur-base), background var(--dur-base), border-color var(--dur-base);
}
.modal:has(.pb-modal) .modal-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 177, 61, 0.4);
}
/* the parent owns the rhythm between banner, header and body, so .panel-head's
   shell.css margin has to be cancelled or it doubles up on the gap */
.pb-modal { display: flex; flex-direction: column; gap: var(--sp-3); }
.pb-modal .panel-head { margin-bottom: 0; }
/* keep the banner clear of the close control so nothing overlaps at any width */
.pb-modal .pb-banner { width: fit-content; max-width: 100%; }
.pb-caption { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.pb-tone {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: var(--sp-0) var(--sp-2);
  clip-path: var(--clip-sm);
}
.pb-bj { display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
.pb-hand2 { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.pb-hand2-label { font-size: var(--fs-base); letter-spacing: 0.06em; text-transform: uppercase; }
.pb-cards { justify-content: center; min-height: 64px; }
/* pb-body is a flex column, so a cross-axis auto margin cancels stretch and the
   item falls back to fit-content: the old auto-margin centering here collapsed
   .pb-upg-bar to the 2px of its fill border and squeezed .pb-upg-legend down to
   its own text, which is what glued the two legend numbers together. The upgrade
   visualisation now centres from the inside (.pb-upg-track) with a real width. */
.pb-item-grid { justify-items: center; }

/* stack the casino layouts again below 1000px (the centered two-column
   overrides above are later in the cascade, so they must be re-stacked here) */
@media (max-width: 1000px) {
  .mines-layout, .plinko-layout, .crash-layout { grid-template-columns: 1fr; justify-content: stretch; }
  .mines-grid { width: 100%; }
}
/* 17 buckets on one row: below this the labels stop fitting at the normal step
   and the strip pushed the whole modal into horizontal scroll */
@media (max-width: 640px) {
  .pb-plinko-row { gap: 1px; }
  .pb-slot { padding: var(--sp-1) 0; font-size: var(--fs-2xs); }
}

@media (max-width: 560px) {
  .lb-clan-row { grid-template-columns: 24px 28px minmax(0, 1.5fr) minmax(72px, 1fr) 56px; gap: var(--sp-2); padding: var(--sp-2h) var(--sp-2h); }
  .lb-clan-row.head { padding: var(--sp-2) var(--sp-2h) var(--sp-1h); }
  .lb-clan-mmr { font-size: var(--fs-md); }
  .lb-clan-league { display: none; }
}

.fair-game-tag.case { background: rgba(255, 177, 61, 0.16); color: var(--accent); }
.fair-game-tag.nomansland { background: rgba(214, 178, 90, 0.16); color: #d6b25a; }
.fair-game-tag.slots { background: rgba(255, 210, 77, 0.16); color: #ffd24d; }
.fair-game-tag.roulette { background: rgba(235, 75, 75, 0.16); color: #eb6b6b; }
.fair-game-tag.convoy { background: rgba(201, 138, 46, 0.16); color: #c98a2e; }
.fair-game-tag.holdem { background: rgba(105, 220, 160, 0.14); color: #69dca0; }

.pb-nml { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); width: min(640px, 100%); margin: 0 auto; }
@media (max-width: 560px) { .pb-nml { grid-template-columns: repeat(5, 1fr); } }
.pb-nml-lane {
  min-width: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-md);
  border: var(--bw-hair) solid var(--line);
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 255, 255, 0.045) 9px 12px),
    var(--raised);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-1); opacity: 0.5;
}
.pb-nml-n { font-size: var(--fs-sm); font-weight: 700; color: var(--dim); letter-spacing: 0.06em; }
.pb-nml-v { font-size: var(--fs-xl); font-weight: 800; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.pb-nml-lane.safe {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.22), rgba(74, 222, 128, 0.08));
  border-color: rgba(74, 222, 128, 0.55); color: var(--good); opacity: 1;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.18);
  animation: pb-pop 0.3s both;
}
.pb-nml-lane.boom {
  background: linear-gradient(180deg, rgba(255, 80, 103, 0.4), rgba(122, 12, 24, 0.35));
  border-color: var(--danger); opacity: 1;
  box-shadow: 0 0 22px rgba(255, 80, 103, 0.55);
  animation: pb-pop 0.3s both, pb-nml-shake 0.5s 0.25s;
}
.pb-nml-lane.boom .pb-nml-v { font-size: var(--fs-6xl); }
.pb-nml-lane.threat { background: rgba(255, 80, 103, 0.1); border-color: rgba(255, 80, 103, 0.35); opacity: 0.75; color: #ff7a86; }
@keyframes pb-nml-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 1px) rotate(-2deg); }
  55% { transform: translate(3px, -1px) rotate(2deg); }
  80% { transform: translate(-2px, 0); }
}

.pb-slot-stage {
  width: min(620px, 100%);
  margin-inline: auto;
  aspect-ratio: 3 / 2;
}
.pb-slot-lines { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; min-height: var(--sp-5); }
.pb-slot-line {
  display: inline-flex; align-items: baseline; gap: var(--sp-1h);
  font-size: var(--fs-sm); font-weight: 700;
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill);
  background: rgba(255, 177, 61, 0.14); color: var(--accent);
}
.pb-slot-line b { color: var(--text); }
.pb-slot-line em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.pb-slot-line i { font-style: normal; font-weight: 600; font-size: var(--fs-2xs); opacity: 0.72; }

.pb-rl { display: flex; gap: var(--sp-5h); align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.pb-rl-pocket { width: 92px; height: 92px; border-radius: var(--radius-circle); display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-8xl); font-weight: 800; color: #fff; border: 4px solid rgba(255, 255, 255, 0.22); box-shadow: var(--shadow-lg); flex: none; opacity: 0; }
.pb-rl-pocket.reveal { opacity: 1; animation: pb-pop 0.45s both; }
.pb-rl-pocket.red { background: radial-gradient(circle at 35% 30%, #ff6b7d, #b81f33); }
.pb-rl-pocket.black { background: radial-gradient(circle at 35% 30%, #3a4453, #12161d); }
.pb-rl-pocket.green { background: radial-gradient(circle at 35% 30%, #55d98a, #157a41); }
.pb-rl-bets { display: flex; flex-direction: column; gap: var(--sp-1h); min-width: 250px; max-width: 340px; flex: 1; }
.pb-rl-bet { display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--raised); border: var(--bw-hair) solid var(--line); font-size: var(--fs-md); opacity: 0; }
.pb-rl-bet.reveal { opacity: 1; animation: pb-pop 0.25s both; }
.pb-rl-bet-name { font-weight: 600; }
.pb-rl-bet-stake { margin-left: auto; }
.pb-rl-bet-won { min-width: 74px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-rl-bet.win .pb-rl-bet-won { color: var(--good); }
.pb-rl-bet.lose .pb-rl-bet-won { color: var(--danger); }

.pb-cv { display: flex; gap: var(--sp-2h); justify-content: center; flex-wrap: wrap; }
.pb-cv-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); padding: var(--sp-3) var(--sp-3h); border-radius: var(--radius-lg); background: var(--raised); border: var(--bw-hair) solid var(--line); min-width: 108px; opacity: 0.55; }
.pb-cv-stage.clear { opacity: 1; border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.07); }
.pb-cv-stage.lost { opacity: 1; border-color: rgba(255, 80, 103, 0.55); background: rgba(255, 80, 103, 0.1); }
.pb-cv-name { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.pb-cv-mult { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--accent); }
.pb-cv-card { min-height: 64px; display: grid; place-items: center; }
.pb-cv-pick { font-size: var(--fs-base); color: var(--dim); min-height: 15px; }
.pb-cv-stage.clear .pb-cv-pick { color: var(--good); }
.pb-cv-stage.lost .pb-cv-pick { color: var(--danger); }

.pb-card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 177, 61, 0.14) 0 5px, transparent 5px 10px),
    linear-gradient(158deg, #1b222c, #0d1218);
  border-color: var(--accent-line);
  color: var(--accent);
}
.pb-card.back::before { opacity: 1; }
.pb-holdem { display: flex; flex-direction: column; gap: var(--sp-3h); align-items: center; }
.pb-hand2-label.winner { color: var(--good); font-weight: 700; }

.pb-bj { padding: var(--sp-5h) var(--sp-6) var(--sp-5); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-2xl); background: radial-gradient(120% 90% at 50% 0%, rgba(74, 222, 128, 0.07), rgba(20, 26, 35, 0.6)); max-width: 460px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.pb-bj .pb-card { width: 58px; height: 82px; font-size: var(--fs-3xl); }
.pb-bj .pb-cards { min-height: 82px; gap: var(--sp-2h); }
.pb-bj .pb-hand2-label { font-size: var(--fs-md); }
.nml3-wrap { padding: var(--sp-1h); overflow: hidden; }
.nml3-stage { position: relative; height: 500px; border-radius: var(--radius-lg); overflow: hidden; background: #140e1c; }
@media (max-width: 900px) { .nml3-stage { height: 360px; } }
.nml3-stage canvas { display: block; width: 100%; height: 100%; }
.nml3-next {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2h) var(--sp-5); border-radius: var(--radius-xl); white-space: nowrap;
  background: linear-gradient(180deg, rgba(12, 14, 20, 0.82), rgba(6, 8, 12, 0.9));
  border: var(--bw-hair) solid rgba(255, 194, 77, 0.5);
  box-shadow: 0 0 22px rgba(255, 194, 77, 0.18), 0 6px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none; z-index: 4;
  animation: nml3-next-beat 1.6s ease-in-out infinite;
}
.nml3-next .nl { font-size: var(--fs-sm); font-weight: 800; letter-spacing: 2px; color: #95a0b4; text-transform: uppercase; }
.nml3-next .nm { font-size: var(--fs-6xl); font-weight: 800; font-family: var(--font-display); color: #ffd24d; line-height: var(--lh-none); text-shadow: 0 0 14px rgba(255, 210, 77, 0.55); }
.nml3-next .no { font-size: var(--fs-lg); font-weight: 700; color: #4ade80; }
@keyframes nml3-next-beat {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 194, 77, 0.12), 0 6px 18px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 30px rgba(255, 194, 77, 0.32), 0 6px 18px rgba(0, 0, 0, 0.5); }
}
@media (max-width: 560px) { .nml3-next { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3h); } .nml3-next .nm { font-size: var(--fs-4xl); } .nml3-next .no { font-size: var(--fs-base); } }
.nml3-vig { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 30px rgba(5, 4, 10, 0.55); z-index: 3; }
.nml3-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4; background: radial-gradient(ellipse at 50% 62%, rgba(255, 130, 45, 0.6), rgba(255, 40, 40, 0.28) 55%, transparent 78%); }
.nml3-flash.boom { animation: nml3-flash 0.55s ease-out; }
@keyframes nml3-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.nml3-stamp { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-6deg) scale(3); font-family: var(--font-display); font-size: 52px; font-weight: 900; letter-spacing: 0.1em; opacity: 0; pointer-events: none; text-transform: uppercase; z-index: 5; }
.nml3-stamp.bad { color: #ff6074; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7), 0 0 26px rgba(255, 70, 90, 0.5); }
.nml3-stamp.good { color: #57e18d; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7), 0 0 26px rgba(70, 220, 135, 0.5); }
.nml3-stamp.show { animation: nml3-stamp 1.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes nml3-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(3); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(0.94); }
}
@media (max-width: 560px) { .nml3-stage { height: 300px; } .nml3-stamp { font-size: var(--fs-7xl); } }

.ops-mod-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3h);
  background:
    linear-gradient(100deg, rgba(176, 123, 255, 0.12), rgba(176, 123, 255, 0.03) 60%, transparent),
    var(--raised);
  border: var(--bw-hair) solid rgba(176, 123, 255, 0.35);
  clip-path: var(--clip-sm);
}
.ops-mod-ico { font-size: var(--fs-5xl); color: #b07bff; flex: none; text-shadow: 0 0 14px rgba(176, 123, 255, 0.6); }
.ops-mod-banner b { font-size: var(--fs-md); }
.ops-mod-sub { font-size: var(--fs-base); margin-top: var(--sp-0); line-height: 1.45; }

.event-fam-ico.svg { display: inline-flex; align-items: center; }
.event-fam-ico.svg svg { width: 13px; height: 13px; display: block; fill: currentColor; }

.adm-list { padding: 0; display: flex; flex-direction: column; }
.adm-prow {
  display: flex; align-items: center; gap: var(--sp-3h); flex-wrap: wrap;
  padding: var(--sp-2h) var(--sp-3h);
  border-bottom: var(--bw-hair) solid var(--line);
  border-left: var(--bw-frame) solid transparent;
  transition: background var(--dur-fast);
}
.adm-prow:hover { background: rgba(255, 255, 255, 0.025); border-left-color: rgba(255, 177, 61, 0.5); }
.adm-prow.banned { opacity: 0.55; border-left-color: rgba(255, 80, 103, 0.6); }
.adm-prow.open { background: rgba(255, 177, 61, 0.04); border-left-color: var(--accent); }
.adm-prow-id { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; flex: 1 1 260px; }
/* Clan rows: the league chip sits in its own fixed column so every row lines up. */
.adm-clanrow .adm-prow-id { flex: 1 1 200px; }
.adm-clanrow .adm-prow-id .player-link { min-width: 0; }
.adm-clanrow .adm-prow-id .player-link > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-clan-tier { flex: 0 0 118px; display: flex; align-items: center; }
.adm-prow-stats { display: flex; align-items: center; gap: var(--sp-3h); flex-wrap: wrap; flex: 2 1 auto; }
/* fixed widths keep the stat columns aligned across rows */
.adm-stat { display: inline-flex; flex-direction: column; gap: var(--sp-0); width: 72px; flex: none; }
.adm-stat.wide { width: 88px; }
.adm-stat-k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 700; }
.adm-stat b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-prow-actions { display: flex; align-items: center; gap: var(--sp-1h); margin-left: auto; flex: none; }
.adm-more { font-weight: 800; letter-spacing: 0.08em; }
.adm-drawer-wrap { border-bottom: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.015); padding: var(--sp-1) var(--sp-3h) var(--sp-3); }

.tests-verdict {
  font-family: 'Chakra Petch', system-ui, sans-serif; font-weight: 800; font-size: var(--fs-md); letter-spacing: 0.08em;
  color: var(--vc); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--vc) 12%, transparent);
  border: var(--bw-hair) solid color-mix(in srgb, var(--vc) 40%, transparent);
}
@keyframes opsStancePulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }
.tests-verdict.running { animation: opsStancePulse 1.1s ease-in-out infinite; }
.tests-chip {
  display: inline-flex; align-items: baseline; gap: var(--sp-1h);
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-lg); font-size: var(--fs-base);
  color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, transparent);
  border: var(--bw-hair) solid color-mix(in srgb, var(--tc) 30%, transparent);
}
.tests-chip b { font-variant-numeric: tabular-nums; }
.tests-chip span { color: var(--dim); font-size: var(--fs-sm); }
.tests-bar {
  display: flex; height: 8px; border-radius: var(--radius-xs); overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.tests-bar-seg { height: 100%; transition: width var(--dur-slower) ease; }
.tests-bar-seg.pass { background: linear-gradient(90deg, #2f9e5f, #4ade80); }
.tests-bar-seg.fail { background: linear-gradient(90deg, #ff5067, #b31f35); }
.tests-row {
  display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3h); border-bottom: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid transparent;
  font-size: var(--fs-md);
}
.tests-row:last-child { border-bottom: none; }
.tests-row-ico { flex: none; font-weight: 800; color: #4ade80; }
.tests-row.bad { border-left-color: #ff5067; background: rgba(255, 80, 103, 0.05); }
.tests-row.bad .tests-row-ico { color: #ff5067; }
.tests-row.skip .tests-row-ico { color: var(--dim); }
.tests-row-name { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.tests-row-dur { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; font-size: var(--fs-base); }

.adm-sheet { min-width: min(360px, 88vw); }
.adm-sheet-list { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); }
.adm-sheet-btn {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2h) var(--sp-3);
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-md);
  color: var(--text); font-size: var(--fs-md); font-weight: 600; cursor: pointer; text-align: left;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.adm-sheet-btn:hover { background: #1a212c; border-color: rgba(255, 177, 61, 0.4); }
.adm-sheet-btn.danger { color: var(--danger); }
.adm-sheet-btn.danger:hover { border-color: rgba(255, 80, 103, 0.5); background: rgba(255, 80, 103, 0.07); }
.adm-sheet-ico { font-size: var(--fs-2xl); width: 22px; text-align: center; flex: none; }
@media (max-width: 720px) {
  .adm-prow { padding: var(--sp-3); }
  .adm-prow-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

.hvt { display: flex; flex-direction: column; gap: var(--sp-4); }

.hvt-dossier {
  position: relative; overflow: hidden; padding: var(--sp-5) var(--sp-5h); clip-path: var(--clip);
  border: var(--bw-hair) solid color-mix(in srgb, var(--boss, var(--accent)) 40%, var(--line));
  background:
    radial-gradient(80% 130% at 8% 18%, color-mix(in srgb, var(--boss, var(--accent)) 30%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--boss, var(--accent)) 16%, #0b0f16), #080b11 72%);
}
.hvt-dossier-main { position: relative; display: flex; gap: var(--sp-5); align-items: flex-start; }
.hvt-glyph-tile {
  flex-shrink: 0; width: 84px; height: 84px; display: grid; place-items: center; border-radius: var(--radius-xl);
  background: linear-gradient(150deg, color-mix(in srgb, var(--boss, var(--accent)) 38%, #0c1018), #090d14);
  border: var(--bw-hair) solid color-mix(in srgb, var(--boss, var(--accent)) 45%, var(--line));
  box-shadow: inset 0 0 26px color-mix(in srgb, var(--boss, var(--accent)) 22%, transparent);
}
.hvt-glyph {
  font-size: 48px; line-height: var(--lh-none);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--boss, var(--accent)) 70%, transparent));
  animation: ops-bob 3.5s ease-in-out infinite;
}
.hvt-dossier-body { flex: 1; min-width: 0; }
.hvt-dossier .hvt-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); margin-bottom: var(--sp-2); color: var(--boss, var(--accent));
  border: var(--bw-hair) solid color-mix(in srgb, var(--boss, var(--accent)) 50%, transparent);
  background: color-mix(in srgb, var(--boss, var(--accent)) 12%, transparent);
}
.hvt-title-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.hvt-name { margin: 0; font-size: var(--fs-6xl); text-transform: uppercase; }
.hvt-threat-chip {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-xs); color: var(--boss, var(--accent));
  border: var(--bw-hair) solid color-mix(in srgb, var(--boss, var(--accent)) 50%, transparent);
  background: color-mix(in srgb, var(--boss, var(--accent)) 14%, transparent);
}
.hvt-org {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim); margin: var(--sp-1) 0 var(--sp-1h);
}
.hvt-blurb {
  font-size: var(--fs-md); color: color-mix(in srgb, var(--text) 88%, transparent); line-height: 1.5;
  max-width: 640px; margin-bottom: var(--sp-3); padding: var(--sp-2h) var(--sp-3); background: rgba(7, 9, 13, 0.55);
  border-top: var(--bw-hair) dashed var(--line); border-bottom: var(--bw-hair) dashed var(--line); clip-path: var(--clip-sm);
}
.hvt-hp { margin-bottom: var(--sp-2h); }
.hvt-hp-bar { position: relative; height: 26px; border-radius: var(--radius-sm); overflow: hidden; background: #07090d; border: var(--bw-hair) solid rgba(255, 255, 255, 0.12); }
.hvt-hp-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-sm); width: 100%;
  background: linear-gradient(90deg, #ff3b3b, color-mix(in srgb, var(--boss, var(--accent)) 60%, #ff5e3a), var(--boss, var(--accent)));
  transition: width var(--dur-slowest) cubic-bezier(.25, .9, .3, 1);
}
.hvt-hp-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, transparent 62%);
}
.hvt-hp-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-1h); }
.hvt-hp-text { font-size: var(--fs-md); font-weight: 700; color: #fff; }
.hvt-hp-pct { font-size: var(--fs-md); font-weight: 700; color: var(--boss, var(--accent)); }
.hvt-meta-row { display: flex; align-items: center; gap: var(--sp-3h); flex-wrap: wrap; font-size: var(--fs-md); color: var(--dim); }
.hvt-timer { font-weight: 700; }
.hvt-timer.hot { color: #ff5067; animation: ops-pulse 1s ease-in-out infinite; }
.hvt-dmg-total, .hvt-contrib { font-weight: 600; }

.hvt-doctrine { display: flex; flex-direction: column; gap: var(--sp-2h); }
.hvt-doc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); }
.hvt-doc-head .bj-row-label { margin: 0; }
.hvt-doc-warmup {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; padding: var(--sp-0) var(--sp-2h); border-radius: var(--radius-pill);
  color: var(--dim); border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.04); cursor: help;
  animation: ops-pulse 1.4s ease-in-out infinite;
}
.hvt-doc-hint { font-size: var(--fs-base); margin-top: -4px; }
.hvt-doc-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.hvt-doc-row { display: grid; grid-template-columns: 22px minmax(72px, 110px) minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2h); min-width: 0; }
.hvt-doc-glyph { font-size: var(--fs-xl); color: var(--hvt-st, var(--dim)); text-align: center; }
.hvt-doc-label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hvt-doc-track { position: relative; height: 10px; background: #0a0e14; border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); min-width: 0; }
.hvt-doc-fill { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--hvt-st, var(--accent)) 55%, transparent), var(--hvt-st, var(--accent))); transition: width var(--dur-slowest) ease; }
.hvt-doc-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: 0.75; transform: translateX(-50%); }
.hvt-doc-nums { display: flex; gap: var(--sp-2h); font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hvt-doc-need { font-weight: 700; }
.hvt-doc-mix { min-width: 74px; text-align: right; }
.hvt-mult { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; cursor: help; }

.hvt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--sp-4); align-items: start; }
.hvt-assist { min-width: 0; }
.hvt-assist-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.hvt-boards { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hvt-board { min-height: 120px; min-width: 0; }
.hvt-board-rows { display: flex; flex-direction: column; gap: var(--sp-1h); min-width: 0; }
.hvt-board-row { position: relative; overflow: hidden; padding: var(--sp-2) var(--sp-2h); border-radius: var(--radius-sm); background: #0c1018; border: var(--bw-hair) solid var(--line); min-width: 0; }
.hvt-board-row.mine { border-color: rgba(255, 177, 61, 0.5); }
.hvt-board-bar { position: absolute; inset: 0 auto 0 0; background: rgba(255, 177, 61, 0.1); transition: width var(--dur-slowest) ease; }
.hvt-board-row.mine .hvt-board-bar { background: rgba(255, 177, 61, 0.16); }
.hvt-board-content { position: relative; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.hvt-row-id { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.hvt-row-id > .avatar, .hvt-row-id > .rank-badge, .hvt-row-id > .level-badge { flex-shrink: 0; }
.hvt-board-name { font-weight: 600; font-size: var(--fs-md); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
button.hvt-board-name.player-link { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
button.hvt-board-name.player-link:hover { color: var(--accent); text-decoration: underline; }
.hvt-row-stats { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2h); flex-shrink: 0; margin-left: auto; }
.hvt-board-tag { font-size: var(--fs-sm); font-weight: 700; color: var(--dim); min-width: 40px; text-align: right; }
.hvt-board-rank { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--teal); text-transform: uppercase; }
.hvt-board-games { font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; }
.hvt-board-dmg { font-size: var(--fs-md); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

.hvt-clanboard { display: flex; flex-direction: column; gap: var(--sp-1h); min-width: 0; }
.hvt-clanboard-row {
  display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); min-width: 0;
  background: #0c1018; border: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid var(--boss, var(--line));
}
.hvt-clanboard-row.mine { border-color: var(--accent); border-left-color: var(--accent); background: rgba(255, 177, 61, 0.07); }
.hvt-clanboard-row.clickable { cursor: pointer; transition: background var(--dur-fast); }
.hvt-clanboard-row.clickable:hover { background: #121927; }
.hvt-rank-num { font-weight: 800; font-size: var(--fs-md); color: var(--dim); min-width: 26px; flex-shrink: 0; }
.hvt-clanboard-row:first-child .hvt-rank-num { color: #ffd24d; }
.hvt-clan-tag { font-weight: 800; font-size: var(--fs-base); color: var(--boss, var(--accent)); flex-shrink: 0; }
.hvt-clan-name { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hvt-clan-members { font-size: var(--fs-sm); color: var(--dim); flex-shrink: 0; }
.hvt-clan-dmg { font-size: var(--fs-md); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.hvt-won { text-align: center; padding: var(--sp-4h) var(--sp-3); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.hvt-won-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 800; letter-spacing: 0.12em; color: var(--good); text-shadow: 0 0 18px rgba(74, 222, 128, 0.4); }
.hvt-won.hvt-lost .hvt-won-title { color: var(--danger, #ff5067); text-shadow: 0 0 18px rgba(255, 80, 103, 0.35); }
.hvt-won-sub { font-size: var(--fs-base); }
.hvt-won-clock { font-family: var(--font-display); font-size: var(--fs-7xl); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

.hvt-assist-body > .hvt-locked { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3); background: var(--bg); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); }
.hvt-locked-ico { font-size: var(--fs-6xl); opacity: 0.7; }
.hvt-locked-title { font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--sp-0); }

.hvt-cooldown {
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.1em; text-align: center;
  padding: var(--sp-2h) var(--sp-3); color: var(--accent); border: var(--bw-hair) solid rgba(255, 177, 61, 0.4);
  background: rgba(255, 177, 61, 0.08); clip-path: var(--clip-sm); font-variant-numeric: tabular-nums;
}
.hvt-resume { width: 100%; justify-content: center; }

.hvt-stances { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--sp-2h); }
.hvt-stance {
  display: flex; flex-direction: column; gap: var(--sp-2h); padding: var(--sp-3); min-width: 0;
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-top: var(--bw-thick) solid var(--hvt-st, var(--line));
  clip-path: var(--clip-sm);
}
.hvt-stance-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hvt-stance-glyph { font-size: var(--fs-2xl); color: var(--hvt-st, var(--dim)); flex-shrink: 0; }
.hvt-stance-label { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hvt-stance-stat-tag {
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--sp-0) var(--sp-1h);
  border-radius: var(--radius-xs); color: var(--dim); border: var(--bw-hair) solid var(--line); flex-shrink: 0;
}
.hvt-stance-mult { margin-left: auto; min-width: 0; flex-shrink: 0; }
.hvt-stance-you { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-base); flex-wrap: wrap; }
.hvt-stance-stat { font-family: var(--font-display); font-size: var(--fs-lg); }
.hvt-stance-est { margin-left: auto; font-size: var(--fs-sm); color: var(--teal); font-variant-numeric: tabular-nums; cursor: help; }
.hvt-stance-games { display: flex; flex-direction: column; gap: var(--sp-1h); margin-top: auto; }
.hvt-game-btn { width: 100%; justify-content: center; font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.04em; }

.hvt-progress { display: flex; align-items: center; gap: var(--sp-1h); flex-wrap: wrap; }
.hvt-prog-chip {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill);
  color: var(--dim); border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.03);
  font-variant-numeric: tabular-nums;
}
.hvt-prog-rank { color: var(--accent); border-color: rgba(255, 177, 61, 0.4); background: rgba(255, 177, 61, 0.08); }
.hvt-prog-next { color: var(--teal); border-color: rgba(65, 224, 200, 0.35); }

.hvt-dev { display: flex; gap: var(--sp-2); flex-wrap: wrap; border-top: var(--bw-hair) dashed var(--line); padding-top: var(--sp-2h); }

.modal:has(.hvt-stage) { width: min(680px, 96vw); }
.hvt-game { display: flex; flex-direction: column; gap: var(--sp-2h); }
.hvt-modal-strip { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; padding-right: var(--sp-6); }
.hvt-modal-label { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }
.hvt-modal-clock { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hvt-abort { flex-shrink: 0; }
.hvt-regroup { width: 100%; justify-content: center; margin-top: var(--sp-3h); }

.hvt-stage {
  position: relative; width: 100%; max-width: 600px; aspect-ratio: 600 / 420; margin: 0 auto;
  background: #070a0f; border: var(--bw-hair) solid var(--line); overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.hvt-stage.hvt-live canvas { touch-action: none; }
.hvt-ring { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; color: var(--accent); z-index: 6; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.hvt-ring-num { fill: #fff; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; }
.hvt-hud {
  position: absolute; left: 12px; top: 12px; z-index: 6; pointer-events: none; max-width: 72%;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.14em;
  color: rgba(220, 235, 255, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.hvt-canvas { z-index: 1; }

.hvt-floater {
  z-index: 7; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; letter-spacing: 0.06em;
  white-space: nowrap; transform: translate(-50%, 0); opacity: 1;
  text-shadow: 0 0 10px currentColor, 0 2px 5px rgba(0, 0, 0, 0.8);
  transition: transform 0.85s ease-out, opacity 0.85s ease-out;
}
.hvt-floater.hvt-float-up { transform: translate(-50%, -30px); opacity: 0; }
.hvt-good { color: var(--good); }
.hvt-mid { color: #ffd24d; }
.hvt-bad { color: #ff5067; }
.hvt-dim { color: var(--dim); }

.hvt-flash { z-index: 5; }
.hvt-flash-white { background: rgba(255, 255, 255, 0.3); animation: sgFlashFade 0.12s ease-out forwards; }
.hvt-flash-red { background: radial-gradient(ellipse at 50% 50%, rgba(255, 40, 40, 0.12), rgba(255, 40, 40, 0.4) 90%); animation: sgFlashFade 0.3s ease-out forwards; }
@keyframes sgFlashFade { from { opacity: 1; } to { opacity: 0; } }
.hvt-shake { animation: sgShake 0.32s ease; }
@keyframes sgShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
}
.hvt-buzz { animation: sgBuzz 0.32s linear; }
@keyframes sgBuzz {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
}

.hvt-slot {
  background: rgba(255, 255, 255, 0.03); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
  cursor: pointer; z-index: 2; transition: background var(--dur-instant); overflow: hidden;
}
.hvt-slot:hover { background: rgba(255, 255, 255, 0.05); }
.hvt-slot.hvt-dry { border-color: rgba(255, 80, 103, 0.7); background: rgba(255, 80, 103, 0.08); }
.hvt-fig { position: absolute; inset: 8% 24%; opacity: 0; pointer-events: none; }
.hvt-fig.hvt-pop { opacity: 1; animation: sgPop 0.14s ease-out; }
@keyframes sgPop { from { transform: translateY(85%); } to { transform: translateY(0); } }
.hvt-fig.hvt-hostile {
  background:
    radial-gradient(circle at 50% 16%, #4a1c26 0 15%, transparent 16%),
    radial-gradient(ellipse 30% 34% at 50% 62%, #4a1c26 0 99%, transparent 100%),
    radial-gradient(circle at 76% 40%, rgba(255, 235, 200, 0.95) 0 4%, transparent 6%);
  filter: drop-shadow(0 0 10px rgba(255, 60, 60, 0.65));
}
.hvt-fig.hvt-civ {
  background:
    radial-gradient(circle at 50% 16%, #174141 0 15%, transparent 16%),
    radial-gradient(ellipse 30% 34% at 50% 62%, #174141 0 99%, transparent 100%),
    radial-gradient(circle at 22% 14%, #174141 0 6%, transparent 8%),
    radial-gradient(circle at 78% 14%, #174141 0 6%, transparent 8%);
  filter: drop-shadow(0 0 10px rgba(65, 224, 200, 0.55));
}
.hvt-fig.hvt-crumple { animation: sgCrumple 0.16s ease-in forwards; }
@keyframes sgCrumple { to { transform: rotate(70deg) translateY(35%); opacity: 0.1; } }

.hvt-lane { border-left: var(--bw-hair) solid var(--line); border-bottom: var(--bw-thick) solid rgba(65, 224, 200, 0.55); overflow: hidden; cursor: pointer; z-index: 2; }
.hvt-lane:first-of-type { border-left: none; }
.hvt-lane-fill {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 3px, transparent 3px 14px),
    linear-gradient(180deg, rgba(255, 70, 55, 0.5), rgba(255, 70, 55, 0.16));
  border-bottom: var(--bw-thick) solid rgba(255, 80, 60, 0.8); z-index: 1;
}
.hvt-push {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 900; letter-spacing: 0.2em; color: #ff5067;
  text-shadow: 0 0 12px rgba(255, 80, 103, 0.8); opacity: 0;
}
.hvt-lane.hvt-surge .hvt-push { opacity: 1; animation: ops-pulse 0.5s steps(2) infinite; }
.hvt-lane.hvt-surge { animation: sgBuzz 0.35s linear infinite; }
.hvt-lane.hvt-firing::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 4px; height: 62%;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(255, 220, 120, 0.95), rgba(255, 220, 120, 0.08));
  animation: sgStrobe 0.1s steps(2) infinite; pointer-events: none;
}
@keyframes sgStrobe { from { opacity: 1; } to { opacity: 0.35; } }
.hvt-heat { background: #0a0e14; border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); z-index: 4; }
.hvt-heat-fill { background: linear-gradient(90deg, var(--teal), #ffd24d 60%, #ff5e3a); transition: none; }
.hvt-heat.hvt-locked { border-color: rgba(255, 80, 103, 0.8); animation: ops-pulse 0.6s ease-in-out infinite; }
.hvt-heat.hvt-locked .hvt-heat-fill { background: #ff5067; }
.hvt-stage.hvt-locked { cursor: not-allowed; }
.hvt-stage.hvt-evac { box-shadow: inset 0 0 0 2px rgba(255, 80, 103, 0.5); animation: sgEvac 1s steps(2) infinite; }
@keyframes sgEvac {
  from { box-shadow: inset 0 0 0 2px rgba(255, 80, 103, 0.55), inset 0 0 40px rgba(255, 80, 103, 0.14); }
  to { box-shadow: inset 0 0 0 2px rgba(255, 80, 103, 0.2); }
}

.hvt-chute {
  writing-mode: vertical-rl; text-orientation: mixed; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 58%; padding: 0;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.28em;
  border: var(--bw-hair) dashed var(--line); clip-path: var(--clip-sm); background: rgba(255, 255, 255, 0.02);
}
.hvt-chute.hvt-burn { color: #ff5067; border-color: rgba(255, 80, 103, 0.45); }
.hvt-chute.hvt-forward { color: var(--good); border-color: rgba(74, 222, 128, 0.45); }
.hvt-chute.hvt-click { pointer-events: auto; cursor: pointer; transition: background var(--dur-instant); }
.hvt-chute.hvt-click:hover { background: rgba(255, 255, 255, 0.07); }
.hvt-stage.hvt-manifest .hvt-chute { opacity: 0.35; }
.hvt-crate {
  z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2h);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #17202c, #0e141d);
  border: var(--bw-hair) solid #2c3a4c; clip-path: var(--clip-sm); cursor: pointer;
}
.hvt-crate.hvt-slide-in { animation: sgSlideIn 0.16s ease-out; }
@keyframes sgSlideIn { from { transform: translateX(-150%); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
.hvt-crate.hvt-fly-right { animation: sgFlyRight 0.18s ease-in forwards; }
@keyframes sgFlyRight { to { transform: translateX(170%) rotate(9deg); opacity: 0; } }
.hvt-crate.hvt-fly-left { animation: sgFlyLeft 0.18s ease-in forwards; }
@keyframes sgFlyLeft { to { transform: translateX(-170%) rotate(-9deg) translateY(20%); opacity: 0; } }
.hvt-crate-ring { position: absolute; inset: -7px; border: var(--bw-thick) solid var(--accent); border-radius: var(--radius-xl); pointer-events: none; }
.hvt-crate-serial { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.18em; color: #c8d4e4; }
.hvt-crate-tell {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.12em;
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-xs); border: var(--bw-hair) solid;
}
.hvt-crate-tell.hvt-clean { color: var(--teal); border-color: rgba(65, 224, 200, 0.5); background: rgba(65, 224, 200, 0.08); }
.hvt-crate-tell.hvt-bugged { color: #ff5067; border-color: rgba(255, 80, 103, 0.55); background: rgba(255, 80, 103, 0.08); }
.hvt-crate-tell.hvt-hold { color: #ffd24d; border-color: rgba(255, 210, 77, 0.6); background: rgba(255, 210, 77, 0.1); }
.hvt-crate.hvt-crate-hold {
  border-color: rgba(255, 210, 77, 0.7);
  background:
    repeating-linear-gradient(45deg, rgba(255, 210, 77, 0.16) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #2a2415, #17140c);
}
.hvt-crate.hvt-crate-hold .hvt-crate-ring { border-color: #ffd24d; }
.hvt-crate.hvt-crate-hold .hvt-crate-serial { color: #f0dfae; }
.hvt-crate-tell.hvt-tell-0 { animation: ops-pulse 0.7s ease-in-out infinite; }
.hvt-crate-tell.hvt-tell-1 { border-style: dashed; }
.hvt-crate-tell.hvt-tell-2 { animation: sgSerialFlash 0.5s steps(2) infinite; }
@keyframes sgSerialFlash { from { color: #ff5067; } to { color: #ffb1bb; } }

.hvt-result { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-2h) var(--sp-1h); }
.hvt-result-attack { --hvt-st: #eb4b4b; }
.hvt-result-defense { --hvt-st: #41e0c8; }
.hvt-result-supply { --hvt-st: #ffd24d; }
.hvt-verdict {
  font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hvt-st, var(--accent)); text-shadow: 0 0 18px color-mix(in srgb, var(--hvt-st, var(--accent)) 50%, transparent);
}
.hvt-result-main { display: flex; align-items: center; justify-content: center; gap: var(--sp-5h); flex-wrap: wrap; }
.hvt-dial { width: 110px; height: 110px; color: var(--hvt-st, var(--accent)); }
.hvt-dial-num { fill: var(--text); font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; }
.hvt-result-value { display: flex; flex-direction: column; gap: var(--sp-0); }
.hvt-result-value-k { font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.16em; color: var(--dim); }
.hvt-result-value-v { font-family: var(--font-display); font-size: var(--fs-8xl); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hvt-badges { display: flex; gap: var(--sp-1h); flex-wrap: wrap; justify-content: center; }
.hvt-badges .hvt-badge {
  display: inline-flex; align-items: baseline; gap: var(--sp-1h); padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-xs);
  border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.03); font-variant-numeric: tabular-nums;
}
.hvt-badge-k { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; color: var(--dim); }
.hvt-badge-v { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; }
.hvt-badges .hvt-badge.hvt-capped {
  color: #ff5067; border-color: rgba(255, 80, 103, 0.5); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: 0.1em; text-indent: 0.1em; align-items: center; justify-content: center;
}

.hvt-reveal { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2h); padding: var(--sp-2); }
.hvt-reveal-banner { font-size: var(--fs-7xl); font-weight: 900; letter-spacing: 0.12em; font-family: var(--font-display); }
.hvt-reveal.victory .hvt-reveal-banner { color: var(--boss, var(--accent)); text-shadow: 0 0 24px color-mix(in srgb, var(--boss, var(--accent)) 60%, transparent); }
.hvt-reveal.defeat .hvt-reveal-banner { color: #ff5067; }
.hvt-reveal-glyph { font-size: var(--fs-hero); line-height: var(--lh-none); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--boss, #ff5067) 60%, transparent)); }
.hvt-reveal-name { margin: 0; font-size: var(--fs-3xl); text-transform: uppercase; }
.hvt-reveal-org { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.hvt-reveal-sub { font-size: var(--fs-md); color: var(--dim); max-width: 420px; }
.hvt-reveal-rewards { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0; width: 100%; }
.hvt-reveal-rewards-lbl { color: var(--dim); font-size: var(--fs-base); letter-spacing: 0.06em; text-transform: uppercase; }
.hvt-mvp-callout { font-size: var(--fs-md); font-weight: 700; color: #ffd24d; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); background: rgba(255, 210, 77, 0.12); border: var(--bw-hair) solid rgba(255, 210, 77, 0.4); }
.hvt-res-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.hvt-res-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-1h) var(--sp-3);
  border: var(--bw-hair) solid color-mix(in srgb, var(--rc) 45%, transparent); clip-path: var(--clip-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 18%, transparent), transparent); font-size: var(--fs-lg);
}
.hvt-res-ico { font-size: var(--fs-2xl); color: var(--rc); text-shadow: 0 0 10px color-mix(in srgb, var(--rc) 60%, transparent); }
.hvt-res-chip b { font-size: var(--fs-lg); }
.hvt-res-lbl { color: var(--dim); font-size: var(--fs-base); }
.hvt-reveal-clans { display: flex; flex-direction: column; gap: var(--sp-1h); width: 100%; margin-top: var(--sp-1); }
.hvt-reveal-clan {
  display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); min-width: 0;
  background: #0c1018; border: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid var(--boss, var(--line));
}
.hvt-reveal-clan.mine { border-color: var(--accent); }
.hvt-reveal-clan .hvt-clan-name { text-align: left; }
.hvt-reveal-bonus { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.hvt-reveal-bonus .hvt-res-chip { padding: var(--sp-0) var(--sp-2); font-size: var(--fs-sm); }
.hvt-reveal-bonus .hvt-res-ico { font-size: var(--fs-base); }

.hvt-claim-tile {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0;
  clip-path: var(--clip-sm); border: var(--bw-hair) solid color-mix(in srgb, var(--boss) 45%, transparent);
  background: color-mix(in srgb, var(--boss) 14%, transparent); color: var(--boss);
}
.hvt-claim-tile .cf-ico { width: 20px; height: 20px; }
.hvt-claim-chips { justify-content: flex-start; }
.hvt-claim-mod { display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-md); font-weight: 600; color: #b07bff; }
.hvt-claim-mod .cf-ico { width: 15px; height: 15px; }
.hvt-glyph .cf-ico { width: 46px; height: 46px; color: color-mix(in srgb, var(--boss, var(--accent)) 80%, #fff); }
.hvt-doc-glyph .cf-ico { width: 15px; height: 15px; margin: 0 auto; }
.hvt-stance-glyph .cf-ico { width: 16px; height: 16px; }
.hvt-locked-ico .cf-ico { width: 26px; height: 26px; }
.hvt-reveal-glyph .cf-ico { width: 54px; height: 54px; margin: 0 auto; color: color-mix(in srgb, var(--boss, #ff5067) 80%, #fff); }
.hvt-res-ico .cf-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2.5px; }
.hvt-reveal-bonus .hvt-res-ico .cf-ico { width: 11px; height: 11px; }
.hvt-mvp-callout .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1h); }
.hvt-timer .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: var(--sp-1h); color: inherit; }

@media (max-width: 1000px) {
  .hvt-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hvt-dossier { padding: var(--sp-4); }
  .hvt-dossier-main { flex-direction: column; align-items: center; text-align: center; }
  .hvt-dossier-body { width: 100%; }
  .hvt-title-row, .hvt-meta-row { justify-content: center; }
  .hvt-name { font-size: var(--fs-3xl); }
  .hvt-doc-row { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .hvt-doc-track { grid-column: 1 / -1; grid-row: 2; }
  .hvt-doc-nums { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; }
  .hvt-row-stats { gap: var(--sp-1h); }
  .hvt-board-tag { display: none; }
  .hvt-result-main { gap: var(--sp-4); }
  .hvt-modal-strip { padding-right: var(--sp-7); }
}
@media (prefers-reduced-motion: reduce) {
  .hvt-glyph, .hvt-timer.hot, .hvt-doc-warmup, .hvt-heat.hvt-locked,
  .hvt-lane.hvt-surge, .hvt-lane.hvt-surge .hvt-push, .hvt-lane.hvt-firing::after,
  .hvt-stage.hvt-evac, .hvt-crate.hvt-slide-in, .hvt-crate.hvt-fly-right, .hvt-crate.hvt-fly-left,
  .hvt-crate-tell.hvt-tell-0, .hvt-crate-tell.hvt-tell-2, .hvt-fig.hvt-pop, .hvt-fig.hvt-crumple,
  .hvt-shake, .hvt-buzz, .hvt-flash-white, .hvt-flash-red { animation: none; }
  .hvt-lane.hvt-surge .hvt-push { opacity: 1; }
  .hvt-lane.hvt-firing::after { opacity: 0.7; }
  .hvt-stage.hvt-evac { box-shadow: inset 0 0 0 2px rgba(255, 80, 103, 0.5); }
  .hvt-fig.hvt-crumple { opacity: 0.1; }
  .hvt-crate.hvt-fly-right, .hvt-crate.hvt-fly-left { opacity: 0; }
  .hvt-floater { transition: opacity 0.85s ease-out; }
  .hvt-floater.hvt-float-up { transform: translate(-50%, 0); }
  .hvt-hp-fill, .hvt-doc-fill, .hvt-board-bar { transition: none; }
}

.hvt-stance-gearlock .hvt-stance-stat, .hvt-stance-gearlock .hvt-stance-est { opacity: 0.4; }
.hvt-stance-lockhint {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2h); text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: var(--bw-hair) dashed var(--line); clip-path: var(--clip-sm);
  color: var(--dim); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hvt-stance-lockhint:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.hvt-stance-lockhint .cf-ico { width: 13px; height: 13px; flex-shrink: 0; }

.hk-cut {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2h) var(--sp-3);
  border: var(--bw-hair) solid rgba(65, 224, 200, 0.3); background: rgba(65, 224, 200, 0.05); clip-path: var(--clip-sm);
}
.hk-cut[hidden] { display: none; }
.hk-cut-label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.14em; color: var(--teal); }
.hk-cut-hint { font-size: var(--fs-sm); }
.hk-cut-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hk-cut-btn { flex: 1; min-width: 118px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2h); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.05em; }
.hk-cut-btn .cf-ico { width: 13px; height: 13px; margin-right: 0; color: var(--teal); flex-shrink: 0; }

.modal:has(.hk-stage) { width: min(640px, 96vw); }
.hk-modal-label { color: var(--teal); }
.hk-stage {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4);
  min-height: 320px; background: linear-gradient(180deg, #06090d, #080d12);
  border: var(--bw-hair) solid rgba(65, 224, 200, 0.25); overflow: hidden;
  font-family: var(--font-display); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.hk-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
}
.hk-stage > * { position: relative; z-index: 1; }
.hk-stage.hk-win { border-color: rgba(74, 222, 128, 0.6); box-shadow: inset 0 0 40px rgba(74, 222, 128, 0.12); }
.hk-stage.hk-lost { border-color: rgba(255, 80, 103, 0.55); box-shadow: inset 0 0 40px rgba(255, 80, 103, 0.1); }
.hk-status { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; color: rgba(65, 224, 200, 0.9); text-transform: uppercase; }
.hk-stage.hk-lost .hk-status { color: #ff5067; }
.hk-row { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.hk-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em; color: var(--dim); min-width: 56px; }
.hk-chip {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill);
  border: var(--bw-hair) solid var(--line); color: var(--dim); font-variant-numeric: tabular-nums;
}
.hk-head .hk-chip { margin-left: auto; }

.hk-bits { display: flex; gap: var(--sp-2); justify-content: center; }
.hk-bit {
  flex: 1; min-width: 34px; max-width: 48px; height: 52px; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700;
  background: #0a1016; border: var(--bw-hair) solid #23303d; color: var(--dim);
}
.hk-bit.hk-on { color: var(--teal); border-color: rgba(65, 224, 200, 0.5); background: rgba(65, 224, 200, 0.08); }
.hk-bit.hk-cursor { outline: var(--bw-hair) solid rgba(220, 235, 255, 0.55); outline-offset: 2px; }
.hk-send { align-self: center; min-width: 180px; justify-content: center; }
.hk-history { display: flex; flex-direction: column; gap: var(--sp-1h); max-height: 152px; overflow-y: auto; }
.hk-guess { display: flex; gap: var(--sp-1h); align-items: center; justify-content: center; }
.hk-gbit {
  width: 26px; height: 28px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700;
  color: #c8d4e4; border: var(--bw-hair) solid #23303d; background: #0a1016;
}
.hk-pegs { margin-left: var(--sp-1h); display: inline-flex; gap: var(--sp-1h); }
.hk-peg {
  min-width: 22px; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-pill); text-align: center;
  font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums;
  border: var(--bw-hair) solid var(--line);
}
.hk-peg.good { color: var(--teal); border-color: rgba(65, 224, 200, 0.45); background: rgba(65, 224, 200, 0.08); }
.hk-peg.warn { color: #ffd24d; border-color: rgba(255, 210, 77, 0.45); background: rgba(255, 210, 77, 0.08); }
.hk-peg.bad { color: #ff6a5a; border-color: rgba(255, 106, 90, 0.45); background: rgba(255, 106, 90, 0.08); }
.hk-guess-n { font-size: var(--fs-xs); color: var(--dim); width: 24px; text-align: right; }

.hk-seq { display: flex; gap: var(--sp-1h); flex-wrap: wrap; }
.hk-byte {
  min-width: 36px; height: 30px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.08em;
  border: var(--bw-hair) solid #23303d; background: #0a1016; color: #c8d4e4;
}
.hk-byte.hk-want { color: var(--accent); border-color: rgba(255, 177, 61, 0.45); }
.hk-byte.hk-buf { color: transparent; border-style: dashed; }
.hk-byte.hk-buf.hk-filled { color: var(--teal); border-color: rgba(65, 224, 200, 0.45); border-style: solid; }
.hk-grid { display: grid; gap: var(--sp-2); }
.hk-cell {
  height: 44px; cursor: pointer; transition: background var(--dur-instant), color var(--dur-instant);
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.08em;
  background: #0a1016; border: var(--bw-hair) solid #1d2733; color: #55636f;
}
.hk-cell.hk-legal { color: #dce9ff; border-color: rgba(65, 224, 200, 0.4); }
.hk-cell.hk-legal:hover, .hk-cell.hk-legal:focus-visible { background: rgba(65, 224, 200, 0.12); color: var(--teal); }
.hk-cell.hk-used { color: #22303a; background: rgba(65, 224, 200, 0.04); border-style: dashed; }
.hk-cell:disabled { cursor: default; }
.hk-actions { justify-content: flex-end; margin-top: auto; }
.hk-actions .hk-send { margin-left: auto; align-self: auto; }

.hk-uplink { position: relative; display: flex; justify-content: space-between; gap: var(--sp-4h); padding: var(--sp-2) var(--sp-0); flex: 1; }
.hk-wiresvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hk-line { stroke: rgba(65, 224, 200, 0.85); stroke-width: 2; }
.hk-line-dim { stroke: rgba(120, 140, 160, 0.18); stroke-width: 1.5; }
.hk-line-dim.hk-line-live { stroke: rgba(65, 224, 200, 0.45); }
.hk-col { display: flex; flex-direction: column; gap: var(--sp-3h); justify-content: center; }
.hk-col-target { align-items: center; gap: var(--sp-2h); }
.hk-node {
  display: flex; flex-direction: column; gap: var(--sp-0); align-items: center; justify-content: center;
  min-width: 84px; min-height: 52px; padding: var(--sp-1h) var(--sp-3); cursor: pointer;
  background: #0a1016; border: var(--bw-hair) solid #23303d; color: #c8d4e4;
}
.hk-node b { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.hk-node-k { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.14em; color: var(--dim); }
.hk-node.hk-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(255, 177, 61, 0.25); }
.hk-node.hk-linked { border-color: rgba(65, 224, 200, 0.55); }
.hk-node.hk-linked b { color: var(--teal); }
.hk-target { border-color: rgba(255, 177, 61, 0.5); cursor: default; }
.hk-target b { color: var(--accent); font-size: var(--fs-4xl); }
.hk-total.hk-match { color: var(--teal); border-color: rgba(65, 224, 200, 0.5); }

.hk-fail { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2h); text-align: center; padding: var(--sp-5h) var(--sp-3); }
.hk-fail-title {
  font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 800; letter-spacing: 0.14em;
  color: #ff5067; text-shadow: 0 0 18px rgba(255, 80, 103, 0.4);
}
.hk-fail-sub { font-size: var(--fs-md); max-width: 380px; }
.hk-fail-btns { display: flex; gap: var(--sp-2h); margin-top: var(--sp-1h); }
.hk-retry, .hk-leave { min-width: 130px; justify-content: center; }

@media (max-width: 560px) {
  .hk-stage { padding: var(--sp-3); }
  .hk-uplink { gap: var(--sp-2); }
  .hk-node { min-width: 66px; padding: var(--sp-1h) var(--sp-2); }
  .hk-cell { height: 40px; font-size: var(--fs-base); }
  .hk-byte { min-width: 30px; }
}

.hvt-assist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); margin-bottom: var(--sp-2h); }
.hvt-assist-head .bj-row-label { margin: 0; }

.ct-host { display: flex; flex-direction: column; gap: var(--sp-4); }

.ct-clearance-note { font-size: var(--fs-base); margin-top: -8px; }

.ct-glyph-tile {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; font-size: var(--fs-4xl);
  border-radius: var(--radius-md); background: linear-gradient(140deg, color-mix(in srgb, var(--ct-dc, var(--accent)) 30%, #11161f), #0c1018);
  border: var(--bw-hair) solid color-mix(in srgb, var(--ct-dc, var(--accent)) 40%, var(--line));
}
.ct-diff-chip {
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); color: var(--ct-dc, var(--accent));
  border: var(--bw-hair) solid color-mix(in srgb, var(--ct-dc, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--ct-dc, var(--accent)) 12%, transparent);
  vertical-align: middle;
}
.ct-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ct-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-1) var(--sp-2h);
  border: var(--bw-hair) solid color-mix(in srgb, var(--rc) 45%, transparent); clip-path: var(--clip-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 16%, transparent), transparent); font-size: var(--fs-base);
}
.ct-chip-ico { font-size: var(--fs-md); color: var(--rc); text-shadow: 0 0 8px color-mix(in srgb, var(--rc) 60%, transparent); }
.ct-chip b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.ct-chip.rep b { color: var(--accent); }
.ct-xp-note { font-size: var(--fs-sm); }

.ct-invite-banner {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-3h);
  background: var(--surface); clip-path: var(--clip-sm);
  border: var(--bw-hair) solid color-mix(in srgb, var(--ct-dc, var(--accent)) 45%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--ct-dc, var(--accent)) 14%, transparent);
}
.ct-invite-glyph { font-size: var(--fs-5xl); flex-shrink: 0; }
.ct-invite-clock { font-size: var(--fs-base); margin-top: var(--sp-0); font-variant-numeric: tabular-nums; }

.ct-claim-box { display: flex; flex-direction: column; gap: var(--sp-2h); border-left: var(--bw-frame) solid var(--accent); }
.ct-claim-box[hidden] { display: none; }
.ct-claim-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ct-claim-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ct-claim-title > *:not(b) { flex-shrink: 0; }
.ct-claim-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-claim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--sp-3); }
.ct-claim {
  display: flex; flex-direction: column; gap: var(--sp-2h); padding: var(--sp-3h);
  border: var(--bw-hair) solid color-mix(in srgb, var(--ct-dc, var(--accent)) 45%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ct-dc, var(--accent)) 18%, transparent);
  background: var(--surface); clip-path: var(--clip-sm);
}
.ct-claim-top { display: flex; align-items: center; gap: var(--sp-2h); min-width: 0; }
.ct-claim-top .grow { min-width: 0; }
.ct-claim-clock { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.ct-claim-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.ct-board { display: flex; flex-direction: column; gap: var(--sp-2h); }
.ct-active {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3h) var(--sp-4); min-width: 0;
  background: var(--raised); border: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid var(--ct-dc, var(--line));
  clip-path: var(--clip-sm);
}
.ct-active.mine { border-color: rgba(255, 177, 61, 0.5); border-left-color: var(--ct-dc, var(--accent)); cursor: pointer; transition: background var(--dur-fast); }
.ct-active.mine:hover { background: #1a212c; }
.ct-active .grow { min-width: 0; }
.ct-active .ct-progress { margin-top: var(--sp-2); }
.ct-active-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); flex-shrink: 0; }
.ct-eta { font-size: var(--fs-base); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-open-hint { font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }

.ct-progress { position: relative; height: 10px; background: #0a0e14; border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); }
.ct-progress-fill { height: 100%; background: var(--ct-dc, var(--accent)); position: relative; overflow: hidden; }
.ct-progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
  animation: ctShine 2.2s linear infinite;
}
@keyframes ctShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.ct-lobby-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
  border-left: var(--bw-frame) solid var(--ct-dc, var(--line));
}
.ct-lobby-card.mine { border-color: rgba(255, 177, 61, 0.5); border-left-color: var(--ct-dc, var(--accent)); }
.ct-lobby-card .grow { min-width: 0; }
.ct-invonly-tag {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill);
  color: var(--dim); border: var(--bw-hair) solid var(--line); background: var(--bg); white-space: nowrap;
}

.ct-recent-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2h); }
.ct-recent-head .bj-row-label { margin-bottom: 0; }
.ct-recent-blank { font-size: var(--fs-base); padding: var(--sp-3h) var(--sp-0); }

.ct-recent-ledger { border: var(--bw-hair) solid var(--line); background: var(--raised); clip-path: var(--clip-sm); }
.ct-recent-cols, .ct-recent-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 96px 100px 112px;
  align-items: center; column-gap: var(--sp-3); padding: 0 var(--sp-3h);
}
.ct-recent-cols {
  padding-top: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: var(--bw-hair) solid var(--line);
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.16em;
  color: var(--dim); text-transform: uppercase;
}
.ct-recent-cols .c-when { text-align: right; }
.ct-recent-row {
  position: relative; width: 100%; min-height: 52px; padding-top: var(--sp-2); padding-bottom: var(--sp-2);
  background: none; border: none; border-top: var(--bw-hair) solid color-mix(in srgb, var(--line) 55%, transparent);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-fast);
}
.ct-recent-cols + .ct-recent-row { border-top: none; }
.ct-recent-row::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--ct-dc, var(--line)); opacity: 0.55; transition: opacity var(--dur-fast);
}
.ct-recent-row:hover, .ct-recent-row:focus-visible { background: rgba(255, 255, 255, 0.03); }
.ct-recent-row:hover::before, .ct-recent-row:focus-visible::before { opacity: 1; }
.ct-recent-row:focus-visible { outline: var(--bw-hair) solid var(--accent); outline-offset: -1px; }
.ct-recent-row.expired, .ct-recent-row.cancelled { opacity: 0.7; }
.ct-recent-row.expired:hover, .ct-recent-row.cancelled:hover { opacity: 1; }
.ct-recent-tile {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: linear-gradient(140deg, color-mix(in srgb, var(--ct-dc, var(--accent)) 24%, #11161f), #0c1018);
  border: var(--bw-hair) solid color-mix(in srgb, var(--ct-dc, var(--accent)) 35%, var(--line));
}
.ct-recent-ico { width: 15px; height: 15px; color: var(--ct-dc, var(--accent)); }
.ct-recent-id { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ct-recent-name { font-weight: 700; font-size: var(--fs-md); letter-spacing: 0.02em; line-height: var(--lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-recent-sub {
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.12em;
  color: var(--dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-recent-diff { display: flex; min-width: 0; }
.ct-recent-when { text-align: right; font-size: var(--fs-base); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ct-outcome-chip {
  width: 100%; padding: var(--sp-1) 0; text-align: center; border-radius: var(--radius-xs); border: var(--bw-hair) solid var(--line);
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dim); background: rgba(255, 255, 255, 0.03);
}
.ct-outcome-chip.success { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); background: rgba(74, 222, 128, 0.07); }
.ct-outcome-chip.failed { color: #ff5067; border-color: rgba(255, 80, 103, 0.5); background: rgba(255, 80, 103, 0.07); }
.ct-outcome-chip.active { color: var(--accent); border-color: rgba(255, 177, 61, 0.5); background: rgba(255, 177, 61, 0.07); }

.ct-pg-label {
  min-width: 76px; text-align: center; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.14em; color: var(--dim); font-variant-numeric: tabular-nums;
}
.pager-num.icon { min-width: 30px; padding: 0; display: grid; place-items: center; }
.ct-pg-ico { width: 12px; height: 12px; }
.pager-num.prev .ct-pg-ico { transform: scaleX(-1); }

@media (max-width: 640px) {
  .ct-recent-cols, .ct-recent-row { grid-template-columns: 28px minmax(0, 1fr) 92px 84px; column-gap: var(--sp-2h); }
  .ct-recent-diff, .ct-recent-cols .c-diff { display: none; }
}

.modal:has(.ct-map-shell) { width: min(1240px, 96vw); }
.ct-map-shell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: start; }
.ct-map-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ct-map-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; padding-right: var(--sp-6); }
.ct-map-title { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.ct-map-live { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; color: color-mix(in srgb, var(--teal) 60%, transparent); }

.ct-map-wrap { position: relative; background: #050b16; border: var(--bw-hair) solid var(--line); clip-path: var(--clip); overflow: hidden; }
.ct-map { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.ct-map-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(rgba(120, 160, 210, 0.35), rgba(120, 160, 210, 0.35)) left 5px top 5px / 14px 1px,
    linear-gradient(rgba(120, 160, 210, 0.35), rgba(120, 160, 210, 0.35)) left 5px top 5px / 1px 14px,
    linear-gradient(rgba(120, 160, 210, 0.35), rgba(120, 160, 210, 0.35)) right 5px top 5px / 14px 1px,
    linear-gradient(rgba(120, 160, 210, 0.35), rgba(120, 160, 210, 0.35)) right 5px top 5px / 1px 14px,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
.ct-map-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 90px 30px rgba(2, 4, 8, 0.6);
}
.ct-corner-bl, .ct-corner-br { position: absolute; width: 14px; height: 14px; bottom: 5px; pointer-events: none; z-index: 3; }
.ct-corner-bl { left: 5px; border-left: var(--bw-hair) solid rgba(120, 160, 210, 0.35); border-bottom: var(--bw-hair) solid rgba(120, 160, 210, 0.35); }
.ct-corner-br { right: 5px; border-right: var(--bw-hair) solid rgba(120, 160, 210, 0.35); border-bottom: var(--bw-hair) solid rgba(120, 160, 210, 0.35); }

.ct-sweep { animation: ctSweep 14s linear infinite; }
@keyframes ctSweep { from { transform: translateX(-90px); } to { transform: translateX(1000px); } }

.ct-marker { cursor: pointer; outline: none; }
.ct-marker > * { transform-box: fill-box; transform-origin: center; }
.ct-marker-hit { fill: transparent; stroke: none; pointer-events: fill; }
.ct-marker-ring { fill: none; stroke: var(--ct-dc); stroke-width: 1.8; transition: transform var(--dur-base); }
.ct-marker-core { fill: var(--ct-dc); }
.ct-marker-cross { stroke: var(--ct-dc); stroke-width: 1.5; fill: none; opacity: 0.55; transition: opacity var(--dur-base), transform var(--dur-mid); }
.ct-marker-pulse {
  fill: none; stroke: var(--ct-dc); stroke-width: 1.6;
  animation: ctPulse 2.6s ease-out infinite; animation-delay: calc(var(--ct-i, 0) * 0.35s);
}
@keyframes ctPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } }
.ct-marker:hover, .ct-marker:focus-visible { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ct-dc) 60%, transparent)); }
.ct-marker:hover .ct-marker-ring, .ct-marker:focus-visible .ct-marker-ring { transform: scale(1.25); }
.ct-marker:hover .ct-marker-cross, .ct-marker:focus-visible .ct-marker-cross { opacity: 1; }
.ct-marker.selected .ct-marker-cross { transform: rotate(45deg); opacity: 1; }
.ct-marker-reticle { animation: ctReticleSpin 12s linear infinite; }
@keyframes ctReticleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ct-marker.locked { opacity: 0.35; }
.ct-marker.taken { opacity: 0.4; cursor: not-allowed; }
.ct-marker.taken .ct-marker-pulse { animation: none; opacity: 0; }
.ct-marker-lock { transform-box: view-box; transform-origin: 0 0; }
.ct-marker-taken { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; }
.ct-markers.has-selection .ct-marker:not(.selected) { opacity: 0.45; }
.ct-markers.has-selection .ct-marker.locked:not(.selected), .ct-markers.has-selection .ct-marker.taken:not(.selected) { opacity: 0.25; }

.map-tip-name { display: block; font-size: var(--fs-base); letter-spacing: 0.1em; }
.map-tip-sub { display: block; font-size: var(--fs-xs); letter-spacing: 0.16em; color: var(--dim); }

.ct-panel-head { display: flex; align-items: center; gap: var(--sp-2h); min-width: 0; }
.ct-panel-head .grow { min-width: 0; }
.ct-panel-type { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.ct-dossier {
  background: #0a0e14; clip-path: var(--clip-sm); padding: var(--sp-3) var(--sp-3h);
  border-top: var(--bw-hair) dashed var(--line); border-bottom: var(--bw-hair) dashed var(--line);
  font-size: var(--fs-md); line-height: 1.5; color: color-mix(in srgb, var(--text) 90%, transparent);
}
.ct-dossier-tag {
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.18em;
  color: var(--dim); text-transform: uppercase; margin-bottom: var(--sp-1h);
}

.ct-weight { display: flex; flex-direction: column; gap: var(--sp-1h); }
.ct-weight-labels { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em; }
.ct-weight-def { color: #62b9ff; }
.ct-weight-atk { color: #eb4b4b; }
.ct-weight-track { position: relative; height: 6px; clip-path: var(--clip-sm); background: linear-gradient(90deg, #62b9ff, #2a3242 50%, #eb4b4b); }
.ct-weight-thumb {
  position: absolute; top: 50%; width: 10px; height: 10px;
  transform: translate(-50%, -50%) rotate(45deg); background: var(--text);
  border: var(--bw-thick) solid var(--bg);
}
.ct-weight-caption { font-size: var(--fs-xs); letter-spacing: 0.08em; font-family: var(--font-display); }

.ct-meta-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ct-meta-chip {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.06em;
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05); border: var(--bw-hair) solid var(--line); color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.ct-rotation { margin-left: auto; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.ct-rewards { display: flex; flex-direction: column; gap: var(--sp-2); }
.ct-rewards-label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }
.ct-lock-note {
  font-size: var(--fs-base); color: #ff5067; padding: var(--sp-2h) var(--sp-3); clip-path: var(--clip-sm);
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.4); background: rgba(255, 80, 103, 0.07);
}

.ct-access { display: flex; flex-direction: column; gap: var(--sp-2h); }
.ct-seg-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1h); }
.ct-access-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2h); animation: ctFieldsIn 0.16s ease-out; }
@keyframes ctFieldsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ct-access-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ct-access-field > .dim { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; font-family: var(--font-display); }
.ct-rank-select, .ct-gear-input { width: 100%; min-width: 0; }

.ct-confirm { display: flex; flex-direction: column; gap: var(--sp-2); }
.ct-confirm .btn, .ct-panel > .btn.primary.big { width: 100%; justify-content: center; }
.ct-confirm-sub { font-size: var(--fs-sm); text-align: center; }

.ct-back { align-self: flex-start; }
.ct-outcome {
  text-align: center; padding: var(--sp-4); clip-path: var(--clip-sm);
  border: var(--bw-hair) solid var(--line); background: var(--surface);
}
.ct-outcome.victory { border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.06); }
.ct-outcome.defeat { border-color: rgba(255, 80, 103, 0.45); background: rgba(255, 80, 103, 0.05); }
.ct-outcome-label { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 800; letter-spacing: 0.14em; }
.ct-outcome.victory .ct-outcome-label { color: var(--good); text-shadow: 0 0 16px rgba(74, 222, 128, 0.4); }
.ct-outcome.defeat .ct-outcome-label { color: #ff5067; }
.ct-outcome-sub { font-size: var(--fs-md); margin-top: var(--sp-1); }

.ct-lobby { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--sp-4h); align-items: start; }
.ct-squad { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ct-squad-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); }
.ct-squad-head .bj-row-label { margin: 0; }
.ct-slots { display: flex; flex-direction: column; gap: var(--sp-2); }
.ct-slot {
  display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2h) var(--sp-3); min-width: 0;
  background: var(--raised); clip-path: var(--clip-sm);
}
/* A gapped stack rather than a margin on each row, so the identity row, the
   combat pills, the reward chips and the claim state cannot collapse into each
   other when a status adds or drops one of them. */
.ct-slot .grow { display: flex; flex-direction: column; gap: var(--sp-1h); min-width: 0; }
.ct-slot.empty {
  background: transparent; border: var(--bw-hair) dashed var(--line); clip-path: none;
  justify-content: center; color: var(--dim); font-family: var(--font-display);
  font-size: var(--fs-xs); letter-spacing: 0.16em; min-height: 54px;
}
.ct-slot.pending { background: transparent; border: var(--bw-hair) dashed rgba(65, 224, 200, 0.35); clip-path: none; }
.ct-slot-sil { line-height: 0; opacity: 0.4; }
.ct-slot-stats { display: flex; align-items: center; gap: var(--sp-1h); flex-wrap: wrap; }
.ct-slot-claimed { font-size: var(--fs-sm); }
.ct-pending-note { font-size: var(--fs-xs); letter-spacing: 0.14em; font-family: var(--font-display); }
.ct-id-row { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.ct-id-row > .avatar, .ct-id-row > .rank-badge, .ct-id-row > .level-badge { flex-shrink: 0; }
.ct-id-name {
  font-weight: 700; font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 150px; color: var(--text);
}
button.ct-id-name.player-link { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
button.ct-id-name.player-link:hover { color: var(--accent); text-decoration: underline; }
.ct-leader-tag {
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.12em; padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-xs);
  color: var(--accent); border: var(--bw-hair) solid rgba(255, 177, 61, 0.45); background: rgba(255, 177, 61, 0.1);
  flex-shrink: 0;
}
.ct-loadout-btn { flex-shrink: 0; }
.ct-kick-btn { flex-shrink: 0; color: var(--danger); }

.ct-intel { display: flex; flex-direction: column; gap: var(--sp-3h); min-width: 0; }
.ct-totals { display: flex; flex-direction: column; gap: var(--sp-0); }
.ct-totals-label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }
.ct-totals-value { font-family: var(--font-display); font-size: var(--fs-5xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-totals-break { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }

.ct-gauge-wrap { display: flex; flex-direction: column; gap: var(--sp-1h); padding-top: var(--sp-3h); }
.ct-gauge { position: relative; height: 14px; background: #0a0e14; border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); }
.ct-gauge-fill { height: 100%; background: var(--ct-dc, var(--accent)); transition: width var(--dur-slower) ease-out; }
.ct-gauge-dead {
  position: absolute; top: 0; bottom: 0; right: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 4px, transparent 4px 8px);
}
.ct-gauge-cap { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: 0.7; }
.ct-gauge-cap::after {
  content: attr(data-label); position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%); font-size: var(--fs-2xs); letter-spacing: 0.12em; color: var(--dim);
  font-family: var(--font-display); white-space: nowrap;
}
.ct-gauge-line { display: flex; justify-content: space-between; gap: var(--sp-2h); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.ct-actions-wrap { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-0); }
.ct-lobby-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ct-actions-note { font-size: var(--fs-base); }
.ct-active-state { display: flex; flex-direction: column; gap: var(--sp-2); }
.ct-locked-note, .ct-consolation, .ct-claim-done { font-size: var(--fs-base); }
.ct-claim-deadline { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.ct-claim-block { display: flex; flex-direction: column; gap: var(--sp-2); }

.ct-invite-picker { display: flex; flex-direction: column; gap: var(--sp-3); }
.ct-invite-picker h3 { margin: 0; }
.ct-invite-filter { width: 100%; }
.ct-invite-list { display: flex; flex-direction: column; gap: var(--sp-1h); max-height: min(380px, 50vh); overflow-y: auto; }
.ct-invite-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  flex-wrap: wrap;
}
.ct-invite-row .ct-id-row { flex: 1 1 160px; }
.ct-invite-row .btn { margin-left: auto; }
.ct-invite-row.off { opacity: 0.55; }

.ct-loadout-view { display: flex; flex-direction: column; gap: var(--sp-3h); }
.ct-loadout-view h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: 0.08em; }
.ct-loadout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--sp-2h); justify-items: center; }
.ct-loadout-empty {
  width: 100%; min-height: 150px; display: grid; place-items: center;
  border: var(--bw-hair) dashed var(--line); clip-path: var(--clip-sm);
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.14em;
}
.ct-loadout-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); flex-wrap: wrap; }

@media (max-width: 1000px) {
  .ct-lobby { grid-template-columns: minmax(0, 1fr); }
  .ct-intel { order: -1; }
}
@media (max-width: 860px) {
  .ct-map-shell { grid-template-columns: minmax(0, 1fr); }
  .ct-panel { scroll-margin-top: 8px; }
  .ct-lobby-actions {
    position: sticky; bottom: 0; z-index: 5;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(4px); padding: var(--sp-2h) 0;
  }
}
@media (max-width: 560px) {
  .ct-claim-grid { grid-template-columns: 1fr; }
  .ct-active { flex-wrap: wrap; }
  .ct-active-side { flex-direction: row; align-items: center; gap: var(--sp-2h); width: 100%; justify-content: space-between; }
  .ct-access-fields { grid-template-columns: 1fr; }
  .ct-rotation { margin-left: 0; width: 100%; }
  .ct-slot { flex-wrap: wrap; }
  .ct-loadout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: none), (pointer: coarse) {
  .page-tab.seg { min-height: 44px; }
  .ct-marker-cross { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-marker-pulse { animation: none; opacity: 0.25; }
  .ct-marker-reticle { animation: none; }
  .ct-sweep { display: none; }
  .ct-progress-fill::after { animation: none; }
  .ct-access-fields { animation: none; }
  .ct-gauge-fill, .map-tip, .ct-marker-ring, .ct-marker-cross { transition: none; }
}

.ct-tile-ico { width: 20px; height: 20px; color: var(--ct-dc, var(--accent)); }
.ct-invite-ico { width: 22px; height: 22px; color: var(--ct-dc, var(--accent)); }
.ct-empty-ico { color: var(--dim); }
.ct-placeholder-ico { width: 40px; height: 40px; }
.ct-btn-ico { width: 15px; height: 15px; }
.ct-back-ico { transform: scaleX(-1); }
.ct-chip-ico.cf-ico {
  width: 13px; height: 13px; color: var(--rc);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rc) 60%, transparent));
}
.ct-timer { display: inline-flex; align-items: center; gap: var(--sp-1h); }
.ct-timer-ico { width: 12px; height: 12px; flex-shrink: 0; }
.ct-hint { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ct-hint-ico { width: 10px; height: 10px; }
.ct-openable { cursor: pointer; transition: background var(--dur-fast); }
.ct-openable:hover, .ct-openable:focus-visible { background: #1a212c; }
.ct-openable:focus-visible { outline: var(--bw-hair) solid var(--accent); outline-offset: -1px; }

.modal:has(.ct-debrief) { width: min(660px, 94vw); }
.ct-debrief { display: flex; flex-direction: column; gap: var(--sp-4); }
.ct-debrief-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding-right: var(--sp-6); }
.ct-debrief-head .grow { min-width: 0; }
.ct-debrief-tag { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; }
.ct-debrief-name {
  margin-top: var(--sp-0); font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; letter-spacing: 0.05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-debrief-stamp {
  flex-shrink: 0; align-self: flex-start; transform: rotate(-4deg); margin-top: var(--sp-1);
  padding: var(--sp-1h) var(--sp-3); border: var(--bw-thick) solid currentColor; border-radius: var(--radius-xs);
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dim);
  mask-image: repeating-linear-gradient(35deg, #000 0 3px, rgba(0, 0, 0, 0.82) 3px 5px);
}
.ct-debrief-stamp.success { color: var(--good); }
.ct-debrief-stamp.failed { color: #ff5067; }
.ct-debrief-stamp.active { color: var(--accent); }

.ct-debrief-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-0); background: var(--line); border: var(--bw-hair) solid var(--line); }
.ct-debrief-cell { background: #0a0e14; padding: var(--sp-2h) var(--sp-3); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1h); }
.ct-debrief-k { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }
.ct-debrief-v {
  display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; min-height: 20px;
  font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-debrief-type-ico { width: 14px; height: 14px; color: var(--ct-dc, var(--accent)); flex-shrink: 0; }
.ct-debrief-chance { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ct-dc, var(--accent)); }

.ct-debrief-label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }
.ct-debrief-squad { display: flex; flex-direction: column; gap: var(--sp-2); }
.ct-debrief-rows { display: flex; flex-direction: column; border: var(--bw-hair) solid var(--line); background: var(--raised); clip-path: var(--clip-sm); }
.ct-debrief-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3); row-gap: var(--sp-2);
  padding: var(--sp-2h) var(--sp-3h); min-height: 48px;
}
.ct-debrief-row + .ct-debrief-row { border-top: var(--bw-hair) solid color-mix(in srgb, var(--line) 55%, transparent); }
.ct-debrief-op { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.ct-debrief-op > * { flex-shrink: 0; }
.ct-debrief-opname { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.ct-debrief-stats { display: flex; align-items: center; gap: var(--sp-1h); flex-shrink: 0; }
.ct-debrief-nosnap { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.14em; }
.ct-debrief-cut { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); flex-wrap: wrap; }
.ct-debrief-cut-note { grid-column: 1 / -1; font-size: var(--fs-base); }
.ct-debrief-none { font-size: var(--fs-base); }
.ct-claim-state {
  flex-shrink: 0; padding: var(--sp-0) var(--sp-2); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-xs);
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.ct-claim-state.settled { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); background: rgba(74, 222, 128, 0.07); }
.ct-claim-state.open { color: var(--accent); border-color: rgba(255, 177, 61, 0.5); background: rgba(255, 177, 61, 0.08); }

@media (max-width: 560px) {
  .ct-debrief-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-debrief-head { flex-wrap: wrap; }
  .ct-debrief-row { grid-template-columns: minmax(0, 1fr); }
  .ct-debrief-stats { justify-content: flex-start; }
}

.cf-ico-in { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: var(--sp-1h); }
.cf-ico-in:only-child { margin-right: 0; }
.logo .mark .cf-ico { width: 16px; height: 16px; }
.icon-btn .cf-ico { width: 16px; height: 16px; }
.ach-toast-icon .cf-ico { width: 24px; height: 24px; color: #190d02; }
.avatar-lock .cf-ico { width: 16px; height: 16px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); }
.modal-close .cf-ico { width: 15px; height: 15px; }
.equip-clear-ico .cf-ico { width: 14px; height: 14px; }
.page-tab .equip-tab-edit .cf-ico { width: 12px; height: 12px; }
.fav-btn .cf-ico { width: 14px; height: 14px; }
.badge.fav .cf-ico { width: 10px; height: 10px; }
.ach-state .cf-ico { width: 10px; height: 10px; display: inline-block; vertical-align: -1.5px; margin-right: var(--sp-1); }
.clanp-wh-k .cf-ico-in { width: 12px; height: 12px; }

.adm-sheet-ico .cf-ico { width: 16px; height: 16px; margin: 0 auto; }
.adm-prow-actions .icon-btn .cf-ico { width: 14px; height: 14px; }
.profanity-row .icon-btn .cf-ico { width: 13px; height: 13px; }
.adm-res-ico { display: inline-block; }
.adm-res-ico .cf-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2.5px; }
.give-mod-chip-ico .cf-ico { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; margin-right: var(--sp-1); }
.give-mod-group-ico .cf-ico { width: 13px; height: 13px; display: block; }
.give-chip-wear .cf-ico { width: 10px; height: 10px; display: inline-block; vertical-align: -1px; margin-right: var(--sp-0); }
.give-chip-x .cf-ico { width: 10px; height: 10px; }
.role-chip .cf-ico { width: 10px; height: 10px; display: inline-block; vertical-align: -1.5px; margin-right: var(--sp-1); }
.tests-verdict .cf-ico { width: 12px; height: 12px; display: inline-block; vertical-align: -1.5px; margin-right: var(--sp-1h); }
.tests-row-ico .cf-ico { width: 13px; height: 13px; display: block; }
.obs-status .cf-ico { width: 10px; height: 10px; display: inline-block; vertical-align: -1px; margin-right: var(--sp-1); }
.obs-step-ico .cf-ico { width: 13px; height: 13px; display: block; color: var(--dim); }
.obs-card-del .cf-ico { width: 13px; height: 13px; }
.obs-replay-pill .cf-ico { width: 10px; height: 10px; display: inline-block; vertical-align: -1px; margin-right: var(--sp-1); }

.battle-stat .cf-ico { width: 14px; height: 14px; align-self: center; }
.empty-glyph .cf-ico { margin: 0 auto; }
.battle-case-chip .cf-ico { width: 10px; height: 10px; display: inline-block; vertical-align: -1px; margin-left: var(--sp-0); }
.pb-nml-v .cf-ico { width: 1.05em; height: 1.05em; margin: 0 auto; }
.coin-face .cf-ico { width: 62px; height: 62px; }
.coin-label .cf-ico { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; margin-right: var(--sp-1h); }
.pvp-overlay-note .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1); }
.pvp-skip .cf-ico, .skip-btn .cf-ico { width: 12px; height: 12px; display: inline-block; vertical-align: -1.5px; margin: 0 0 0 var(--sp-1h); }
.admin-clan-res .cf-ico { width: 12px; height: 12px; }

.grind-ses-chip .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1h); }
.grind-chip .cf-ico { width: 13px; height: 13px; align-self: center; }
.upgrade-row .ico .cf-ico { width: 22px; height: 22px; color: var(--uc, #ccc); }
.daily-ico .cf-ico { width: 22px; height: 22px; color: var(--accent); }
.skip-btn .cf-ico { width: 12px; height: 12px; margin: 0 0 0 var(--sp-1h); }
.flip-front .cf-ico { width: 36px; height: 36px; color: var(--dim); }
.coin-side .cf-ico { width: 17px; height: 17px; }
.mt-face .cf-ico { width: 22px; height: 22px; margin: 0 auto; }
.mine-tile.safe .mt-face .cf-ico { filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.8)); }
.mines-odds .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1h); }
.nml-truck .cf-ico { width: 18px; height: 18px; }
.nml-boom .cf-ico { width: 30px; height: 30px; color: #ffb13d; }
.nml-op .cf-ico { width: 22px; height: 22px; color: #9db36a; }
.page-tab .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: var(--sp-1h); }
.forge-cost-ico .cf-ico { width: 13px; height: 13px; }
.forge-aegis-ico .cf-ico { width: 15px; height: 15px; }
.forge-hammer .cf-ico { width: 44px; height: 44px; color: #ffb13d; }
.carve-stamp .cf-ico { width: 64px; height: 64px; filter: drop-shadow(0 0 18px rgba(176, 123, 255, 0.95)); }
.trade-arrow .cf-ico { width: 14px; height: 14px; }
.trade-res-chip .g .cf-ico, .trade-res-name .g .cf-ico { width: 12px; height: 12px; color: var(--rc); }
.trade-res-details summary .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: var(--sp-1); }
.coll-tab-count .cf-ico { width: 11px; height: 11px; display: inline-block; vertical-align: -1.5px; }
.coll-done-badge .cf-ico { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; margin-right: var(--sp-1); }
.badge.coll-check .cf-ico { width: 10px; height: 10px; }
.coll-add-overlay .cf-ico { width: 13px; height: 13px; display: inline-block; vertical-align: -2.5px; margin-right: var(--sp-1h); }
.hdr-ico .cf-ico { width: 21px; height: 21px; }

/* Shared rules re-homed from the deleted battle3d-era blocks. */
.equip-enh-tag { flex-shrink: 0; font-weight: 800; font-size: var(--fs-base); color: #ffb84d; text-shadow: 0 0 6px rgba(255, 140, 60, 0.5); }
.cw-prep-bot { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: #11161f; border: var(--bw-hair) solid var(--line); flex-shrink: 0; }
.cw-vs-badge { font-size: var(--fs-md); font-weight: 900; letter-spacing: 0.14em; color: var(--accent2); text-shadow: 0 0 18px rgba(255, 120, 71, 0.4); }
.cw-vs-mmr-win { color: #4ade80; font-weight: 900; }
.cw-vs-mmr-loss { color: #ff5d73; font-weight: 900; }
.cw-live-badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: 900; letter-spacing: 0.12em; color: #ff5d73; justify-content: center; }
.cw-live-dot { width: 9px; height: 9px; border-radius: var(--radius-circle); background: #ff5d73; box-shadow: 0 0 10px #ff5d73; animation: cw-live-pulse 1.2s ease-in-out infinite; }
@keyframes cw-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }

.cw-vs-center { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding-top: var(--sp-1h); min-width: 0; }
.cw-vs-map { --map: var(--accent); --floor: #1c2733; position: relative; width: 112px; height: 80px; border-radius: var(--radius-lg); overflow: hidden;
  border: var(--bw-hair) solid color-mix(in srgb, var(--map) 45%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--floor) 88%, #000), var(--floor)); }
.cw-vs-map-grid { position: absolute; inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--map) 28%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--map) 28%, transparent) 1px, transparent 1px);
  background-size: 16px 16px; opacity: 0.5; }
.cw-vs-map-site { position: absolute; width: 20px; height: 20px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 900;
  color: #0b0f16; border-radius: var(--radius-sm); background: var(--map); box-shadow: 0 0 10px color-mix(in srgb, var(--map) 60%, transparent); }
.cw-vs-map-site.a { top: 14px; right: 16px; }
.cw-vs-map-site.b { bottom: 14px; left: 16px; }
.cw-vs-map-theme { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: var(--fs-2xs); letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--map) 75%, #fff); text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-vs-details { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-lg);
  border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.015); }
.cw-vs-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.cw-vs-detail-side { font-weight: 800; font-variant-numeric: tabular-nums; }
.cw-vs-detail-side.home { color: var(--cw-a, #4ea1ff); }
.cw-vs-detail-side.away { color: var(--cw-b, #ff5d73); }
.cw-vs-detail-title { font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--dim); }
.cw-vs-bar { position: relative; display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; margin: var(--sp-2) 0; border: var(--bw-hair) solid var(--line); }
.cw-vs-bar-home { background: linear-gradient(90deg, #2f7bd6, #4ea1ff); }
.cw-vs-bar-away { background: linear-gradient(90deg, #ff5d73, #b21f3a); }
.cw-vs-bar-odds { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000; }
.cw-vs-detail-sub { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); }
.cw-vs-detail-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cw-vs-chip { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-0); padding: var(--sp-2) var(--sp-2h);
  border-radius: var(--radius-md); border: var(--bw-hair) solid var(--line); background: rgba(0, 0, 0, 0.2); text-align: center; }
.cw-vs-chip-lbl { font-size: var(--fs-2xs); letter-spacing: 0.1em; color: var(--dim); }
.cw-vs-chip-val { font-size: var(--fs-md); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cw-history-row[role="button"] { cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base); }
.cw-history-row[role="button"]:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: #10151f; }
.cw-history-row[role="button"]:focus-visible { outline: var(--bw-thick) solid var(--accent); outline-offset: 1px; }

.cw-sb { display: flex; flex-direction: column; gap: var(--sp-3h); width: 100%; max-width: 920px; margin: 0 auto; }
.cw-sb-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4h); align-items: center; }
.cw-sb-side { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-2h) var(--sp-3); border-radius: var(--radius-lg);
  border: var(--bw-hair) solid color-mix(in srgb, var(--boss) 30%, var(--line)); background: color-mix(in srgb, var(--boss) 7%, #0c1018); }
.cw-sb-side.won { border-color: rgba(74, 222, 128, 0.5); }
.cw-sb-side.right { text-align: right; }
.cw-sb-side-top { display: flex; align-items: center; gap: var(--sp-2h); min-width: 0; }
.cw-sb-side.right .cw-sb-side-top { flex-direction: row-reverse; }
.cw-sb-side-top .clan-banner, .cw-sb-side-top .cw-prep-bot { flex-shrink: 0; }
.cw-sb-side-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.cw-sb-side-name { display: flex; align-items: baseline; gap: var(--sp-1); font-weight: 800; font-size: var(--fs-lg); min-width: 0; overflow: hidden; }
.cw-sb-side.right .cw-sb-side-name { flex-direction: row-reverse; }
.cw-sb-side-name .clan-tag-color { flex-shrink: 0; }
.cw-sb-side-name > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-sb-badge { align-self: flex-start; font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.06em; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-xs); }
.cw-sb-side.right .cw-sb-badge { align-self: flex-end; }
.cw-sb-side-mmr { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.cw-sb-side.right .cw-sb-side-mmr { justify-content: flex-end; }
.cw-sb-mmr-move { display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.cw-sb-mmr-move b { font-weight: 800; }
.cw-sb-mmr-move b.up { color: var(--good); }
.cw-sb-mmr-move b.down { color: var(--danger); }
.cw-sb-arrow { display: inline-flex; opacity: 0.55; }
.cw-sb-arrow .cf-ico { width: 13px; height: 13px; transform: rotate(-90deg); }
.cw-sb-promo { display: inline-flex; align-items: center; gap: var(--sp-1h); margin-top: var(--sp-1h); padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill); font-size: var(--fs-base); font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.cw-sb-promo .cf-ico { width: 13px; height: 13px; }
.cw-sb-promo.up { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.cw-sb-promo.down { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.cw-sb-side.right .cw-sb-promo { align-self: flex-end; }
.cw-sb-header-mid { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); min-width: 0; }
.cw-sb-score { font-size: var(--fs-7xl); font-weight: 900; line-height: var(--lh-none); font-variant-numeric: tabular-nums; }
.cw-sb-score-sub { font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.cw-sb-meta { font-size: var(--fs-sm); text-align: center; }
.cw-sb-rosters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px) { .cw-sb-rosters { grid-template-columns: 1fr; } }
.cw-sb-roster { display: flex; flex-direction: column; gap: var(--sp-1h); min-width: 0; padding: var(--sp-2h); border-radius: var(--radius-lg); background: #0a0e15; border: var(--bw-hair) solid var(--line); }
.cw-sb-roster-head { display: flex; align-items: baseline; gap: var(--sp-1h); padding-bottom: var(--sp-1h); border-bottom: var(--bw-hair) solid var(--line); min-width: 0; }
.cw-sb-roster-head .clan-tag-color { flex-shrink: 0; }
.cw-sb-roster-title { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-sb-row,
.war-res-row { display: flex; flex-direction: column; gap: var(--sp-1h); padding: var(--sp-2) var(--sp-2h); border-radius: var(--radius-sm); background: #0c1018; border: var(--bw-hair) solid var(--line); min-width: 0; }
.cw-sb-row.mvp,
.war-res-row.mvp { border-color: rgba(255, 210, 77, 0.5); }
.cw-sb-row-id { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.cw-sb-row-id > .avatar, .cw-sb-row-id > .rank-badge, .cw-sb-row-id > .level-badge, .cw-sb-row-id > .ops-mvp-crown { flex-shrink: 0; }
.cw-sb-row-id .ops-id-name, .cw-sb-row-id .player-link { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-sb-row-id .level-badge { margin-right: auto; }
.cw-sb-row-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cw-sb-stat { font-size: var(--fs-sm); color: var(--dim); }
.cw-sb-stat b { color: var(--text); }
.cw-sb-stat.ko b { color: var(--accent); }
.cw-sb-stat.mvp-tag { color: #ffd24d; font-weight: 900; }
.cw-sb-stat.mvp-tag .cf-ico { width: 11px; height: 11px; display: inline-block; vertical-align: -1.5px; }
.cw-sb-rounds { padding: var(--sp-2h) var(--sp-3); border-radius: var(--radius-lg); background: #0a0e15; border: var(--bw-hair) solid var(--line); }
.cw-sb-round-pips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); }
.cw-sb-round-pip { box-sizing: border-box; flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); line-height: var(--lh-none); background: #161d29; border: var(--bw-hair) solid var(--line); }
.cw-sb-round-pip .cf-ico { width: 12px; height: 12px; }
.cw-sb-round-pip.win { border-color: #2ee6a8; box-shadow: inset 0 0 0 1px rgba(46, 230, 168, 0.25); }
.cw-sb-round-pip.loss { border-color: #ff5067; box-shadow: inset 0 0 0 1px rgba(255, 80, 103, 0.25); }
.cw-sb-half { box-sizing: border-box; flex: 0 0 auto; align-self: center; width: 2px; height: 22px; margin: 0 var(--sp-1); border-radius: var(--radius-xs); background: linear-gradient(transparent, #ffce54, transparent); font-size: 0; }
.cw-sb-rewards { padding: var(--sp-3); border-radius: var(--radius-lg); background: #0a0e15; border: var(--bw-hair) solid var(--line); min-width: 0; }
.cw-sb-rewards-body { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.cw-sb-mvp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-md); }
.cw-sb-reward-groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2h); }
@media (max-width: 640px) { .cw-sb-reward-groups { grid-template-columns: 1fr; } }
.cw-sb-reward-group { display: flex; flex-direction: column; gap: var(--sp-1h); padding: var(--sp-2h); border-radius: var(--radius-lg); background: #0c1018; border: var(--bw-hair) solid var(--line); border-left: var(--bw-frame) solid var(--line); min-width: 0; }
.cw-sb-reward-group.winners { border-left-color: var(--good); }
.cw-sb-reward-group.losers { border-left-color: #8d9aa5; }
.cw-sb-reward-group-head { display: flex; align-items: center; gap: var(--sp-1h); padding-bottom: var(--sp-1h); border-bottom: var(--bw-hair) solid var(--line); min-width: 0; }
.cw-sb-reward-group-title { font-weight: 800; font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.4px; color: var(--dim); }
.cw-sb-reward-group-clan { font-weight: 800; font-size: var(--fs-md); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-sb-reward-group-result { margin-left: auto; flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); }
.cw-sb-reward-empty { font-size: var(--fs-base); padding: var(--sp-0); }
.cw-sb-reward-row { display: flex; flex-direction: column; gap: var(--sp-1h); padding: var(--sp-1h) var(--sp-2); border-radius: var(--radius-sm); background: #0a0e15; border: var(--bw-hair) solid var(--line); min-width: 0; }
.cw-sb-reward-row.mvp { border-color: rgba(255, 210, 77, 0.5); }
.cw-sb-reward-id { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.cw-sb-reward-id > .avatar, .cw-sb-reward-id > .rank-badge, .cw-sb-reward-id > .ops-mvp-crown { flex-shrink: 0; }
.cw-sb-reward-id .ops-id-name, .cw-sb-reward-id .player-link { min-width: 0; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-sb-reward-earn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1h); }
.cw-sb-xp-chip, .cw-sb-mod-chip { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 700; padding: var(--sp-0) var(--sp-2); border-radius: var(--radius-pill); background: #161d29; border: var(--bw-hair) solid var(--line); }
.cw-sb-xp-chip .cf-ico, .cw-sb-mod-chip .cf-ico { width: 12px; height: 12px; }
.cw-sb-xp-chip { color: #7fd0ff; }
.cw-sb-mod-chip { color: #ffce54; }
.cw-done-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.cw-actions .btn, .cw-mgr .btn, .war-ready-actions .btn, .war-staging-foot .btn, .war-live-cta .btn { min-width: 132px; }
@media (max-width: 640px) {
  .cw-sb-header { grid-template-columns: 1fr; }
  .cw-sb-header-mid { order: -1; }
  .cw-sb-side.right { text-align: left; }
  .cw-sb-side.right .cw-sb-side-top { flex-direction: row; }
  .cw-sb-side.right .cw-sb-side-name { flex-direction: row; }
  .cw-sb-side.right .cw-sb-badge { align-self: flex-start; }
  .cw-sb-side.right .cw-sb-side-mmr { justify-content: flex-start; }
}

.war-fighter-state { display: flex; align-items: center; gap: var(--sp-2); }
.war-pip-online, .war-pip-offline { width: 8px; height: 8px; border-radius: var(--radius-circle); flex-shrink: 0; }
.war-pip-online { background: var(--good); box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); }
.war-pip-offline { background: #39424e; }
.war-ready-chip { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.05em; padding: var(--sp-0) var(--sp-2h); border-radius: var(--radius-pill); border: var(--bw-hair) solid var(--line); color: var(--dim); flex-shrink: 0; }
.war-ready-chip.on { color: var(--good); border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.08); }
.war-ready-chip.big { font-size: var(--fs-md); padding: var(--sp-1h) var(--sp-4); }
.war-ready-chip .cf-ico { width: 12px; height: 12px; }
.war-presence-warn { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-base); color: #ffd24d; }
.war-presence-warn .cf-ico { width: 14px; height: 14px; flex-shrink: 0; }

.war-ready-panel, .war-staging, .war-live-panel { display: flex; flex-direction: column; gap: var(--sp-3h); }
.war-ready-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); }
.war-ready-top > :last-child { justify-self: end; }
.war-ready-count, .war-deploy-count { font-family: var(--font-display); font-size: var(--fs-5xl); font-weight: 800; color: var(--accent); text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.war-ready-count.urgent { color: #ff5d73; animation: war-pulse 1s ease-in-out infinite; }
@keyframes war-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.war-map-chip { --map: var(--accent); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-0); padding: var(--sp-1h) var(--sp-3); border: var(--bw-hair) solid color-mix(in srgb, var(--map) 45%, var(--line)); background: color-mix(in srgb, var(--map) 10%, #0c1018); clip-path: var(--clip-sm); }
.war-map-lbl { font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--dim); }
.war-map-name { font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.08em; color: var(--map); }

.war-vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-3h); align-items: start; }
.war-vs-grid.slim { align-items: center; gap: var(--sp-6); }
.war-vs-grid.slim > .war-side-head:first-child { justify-content: flex-start; }
.war-vs-grid.slim > .war-side-head:last-child { justify-content: flex-end; text-align: right; }
.war-vs-grid.slim > .war-side-head:last-child .war-side-id { align-items: flex-end; }
.war-vs-x { font-family: var(--font-display); font-size: var(--fs-5xl); font-weight: 900; color: var(--dim); align-self: center; }
.war-side { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2h); }
.war-side-head { display: flex; align-items: center; gap: var(--sp-2h); min-width: 0; }
.war-side-id { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.war-side-name { display: flex; align-items: baseline; gap: var(--sp-1h); font-weight: 800; font-size: var(--fs-lg); min-width: 0; }
.war-side-name .clan-tag-color { flex-shrink: 0; }
.war-side-name > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war-side-roster { display: flex; flex-direction: column; gap: var(--sp-1h); }
.war-mf { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1h) var(--sp-2h); border-radius: var(--radius-md); border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.015); min-width: 0; }
.war-mf.mine { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.war-mf-id { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; flex: 1; }
.war-mf-id .ops-id-name { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.war-mf-load { display: flex; align-items: center; gap: var(--sp-1h); flex-shrink: 0; }
.war-mf-glyph { width: 26px; height: 14px; color: var(--dim); }
.war-mf-load .gear-pill { font-size: var(--fs-xs); padding: var(--sp-0) var(--sp-1h); }
.war-ready-roster { display: flex; flex-direction: column; gap: var(--sp-1h); max-width: 520px; margin: 0 auto; width: 100%; }
.war-stake { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-1h); font-size: var(--fs-base); }
.war-stake-lbl { font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--dim); margin-right: var(--sp-1); }
.war-ready-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding-top: var(--sp-3); border-top: var(--bw-hair) solid var(--line); text-align: center; }
.war-staging-foot { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-3); border-top: var(--bw-hair) solid var(--line); }

.war-live-score { font-family: var(--font-display); font-size: var(--fs-8xl); font-weight: 900; display: flex; align-items: baseline; gap: var(--sp-3h); justify-content: center; font-variant-numeric: tabular-nums; padding: 0 var(--sp-2h); min-width: 96px; letter-spacing: 0.01em; }
.war-live-score .dim { font-size: var(--fs-6xl); }
.war-live-cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.war-liveboard { display: flex; flex-direction: column; gap: var(--sp-1h); }
.war-liveboard-head { display: flex; justify-content: center; font-size: var(--fs-base); }
.war-liveboard-feed { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 560px; margin: 0 auto; width: 100%; }
.war-lb-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1h); font-size: var(--fs-base); padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025); border-left: var(--bw-frame) solid var(--line); }
.war-lb-row.home { border-left-color: var(--teal); }
.war-lb-row.away { border-left-color: #ff5d73; }
.war-lb-n { font-size: var(--fs-xs); font-weight: 800; color: var(--dim); min-width: 18px; }
.war-lb-killer { font-weight: 800; }
.war-lb-victim { font-weight: 600; color: #ff9aa6; }
.war-lb-wpn { font-size: var(--fs-sm); }

.war-res-op { font-size: var(--fs-sm); letter-spacing: 0.18em; text-transform: uppercase; }
.war-res-final { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 900; font-variant-numeric: tabular-nums; margin-top: var(--sp-0); }
.war-res-rounds { display: flex; justify-content: center; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); }
.war-rpip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); background: #161d29; border: var(--bw-hair) solid var(--line); color: var(--dim); }
.war-rpip .cf-ico { width: 12px; height: 12px; }
.war-rpip.win { border-color: var(--teal); color: var(--teal); box-shadow: inset 0 0 0 1px rgba(65, 224, 200, 0.25); }
.war-rpip.loss { border-color: #ff5067; color: #ff8a98; box-shadow: inset 0 0 0 1px rgba(255, 80, 103, 0.25); }
.war-rpip-swap { width: 2px; height: 18px; margin: 0 var(--sp-1); border-radius: var(--radius-xs); background: linear-gradient(#ffce54, transparent); font-size: 0; }
.war-res-mvp { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); font-weight: 700; font-size: var(--fs-md); }
.war-res-side { display: flex; flex-direction: column; gap: var(--sp-2h); min-width: 0; }
.war-res-side.won { border-color: rgba(74, 222, 128, 0.45); }
.war-res-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); min-width: 0; }
.war-res-side-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.war-res-lines { display: flex; flex-direction: column; gap: var(--sp-1h); }
.war-res-id { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; }
.war-res-id .ops-id-name { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.war-res-stats { display: flex; align-items: baseline; gap: var(--sp-2h); flex-wrap: wrap; }
.war-res-stat { font-size: var(--fs-base); color: var(--text); font-variant-numeric: tabular-nums; }
.war-res-stat.obj { color: var(--accent); font-weight: 700; }
.war-res-score { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); color: var(--accent); }

@media (max-width: 720px) {
  .war-vs-grid { grid-template-columns: 1fr; }
  .war-vs-grid .war-vs-x { display: none; }
  .war-ready-top { grid-template-columns: 1fr; justify-items: center; gap: var(--sp-2); }
  .war-ready-top > :last-child { justify-self: center; }
}

.flip-h { transform: scaleX(-1); }
.war-match { position: fixed; inset: 0; z-index: var(--z-fullscreen); background: #04060a; overflow: hidden; touch-action: none; }
.war-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.war-touch-host { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.war-hud { position: absolute; inset: 0; pointer-events: none; z-index: 6; font-family: var(--font-body); }
.war-hud button { pointer-events: auto; }

.war-top { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + var(--banner-h)); left: 12px; right: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; }

.war-vitals { display: flex; flex-direction: column; gap: var(--sp-1h); justify-self: start; max-width: 220px; }
.war-vital { display: grid; grid-template-columns: minmax(0, 86px) 64px 30px; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); background: rgba(7, 10, 15, 0.62); border: var(--bw-hair) solid var(--line); transition: opacity var(--dur-slow); }
.war-vital.you { border-color: rgba(65, 224, 200, 0.45); }
.war-vital.dead { opacity: 0.42; }
.war-vital.dead .war-vital-name { text-decoration: line-through; text-decoration-color: rgba(255, 80, 103, 0.6); }
.war-vital.dead .war-vital-fill { width: 0 !important; }
.war-vital.hit { animation: war-vital-hit 0.4s ease; }
@keyframes war-vital-hit { 0% { background: rgba(255, 80, 103, 0.35); } 100% { background: rgba(7, 10, 15, 0.62); } }
.war-vital-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war-vital-hp { position: relative; height: 5px; border-radius: var(--radius-xs); overflow: hidden; background: rgba(255, 255, 255, 0.09); }
.war-vital-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--teal); border-radius: var(--radius-xs); transition: width var(--dur-slow) ease; }
.war-vital-fill.low { background: #ff5d73; }
.war-vital-wpn { display: grid; place-items: center; }
.war-vital-glyph { width: 26px; height: 13px; color: var(--dim); }

.war-score { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); justify-self: center; }
.war-scorepill { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1h) var(--sp-4); background: rgba(7, 10, 15, 0.7); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); font-family: var(--font-display); }
.war-score-lbl { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.14em; color: var(--dim); }
.war-score-us, .war-score-them { font-size: var(--fs-4xl); font-weight: 900; line-height: var(--lh-none); font-variant-numeric: tabular-nums; }
.war-score-us { color: var(--teal); }
.war-score-them { color: #ff5d73; }
.war-score-x { color: var(--dim); font-weight: 900; }
.war-roundlbl { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; line-height: var(--lh-none); }
.war-clockrow { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 22px; }
.war-timer { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.war-timer.amber { color: var(--accent); animation: war-pulse 1s ease-in-out infinite; }
.war-ring { --p: 0; width: 28px; height: 28px; border-radius: var(--radius-circle); display: grid; place-items: center; background: conic-gradient(var(--teal) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.12) 0); position: relative; }
.war-ring::after { content: ''; position: absolute; inset: 3px; border-radius: var(--radius-circle); background: #0a0e14; }
.war-ring-txt { position: relative; z-index: 1; font-size: var(--fs-2xs); font-weight: 800; color: var(--teal); font-variant-numeric: tabular-nums; }
.war-pips { display: flex; align-items: center; justify-content: center; }
.war-pips-seg { display: flex; align-items: center; gap: var(--sp-1); }
.war-pips-split { width: 2px; align-self: stretch; min-height: 8px; margin: 0 var(--sp-2); background: rgba(255, 255, 255, 0.32); border-radius: var(--radius-xs); }
.war-pip { width: 8px; height: 4px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, 0.16); flex-shrink: 0; }
.war-pip.win { background: var(--teal); box-shadow: 0 0 5px rgba(65, 224, 200, 0.5); }
.war-pip.loss { background: #ff5d73; box-shadow: 0 0 5px rgba(255, 93, 115, 0.4); }
.war-pip.now { background: #fff; box-shadow: 0 0 5px rgba(255, 255, 255, 0.6); animation: war-pulse 1s ease-in-out infinite; }

.war-feed { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-end; justify-self: end; min-width: 0; max-width: 100%; margin-top: var(--sp-7); }
.war-feed-row { display: flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-base); padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-sm); background: rgba(7, 10, 15, 0.66); border: var(--bw-hair) solid var(--line); max-width: 100%; min-width: 0; animation: war-feed-in 0.22s ease; }
@keyframes war-feed-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.war-feed-row.us { border-left: var(--bw-frame) solid var(--teal); }
.war-feed-row.them { border-left: var(--bw-frame) solid #ff5d73; }
.war-feed-killer { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war-feed-victim { color: #ff9aa6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war-feed-glyph { width: 24px; height: 12px; color: var(--dim); flex-shrink: 0; }
.war-feed-tag { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.war-feed-tag .cf-ico { width: 12px; height: 12px; }

.war-banner { position: absolute; top: 21%; left: 50%; transform: translate(-50%, -8px); text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow), transform var(--dur-slow); max-width: 92vw; }
.war-banner.show { opacity: 1; transform: translate(-50%, 0); }
.war-banner-main { font-family: var(--font-display); font-size: clamp(var(--fs-4xl), 4vw, var(--fs-7xl)); font-weight: 900; letter-spacing: 0.1em; color: var(--text); text-shadow: 0 0 24px rgba(255, 177, 61, 0.35), 0 2px 8px rgba(0, 0, 0, 0.9); padding: var(--sp-1h) var(--sp-5); background: rgba(6, 9, 14, 0.66); border: var(--bw-hair) solid rgba(255, 177, 61, 0.35); clip-path: var(--clip-sm); }
.war-banner-sub { margin-top: var(--sp-1h); font-size: var(--fs-md); color: var(--dim); text-shadow: 0 1px 4px #000; }

.war-cutbar { position: absolute; top: calc(21% + 66px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); pointer-events: none; }
.war-cutbar-lbl { font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.1em; color: #ff8a98; text-shadow: 0 1px 4px #000; }
.war-cutbar-track { width: 180px; height: 5px; border-radius: var(--radius-xs); overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.war-cutbar-fill { height: 100%; width: 0; background: #ff5d73; transition: width var(--dur-base) linear; }

.war-prompt { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); padding: var(--sp-2) var(--sp-4); background: rgba(7, 10, 15, 0.72); border: var(--bw-hair) solid rgba(255, 177, 61, 0.4); clip-path: var(--clip-sm); pointer-events: none; }
.war-prompt-txt { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; letter-spacing: 0.06em; color: var(--accent); }
.war-prompt-track { width: 150px; height: 4px; border-radius: var(--radius-xs); overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.war-prompt-fill { height: 100%; width: 0; background: var(--accent); transition: width var(--dur-fast) linear; }
.war-prompt.working .war-prompt-txt { color: #fff; }

.war-weapon { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); padding: var(--sp-2) var(--sp-4h); background: rgba(7, 10, 15, 0.7); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); pointer-events: none; }
.war-wpn-main { display: flex; align-items: center; gap: var(--sp-2h); }
.war-wpn-ico { width: 42px; height: 20px; color: var(--text); }
.war-wpn-glyph { display: grid; place-items: center; }
.war-wpn-glyph .cf-ico { width: 18px; height: 18px; color: var(--text); }
.war-wpn-name { font-weight: 700; font-size: var(--fs-md); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war-wpn-ammo { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.war-wpn-ammo.dry { color: #ff5d73; }
.war-wpn-sub { display: flex; align-items: center; gap: var(--sp-2h); }
.war-sup { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--accent2); text-transform: uppercase; }
.war-sup.on { color: var(--teal); }
.war-sup.locked { opacity: 0.4; }
.war-sup .cf-ico { width: 12px; height: 12px; }
.war-util { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text); }
.war-util .cf-ico { width: 13px; height: 13px; color: var(--dim); }
.war-util.spent { opacity: 0.35; }
.war-adr { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; animation: war-pulse 1s ease-in-out infinite; }
.war-adr .cf-ico { width: 12px; height: 12px; }

.war-death { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); padding: var(--sp-3h) var(--sp-5h); background: rgba(7, 10, 15, 0.82); border: var(--bw-hair) solid rgba(255, 80, 103, 0.5); clip-path: var(--clip); text-align: center; pointer-events: none; }
.war-death-head { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 900; letter-spacing: 0.14em; color: #ff5d73; text-transform: uppercase; }
.war-death-killer { font-weight: 800; font-size: var(--fs-lg); }
.war-death-wpn { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); color: var(--text); }
.war-death-glyph { width: 30px; height: 15px; color: var(--dim); }
.war-death-stats { display: flex; align-items: center; gap: var(--sp-4h); margin-top: var(--sp-2); padding-top: var(--sp-2h); border-top: var(--bw-hair) solid rgba(255, 255, 255, 0.08); }
.war-death-stat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); min-width: 78px; }
.war-death-stat-lbl { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; white-space: nowrap; }
.war-death-dial { width: 30px; height: 30px; border-radius: var(--radius-circle); border: var(--bw-hair) solid rgba(255, 93, 115, 0.4); background: radial-gradient(circle, rgba(255, 93, 115, 0.16), rgba(255, 93, 115, 0.04)); display: grid; place-items: center; }
.war-death-dial-arrow { display: grid; place-items: center; color: #ff8a98; }
.war-death-dial-arrow .cf-ico { width: 14px; height: 14px; }
.war-death-range { display: grid; place-items: center; height: 30px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); white-space: nowrap; }

.war-spectate { position: absolute; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 64px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2) var(--sp-3h); background: rgba(7, 10, 15, 0.75); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); }
.war-spec-lbl { font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--dim); text-transform: uppercase; }
.war-spec-name { font-weight: 800; font-size: var(--fs-md); min-width: 60px; text-align: center; }
.war-spec-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.06); border: var(--bw-hair) solid var(--line); color: var(--text); cursor: pointer; padding: 0; }
.war-spec-btn:disabled { opacity: 0.4; cursor: default; }
.war-spec-btn .cf-ico { width: 14px; height: 14px; }
.war-spec-btn.ping { color: var(--accent); }

.war-conn { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 12px; font-size: var(--fs-sm); font-weight: 800; color: #ffd24d; padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-sm); background: rgba(20, 14, 2, 0.75); border: var(--bw-hair) solid rgba(255, 210, 77, 0.45); pointer-events: none; font-variant-numeric: tabular-nums; }
.war-leave { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + var(--banner-h)); right: 12px; display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-1h) var(--sp-3); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.06em; color: var(--dim); background: rgba(7, 10, 15, 0.7); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm); cursor: pointer; z-index: 2; }
.war-leave:hover { color: var(--text); }
.war-leave .cf-ico { width: 11px; height: 11px; }

.war-rotate { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2h); background: #04060a; text-align: center; }
.war-rotate-glyph .cf-ico { width: 46px; height: 46px; color: var(--accent); animation: war-rotate-spin 2.4s ease-in-out infinite; }
@keyframes war-rotate-spin { 0%, 60%, 100% { transform: rotate(0); } 20%, 40% { transform: rotate(90deg); } }
.war-rotate-txt { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 900; letter-spacing: 0.12em; }

.war-end, .war-lost { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(4, 6, 10, 0.72); backdrop-filter: blur(3px); padding: var(--sp-4h); overflow-y: auto; }
.war-end-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2h); text-align: center; padding: var(--sp-5h) var(--sp-6); background: var(--surface); border: var(--bw-hair) solid var(--line); clip-path: var(--clip); max-width: min(440px, 92vw); }
.war-end-card.won { border-color: rgba(74, 222, 128, 0.5); }
.war-end-card.lost { border-color: rgba(255, 80, 103, 0.45); }
.war-end-op { font-size: var(--fs-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.war-end-verdict { font-family: var(--font-display); font-size: var(--fs-7xl); font-weight: 900; letter-spacing: 0.08em; }
.war-end-card.won .war-end-verdict { color: var(--good); text-shadow: 0 0 24px rgba(74, 222, 128, 0.5); }
.war-end-card.lost .war-end-verdict { color: #ff5d73; }
.war-end-score { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.war-end-mmr { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-md); }
.war-end-delta { font-weight: 900; }
.war-end-delta.up { color: var(--good); }
.war-end-delta.down { color: #ff5d73; }
.war-end-line { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.war-end-stat { font-size: var(--fs-base); color: var(--dim); }
.war-end-stat b { color: var(--text); font-size: var(--fs-md); }
.war-end-mvp { display: flex; align-items: center; gap: var(--sp-1h); font-weight: 800; font-size: var(--fs-md); color: #ffd24d; }
.war-end-mvp .cf-ico { width: 15px; height: 15px; }
.war-end-res { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.war-end-chip { display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-base); padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill); border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.03); }
.war-end-chip .cf-ico { width: 13px; height: 13px; color: var(--accent); }
.war-end-chip-lbl { color: var(--dim); text-transform: capitalize; }
.war-end-mod { display: flex; align-items: center; gap: var(--sp-1h); font-size: var(--fs-md); font-weight: 700; color: var(--accent); }
.war-end-mod .cf-ico { width: 14px; height: 14px; }
.war-end-xp { font-size: var(--fs-base); }
.war-lost-actions { display: flex; gap: var(--sp-2h); flex-wrap: wrap; justify-content: center; }

.war-wait { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: var(--sp-2h); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.1em; color: var(--dim); pointer-events: none; }
.war-wait-dot { width: 9px; height: 9px; border-radius: var(--radius-circle); background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: cw-live-pulse 1.1s ease-in-out infinite; }

.war-nomatch { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2h); padding: var(--sp-8) var(--sp-5); text-align: center; }
.war-nomatch-glyph .cf-ico { width: 44px; height: 44px; color: var(--dim); }
.war-nomatch-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 800; letter-spacing: 0.06em; }

/* Mobile and touch: condensed strip, HP slivers, 3 feed rows, thumb-safe card. */
@media (max-width: 860px) {
  .war-top { grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); left: 8px; right: 8px; }
  .war-vitals { flex-direction: row; gap: var(--sp-1); max-width: none; }
  .war-vital { grid-template-columns: 44px; width: 44px; padding: var(--sp-1) var(--sp-1); }
  .war-vital-name, .war-vital-wpn { display: none; }
  .war-scorepill { padding: var(--sp-1) var(--sp-3); gap: var(--sp-1h); }
  .war-score-us, .war-score-them { font-size: var(--fs-2xl); }
  .war-timer { font-size: var(--fs-lg); }
  .war-feed { margin-top: var(--sp-6); }
  .war-feed-row { font-size: var(--fs-sm); padding: var(--sp-0) var(--sp-2); }
  .war-feed-row:nth-child(n+4) { display: none; }
  .war-wpn-name { max-width: 120px; font-size: var(--fs-base); }
  .war-weapon { padding: var(--sp-1h) var(--sp-3); }
  .war-leave span { display: none; }
}
.war-match.touch .war-weapon { top: calc(max(10px, env(safe-area-inset-top)) + 84px + var(--banner-h)); bottom: auto; transform: translateX(-50%) scale(0.92); }
.war-match.touch .war-prompt { bottom: 34%; }
.war-match.touch .war-spectate { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 12px); }
@media (prefers-reduced-motion: reduce) {
  .war-timer.amber, .war-adr, .war-ready-count.urgent, .war-rotate-glyph .cf-ico { animation: none; }
}

.hq-seed {
  display: inline-flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2h);
  border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.02); clip-path: var(--clip-sm);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; color: var(--dim);
}
.hq-seed b { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-base); letter-spacing: 0.08em; color: var(--teal); font-weight: 600; }
.hq-chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hq-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-1h) var(--sp-3);
  border: var(--bw-hair) solid color-mix(in srgb, var(--rc, #8d9aa5) 35%, transparent);
  background: color-mix(in srgb, var(--rc, #8d9aa5) 8%, transparent);
  clip-path: var(--clip-sm); font-size: var(--fs-md);
}
.hq-chip .cf-ico { width: 14px; height: 14px; color: var(--rc, #8d9aa5); }
.hq-chip b { font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.hq-chip-cash { --rc: var(--accent); }
.hq-reroll { min-height: 40px; }
.hq-reroll .cf-ico { width: 14px; height: 14px; }

.hq-shell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: start; }
.hq-map-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.hq-map-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.hq-map-title { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.hq-map-live { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.12em; color: color-mix(in srgb, var(--teal) 60%, transparent); }

.hq-map-wrap { position: relative; background: #050b16; border: var(--bw-hair) solid var(--line); clip-path: var(--clip); overflow: hidden; }
.hq-map { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 620; }
.hq-map-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(rgba(120, 160, 210, 0.35), rgba(120, 160, 210, 0.35)) left 5px top 5px / 14px 1px,
    linear-gradient(rgba(120, 160, 210, 0.35), rgba(120, 160, 210, 0.35)) left 5px top 5px / 1px 14px,
    linear-gradient(rgba(120, 160, 210, 0.35), rgba(120, 160, 210, 0.35)) right 5px top 5px / 14px 1px,
    linear-gradient(rgba(120, 160, 210, 0.35), rgba(120, 160, 210, 0.35)) right 5px top 5px / 1px 14px,
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
.hq-map-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 90px 30px rgba(2, 4, 8, 0.6);
}
.hq-corner-bl, .hq-corner-br { position: absolute; width: 14px; height: 14px; bottom: 5px; pointer-events: none; z-index: 3; }
.hq-corner-bl { left: 5px; border-left: var(--bw-hair) solid rgba(120, 160, 210, 0.35); border-bottom: var(--bw-hair) solid rgba(120, 160, 210, 0.35); }
.hq-corner-br { right: 5px; border-right: var(--bw-hair) solid rgba(120, 160, 210, 0.35); border-bottom: var(--bw-hair) solid rgba(120, 160, 210, 0.35); }
.hq-sweep { animation: hqSweep 16s linear infinite; }
@keyframes hqSweep { from { transform: translateX(-90px); } to { transform: translateX(1000px); } }

.hq-map-wrap.glitch { animation: hqGlitch 0.55s steps(2, jump-none) both; }
@keyframes hqGlitch {
  0% { filter: none; transform: none; }
  15% { filter: contrast(1.7) brightness(1.45) saturate(0.2); transform: translateX(2px); }
  35% { filter: contrast(2.1) brightness(0.7) saturate(0); transform: translateX(-3px); }
  60% { filter: contrast(1.35) brightness(1.25) saturate(0.5); transform: translateX(1px); }
  100% { filter: none; transform: none; }
}

/* map scenery */
.hq-ground { fill: #0a1220; }
.hq-road-case { stroke: #101a28; stroke-linecap: round; }
.hq-road { stroke: #1a2534; stroke-linecap: round; }
.hq-road-center { stroke: rgba(255, 209, 120, 0.16); stroke-width: 1.6; stroke-dasharray: 12 14; }
.hq-wall { fill: none; stroke: #3c5170; stroke-width: 2.6; stroke-linejoin: round; }
.hq-wall-glow { fill: none; stroke: rgba(90, 130, 180, 0.14); stroke-width: 8; stroke-linejoin: round; }
.hq-gate-post { fill: #2c3b52; stroke: #55677f; stroke-width: 1; }
.hq-tower-box { fill: #121c2a; stroke: #3b4c63; stroke-width: 1.5; }
.hq-tree { fill: #10281c; stroke: #1e4630; stroke-width: 1; }
.hq-tree-core { fill: #17351f; stroke: none; }
.hq-rock { fill: #1b2431; stroke: #2b3949; stroke-width: 1; }
.hq-pad { fill: #0c1624; stroke: #2c3e57; stroke-width: 1.6; }
.hq-pad-ring { fill: none; stroke: rgba(98, 185, 255, 0.35); stroke-dasharray: 6 6; }
.hq-pad-h { stroke: rgba(98, 185, 255, 0.75); stroke-width: 3; fill: none; }
.hq-tank { fill: #131e2c; stroke: #33445c; stroke-width: 1.4; }
.hq-crate { fill: #1a2330; stroke: #34455c; stroke-width: 1.2; }
.hq-mast { stroke: #4a5c74; stroke-width: 1.6; fill: none; }
.hq-radar-ring { fill: none; stroke: rgba(98, 185, 255, 0.16); }
.hq-radar-ring.dim { stroke: rgba(98, 185, 255, 0.1); }
.hq-radar-beam {
  fill: rgba(98, 185, 255, 0.2); transform-box: fill-box; transform-origin: left center;
  animation: hqRadarSpin 7s linear infinite;
}
@keyframes hqRadarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hq-beacon { fill: #ff5067; animation: hqBlink 2.4s ease-in-out infinite; }
@keyframes hqBlink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* buildings */
.hq-bld { cursor: pointer; outline: none; }
.hq-hit { fill: transparent; stroke: none; pointer-events: fill; }
.hq-bld-core { transform-box: fill-box; transform-origin: center; }
.hq-fp {
  fill: color-mix(in srgb, var(--hq-tc, #5b6675) 14%, #0c141f);
  stroke: var(--hq-tc, #5b6675); stroke-width: 1.7;
  transition: fill var(--dur-slower), stroke var(--dur-slower);
}
.hq-fp-detail { fill: none; stroke: color-mix(in srgb, var(--hq-tc, #5b6675) 60%, transparent); stroke-width: 1.1; transition: stroke var(--dur-slower); }
.hq-bld-glyph { fill: var(--hq-tc, #5b6675); opacity: 0.92; transition: fill var(--dur-slower); }
.hq-bld.t1 .hq-bld-core { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--hq-tc) 45%, transparent)); }
.hq-bld.t2 .hq-bld-core { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--hq-tc) 55%, transparent)); }
.hq-bld.t3 .hq-bld-core { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--hq-tc) 65%, transparent)); }
.hq-bld.t0 .hq-fp { fill: rgba(12, 20, 31, 0.5); stroke-dasharray: 5 5; }
.hq-bld.t0 .hq-bld-glyph { opacity: 0.35; }
.hq-bld.t0 .hq-bld-core { opacity: 0.75; }
.hq-survey { visibility: hidden; fill: none; stroke: rgba(139, 151, 168, 0.28); stroke-width: 1; stroke-dasharray: 4 7; }
.hq-bld.t0 .hq-survey { visibility: visible; }
.hq-pip { fill: rgba(255, 255, 255, 0.1); transition: fill var(--dur-slow); }
.hq-pip.on { fill: var(--hq-tc); }
.hq-ring {
  stroke: var(--hq-tc, #8d9aa5); stroke-width: 1.6; opacity: 0;
  transform-box: fill-box; transform-origin: center; transform: scale(0.92);
  transition: opacity var(--dur-base), transform var(--dur-mid);
}
.hq-bld:hover .hq-ring, .hq-bld:focus-visible .hq-ring { opacity: 0.85; transform: scale(1); }
.hq-bld:hover, .hq-bld:focus-visible { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hq-tc, #8d9aa5) 55%, transparent)); }
.hq-blds.has-selection .hq-bld:not(.selected) { opacity: 0.38; transition: opacity var(--dur-mid); }
.hq-reticle { transform-box: fill-box; transform-origin: center; animation: hqReticleSpin 11s linear infinite; }
.hq-reticle circle { stroke: var(--hq-tc); stroke-width: 1.5; }
.hq-reticle-ticks { stroke: var(--hq-tc); stroke-width: 2; }
@keyframes hqReticleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hq-attn {
  stroke: var(--hq-tc); stroke-width: 1.4; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.hq-bld.can-up .hq-attn { animation: hqAttn 2.6s ease-out infinite; animation-delay: calc(var(--hq-i, 0) * 0.33s); }
/* pulse advertises the NEXT tier's color */
.hq-bld.t0.can-up .hq-attn { stroke: #4b69ff; }
.hq-bld.t1.can-up .hq-attn { stroke: #d32ce6; }
.hq-bld.t2.can-up .hq-attn { stroke: #ff7847; }
@keyframes hqAttn {
  0% { transform: scale(0.84); opacity: 0.55; }
  70% { transform: scale(1.26); opacity: 0; }
  100% { transform: scale(1.26); opacity: 0; }
}
.hq-bld-core.slam { animation: hqSlam 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes hqSlam { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
.hq-bloom {
  stroke: var(--hq-tc); stroke-width: 2.5;
  transform-box: fill-box; transform-origin: center;
  animation: hqBloom 0.95s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}
@keyframes hqBloom {
  from { transform: scale(0.5); opacity: 0.95; }
  to { transform: scale(2.6); opacity: 0; }
}


/* inspect panel */
.hq-panel { scroll-margin-top: 66px; }
.hq-p-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.hq-p-head .grow { min-width: 0; }
.hq-tile {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hq-tc, #8d9aa5) 12%, transparent);
  border: var(--bw-hair) solid color-mix(in srgb, var(--hq-tc, #8d9aa5) 55%, transparent);
  clip-path: var(--clip-sm); color: var(--hq-tc, #8d9aa5);
}
.hq-tile .cf-ico { width: 24px; height: 24px; }
.hq-name { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.hq-cat {
  display: inline-block; margin-top: var(--sp-1); padding: var(--sp-0) var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cc, #8d9aa5); border: var(--bw-hair) solid color-mix(in srgb, var(--cc, #8d9aa5) 45%, transparent);
  background: color-mix(in srgb, var(--cc, #8d9aa5) 10%, transparent); clip-path: var(--clip-sm);
}
.hq-dossier {
  background: #0a0e14; clip-path: var(--clip-sm); padding: var(--sp-3) var(--sp-3h);
  border-top: var(--bw-hair) dashed var(--line); border-bottom: var(--bw-hair) dashed var(--line);
  font-size: var(--fs-md); line-height: 1.5; color: color-mix(in srgb, var(--text) 90%, transparent);
}
.hq-dossier-tag {
  font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.18em;
  color: var(--dim); text-transform: uppercase; margin-bottom: var(--sp-1h);
}
.hq-track { display: flex; align-items: center; gap: var(--sp-2); }
.hq-track-label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; color: var(--dim); margin-right: var(--sp-0); }
.hq-tk {
  width: 34px; height: 26px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  border: var(--bw-hair) solid var(--line); color: var(--dim); background: rgba(255, 255, 255, 0.02);
  clip-path: var(--clip-sm);
}
.hq-tk.on {
  color: var(--pc); border-color: color-mix(in srgb, var(--pc) 60%, transparent);
  background: color-mix(in srgb, var(--pc) 12%, transparent);
}
.hq-tk.cur { box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 35%, transparent); }
.hq-effect {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2h);
  padding: var(--sp-2h) var(--sp-3); background: var(--bg); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
}
.hq-effect-label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; color: var(--dim); }
.hq-effect-val { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--hq-tc, #8d9aa5); font-variant-numeric: tabular-nums; }
.hq-next { display: flex; flex-direction: column; gap: var(--sp-2); }
.hq-next-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2h); }
.hq-next-val { font-family: var(--font-display); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.hq-cost { display: flex; flex-direction: column; gap: var(--sp-1h); }
.hq-cost-row {
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); padding: var(--sp-2) var(--sp-2h);
  background: rgba(255, 255, 255, 0.02); border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
}
.hq-cost-ico { display: inline-flex; flex: 0 0 auto; }
.hq-cost-ico .cf-ico { width: 15px; height: 15px; }
.hq-cost-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.hq-cost-have { color: var(--dim); font-size: var(--fs-sm); margin-left: -4px; white-space: nowrap; }
.hq-cost-row.short { border-color: rgba(255, 80, 103, 0.45); background: rgba(255, 80, 103, 0.05); }
.hq-cost-row.short b { color: var(--danger); }
.hq-upg { width: 100%; min-height: 42px; }
.hq-reason { font-size: var(--fs-base); color: var(--dim); text-align: center; }
.hq-explain { font-size: var(--fs-sm); color: var(--dim); text-align: center; border-top: var(--bw-hair) dashed var(--line); padding-top: var(--sp-2); }

@media (max-width: 1000px) {
  .hq-shell { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 860px) {
  .hq-shell { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hq-tk { width: 30px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hq-sweep { display: none; }
  .hq-reticle, .hq-radar-beam, .hq-beacon, .hq-bld.can-up .hq-attn,
  .hq-map-wrap.glitch, .hq-bld-core.slam, .hq-bloom { animation: none; }
  .hq-beacon { opacity: 0.6; }
  .hq-bloom { opacity: 0; }
  .hq-fp, .hq-fp-detail, .hq-bld-glyph, .hq-ring, .hq-pip, .map-tip, .hq-blds.has-selection .hq-bld:not(.selected) { transition: none; }
}

.hq-ambient { pointer-events: none; }
.hq-road-approach { stroke: #141e2c; stroke-width: 18; }
.hq-truck { opacity: 0.92; }
.hq-truck-bed { fill: #0e1a29; stroke: rgba(98, 185, 255, 0.5); stroke-width: 1.1; }
.hq-truck-cab { fill: #142438; stroke: rgba(98, 185, 255, 0.65); stroke-width: 1.1; }
.hq-truck-glass { fill: none; stroke: rgba(170, 220, 255, 0.55); stroke-width: 1.2; }
.hq-member-hit { pointer-events: fill; }
.hq-member-dot { fill: rgba(74, 222, 128, 0.32); stroke: rgba(74, 222, 128, 0.75); stroke-width: 0.9; }
.hq-guard-dot { fill: rgba(224, 169, 59, 0.4); stroke: rgba(224, 169, 59, 0.85); stroke-width: 0.9; }
.hq-guard-cone { fill: rgba(224, 169, 59, 0.09); transform-box: fill-box; transform-origin: left center; }
.hq-guard-cone.scan { animation: hqGuardScan 5.4s ease-in-out infinite alternate; }
@keyframes hqGuardScan { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
.hq-map.anim-off * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hq-ambient { display: none; }
}

.aa-root { display: flex; flex-direction: column; gap: var(--sp-4); }
.aa-intro { font-size: var(--fs-md); margin-top: -4px; max-width: 760px; }

.aa-card {
  min-width: 0;
}
.aa-hero {
  background: linear-gradient(180deg, rgba(255, 177, 61, 0.05), transparent 42%), var(--surface);
  border-top: var(--bw-thick) solid var(--accent);
}
.aa-sec { display: flex; flex-direction: column; min-width: 0; }
.aa-head { display: flex; align-items: baseline; gap: var(--sp-2) var(--sp-3h); flex-wrap: wrap; }
.aa-title { font-size: var(--fs-xl); text-transform: uppercase; letter-spacing: 0.07em; }
.aa-desc { color: var(--dim); font-size: var(--fs-base); line-height: 1.5; margin: var(--sp-1) 0 var(--sp-3); max-width: 860px; }
.aa-head-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.35);
  padding: var(--sp-0) var(--sp-2);
  clip-path: var(--clip-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.aa-legend {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--dim);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aa-legend i { width: 11px; height: 11px; border: var(--bw-hair) solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-xs); }
.aa-legend-max { margin-left: var(--sp-0); }
.aa-arrow { width: 10px; height: 10px; fill: currentColor; flex: none; }
.aa-dot { width: 9px; height: 9px; border-radius: var(--radius-xs); flex: none; display: inline-block; }

.aa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.aa-kpi { display: flex; flex-direction: column; gap: var(--sp-1h); }
.aa-kpi-v {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aa-kpi-spark { display: block; }
.aa-kpi-spark svg { display: block; width: 100%; max-width: 150px; height: 30px; }
.aa-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aa-delta.up { color: var(--good); }
.aa-delta.down { color: var(--danger); }
.aa-delta.flat { color: var(--dim); }
.aa-delta-vs { color: var(--dim); font-weight: 500; }

.aa-now { display: flex; align-items: center; gap: var(--sp-3) var(--sp-5h); flex-wrap: wrap; }
.aa-now-stat { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-base); color: var(--dim); white-space: nowrap; }
.aa-now-stat b { font-family: var(--font-display); font-size: var(--fs-6xl); color: var(--text); font-variant-numeric: tabular-nums; }
.aa-now-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  background: var(--good);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
  align-self: center;
  flex: none;
  animation: aa-live 2.2s ease-in-out infinite;
}
@keyframes aa-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.aa-now-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1h); margin-left: auto; }
.aa-now-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: var(--bw-hair) solid var(--line);
  padding: var(--sp-1) var(--sp-2h);
  font-size: var(--fs-base);
  color: var(--dim);
  clip-path: var(--clip-sm);
}
.aa-now-chip b { color: var(--text); font-variant-numeric: tabular-nums; }

.aa-chip-n { font-size: var(--fs-xs); color: var(--dim); font-variant-numeric: tabular-nums; }
.page-tab.active .aa-chip-n { color: rgba(255, 177, 61, 0.8); }

.aa-pulse-wrap { outline: none; }
.aa-pulse-wrap:focus-visible { outline: var(--bw-hair) solid rgba(255, 177, 61, 0.5); outline-offset: 4px; }
.aa-pulse-svg { display: block; width: 100%; max-width: 880px; height: auto; }
.aa-fmx-svg, .aa-cal-svg { display: block; }
.aa-ax { fill: var(--dim); font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: 0.05em; }
.aa-dow-short { display: none; }
.aa-cell { cursor: crosshair; }
.aa-cell:hover, .aa-cell.aa-kbd { stroke: rgba(255, 255, 255, 0.6); stroke-width: 1; }
.aa-cell.aa-now { stroke: var(--accent); stroke-width: 1.5; animation: aa-ring 2.4s ease-in-out infinite; }
@keyframes aa-ring {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.35; }
}

.aa-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; padding-bottom: var(--sp-0); }

.aa-fmx { display: flex; gap: var(--sp-2h); align-items: flex-start; }
.aa-fmx-labels { flex: none; width: 200px; }
.aa-fmx-spacer { height: 18px; }
.aa-fmx-row { display: flex; align-items: center; gap: var(--sp-2); height: 20px; }
.aa-fmx-name { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aa-fmx-sum { margin-left: auto; padding-left: var(--sp-1h); font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; }
.aa-fmx .aa-scroll { flex: 1; }
.aa-trend { display: inline-flex; flex: none; }
.aa-trend.up { color: var(--good); }
.aa-trend.down { color: var(--danger); }
.aa-trend.flat { color: rgba(255, 255, 255, 0.22); }

.aa-cal-hero { display: flex; gap: var(--sp-3) var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-3h); }
.aa-cal-stat { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.aa-cal-stat b { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.aa-cal-stat span { color: var(--dim); font-size: var(--fs-base); }
.aa-cal-svg { display: block; width: 100%; min-width: 620px; height: auto; }

.aa-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); align-items: stretch; }
.aa-chart { margin: 0; padding: 0; background: none; border: none; clip-path: none; }
.aa-ops { display: flex; flex-direction: column; gap: var(--sp-1); }
.aa-ops-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  grid-template-areas:
    'rank name bucket n'
    'rank track track track';
  column-gap: var(--sp-2h);
  row-gap: var(--sp-1h);
  align-items: center;
  padding: var(--sp-2) var(--sp-2);
}
.aa-ops-row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.aa-ops-rank { grid-area: rank; font-family: var(--font-display); font-weight: 700; color: var(--dim); font-size: var(--fs-md); text-align: center; }
.aa-ops-row:first-child .aa-ops-rank { color: var(--accent); }
.aa-ops-name { grid-area: name; font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-ops-bucket {
  grid-area: bucket;
  font-size: var(--fs-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: var(--bw-hair) solid var(--line);
  padding: var(--sp-0) var(--sp-2);
  clip-path: var(--clip-sm);
  white-space: nowrap;
}
.aa-ops-n { grid-area: n; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.aa-ops-track { grid-area: track; height: 4px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.aa-ops-track i { display: block; height: 100%; background: linear-gradient(90deg, rgba(255, 177, 61, 0.45), var(--accent)); }

.aa-ph { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 660px); gap: var(--sp-5); align-items: start; }
.aa-ph-toggle { display: inline-flex; gap: var(--sp-1h); margin-left: auto; }
.aa-ph-cols {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2h);
  font-size: var(--fs-xs);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 var(--sp-2) var(--sp-1h);
}
.aa-ph-colnums, .aa-ph-nums { display: grid; grid-template-columns: repeat(3, 46px); text-align: right; }
.aa-ph-list { display: flex; flex-direction: column; gap: var(--sp-0); max-height: 520px; overflow-y: auto; padding-right: var(--sp-0); min-width: 0; }
.aa-ph-row {
  display: grid;
  grid-template-columns: 96px minmax(36px, 1fr) auto;
  gap: var(--sp-2h);
  align-items: center;
  background: none;
  border: var(--bw-hair) solid transparent;
  color: var(--text);
  padding: var(--sp-1h) var(--sp-2);
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-base);
}
.aa-ph-row:hover { border-color: var(--line); }
.aa-ph-row.active { border-color: rgba(255, 177, 61, 0.5); background: rgba(255, 177, 61, 0.06); }
.aa-ph-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.aa-ph-track { height: 5px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.aa-ph-track i { display: block; height: 100%; background: linear-gradient(90deg, #1d4ed8, #06b6d4); }
.aa-ph-nums { font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; }
.aa-ph-nums b { color: var(--text); font-weight: 600; }
.aa-ph-detail { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.aa-ph-frame { width: 100%; border: var(--bw-hair) solid var(--line); border-radius: var(--radius-md); background: #0c1016; overflow: hidden; }
.aa-ph-frame.mobile { max-width: 400px; margin: 0 auto; }
.aa-ph-bar {
  display: flex; align-items: center; gap: var(--sp-2h); height: 26px; padding: 0 var(--sp-2h);
  background: rgba(255, 255, 255, 0.04); border-bottom: var(--bw-hair) solid var(--line);
}
.aa-ph-dots { display: inline-flex; gap: var(--sp-1h); }
.aa-ph-dots i { width: 7px; height: 7px; border-radius: var(--radius-circle); background: rgba(255, 255, 255, 0.16); }
.aa-ph-url { font-size: var(--fs-sm); color: var(--dim); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-ph-stage { position: relative; overflow: hidden; overflow-y: auto; max-height: 640px; scrollbar-width: thin; scrollbar-gutter: stable; }
.aa-ph-size { position: relative; overflow: hidden; }
.aa-ph-page { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #0e1218; }
.aa-ph-heat { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; transition: opacity var(--dur-slow); }
.aa-ph-heat.off { opacity: 0; }
.aa-ph-meta { font-size: var(--fs-base); }

.aa-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-popover);
  pointer-events: none;
  background: rgba(14, 18, 24, 0.96);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.28);
  clip-path: var(--clip-sm);
  padding: var(--sp-2) var(--sp-3);
  min-width: 110px;
  max-width: 240px;
  opacity: 0;
  transition: opacity var(--dur-instant);
}
.aa-tip.on { opacity: 1; }
.aa-tip-t { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.aa-tip-v { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; margin-top: var(--sp-0); font-variant-numeric: tabular-nums; }
.aa-tip-s { font-size: var(--fs-sm); color: var(--dim); margin-top: var(--sp-0); }

@media (max-width: 860px) {
  .aa-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .aa-duo { grid-template-columns: 1fr; }
  .aa-ph { grid-template-columns: 1fr; }
  .aa-ph-detail { align-items: flex-start; }
  .aa-ph-list { max-height: 320px; }
  .aa-now-chips { margin-left: 0; }
}
@media (max-width: 560px) {
  .aa-card { padding: var(--sp-3); }
  .aa-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
  .aa-kpi-v { font-size: var(--fs-3xl); }
  .aa-now-stat b { font-size: var(--fs-3xl); }
  .aa-cal-stat b { font-size: var(--fs-4xl); }
  .aa-dow-full { display: none; }
  .aa-dow-short { display: initial; }
  .aa-ax-fine { display: none; }
  /* the pulse SVG scales down with the viewport; larger viewBox-unit text keeps labels legible */
  .aa-pulse-svg .aa-ax { font-size: var(--fs-base); }
  .aa-fmx { gap: var(--sp-1h); }
  .aa-fmx-labels { width: 148px; }
  .aa-fmx-name { font-size: var(--fs-sm); }
  .aa-cal-svg { min-width: 560px; }
  .aa-ph-row { grid-template-columns: 76px minmax(24px, 1fr) auto; gap: var(--sp-2); }
  .aa-ph-colnums, .aa-ph-nums { grid-template-columns: repeat(3, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .aa-cell.aa-now, .aa-now-dot { animation: none; }
  .aa-tip { transition: none; }
}

.wp-badge, .wp-ident, .wp-tag, .wp-chip { --wp: #66707f; }
.wp-badge {
  display: grid; place-items: center; width: 30px; height: 32px; flex-shrink: 0;
  color: var(--wp); background: color-mix(in srgb, var(--wp) 12%, transparent);
  border: var(--bw-hair) solid color-mix(in srgb, var(--wp) 45%, var(--line));
  clip-path: var(--clip-sm);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wp) 35%, transparent));
}
.wp-badge .cf-ico { width: 18px; height: 18px; }
.wp-ident {
  color: var(--wp); font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-lg); letter-spacing: 0.14em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--wp) 45%, transparent);
}
.wp-progress { display: inline-flex; align-items: center; gap: var(--sp-2h); margin-top: var(--sp-0); }
.wp-pips { display: inline-flex; align-items: center; gap: var(--sp-1h); }
.wp-pip {
  width: 9px; height: 9px; flex-shrink: 0; transform: rotate(45deg); border-radius: var(--radius-xs);
  border: var(--bw-hair) solid var(--dim); background: transparent;
}
.wp-pip.win { border-color: #2ee6a8; background: #2ee6a8; box-shadow: 0 0 7px rgba(46, 230, 168, 0.55); }
.wp-pip.loss { border-color: #ff5067; background: #ff5067; box-shadow: 0 0 7px rgba(255, 80, 103, 0.45); }
.wp-pip.pending { opacity: 0.55; }
.wp-count {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800;
  color: var(--dim); letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
}
.wp-tag, .wp-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-0) var(--sp-2h) var(--sp-0) var(--sp-2);
  border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0;
  color: var(--wp); border: var(--bw-hair) solid color-mix(in srgb, var(--wp) 45%, transparent);
  background: color-mix(in srgb, var(--wp) 10%, transparent);
}
.wp-tag .cf-ico, .wp-chip .cf-ico { width: 12px; height: 12px; flex-shrink: 0; }
.wp-tag-label, .wp-chip-label {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em;
}
.wp-codex-row .wp-codex-note { grid-column: span 2; color: var(--dim); font-size: var(--fs-base); }

.hm-embed { pointer-events: none; }
.hm-embed body { overflow: hidden; }
.hm-embed main.view { overflow-y: visible; }
.hm-embed .topbar { position: static; }
.hm-embed ::-webkit-scrollbar { display: none; }

.rr-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-reveal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(9, 11, 16, 0.84) 0%, rgba(4, 5, 8, 0.96) 58%, #020306 100%);
  cursor: pointer;
  overflow: hidden;
  animation: rr-fade-in 0.35s ease-out both;
}

.rr-overlay.rr-demote {
  background: radial-gradient(ellipse at center, rgba(11, 13, 19, 0.88) 0%, rgba(5, 6, 10, 0.97) 55%, #04050a 100%);
}

.rr-overlay.rr-out {
  opacity: 0;
  transition: opacity var(--dur-slower) ease;
  pointer-events: none;
}

.rr-embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
}

.rr-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--sp-4h);
}

.rr-fx {
  position: absolute;
  left: 50%;
  top: 97px;
  width: 0;
  height: 0;
  pointer-events: none;
}

.rr-rays {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  width: min(120vmin, 840px);
  height: min(120vmin, 840px);
  background: repeating-conic-gradient(from 0deg,
    transparent 0deg 9deg,
    color-mix(in srgb, var(--rr-hue) 34%, transparent) 12.5deg 15.5deg,
    transparent 19deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 34%, transparent 66%);
  mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.55) 34%, transparent 66%);
  opacity: 0.8;
  animation: rr-rays-in 1s ease-out both, rr-spin 26s linear infinite;
}

.rr-rays2 {
  opacity: 0.4;
  width: min(96vmin, 660px);
  height: min(96vmin, 660px);
  animation: rr-rays-in 1.25s ease-out both, rr-spin-rev 40s linear infinite;
}

.rr-demote .rr-rays {
  opacity: 0.22;
  filter: saturate(0.15) brightness(0.55);
  animation-duration: 1.4s, 52s;
}

.rr-demote .rr-rays2 {
  opacity: 0.12;
}

.rr-bloom {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  width: min(70vmin, 460px);
  height: min(70vmin, 460px);
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, color-mix(in srgb, var(--rr-hue) 30%, transparent) 0%, transparent 68%);
  animation: rr-rays-in 0.9s ease-out both, rr-bloom-pulse 3.2s ease-in-out 1s infinite;
}

.rr-demote .rr-bloom {
  background: radial-gradient(circle, rgba(120, 130, 148, 0.16) 0%, transparent 66%);
  animation: rr-rays-in 1.2s ease-out both;
}

.rr-crest {
  position: relative;
  z-index: 1;
  animation: rr-crest-pop 0.65s cubic-bezier(0.3, 0.7, 0.35, 1) 0.13s both;
}

.rr-demote .rr-crest {
  animation: rr-crest-drop 0.55s cubic-bezier(0.32, 0.72, 0.3, 1) 0.1s both;
}

.rr-crest-fit {
  position: relative;
}

.rr-landed .rr-crest-fit .tier-crest {
  animation: rr-glow 2.4s ease-in-out infinite;
}

.rr-demote.rr-landed .rr-crest-fit .tier-crest {
  animation: none;
}

.rr-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 250px;
  height: 250px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, color-mix(in srgb, var(--rr-hue) 42%, transparent) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.rr-landed .rr-halo {
  animation: rr-halo-pulse 2.2s ease-out infinite;
}

.rr-demote .rr-halo {
  background: radial-gradient(circle, rgba(140, 150, 165, 0.3) 0%, transparent 70%);
}

.rr-demote.rr-landed .rr-halo {
  animation: rr-halo-flash 0.8s ease-out both;
}

.rr-cracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.rr-landed .rr-cracks {
  animation: rr-crack-flash 1s ease-out both;
}

.rr-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rr-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--rr-hue) 65%, #fff);
  box-shadow: 0 0 8px var(--rr-hue);
  animation: rr-spark-fly 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) var(--sd, 0ms) both;
}

.rr-text {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-5h);
  text-align: center;
}

.rr-banner {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-7xl), 6vw, 54px);
  font-weight: 700;
  letter-spacing: 0.14em;
  background-image: linear-gradient(110deg,
    #cfd6e2 0%, #cfd6e2 42%,
    #ffffff 50%,
    color-mix(in srgb, var(--rr-hue) 55%, #fff) 53%,
    #cfd6e2 62%, #cfd6e2 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rr-banner-in 0.55s ease-out 0.5s both, rr-shimmer 2.8s linear 1.15s infinite;
}

.rr-demote .rr-banner {
  background-image: linear-gradient(110deg,
    #8f7f83 0%, #8f7f83 42%,
    #c9b3b8 51%,
    #8f7f83 60%, #8f7f83 100%);
  animation: rr-banner-in 0.7s ease-out 0.55s both, rr-shimmer 4.5s linear 1.4s infinite;
}

.rr-tiername {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 3.4vw, var(--fs-6xl));
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-shadow: 0 0 18px color-mix(in srgb, var(--rr-hue) 45%, transparent);
  animation: rr-rise 0.5s ease-out 0.72s both;
}

.rr-demote .rr-tiername {
  filter: saturate(0.4) brightness(0.85);
  text-shadow: none;
}

.rr-sub {
  margin-top: var(--sp-2h);
  color: var(--dim);
  font-size: var(--fs-md);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: rr-rise 0.5s ease-out 0.88s both;
}

.rr-hint {
  position: absolute;
  bottom: 26px;
  left: 0;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: var(--fs-base);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: rr-fade 0.8s ease 2.4s both;
}

@keyframes rr-fade-in {
  from { opacity: 0; }
}

@keyframes rr-fade {
  from { opacity: 0; }
}

@keyframes rr-spin {
  to { rotate: 360deg; }
}

@keyframes rr-spin-rev {
  to { rotate: -360deg; }
}

@keyframes rr-rays-in {
  from { opacity: 0; scale: 0.7; }
}

@keyframes rr-bloom-pulse {
  0%, 100% { opacity: 0.75; scale: 1; }
  50% { opacity: 1; scale: 1.08; }
}

@keyframes rr-crest-pop {
  0% { scale: 0.3; opacity: 0; }
  62% { scale: 1.08; opacity: 1; }
  82% { scale: 0.98; }
  100% { scale: 1; }
}

@keyframes rr-crest-drop {
  0% { translate: 0 -80px; scale: 1.05; opacity: 0; }
  55% { translate: 0 16px; opacity: 1; }
  75% { translate: 0 6px; }
  100% { translate: 0 12px; scale: 0.97; }
}

@keyframes rr-glow {
  0%, 100% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rr-hue) 60%, transparent)); }
  50% { filter: drop-shadow(0 0 26px var(--rr-hue)); }
}

@keyframes rr-halo-pulse {
  0% { opacity: 0.9; scale: 0.7; }
  70% { opacity: 0; scale: 1.25; }
  100% { opacity: 0; scale: 1.25; }
}

@keyframes rr-halo-flash {
  0% { opacity: 0.8; scale: 0.8; }
  100% { opacity: 0; scale: 1.2; }
}

@keyframes rr-crack-flash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  40% { opacity: 0.55; }
  100% { opacity: 0.18; }
}

@keyframes rr-spark-fly {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}

@keyframes rr-banner-in {
  from { opacity: 0; translate: 0 16px; letter-spacing: 0.3em; }
}

@keyframes rr-rise {
  from { opacity: 0; translate: 0 12px; }
}

@keyframes rr-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (max-width: 480px) {
  .rr-crest-fit { scale: 0.78; }
  .rr-tiername { letter-spacing: 0.2em; }
  .rr-text { margin-top: var(--sp-3); }
  .rr-hint { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .rr-overlay, .rr-overlay * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .rr-overlay { animation: rr-fade-in 0.3s ease both !important; }
  .rr-embers, .rr-sparks, .rr-halo, .rr-cracks { display: none; }
}


.hd-lobby { max-width: 1080px; }

.hd-open { display: flex; align-items: stretch; gap: var(--sp-5); flex-wrap: wrap; }
.hd-open-buyin { flex: 1 1 230px; min-width: 210px; display: flex; flex-direction: column; }
.hd-open-buyin .money-field { flex: 1 1 auto; }
.hd-open-buyin .money-field input { width: 100%; font-size: var(--fs-2xl); }
.hd-open-size { flex: 0 1 auto; display: flex; flex-direction: column; }
.hd-open-go { display: flex; align-items: stretch; margin-left: auto; }
.hd-open-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); min-width: 200px; white-space: nowrap;
}
.hd-open-btn-main { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hd-open-sum {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  opacity: 0.85; font-variant-numeric: tabular-nums;
}

.hd-seat-picker { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hd-seat-pick {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.28));
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3) var(--sp-1h);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base), transform var(--dur-fast);
}
.hd-seat-pick:hover { border-color: rgba(255, 210, 77, 0.4); transform: translateY(-1px); }
.hd-seat-pick:focus-visible { outline: var(--bw-thick) solid #ffd24d; outline-offset: 2px; }
.hd-seat-pick.sel {
  border-color: rgba(255, 210, 77, 0.75);
  background: linear-gradient(180deg, rgba(255, 210, 77, 0.1), rgba(255, 210, 77, 0.03));
  box-shadow: 0 0 14px rgba(255, 210, 77, 0.22), inset 0 0 10px rgba(255, 210, 77, 0.05);
}
.hd-pick-svg { display: block; width: 64px; height: 40px; }
.hd-pick-svg svg { display: block; width: 100%; height: 100%; }
.hd-pick-rail { fill: none; stroke: #43301d; stroke-width: 3; }
.hd-pick-felt { fill: #14351f; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.hd-seat-pick.sel .hd-pick-rail { stroke: #5a3f24; }
.hd-seat-pick.sel .hd-pick-felt { fill: #175232; stroke: rgba(255, 210, 77, 0.35); }
.hd-pick-c { fill: #74839a; }
.hd-seat-pick.sel .hd-pick-c { fill: #dfe9f5; }
.hd-pick-c.you, .hd-seat-pick.sel .hd-pick-c.you { fill: #ffd24d; }
.hd-pick-label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.5px; color: #8d9aa5; }
.hd-seat-pick.sel .hd-pick-label { color: #ffd24d; }

.hd-list-head { margin-top: var(--sp-5); }
.hd-cardgrid { margin-top: var(--sp-0); }
.hd-card { position: relative; gap: var(--sp-3); padding: var(--sp-3h); overflow: hidden; }
.hd-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 77, 0.45), transparent);
  opacity: 0; transition: opacity var(--dur-mid);
}
.hd-card:hover::before { opacity: 1; }
.hd-card.mine { border-color: rgba(255, 177, 61, 0.35); }
.hd-card-top { display: flex; align-items: center; gap: var(--sp-2h); min-width: 0; }
.hd-card-id { display: flex; align-items: center; gap: var(--sp-1h); min-width: 0; flex: 1 1 auto; }
.hd-card-name { font-size: var(--fs-lg); min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-live {
  display: inline-flex; align-items: center; gap: var(--sp-1h); flex: 0 0 auto;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: #7ef0a5; background: rgba(74, 222, 128, 0.1); border: var(--bw-hair) solid rgba(74, 222, 128, 0.35);
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill);
}
.hd-live-dot { width: 6px; height: 6px; border-radius: var(--radius-circle); background: #4ade80; animation: hd-live-pulse 1.6s ease-in-out infinite; }
@keyframes hd-live-pulse { 50% { opacity: 0.35; } }
.hd-open-tag {
  flex: 0 0 auto;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); background: rgba(255, 177, 61, 0.08); border: var(--bw-hair) solid rgba(255, 177, 61, 0.3);
  padding: var(--sp-1) var(--sp-2h); border-radius: var(--radius-pill);
}
.hd-card-mid {
  display: flex; align-items: center; gap: var(--sp-3h);
  background: rgba(0, 0, 0, 0.22); border: var(--bw-hair) solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg); padding: var(--sp-2h) var(--sp-3);
}
.hd-mini { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h); }
.hd-mini-svg { display: block; width: 72px; height: 46px; }
.hd-mini-svg svg { display: block; width: 100%; height: 100%; }
.hd-mini-rail { fill: none; stroke: #43301d; stroke-width: 3.4; }
.hd-mini-felt { fill: #14351f; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.hd-mini-dot { fill: rgba(255, 255, 255, 0.16); }
.hd-mini-dot.on { fill: #ffd24d; }
.hd-card-stake { display: flex; flex-direction: column; gap: var(--sp-0); margin-left: auto; align-items: flex-end; }
.hd-card-stake-cap { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--dim); }
.hd-card-actions { min-width: 0; flex-wrap: wrap; }
.hd-card-actions .btn { white-space: nowrap; }
.hd-join { width: 100%; }
.hd-full-tag {
  text-align: center; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dim); border: var(--bw-hair) dashed var(--line); border-radius: var(--radius-md); padding: var(--sp-2h) 0;
}

.hd-table.waiting { background: linear-gradient(180deg, #151b26 0%, #0d1118 100%); }
.hd-table.waiting .hd-table-foot { border-top: var(--bw-hair) solid rgba(255, 255, 255, 0.05); padding-top: var(--sp-2h); }
.hd-wait { text-align: center; padding: var(--sp-5h) var(--sp-2h) var(--sp-2h); }
.hd-wait-line { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.hd-wait-shimmer {
  background: linear-gradient(100deg, #66707e 25%, #ffe9b0 45%, #ffd24d 50%, #ffe9b0 55%, #66707e 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hd-shimmer 2.8s linear infinite;
}
@keyframes hd-shimmer { from { background-position: 200% 0; } to { background-position: 0% 0; } }
.hd-wait-sub { color: #8d9aa5; font-size: var(--fs-base); margin-top: var(--sp-1h); letter-spacing: 0.4px; }
.hd-wait-felt {
  position: relative;
  width: min(600px, calc(100% - 96px));
  aspect-ratio: 2 / 1;
  /* Seats ride the rail at 46% of the felt height while the centred plaque is a
     fixed pixel height, so below this floor they would collide. It only binds
     under ~590px of viewport, where the 2/1 ratio alone runs out of height. */
  min-height: 240px;
  margin: var(--sp-7) auto 56px;
  border-radius: var(--radius-circle);
  border: 8px solid #43301d;
  background: radial-gradient(ellipse at 50% 30%, #22683c 0%, #175232 42%, #0f3a23 78%, #0a2b1a 100%);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    inset 0 -18px 40px rgba(0, 0, 0, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.45);
}
.hd-wait-felt::before {
  content: ''; position: absolute; inset: 6%; border-radius: var(--radius-circle);
  border: var(--bw-hair) solid rgba(255, 210, 77, 0.13);
  pointer-events: none;
}
.hd-felt-mark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  opacity: 0.08; pointer-events: none;
}
.hd-felt-mark-ico { width: 104px; height: 104px; color: #ffffff; display: block; }
.hd-felt-mark-text { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-md); letter-spacing: 7px; color: #ffffff; text-indent: 7px; }
.hd-wait-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0);
}
.hd-chips { display: block; width: 44px; height: 42px; margin-bottom: var(--sp-1h); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.hd-chips svg { display: block; width: 100%; height: 100%; }
.hd-chip-side { fill: #8a5a12; }
.hd-chip-top { fill: #c98f1f; }
.hd-chip-ring { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.4; stroke-dasharray: 3 3; }
.hd-chip.c2 .hd-chip-side { fill: #9c6a15; }
.hd-chip.c2 .hd-chip-top { fill: #daa32c; }
.hd-chip.c3 .hd-chip-side { fill: #b07d1a; }
.hd-chip.c3 .hd-chip-top { fill: #ffd24d; }
.hd-wait-stake {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-7xl); line-height: 1.05; letter-spacing: 0.5px;
  color: #ffd24d; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 210, 77, 0.25);
}
.hd-wait-stake-cap { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255, 233, 176, 0.65); }
.hd-wait-seats { position: absolute; inset: 0; }
.hd-wait-seat {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h);
  width: 168px;
}
button.hd-wait-seat { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; }
.hd-wait-puck {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--radius-circle);
  background: linear-gradient(180deg, #1c2430, #0d1219);
  border: var(--bw-thick) solid rgba(255, 210, 77, 0.55);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 3px rgba(0, 0, 0, 0.4);
}
.hd-wait-seat.host .hd-wait-puck {
  border-color: #ffd24d;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 210, 77, 0.25), inset 0 0 0 3px rgba(0, 0, 0, 0.4);
}
.hd-wait-name {
  display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 166px;
  background: rgba(8, 12, 18, 0.85); border: var(--bw-hair) solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-2h);
  font-size: var(--fs-base);
}
.hd-wait-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-wait-socket {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-circle);
  border: var(--bw-thick) dashed rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.28);
  color: #74839a;
  transition: border-color var(--dur-base), color var(--dur-base);
  animation: hd-socket-pulse 2.6s ease-in-out infinite;
}
.hd-socket-plus { width: 16px; height: 16px; display: block; }
@keyframes hd-socket-pulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.18); color: #74839a; box-shadow: 0 0 0 0 rgba(255, 210, 77, 0); }
  50% { border-color: rgba(255, 210, 77, 0.5); color: #ffd24d; box-shadow: 0 0 14px 0 rgba(255, 210, 77, 0.12); }
}
.hd-wait-seats > :nth-child(2) .hd-wait-socket { animation-delay: 0.3s; }
.hd-wait-seats > :nth-child(3) .hd-wait-socket { animation-delay: 0.6s; }
.hd-wait-seats > :nth-child(4) .hd-wait-socket { animation-delay: 0.9s; }
.hd-wait-seats > :nth-child(5) .hd-wait-socket { animation-delay: 1.2s; }
.hd-wait-open-lbl {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #74839a;
  background: rgba(8, 12, 18, 0.7); border-radius: var(--radius-pill); padding: var(--sp-0) var(--sp-2);
  transition: color var(--dur-base);
}
button.hd-wait-seat.open:hover .hd-wait-socket { border-style: solid; border-color: #ffd24d; color: #ffd24d; animation: none; }
button.hd-wait-seat.open:hover .hd-wait-open-lbl { color: #ffd24d; }
button.hd-wait-seat.open:focus-visible { outline: var(--bw-thick) solid #ffd24d; outline-offset: 4px; border-radius: var(--radius-xl); }
.hd-wait-cta { display: flex; justify-content: center; margin-top: var(--sp-1h); }
.hd-invite-btn { min-width: 210px; }

.hd-rebuy { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2h); padding: var(--sp-4) var(--sp-3h); text-align: center; }
.hd-rebuy-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.hd-rebuy-head b {
  font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: 2.5px;
  color: #ff8a8a; text-shadow: 0 0 18px rgba(235, 75, 75, 0.35);
}
.hd-rebuy-count { font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.6px; color: #ffd24d; font-variant-numeric: tabular-nums; }
.hd-rebuy-count.low { color: #ff8a8a; animation: hd-live-pulse 1s ease-in-out infinite; }
.hd-rebuy-sub { font-size: var(--fs-md); max-width: 460px; }
.hd-rebuy-actions { display: flex; gap: var(--sp-2h); flex-wrap: wrap; justify-content: center; }
.hd-seat-busted { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #ff8a8a; }
.hd-admin-close {
  display: inline-flex; align-items: center; gap: var(--sp-1h);
  border: var(--bw-hair) dashed rgba(235, 75, 75, 0.5); background: rgba(235, 75, 75, 0.07); color: #ff8a8a;
}
.hd-admin-close:hover { background: rgba(235, 75, 75, 0.16); border-color: rgba(235, 75, 75, 0.85); color: #ffb4b4; }

@media (max-width: 860px) {
  .hd-open { gap: var(--sp-4); }
  .hd-open-go { margin-left: 0; flex: 1 1 auto; }
  .btn.big.hd-open-btn { width: 100%; min-width: 0; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .hd-wait-felt { width: min(520px, calc(100% - 64px)); }
  .hd-wait-seat { width: 142px; }
  .hd-wait-name { max-width: 140px; font-size: var(--fs-sm); }
}
@media (max-width: 480px) {
  .hd-wait { padding: var(--sp-4h) 0 var(--sp-2); }
  .hd-wait-line { font-size: var(--fs-lg); letter-spacing: 1.5px; }
  .hd-wait-felt { width: calc(100% - 56px); aspect-ratio: 1.6 / 1; min-height: 218px; margin: var(--sp-6) auto 52px; border-width: 6px; }
  .hd-wait-stake { font-size: var(--fs-5xl); }
  /* Tighter tracking keeps the caption clear of the side seats on a felt this
     narrow; at 2.5px it runs under the seat pills on 3- and 5-seat tables. */
  .hd-wait-stake-cap { letter-spacing: 1.5px; }
  .hd-chips { width: 34px; height: 33px; }
  .hd-felt-mark-ico { width: 68px; height: 68px; }
  .hd-felt-mark-text { font-size: var(--fs-xs); letter-spacing: 4px; text-indent: 4px; }
  .hd-wait-puck { width: 44px; height: 44px; }
  .hd-wait-socket { width: 40px; height: 40px; }
  .hd-wait-seat { width: 106px; }
  .hd-wait-name { max-width: 104px; padding: var(--sp-0) var(--sp-2); font-size: var(--fs-xs); }
  .hd-invite-btn { width: 100%; }
  .hd-open-buyin, .hd-open-size { flex: 1 1 100%; min-width: 0; }
  .hd-rebuy-actions { width: 100%; }
  .hd-rebuy-actions .btn { flex: 1 1 auto; }
}


.money-field {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: #0a0e14; border: var(--bw-hair) solid var(--line); clip-path: var(--clip-sm);
  padding: 0 var(--sp-1) 0 var(--sp-3h);
  transition: border-color var(--dur-base);
}
.money-field:focus-within { border-color: rgba(255, 177, 61, 0.5); }
.money-field .money-cur { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); color: var(--accent); }
.money-field input {
  background: none; border: none; clip-path: none; outline: none; box-shadow: none;
  width: 130px; min-width: 0; padding: var(--sp-2h) var(--sp-2h) var(--sp-2h) var(--sp-0);
  font-size: var(--fs-xl); font-weight: 700; color: #ffe9b0; font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
  .money-field.grow { flex: 1 1 auto; }
  .money-field.grow input { flex: 1 1 60px; width: auto; }
}

.evt-system { display: inline-flex; align-items: center; gap: var(--sp-1h); font-weight: 600; font-size: var(--fs-md); }
.id-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1h);
  min-width: 0;
}
.id-row > .avatar,
.id-row > .rank-badge,
.id-row > .level-badge,
.id-row > .clan-tag-color,
.id-row > .badge,
.id-row > .pill { flex: none; }

.id-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  text-align: left;
}
button.id-name {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}
.id-name.static { cursor: default; color: var(--text); text-decoration: none; }

button.id-row {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
button.id-row:hover .id-name { color: var(--accent); }

.id-row.id-xs { gap: var(--sp-1); font-size: var(--fs-base); }
.id-row.id-sm { font-size: var(--fs-md); }
.id-row.id-lg { gap: var(--sp-2); font-size: var(--fs-2xl); }
.id-row.id-xl { gap: var(--sp-2h); font-size: var(--fs-3xl); }

@media (max-width: 560px) {
  .id-row.id-xl { gap: var(--sp-2); font-size: var(--fs-2xl); }
}
.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  padding: var(--sp-1h) var(--sp-2h);
  border: var(--bw-hair) solid color-mix(in srgb, var(--rc, var(--dim)) 45%, transparent);
  clip-path: var(--clip-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc, var(--dim)) 18%, transparent), transparent);
  font-size: var(--fs-md);
  white-space: nowrap;
  min-width: 0;
}
.metric-chip .cf-ico { width: 14px; height: 14px; color: var(--rc, var(--dim)); flex: none; }
.metric-chip b { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-chip-label { color: var(--dim); font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.metric-chip.sm { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-base); gap: var(--sp-1); }
.metric-chip.sm .cf-ico { width: 12px; height: 12px; }
.metric-chip.lg { padding: var(--sp-2) var(--sp-3h); font-size: var(--fs-2xl); }
.metric-chip.lg .cf-ico { width: 17px; height: 17px; }
.metric-chip.zero { opacity: 0.45; }
.metric-chip-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }

.amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amount .cf-ico { color: var(--accent); }
.amount.up { color: var(--good); }
.amount.down { color: var(--danger); }

.countdown { font-variant-numeric: tabular-nums; white-space: nowrap; }
.countdown.done { color: var(--dim); }

.cooldown-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  padding: var(--sp-1) var(--sp-2h);
  background: var(--raised);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  color: var(--dim);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cooldown-pill .cf-ico { width: 12px; height: 12px; flex: none; }
.cooldown-pill.ready {
  background: var(--accent-fill);
  border-color: var(--accent-line);
  color: var(--accent);
}
.meter {
  position: relative;
  height: var(--meter-h, var(--sp-1h));
  background: var(--sunken);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 0;
}
.meter-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--mc, linear-gradient(90deg, var(--accent), var(--accent2)));
  transition: width var(--dur-mid) linear;
}
.meter-fill.urgent { background: var(--danger); }

.avail-bar,
.tbar-track,
.db-table-meter {
  display: block;
  overflow: hidden;
  border: 0;
  min-width: 0;
}
.avail-bar > *,
.tbar-track > *,
.db-table-meter > * {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.avail-bar { height: 8px; border-radius: var(--radius-xs); background: rgba(255, 80, 103, 0.35); }
.avail-bar > .avail-fill,
.avail-bar > .meter-fill { background: linear-gradient(90deg, var(--good), #2fae5e); }
.tbar-track { flex: 1; height: 9px; border-radius: var(--radius-sm); background: var(--raised); }
.tbar-track > .tbar-fill,
.tbar-track > .meter-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.db-table-meter { width: 100%; height: 3px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, 0.06); }
.db-table-meter > .db-table-fill,
.db-table-meter > .meter-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .meter-fill { transition: none; }
}
.kv-list { display: flex; flex-direction: column; gap: var(--sp-1h); min-width: 0; }
.kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
}
.kv-list .kv-row + .kv-row { border-top: var(--bw-hair) solid var(--line); padding-top: var(--sp-1h); }
.kv-k {
  display: inline-flex;
  align-items: center;
  color: var(--dim);
  font-size: var(--fs-md);
  min-width: 0;
}
.kv-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kpi-min, 150px), 1fr));
  gap: var(--sp-3);
  min-width: 0;
}

.lb-table td.empty-note { padding: var(--sp-6) var(--sp-4); }
.lb-table .id-row { min-width: 0; }

@media (max-width: 560px) {
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
}
.skeleton {
  background: linear-gradient(90deg, var(--raised) 0%, #1c2531 50%, var(--raised) 100%);
  background-size: 200% 100%;
  animation: skeleton-sweep 1.2s linear infinite;
  clip-path: var(--clip-sm);
  flex: none;
}
.skeleton.round { border-radius: var(--radius-circle); clip-path: none; }
@keyframes skeleton-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.skeleton-stack { display: flex; flex-direction: column; gap: var(--sp-2h); }
.skeleton-row { display: flex; align-items: center; gap: var(--sp-2h); }
.skeleton-row .skeleton:nth-child(2) { flex: 1 1 auto; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-3); }

.empty-note.error { color: var(--danger); }
.trunc-note { font-size: var(--fs-base); margin: var(--sp-1) 0 var(--sp-2); }

.dialog { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
/* Explicit gap, not the .cf-ico-in margin: the title is a bare text node, so the
   icon counts as :only-child and icon-sweep.css zeroes that margin. */
.dialog-title { display: flex; align-items: center; gap: var(--sp-2); }
.dialog-sub { color: var(--dim); line-height: var(--lh-normal); }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
.notif-from { display: block; margin-top: var(--sp-0); color: var(--dim); font-size: var(--fs-sm); }

.ntf-field { display: flex; flex-direction: column; gap: var(--sp-1h); }
.ntf-field-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.ntf-field-head .panel-label { margin: 0; }
.ntf-count { margin-left: auto; font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; }
.ntf-count.near { color: var(--accent); }
.ntf-field textarea { resize: vertical; min-height: 92px; }

.ntf-warn {
  display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-md); line-height: var(--lh-normal);
  color: var(--text); padding: var(--sp-3); border-radius: var(--radius-lg);
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.35); background: rgba(255, 80, 103, 0.08);
}
.ntf-warn .cf-ico { flex: none; width: 16px; height: 16px; color: var(--danger); }

.ntf-gate { align-self: flex-start; }
html.cf-banner-on { --banner-h: calc(56px + env(safe-area-inset-top, 0px)); }

.cf-banner {
  --bnr: var(--teal);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--banner-h);
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding:
    env(safe-area-inset-top, 0px)
    max(var(--sp-4), env(safe-area-inset-right))
    0
    max(var(--sp-4), env(safe-area-inset-left));
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--bnr) 7%, transparent) 9px 10px),
    linear-gradient(90deg,
      color-mix(in srgb, var(--bnr) 20%, var(--sunken)),
      color-mix(in srgb, var(--bnr) 7%, var(--sunken)) 45%,
      var(--sunken));
  border-bottom: var(--bw-thick) solid var(--bnr);
  box-shadow: var(--shadow-md);
}
.cf-banner-warning { --bnr: var(--accent); }
.cf-banner-alert { --bnr: var(--accent2); }
.cf-banner-danger { --bnr: var(--danger); }

.cf-banner-ico {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--bnr);
  background: color-mix(in srgb, var(--bnr) 15%, transparent);
  border: var(--bw-hair) solid color-mix(in srgb, var(--bnr) 45%, transparent);
  clip-path: var(--clip-sm);
}
.cf-banner-ico .cf-ico { width: 15px; height: 15px; }

.cf-banner-tag {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bnr);
}
.cf-banner-sep {
  flex: none;
  width: var(--bw-hair);
  height: 18px;
  background: color-mix(in srgb, var(--bnr) 40%, transparent);
}

.cf-banner-msg {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cf-banner-x { flex: none; color: var(--dim); }
.cf-banner-x:hover { color: var(--text); }

.cf-banner-preview {
  position: static;
  height: auto;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  z-index: auto;
  box-shadow: none;
  border-top: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
}

.sb-controls { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.sb-controls input[type='text'] { flex: 1; min-width: 220px; }
.sb-preview { display: flex; flex-direction: column; }

@media (max-width: 860px) {
  html.cf-banner-on { --banner-h: calc(72px + env(safe-area-inset-top, 0px)); }
  .cf-banner { gap: var(--sp-2h); padding-left: max(var(--sp-3), env(safe-area-inset-left)); padding-right: max(var(--sp-3), env(safe-area-inset-right)); }
  .cf-banner-msg { font-size: var(--fs-sm); -webkit-line-clamp: 3; }
}

@media (max-width: 560px) {
  .cf-banner-tag,
  .cf-banner-sep { display: none; }
}
.mn-open { flex-shrink: 0; }
.mn-open .cf-ico { width: 13px; height: 13px; margin-right: 0; color: var(--dim); }
.mn-open:hover .cf-ico { color: var(--text); }

.mn { display: flex; flex-direction: column; gap: var(--sp-5); }
.mn-head { padding-right: var(--sp-6); }
.mn-title {
  font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 800; letter-spacing: 0.14em;
  color: var(--accent); text-shadow: 0 0 18px rgba(255, 177, 61, 0.3);
}
.mn-sub { font-size: var(--fs-md); max-width: 620px; margin-top: var(--sp-1); line-height: 1.5; }

.mn-group { display: flex; flex-direction: column; gap: var(--sp-3h); padding-top: var(--sp-4); border-top: var(--bw-hair) solid var(--line); }
.mn-group-head { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.mn-group-glyph { display: inline-flex; color: var(--mn); }
.mn-group-glyph .cf-ico { width: 16px; height: 16px; }
.mn-group-label { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mn); }
.mn-group-stat {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; padding: var(--sp-0) var(--sp-2h); border-radius: var(--radius-pill);
  color: var(--dim); border: var(--bw-hair) solid var(--line); background: rgba(255, 255, 255, 0.03);
}
.mn-group-hint { font-size: var(--fs-base); margin-top: -8px; max-width: 560px; line-height: 1.5; }

.mn-row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.mn-row.mn-row-plain { grid-template-columns: minmax(0, 1fr); }
.mn-info { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mn-game-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mn-goal { font-size: var(--fs-md); line-height: var(--lh-normal); color: color-mix(in srgb, var(--text) 90%, transparent); }
.mn-goal b {
  display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; color: var(--mn);
  border: var(--bw-hair) solid color-mix(in srgb, var(--mn) 45%, transparent); background: color-mix(in srgb, var(--mn) 10%, transparent);
  border-radius: var(--radius-xs); padding: var(--sp-0) var(--sp-1h); margin-right: var(--sp-2); vertical-align: 1px;
}
.mn-tips { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1h); }
.mn-tips li { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--dim); }
.mn-tips li::marker { color: var(--mn); }

.mn-demo {
  position: relative; overflow: hidden; aspect-ratio: 280 / 180; clip-path: var(--clip-sm);
  border: var(--bw-hair) solid color-mix(in srgb, var(--mn) 30%, var(--line));
  background: radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--mn) 9%, transparent), transparent 60%), #070a0f;
}
/* !important because demo rules set the animation shorthand at up to three
   classes deep, which resets play-state and would outrank any plain gate. */
.mn-demo.mn-paused, .mn-demo.mn-paused *, .mn-demo.mn-paused::before, .mn-demo.mn-paused::after { animation-play-state: paused !important; }

.mn-block { display: flex; flex-direction: column; gap: var(--sp-2h); padding-top: var(--sp-4); border-top: var(--bw-hair) solid var(--line); }
.mn-block-label { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mn); }
.mn-note { font-size: var(--fs-base); color: var(--dim); line-height: var(--lh-normal); max-width: 620px; }
.mn-prose { display: flex; flex-direction: column; gap: var(--sp-2); }
.mn-prose p { font-size: var(--fs-md); line-height: 1.6; color: color-mix(in srgb, var(--text) 88%, transparent); max-width: 700px; }
.mn-prose p em { color: var(--mn); font-style: normal; font-weight: 700; }

.mn-table-wrap { overflow-x: auto; }
.mn-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.mn-table th {
  text-align: left; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim); padding: var(--sp-1h) var(--sp-2h);
  border-bottom: var(--bw-hair) solid color-mix(in srgb, var(--mn) 35%, var(--line)); white-space: nowrap;
}
.mn-table td { padding: var(--sp-1h) var(--sp-2h); border-bottom: var(--bw-hair) solid var(--line); color: var(--text); }
.mn-table td.num { font-family: var(--font-mono); color: var(--dim); }
.mn-table tr:last-child td { border-bottom: 0; }
.mn-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.mn-table .mn-cell-lead { font-weight: 700; white-space: nowrap; }
.mn-table .mn-hi td { color: var(--mn); }

.mn-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2h); counter-reset: mnstep; }
.mn-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-2h); align-items: start; }
.mn-step-n {
  counter-increment: mnstep; display: grid; place-items: center; width: 26px; height: 26px;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800; color: var(--mn);
  border: var(--bw-hair) solid color-mix(in srgb, var(--mn) 45%, transparent);
  background: color-mix(in srgb, var(--mn) 10%, transparent); border-radius: var(--radius-circle);
}
.mn-step-n::before { content: counter(mnstep); }
.mn-step-body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-0); }
.mn-step-head { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mn-step-text { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--dim); }

.mn-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); }
.mn-key-row {
  display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-1h) var(--sp-2h);
  background: rgba(255, 255, 255, 0.02); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-sm);
}
.mn-key-caps { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.mn-cap {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--text);
  min-width: 22px; text-align: center; padding: var(--sp-0) var(--sp-1h);
  border: var(--bw-hair) solid color-mix(in srgb, var(--mn) 40%, var(--line));
  border-bottom-width: var(--bw-thick); border-radius: var(--radius-xs); background: #0d131c;
}
.mn-key-act { font-size: var(--fs-base); color: var(--dim); min-width: 0; }

@media (max-width: 640px) {
  .mn-row { grid-template-columns: minmax(0, 1fr); }
  .mn-demo { width: 100%; max-width: 340px; margin: 0 auto; }
  .mn-keys { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mn-demo, .mn-demo *, .mn-demo::before, .mn-demo::after { animation: none !important; }
}
.mnd-hvt-st-ring { position: absolute; left: 50%; top: 46%; border-radius: var(--radius-circle); transform: translate(-50%, -50%); }
.mnd-hvt-st-ring.r1 { width: 22px; height: 22px; border: var(--bw-hair) solid rgba(255, 210, 77, 0.9); background: rgba(255, 210, 77, 0.14); }
.mnd-hvt-st-ring.r2 { width: 48px; height: 48px; border: var(--bw-hair) solid rgba(65, 224, 200, 0.55); }
.mnd-hvt-st-ring.r3 { width: 84px; height: 84px; border: var(--bw-hair) solid rgba(150, 180, 215, 0.3); }
.mnd-hvt-st-head { position: absolute; left: 50%; top: 46%; width: 9px; height: 9px; border-radius: var(--radius-circle); background: #1b2531; border: var(--bw-hair) solid rgba(255, 120, 71, 0.9); transform: translate(-50%, -50%); }
.mnd-hvt-st-ret { position: absolute; left: 50%; top: 46%; width: 26px; height: 26px; margin: -14px 0 0 -14px; color: var(--teal); animation: mnd-hvt-st-sway 6s ease-in-out infinite; }
.mnd-hvt-st-ret::before, .mnd-hvt-st-ret::after { content: ''; position: absolute; background: currentColor; box-shadow: 0 0 6px currentColor; }
.mnd-hvt-st-ret::before { left: 0; right: 0; top: 12px; height: 2px; }
.mnd-hvt-st-ret::after { top: 0; bottom: 0; left: 12px; width: 2px; }
@keyframes mnd-hvt-st-sway {
  0% { transform: translate(-30px, 16px); color: var(--teal); }
  14% { transform: translate(22px, -18px); }
  28% { transform: translate(-14px, -10px); }
  42% { transform: translate(8px, 7px); }
  56% { transform: translate(-3px, -2px); }
  64%, 76% { transform: translate(0, 0); color: #ffd24d; }
  88% { transform: translate(-18px, 12px); color: var(--teal); }
  100% { transform: translate(-30px, 16px); color: var(--teal); }
}
.mnd-hvt-st-pulse { position: absolute; left: 50%; top: 46%; width: 30px; height: 30px; margin: -16px 0 0 -16px; border-radius: var(--radius-circle); border: var(--bw-thick) solid rgba(255, 255, 255, 0.85); opacity: 0; animation: mnd-hvt-st-pulse 6s linear infinite; }
@keyframes mnd-hvt-st-pulse { 0%, 69% { opacity: 0; transform: scale(0.35); } 71% { opacity: 1; } 82%, 100% { opacity: 0; transform: scale(1.7); } }
.mnd-hvt-st-score { position: absolute; left: 58%; top: 26%; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--good); opacity: 0; animation: mnd-hvt-st-score 6s ease-out infinite; }
@keyframes mnd-hvt-st-score { 0%, 70% { opacity: 0; transform: translateY(4px); } 74% { opacity: 1; transform: translateY(0); } 88%, 100% { opacity: 0; transform: translateY(-10px); } }
.mnd-hvt-st-breath { position: absolute; left: 20%; right: 20%; bottom: 8%; height: 5px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.mnd-hvt-st-breath i { display: block; height: 100%; width: 100%; background: var(--teal); animation: mnd-hvt-st-breath 6s linear infinite; }
@keyframes mnd-hvt-st-breath { 0%, 8% { width: 100%; } 70% { width: 34%; } 100% { width: 100%; } }

.mnd-hvt-breach { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-3); }
.mnd-hvt-br-slot { position: relative; overflow: hidden; border: var(--bw-hair) solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-xs); background: linear-gradient(180deg, #0d131c, #0a0e15); }
.mnd-hvt-br-fig { position: absolute; left: 50%; bottom: 0; width: 38%; height: 62%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transform: translate(-50%, 105%); }
.mnd-hvt-br-fig::before { content: ''; position: absolute; left: 50%; top: -9px; width: 12px; height: 12px; border-radius: var(--radius-circle); transform: translateX(-50%); background: inherit; }
.mnd-hvt-br-fig.h1, .mnd-hvt-br-fig.h2, .mnd-hvt-br-fig.h3 { background: #3a161c; box-shadow: inset 0 0 0 1px rgba(235, 75, 75, 0.7); }
.mnd-hvt-br-fig.c1 { background: #0f2b29; box-shadow: inset 0 0 0 1px rgba(65, 224, 200, 0.65); }
.mnd-hvt-br-fig.h1 { transform: translate(-50%, 0); animation: mnd-hvt-br-h1 7s ease-in-out infinite; }
.mnd-hvt-br-fig.c1 { transform: translate(-50%, 0); animation: mnd-hvt-br-c1 7s ease-in-out infinite; }
.mnd-hvt-br-fig.h2 { animation: mnd-hvt-br-h2 7s ease-in-out infinite; }
.mnd-hvt-br-fig.h3 { animation: mnd-hvt-br-h3 7s ease-in-out infinite; }
@keyframes mnd-hvt-br-h1 {
  0%, 4% { transform: translate(-50%, 105%); opacity: 1; }
  9%, 19% { transform: translate(-50%, 0); opacity: 1; }
  23%, 100% { transform: translate(-50%, 26%) scaleY(0.3); opacity: 0; }
}
@keyframes mnd-hvt-br-c1 {
  0%, 28% { transform: translate(-50%, 105%); }
  33%, 44% { transform: translate(-50%, 0); }
  50%, 100% { transform: translate(-50%, 105%); }
}
@keyframes mnd-hvt-br-h2 {
  0%, 50% { transform: translate(-50%, 105%); opacity: 1; }
  55%, 63% { transform: translate(-50%, 0); opacity: 1; }
  67%, 100% { transform: translate(-50%, 26%) scaleY(0.3); opacity: 0; }
}
@keyframes mnd-hvt-br-h3 {
  0%, 72% { transform: translate(-50%, 105%); opacity: 1; }
  77%, 85% { transform: translate(-50%, 0); opacity: 1; }
  89%, 100% { transform: translate(-50%, 26%) scaleY(0.3); opacity: 0; }
}
.mnd-hvt-br-flash { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.22); opacity: 0; animation: mnd-hvt-br-flash 7s linear infinite; }
@keyframes mnd-hvt-br-flash {
  0%, 19.5% { opacity: 0; } 21% { opacity: 1; } 22.5% { opacity: 0; }
  63.5% { opacity: 0; } 65% { opacity: 1; } 66.5% { opacity: 0; }
  85.5% { opacity: 0; } 87% { opacity: 1; } 88.5%, 100% { opacity: 0; }
}

.mnd-hvt-suppress { display: flex; gap: var(--sp-1h); padding: var(--sp-2h) var(--sp-2h) var(--sp-5h); }
.mnd-hvt-sp-lane { position: relative; flex: 1; overflow: hidden; border: var(--bw-hair) solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-xs); background: #0a0f16; }
.mnd-hvt-sp-adv { position: absolute; left: 0; top: 0; width: 100%; background: linear-gradient(180deg, rgba(235, 75, 75, 0.5), rgba(235, 75, 75, 0.12)); border-bottom: var(--bw-hair) solid rgba(235, 75, 75, 0.8); }
.mnd-hvt-sp-lane b { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); font-size: var(--fs-3xs); font-weight: 800; letter-spacing: 0.1em; color: #ff8896; opacity: 0; }
.mnd-hvt-sp-lane.l1 .mnd-hvt-sp-adv { height: 34%; animation: mnd-hvt-sp-a1 7.5s linear infinite; }
.mnd-hvt-sp-lane.l2 .mnd-hvt-sp-adv { height: 20%; animation: mnd-hvt-sp-a2 7.5s linear infinite; }
.mnd-hvt-sp-lane.l3 .mnd-hvt-sp-adv { height: 44%; animation: mnd-hvt-sp-a3 7.5s linear infinite; }
@keyframes mnd-hvt-sp-a1 { 0% { height: 34%; } 28% { height: 12%; } 100% { height: 34%; } }
@keyframes mnd-hvt-sp-a2 { 0% { height: 20%; } 33% { height: 55%; } 63% { height: 14%; } 100% { height: 20%; } }
@keyframes mnd-hvt-sp-a3 { 0% { height: 14%; } 50% { height: 30%; } 66% { height: 52%; } 96% { height: 12%; } 100% { height: 14%; } }
.mnd-hvt-sp-lane.l2 b { animation: mnd-hvt-sp-p2 7.5s linear infinite; }
.mnd-hvt-sp-lane.l3 b { animation: mnd-hvt-sp-p3 7.5s linear infinite; }
@keyframes mnd-hvt-sp-p2 { 0%, 16% { opacity: 0; } 20%, 32% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes mnd-hvt-sp-p3 { 0%, 50% { opacity: 0; } 54%, 65% { opacity: 1; } 69%, 100% { opacity: 0; } }
.mnd-hvt-sp-fire {
  position: absolute; left: 50%; bottom: 6px; width: 2px; height: 82%; margin-left: -2px; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 226, 138, 0.95) 0 5px, transparent 5px 13px);
  filter: drop-shadow(0 0 4px rgba(255, 226, 138, 0.55));
}
.mnd-hvt-sp-lane.l1 .mnd-hvt-sp-fire { animation: mnd-hvt-sp-f1 7.5s linear infinite, mnd-hvt-sp-stream 0.26s linear infinite; }
.mnd-hvt-sp-lane.l2 .mnd-hvt-sp-fire { animation: mnd-hvt-sp-f2 7.5s linear infinite, mnd-hvt-sp-stream 0.26s linear infinite; }
.mnd-hvt-sp-lane.l3 .mnd-hvt-sp-fire { animation: mnd-hvt-sp-f3 7.5s linear infinite, mnd-hvt-sp-stream 0.26s linear infinite; }
@keyframes mnd-hvt-sp-f1 { 0%, 1% { opacity: 0; } 3%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes mnd-hvt-sp-f2 { 0%, 34% { opacity: 0; } 36%, 61% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes mnd-hvt-sp-f3 { 0%, 67% { opacity: 0; } 69%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mnd-hvt-sp-stream { from { background-position-y: 0; } to { background-position-y: -13px; } }
.mnd-hvt-sp-muzzle {
  position: absolute; left: 50%; bottom: 2px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: var(--radius-circle);
  background: radial-gradient(circle, #fff3cf, rgba(255, 177, 61, 0.9) 45%, transparent 72%); opacity: 0;
}
.mnd-hvt-sp-lane.l1 .mnd-hvt-sp-muzzle { animation: mnd-hvt-sp-f1 7.5s linear infinite, mnd-hvt-sp-flick 0.14s steps(2) infinite; }
.mnd-hvt-sp-lane.l2 .mnd-hvt-sp-muzzle { animation: mnd-hvt-sp-f2 7.5s linear infinite, mnd-hvt-sp-flick 0.14s steps(2) infinite; }
.mnd-hvt-sp-lane.l3 .mnd-hvt-sp-muzzle { animation: mnd-hvt-sp-f3 7.5s linear infinite, mnd-hvt-sp-flick 0.14s steps(2) infinite; }
@keyframes mnd-hvt-sp-flick { from { transform: scale(0.7); } to { transform: scale(1.15); } }
.mnd-hvt-sp-heat { position: absolute; left: 10%; right: 10%; bottom: 7%; height: 5px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.mnd-hvt-sp-heat i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #ffd24d, #ff7847); animation: mnd-hvt-sp-heat 7.5s linear infinite; }
@keyframes mnd-hvt-sp-heat {
  0% { width: 8%; } 29% { width: 62%; } 35% { width: 30%; }
  62% { width: 78%; } 68% { width: 44%; } 95% { width: 88%; } 100% { width: 8%; }
}

.mnd-hvt-dt-ring { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; transform: translate(-50%, -50%); border-radius: var(--radius-circle); border: var(--bw-hair) solid rgba(255, 255, 255, 0.12); }
.mnd-hvt-dt-witness { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: var(--radius-circle); background: #eaf3ff; box-shadow: 0 0 10px rgba(65, 224, 200, 0.8); }
.mnd-hvt-dt-tel { position: absolute; left: 50%; top: 50%; width: 46%; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, transparent 15%, rgba(255, 60, 50, 0.85)); opacity: 0; }
.mnd-hvt-dt-tel.t1 { transform: rotate(-55deg); opacity: 1; animation: mnd-hvt-dt-t1 7s linear infinite; }
.mnd-hvt-dt-tel.t2 { transform: rotate(65deg); animation: mnd-hvt-dt-t2 7s linear infinite; }
.mnd-hvt-dt-tel.t3 { transform: rotate(185deg); animation: mnd-hvt-dt-t3 7s linear infinite; }
@keyframes mnd-hvt-dt-t1 { 0%, 3% { opacity: 0; } 5%, 7% { opacity: 1; } 9% { opacity: 0; } 11%, 13% { opacity: 1; } 15% { opacity: 0; } 17%, 18% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes mnd-hvt-dt-t2 { 0%, 36% { opacity: 0; } 38%, 40% { opacity: 1; } 42% { opacity: 0; } 44%, 46% { opacity: 1; } 48% { opacity: 0; } 50%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes mnd-hvt-dt-t3 { 0%, 69% { opacity: 0; } 71%, 73% { opacity: 1; } 75% { opacity: 0; } 77%, 79% { opacity: 1; } 81% { opacity: 0; } 83%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
.mnd-hvt-dt-rot { position: absolute; inset: 0; transform: rotate(35deg); animation: mnd-hvt-dt-rot 7s ease-in-out infinite; }
@keyframes mnd-hvt-dt-rot {
  0%, 20% { transform: rotate(35deg); }
  40%, 53% { transform: rotate(155deg); }
  73%, 86% { transform: rotate(275deg); }
  100% { transform: rotate(395deg); }
}
.mnd-hvt-dt-shield {
  position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: var(--radius-circle);
  border: 4px solid transparent; border-top-color: #f4f9ff; filter: drop-shadow(0 0 5px rgba(244, 249, 255, 0.45));
}
.mnd-hvt-dt-spark { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: var(--radius-circle); background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); transform: translateY(-39px); opacity: 0; animation: mnd-hvt-dt-spark 7s linear infinite; }
@keyframes mnd-hvt-dt-spark {
  0%, 17% { opacity: 0; } 19% { opacity: 1; } 24% { opacity: 0; }
  50% { opacity: 0; } 52% { opacity: 1; } 57% { opacity: 0; }
  83% { opacity: 0; } 85% { opacity: 1; } 90%, 100% { opacity: 0; }
}

.mnd-hvt-cv-road { position: absolute; left: 0; right: 0; top: 38%; height: 34%; background: #10161f; border-top: var(--bw-hair) solid rgba(255, 255, 255, 0.08); border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.08); }
.mnd-hvt-cv-road::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 10px, transparent 10px 22px); }
.mnd-hvt-cv-zone { position: absolute; top: 38%; height: 34%; width: 15%; background: rgba(255, 210, 77, 0.22); }
.mnd-hvt-cv-zone.z1 { left: 26%; animation: mnd-hvt-cv-z1 8s linear infinite; }
.mnd-hvt-cv-zone.z2 { left: 66%; animation: mnd-hvt-cv-z2 8s linear infinite; }
@keyframes mnd-hvt-cv-z1 { 0%, 35% { background: rgba(255, 210, 77, 0.22); } 36%, 74% { background: rgba(74, 222, 128, 0.07); } 75%, 100% { background: rgba(255, 210, 77, 0.22); } }
@keyframes mnd-hvt-cv-z2 { 0%, 19% { background: rgba(74, 222, 128, 0.07); } 20%, 54% { background: rgba(255, 210, 77, 0.22); } 55%, 89% { background: rgba(74, 222, 128, 0.07); } 90%, 100% { background: rgba(255, 210, 77, 0.22); } }
.mnd-hvt-cv-lamp { position: absolute; left: 50%; top: -12px; width: 8px; height: 8px; margin-left: -4px; border-radius: var(--radius-circle); background: #ffd24d; box-shadow: 0 0 8px rgba(255, 210, 77, 0.8); }
.mnd-hvt-cv-zone.z1 .mnd-hvt-cv-lamp { animation: mnd-hvt-cv-l1 8s linear infinite; }
.mnd-hvt-cv-zone.z2 .mnd-hvt-cv-lamp { animation: mnd-hvt-cv-l2 8s linear infinite; }
@keyframes mnd-hvt-cv-l1 { 0%, 35% { background: #ffd24d; box-shadow: 0 0 8px rgba(255, 210, 77, 0.8); } 36%, 74% { background: #24313f; box-shadow: 0 0 0 rgba(255, 210, 77, 0); } 75%, 100% { background: #ffd24d; box-shadow: 0 0 8px rgba(255, 210, 77, 0.8); } }
@keyframes mnd-hvt-cv-l2 { 0%, 19% { background: #24313f; box-shadow: 0 0 0 rgba(255, 210, 77, 0); } 20%, 54% { background: #ffd24d; box-shadow: 0 0 8px rgba(255, 210, 77, 0.8); } 55%, 89% { background: #24313f; box-shadow: 0 0 0 rgba(255, 210, 77, 0); } 90%, 100% { background: #ffd24d; box-shadow: 0 0 8px rgba(255, 210, 77, 0.8); } }
.mnd-hvt-cv-layby {
  position: absolute; left: 42%; top: 74%; width: 20%; height: 17%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0);
  font-size: var(--fs-3xs); font-weight: 800; letter-spacing: 0.12em; color: rgba(65, 224, 200, 0.9);
  border: var(--bw-hair) dashed rgba(65, 224, 200, 0.7);
}
.mnd-hvt-cv-load {
  width: 72%; height: 3px; border-radius: var(--radius-xs);
  background: linear-gradient(90deg, #41e0c8 0 0) no-repeat, rgba(255, 255, 255, 0.12);
  background-size: 0% 100%, 100% 100%;
  animation: mnd-hvt-cv-load 8s linear infinite;
}
@keyframes mnd-hvt-cv-load {
  0%, 48% { background-size: 0% 100%, 100% 100%; }
  60%, 64% { background-size: 100% 100%, 100% 100%; }
  66%, 100% { background-size: 0% 100%, 100% 100%; }
}
.mnd-hvt-cv-finish { position: absolute; left: 91%; top: 38%; width: 3px; height: 34%; background: rgba(74, 222, 128, 0.85); }
.mnd-hvt-cv-truck { position: absolute; top: 47%; left: 46%; display: flex; gap: var(--sp-1); animation: mnd-hvt-cv-truck 8s linear infinite; }
.mnd-hvt-cv-truck i { width: 14px; height: 9px; border-radius: var(--radius-xs); background: #2a3a4e; }
.mnd-hvt-cv-truck i:last-child { background: #3d5470; }
@keyframes mnd-hvt-cv-truck {
  0% { left: -18%; }
  14%, 36% { left: 4%; }
  48%, 62% { left: 43%; }
  94%, 100% { left: 106%; }
}

.mnd-hvt-rl-chute {
  position: absolute; top: 32%; height: 36%; width: 19%; display: grid; place-items: center;
  font-size: var(--fs-3xs); font-weight: 800; letter-spacing: 0.04em; border: var(--bw-hair) dashed;
  overflow: hidden; text-align: center;
}
.mnd-hvt-rl-chute.left { left: 3%; color: #ff8896; border-color: rgba(235, 75, 75, 0.55); }
.mnd-hvt-rl-chute.right { right: 3%; color: #7ee6a1; border-color: rgba(74, 222, 128, 0.55); }
.mnd-hvt-rl-crate {
  position: absolute; left: 50%; top: 50%; width: 34%; margin-left: -17%; padding: var(--sp-2h) var(--sp-1h);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1h);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-sm); background: #131a25;
  transform: translateY(-50%); opacity: 1;
}
.mnd-hvt-rl-crate b { font-size: var(--fs-3xs); letter-spacing: 0.06em; color: var(--dim); font-weight: 700; }
.mnd-hvt-rl-tell { font-size: var(--fs-3xs); font-weight: 800; letter-spacing: 0.1em; padding: var(--sp-0) var(--sp-1h); border-radius: var(--radius-xs); }
.mnd-hvt-rl-tell.good { color: #7ee6a1; border: var(--bw-hair) solid rgba(74, 222, 128, 0.5); }
.mnd-hvt-rl-tell.bad { color: #ff8896; border: var(--bw-hair) solid rgba(235, 75, 75, 0.5); }
.mnd-hvt-rl-tell.hold { color: #ffd24d; border: var(--bw-hair) solid rgba(255, 210, 77, 0.6); }
.mnd-hvt-rl-crate.c {
  border-color: rgba(255, 210, 77, 0.6);
  background: repeating-linear-gradient(45deg, rgba(255, 210, 77, 0.14) 0 8px, transparent 8px 16px), #1d1a10;
}
.mnd-hvt-rl-crate.a { animation: mnd-hvt-rl-a 9s ease-in-out infinite; }
.mnd-hvt-rl-crate.b { opacity: 0; animation: mnd-hvt-rl-b 9s ease-in-out infinite; }
.mnd-hvt-rl-crate.c { opacity: 0; animation: mnd-hvt-rl-c 9s ease-in-out infinite; }
@keyframes mnd-hvt-rl-a {
  0% { opacity: 0; transform: translateY(-150%); }
  6%, 22% { opacity: 1; transform: translateY(-50%); }
  30%, 100% { opacity: 0; transform: translateY(-50%) translateX(130%) rotate(6deg); }
}
@keyframes mnd-hvt-rl-b {
  0%, 34% { opacity: 0; transform: translateY(-150%); }
  40%, 56% { opacity: 1; transform: translateY(-50%); }
  64%, 100% { opacity: 0; transform: translateY(-50%) translateX(-130%) rotate(-6deg); }
}
@keyframes mnd-hvt-rl-c {
  0%, 68% { opacity: 0; transform: translateY(-150%); }
  74%, 90% { opacity: 1; transform: translateY(-50%); }
  97%, 100% { opacity: 0; transform: translateY(10%); }
}
.mnd-hvt-rl-pop { position: absolute; top: 22%; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; opacity: 0; }
.mnd-hvt-rl-pop.good { right: 9%; color: var(--good); animation: mnd-hvt-rl-pg 9s ease-out infinite; }
.mnd-hvt-rl-pop.bad { left: 7%; color: #ff8896; animation: mnd-hvt-rl-pb 9s ease-out infinite; }
.mnd-hvt-rl-pop.hold { left: 50%; transform: translateX(-50%); color: #ffd24d; animation: mnd-hvt-rl-ph 9s ease-out infinite; }
@keyframes mnd-hvt-rl-pg { 0%, 24% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; transform: translateY(0); } 44%, 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes mnd-hvt-rl-pb { 0%, 58% { opacity: 0; transform: translateY(6px); } 64% { opacity: 1; transform: translateY(0); } 78%, 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes mnd-hvt-rl-ph {
  0%, 90% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  95% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-9px); }
}

.mnd-hvt-decrypt { display: flex; align-items: center; justify-content: center; }
.mnd-hvt-dc-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.mnd-hvt-dc-bit {
  position: relative; width: 27px; height: 34px; border: var(--bw-hair) solid rgba(65, 224, 200, 0.4); border-radius: var(--radius-sm);
  background: rgba(65, 224, 200, 0.05); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700;
}
.mnd-hvt-dc-bit i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; }
.mnd-hvt-dc-bit .v0 { color: #dce9ff; }
.mnd-hvt-dc-bit .v1 { color: var(--teal); opacity: 0; }
.mnd-hvt-dc-bit.b2 .v0 { animation: mnd-hvt-dc-v0a 7s linear infinite; }
.mnd-hvt-dc-bit.b2 .v1 { animation: mnd-hvt-dc-v1a 7s linear infinite; }
.mnd-hvt-dc-bit.b4 .v0 { animation: mnd-hvt-dc-v0b 7s linear infinite; }
.mnd-hvt-dc-bit.b4 .v1 { animation: mnd-hvt-dc-v1b 7s linear infinite; }
@keyframes mnd-hvt-dc-v0a { 0%, 38% { opacity: 1; } 38.5%, 94% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes mnd-hvt-dc-v1a { 0%, 38% { opacity: 0; } 38.5%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes mnd-hvt-dc-v0b { 0%, 46% { opacity: 1; } 46.5%, 94% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes mnd-hvt-dc-v1b { 0%, 46% { opacity: 0; } 46.5%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
.mnd-hvt-dc-pegs { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); display: flex; gap: var(--sp-1h); opacity: 0; }
.mnd-hvt-dc-peg { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: var(--radius-xs); font-size: var(--fs-sm); font-weight: 800; }
.mnd-hvt-dc-peg.good { color: var(--teal); border: var(--bw-hair) solid rgba(65, 224, 200, 0.45); background: rgba(65, 224, 200, 0.08); }
.mnd-hvt-dc-peg.warn { color: #ffd24d; border: var(--bw-hair) solid rgba(255, 210, 77, 0.45); background: rgba(255, 210, 77, 0.08); }
.mnd-hvt-dc-peg.bad { color: #ff6a5a; border: var(--bw-hair) solid rgba(255, 106, 90, 0.45); background: rgba(255, 106, 90, 0.08); }
.mnd-hvt-dc-pegs.p1 { animation: mnd-hvt-dc-p1 7s ease-out infinite; }
.mnd-hvt-dc-pegs.p2 { animation: mnd-hvt-dc-p2 7s ease-out infinite; }
@keyframes mnd-hvt-dc-p1 { 0%, 15% { opacity: 0; transform: translateX(-50%) translateY(4px); } 18%, 40% { opacity: 1; transform: translateX(-50%) translateY(0); } 44%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); } }
@keyframes mnd-hvt-dc-p2 { 0%, 56% { opacity: 0; transform: translateX(-50%) translateY(4px); } 59%, 88% { opacity: 1; transform: translateX(-50%) translateY(0); } 92%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); } }
.mnd-hvt-dc-glow { position: absolute; inset: 0; background: rgba(65, 224, 200, 0.1); opacity: 0; animation: mnd-hvt-dc-glow 7s linear infinite; }
@keyframes mnd-hvt-dc-glow { 0%, 58% { opacity: 0; } 62%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }

.mnd-hvt-dbreach { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2h); }
.mnd-hvt-dbreach::after { content: ''; position: absolute; inset: 0; background: rgba(65, 224, 200, 0.1); opacity: 0; animation: mnd-hvt-db-win 8s linear infinite; }
@keyframes mnd-hvt-db-win { 0%, 79% { opacity: 0; } 81%, 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
.mnd-hvt-db-buf { display: flex; gap: var(--sp-1); }
.mnd-hvt-db-slot {
  width: 22px; height: 18px; display: grid; place-items: center; font-size: var(--fs-3xs); font-weight: 700;
  color: transparent; border: var(--bw-hair) dashed rgba(255, 255, 255, 0.22); border-radius: var(--radius-xs);
}
.mnd-hvt-db-slot.f1 { color: var(--teal); border-style: solid; border-color: rgba(65, 224, 200, 0.5); }
.mnd-hvt-db-slot.f1 { animation: mnd-hvt-db-f1 8s linear infinite; }
.mnd-hvt-db-slot.f2 { animation: mnd-hvt-db-f2 8s linear infinite; }
.mnd-hvt-db-slot.f3 { animation: mnd-hvt-db-f3 8s linear infinite; }
.mnd-hvt-db-slot.f4 { animation: mnd-hvt-db-f4 8s linear infinite; }
@keyframes mnd-hvt-db-f1 { 0%, 10% { color: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.22); } 10.5%, 92% { color: var(--teal); border-style: solid; border-color: rgba(65, 224, 200, 0.5); } 93%, 100% { color: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.22); } }
@keyframes mnd-hvt-db-f2 { 0%, 32% { color: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.22); } 32.5%, 92% { color: var(--teal); border-style: solid; border-color: rgba(65, 224, 200, 0.5); } 93%, 100% { color: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.22); } }
@keyframes mnd-hvt-db-f3 { 0%, 55% { color: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.22); } 55.5%, 92% { color: var(--teal); border-style: solid; border-color: rgba(65, 224, 200, 0.5); } 93%, 100% { color: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.22); } }
@keyframes mnd-hvt-db-f4 { 0%, 78% { color: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.22); } 78.5%, 92% { color: var(--teal); border-style: solid; border-color: rgba(65, 224, 200, 0.5); } 93%, 100% { color: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.22); } }
.mnd-hvt-db-grid { position: relative; display: grid; grid-template-columns: repeat(5, 24px); gap: var(--sp-1); }
.mnd-hvt-db-cell {
  height: 17px; display: grid; place-items: center; font-size: var(--fs-3xs); font-weight: 600; color: #5c6b7e;
  background: rgba(255, 255, 255, 0.03); border: var(--bw-hair) solid rgba(255, 255, 255, 0.09); border-radius: var(--radius-xs);
}
.mnd-hvt-db-cell.p1 { color: var(--teal); border-color: rgba(65, 224, 200, 0.6); background: rgba(65, 224, 200, 0.1); }
.mnd-hvt-db-cell.p1 { animation: mnd-hvt-db-p1 8s linear infinite; }
.mnd-hvt-db-cell.p2 { animation: mnd-hvt-db-p2 8s linear infinite; }
.mnd-hvt-db-cell.p3 { animation: mnd-hvt-db-p3 8s linear infinite; }
.mnd-hvt-db-cell.p4 { animation: mnd-hvt-db-p4 8s linear infinite; }
@keyframes mnd-hvt-db-p1 { 0%, 9.5% { color: #5c6b7e; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); } 10%, 92% { color: var(--teal); border-color: rgba(65, 224, 200, 0.6); background: rgba(65, 224, 200, 0.1); } 93%, 100% { color: #5c6b7e; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); } }
@keyframes mnd-hvt-db-p2 { 0%, 31.5% { color: #5c6b7e; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); } 32%, 92% { color: var(--teal); border-color: rgba(65, 224, 200, 0.6); background: rgba(65, 224, 200, 0.1); } 93%, 100% { color: #5c6b7e; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); } }
@keyframes mnd-hvt-db-p3 { 0%, 54.5% { color: #5c6b7e; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); } 55%, 92% { color: var(--teal); border-color: rgba(65, 224, 200, 0.6); background: rgba(65, 224, 200, 0.1); } 93%, 100% { color: #5c6b7e; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); } }
@keyframes mnd-hvt-db-p4 { 0%, 77.5% { color: #5c6b7e; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); } 78%, 92% { color: var(--teal); border-color: rgba(65, 224, 200, 0.6); background: rgba(65, 224, 200, 0.1); } 93%, 100% { color: #5c6b7e; border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.03); } }
.mnd-hvt-db-band { position: absolute; border: var(--bw-hair) solid rgba(65, 224, 200, 0.28); background: rgba(65, 224, 200, 0.07); border-radius: var(--radius-xs); opacity: 0; }
.mnd-hvt-db-band.col { top: -2px; bottom: -2px; width: 24px; left: 27px; animation: mnd-hvt-db-bc 8s linear infinite; }
.mnd-hvt-db-band.row { left: -2px; right: -2px; height: 17px; top: 60px; animation: mnd-hvt-db-br 8s linear infinite; }
@keyframes mnd-hvt-db-bc {
  0%, 11% { left: 27px; opacity: 0; }
  12%, 30% { left: 27px; opacity: 1; }
  31% { left: 27px; opacity: 0; }
  56% { left: 108px; opacity: 0; }
  57%, 76% { left: 108px; opacity: 1; }
  77%, 100% { left: 108px; opacity: 0; }
}
@keyframes mnd-hvt-db-br { 0%, 33% { opacity: 0; } 34%, 53% { opacity: 1; } 54%, 100% { opacity: 0; } }

.mnd-hvt-uplink { display: flex; justify-content: space-between; padding: var(--sp-3) var(--sp-4); }
.mnd-hvt-up-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mnd-hvt-up-dim { stroke: rgba(120, 140, 160, 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mnd-hvt-up-wire { stroke: rgba(65, 224, 200, 0.85); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mnd-hvt-up-wire.w1 { animation: mnd-hvt-up-w1 8s linear infinite; }
.mnd-hvt-up-wire.w2 { animation: mnd-hvt-up-w2 8s linear infinite; }
.mnd-hvt-up-wire.w3 { animation: mnd-hvt-up-w3 8s linear infinite; }
@keyframes mnd-hvt-up-w1 { 0%, 18% { opacity: 0; } 20%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes mnd-hvt-up-w2 { 0%, 42% { opacity: 0; } 44%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes mnd-hvt-up-w3 { 0%, 66% { opacity: 0; } 68%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
.mnd-hvt-up-dot { fill: #9ff5e6; opacity: 0; filter: drop-shadow(0 0 4px rgba(65, 224, 200, 0.9)); }
@media (prefers-reduced-motion: reduce) { .mnd-hvt-up-dot { display: none; } }
.mnd-hvt-up-col { position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.mnd-hvt-up-col:last-child { justify-content: center; }
.mnd-hvt-up-node {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); min-width: 46px; padding: var(--sp-1) var(--sp-2);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); background: #0d131c;
}
.mnd-hvt-up-node span { font-size: var(--fs-3xs); font-weight: 800; letter-spacing: 0.12em; color: var(--dim); }
.mnd-hvt-up-node b { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: #dce9ff; }
.mnd-hvt-up-node.tgt { border-color: rgba(255, 177, 61, 0.5); }
.mnd-hvt-up-node.tgt b { color: var(--accent); }
.mnd-hvt-up-node.a1 { animation: mnd-hvt-up-amp1 8s linear infinite; }
.mnd-hvt-up-node.a2 { animation: mnd-hvt-up-amp2 8s linear infinite; }
.mnd-hvt-up-node.a3 { animation: mnd-hvt-up-amp3 8s linear infinite; }
@keyframes mnd-hvt-up-amp1 { 0%, 43% { border-color: rgba(255, 255, 255, 0.16); } 44%, 92% { border-color: rgba(65, 224, 200, 0.6); } 93%, 100% { border-color: rgba(255, 255, 255, 0.16); } }
@keyframes mnd-hvt-up-amp2 { 0%, 67% { border-color: rgba(255, 255, 255, 0.16); } 68%, 92% { border-color: rgba(65, 224, 200, 0.6); } 93%, 100% { border-color: rgba(255, 255, 255, 0.16); } }
@keyframes mnd-hvt-up-amp3 { 0%, 19% { border-color: rgba(255, 255, 255, 0.16); } 20%, 92% { border-color: rgba(65, 224, 200, 0.6); } 93%, 100% { border-color: rgba(255, 255, 255, 0.16); } }
.mnd-hvt-up-node.tgt { animation: mnd-hvt-up-tgt 8s linear infinite; }
@keyframes mnd-hvt-up-tgt {
  0%, 70% { border-color: rgba(255, 177, 61, 0.5); box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
  72%, 90% { border-color: rgba(74, 222, 128, 0.75); box-shadow: 0 0 14px rgba(74, 222, 128, 0.4); }
  93%, 100% { border-color: rgba(255, 177, 61, 0.5); box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
}
/* Loaded last so a gapped container always beats a view module's own child
   margin, whatever the manifest order puts first. */
.panel.stack > *,
.form-stack > * { margin: 0; }

.page > *,
.page-body > *,
.dialog > * { margin-block: 0; }

.page-body > .panel-head { margin-bottom: 0; }
/* Trade escrow: value promised to an open offer. Its own state, never reused from
   the favorite or lobby-stake treatments, so "reserved in a trade" reads as its
   own reason. The reserved amount is always shown ALONGSIDE the full balance. */

.item-card.escrowed {
  opacity: 0.5;
  cursor: not-allowed;
  outline: var(--bw-hair) dashed var(--accent-line);
  outline-offset: -3px;
}

.escrow-flag {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-0);
  padding: var(--sp-0) var(--sp-1h);
  background: rgba(255, 177, 61, 0.92);
  color: #241300;
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  clip-path: var(--clip-sm);
  pointer-events: none;
}

.escrow-flag .cf-ico {
  width: 9px;
  height: 9px;
}

.escrow-note {
  display: flex;
  align-items: center;
  gap: var(--sp-1h);
  margin-top: var(--sp-1h);
  padding: var(--sp-1h) var(--sp-2);
  background: var(--accent-fill);
  border-left: var(--bw-thick) solid var(--accent-line);
  color: var(--dim);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.escrow-note .cf-ico {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--accent);
}
/* Loaded last so a view module's own sizing cannot shrink a control below the
   touch floor. 44px is the tap minimum; the icon and .btn.sm families keep the
   deliberate 40px floor set in mobile-foundation.css. */
@media (max-width: 860px) {
  .page-tab { min-height: 44px; }
  .logo[role='link'] { min-height: 40px; }
  .grid-search { min-height: 44px; }
  .profile-chip { min-height: 44px; }
  .ach-cat { min-height: 44px; }
  .fair-badge { min-height: 40px; }
  .equip-clear { min-height: 40px; }
  .clan-icon-btn.sm { width: 30px; height: 30px; font-size: var(--fs-md); }
  .cw-info-btn { width: 40px; height: 40px; }
  .pager-num { min-width: 40px; height: 40px; }
  .clan-rank-select { min-height: 40px; }
  .money-field > input { min-height: 40px; }
}