/* HATEWATCH — "NEWSPRINT TERMINAL"
   Print is the ground, data is the current.
   Ivory + Press Black. Zero radius. Zero shadow. Hairlines rule.
   Anton screamers. Chivo body. JetBrains Mono for live data only. */

:root {
  /* --- ground / surface --- */
  --bg0: #F2EFE4;   /* Newsprint Ivory */
  --bg1: #E9E5D6;   /* Pulp */
  --bg2: #E0DCC8;   /* slightly darker inset */
  /* --- rules --- */
  --line:  rgba(13,12,9,.55);  /* hairline Ink-55 */
  --line2: rgba(13,12,9,.75);  /* slightly heavier */
  /* --- semantics --- */
  --love: #1A9C3E;   /* Score Green */
  --hate: #E8112D;   /* Tabloid Red */
  --love-ink: #F2EFE4;
  /* --- CTA / interactive --- */
  --acid: #FFE600;   /* Hot Yellow (kept as --acid so existing refs work) */
  /* --- type --- */
  --text:  #0D0C09;   /* Press Black */
  --muted: #5A574C;   /* Worn Ink */
  --dim:   #5A574C;
  --stat:  #0D0C09;
  /* --- fonts --- */
  --archivo: 'Anton', Impact, sans-serif;           /* display */
  --inter:   'Chivo', system-ui, sans-serif;        /* body */
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  /* --- shape: ZERO everywhere --- */
  --r-box:  0;
  --r-pill: 0;
  /* --- shadows: none --- */
  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-love: none;
  --shadow-hate: none;
  --shadow-acid: none;
  /* --- motion --- */
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  /* --- glass (kept for compatibility, effectively unused) --- */
  --glass:  rgba(242,239,228,.94);
  --grain:  0;
}

/* ------------------------------------------------------------------ reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-color: var(--line2) var(--bg0); }
html, body { background: var(--bg0); color: var(--text); font-family: var(--inter); }
body {
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  /* halftone dot texture — newsprint feel at ~6% opacity */
  background-image: radial-gradient(circle, rgba(13,12,9,.06) 1px, transparent 1px);
  background-size: 6px 6px;
}
/* no film grain in newsprint mode */
body::after { display: none; }

button { font-family: var(--inter); cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* suppress dark/light data-theme remnants (theme is ivory-only) */
[data-theme] {}

/* view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: .18s; }
  ::view-transition-new(root) { animation-duration: .26s; }
}

/* ============================================================
   NEWSPRINT CHROME
   ============================================================ */

/* ---- THE WIRE: 32px mono ticker pinned to the very top ---- */
.wire {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 32px;
  background: var(--text);        /* Press-Black bar */
  border-bottom: 3px solid var(--hate); /* Tabloid-Red rule — always-on color */
  overflow: hidden;
  display: flex;
  align-items: center;
}
.wire-track {
  display: flex;
  gap: 48px;
  width: max-content;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bg0);       /* ivory text on black bar */
  animation: wire 40s linear infinite;
}
.wire-track b  { color: var(--acid); font-weight: 700; }
.wire-track .up   { color: var(--love); }
.wire-track .down { color: var(--hate); }
@keyframes wire { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wire-track { animation: none; } }

/* ---- SECTION NAV bar ---- */
.section-nav {
  position: fixed;
  top: 35px; /* wire(32) + border(3) */
  left: 0; right: 0;
  z-index: 59;
  height: 32px;
  background: var(--bg0);
  border-bottom: 1px solid var(--text);
  display: flex;
  align-items: center;
  padding: 0 16px 0 80px; /* leave room for masthead rail on desktop */
  gap: 0;
}
.section-nav a {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line);
  transition: color .12s, background .12s;
}
.section-nav a:first-child { border-left: 1px solid var(--line); }
.section-nav a:hover { color: var(--text); background: var(--bg1); }
.section-nav a[aria-current] { color: var(--text); background: var(--bg1); }

/* ---- MASTHEAD RAIL: fixed left vertical ---- */
.masthead-rail {
  position: fixed;
  top: 35px;
  left: 0;
  width: 64px;
  bottom: 0;
  z-index: 58;
  background: var(--text);  /* Press-Black */
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.masthead-rail a {
  font-family: var(--archivo);
  font-size: 18px;
  font-weight: 400;  /* Anton is always bold */
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bg0);   /* ivory on black */
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
/* Tabloid-Red masthead on player pages */
.masthead-rail.player { background: var(--hate); }

/* ---- TOPBAR: legacy selector kept for app.js but reimplemented as newsprint ---- */
.topbar {
  position: fixed;
  top: 67px;  /* below wire + section-nav */
  left: 64px; /* beside masthead rail */
  right: 0;
  z-index: 50;
  height: 0;  /* collapsed — chrome is now wire + section-nav + rail */
  overflow: hidden;
  pointer-events: none;
}
/* hide the legacy topbar inner layout */
.topbar .inner { display: none; }
/* legacy theme switch and live-chip are hidden — ivory only */
.themesw  { display: none !important; }

/* live-chip: show as a small wire-style strip instead of a pill */
.live-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--line);
  pointer-events: auto;
}
.live-chip .dot { width: 6px; height: 6px; background: var(--muted); }
.live-chip.on { color: var(--love); border-color: var(--love); }
.live-chip.on .dot { background: var(--love); }
@media (prefers-reduced-motion: no-preference) {
  .live-chip.on .dot { animation: breathe 1.6s ease-in-out infinite; }
}

/* ---- BRAND (inside .topbar, hidden, but keep the selector) ---- */
.brand { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.brand .l1 { font-family: var(--archivo); font-weight: 400; font-size: 22px;
  letter-spacing: -0.02em; text-transform: uppercase; }
.brand .l2 { font-family: var(--mono); font-weight: 400; font-size: 10px;
  color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }
.slash { color: var(--hate); }
@property --slash-angle { syntax: "<angle>"; initial-value: 135deg; inherits: true; }
/* nav inside topbar hidden */
.topnav { display: none; }

/* ============================================================
   SHELL
   ============================================================ */
.shell {
  max-width: 960px;
  margin: 0 auto;
  /* top: wire(32) + section-nav(32) = 64 + 3px border. left: masthead rail(64) */
  padding: 82px 24px 90px 88px;
}
.shell.wide { max-width: 1100px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { display: grid; grid-template-columns: 7fr 5fr; gap: 28px; align-items: center;
  padding: 24px 0 24px; }
.hero h1 {
  font-family: var(--archivo);
  font-weight: 400;   /* Anton is always bold by design */
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: .88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero h1 .verb { color: var(--hate); display: inline-block; text-align: left;
  white-space: nowrap; margin-right: .2em; overflow: hidden; vertical-align: bottom;
  transition: width .26s; }
.hero h1 .lv { color: var(--love); }
.hero .sub { color: var(--muted); font-size: 15px; font-family: var(--inter);
  line-height: 1.5; margin-top: 16px; max-width: 42ch; }
.hero .ctas { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.hero-card { position: relative; margin-left: -8px; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-card { margin-left: 0; }
}

/* ---- BUTTONS: rubber stamps ---- */
.btn-primary {
  background: var(--acid);       /* Hot Yellow rubber stamp */
  color: var(--text);
  font-family: var(--inter);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 13px 22px;
  border: 2px solid var(--text);
  display: inline-block;
  cursor: pointer;
  transition: none;
}
.btn-primary:hover { background: var(--acid); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  font-family: var(--inter);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 20px;
  border: 2px solid var(--text);
  display: inline-block;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--bg1); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* generic .btn */
.btn {
  background: var(--bg1);
  color: var(--text);
  border: 1px solid var(--text);
  padding: 8px 14px;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.btn:hover { background: var(--bg2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ============================================================
   WORLD CUP BAND / WCBAND
   ============================================================ */
.wcband { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 16px;
  border: 1px solid var(--text);
  border-left: 4px solid var(--love); }
.wc-live { display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--love); }
.wc-live .dot { width: 7px; height: 7px; background: var(--love); }
.wc-copy { flex: 1 1 auto; min-width: 160px; font-size: 14px; color: var(--text); font-weight: 600; }
.wc-cta { flex: none; font-size: 12px; font-weight: 900; color: var(--love);
  letter-spacing: .04em; text-transform: uppercase; }
.wc-cta .arw { display: inline-block; transition: transform .2s; }
.wcband:hover .wc-cta .arw { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .wc-live .dot { animation: livepulse 1.6s ease-in-out infinite; }
}
@media (max-width: 560px) { .wc-cta { width: 100%; } }
.freeline { color: var(--muted); font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; margin-top: 10px; text-transform: uppercase; font-weight: 700; }

/* ============================================================
   BENTO GRID
   ============================================================ */
.bento { display: grid; gap: 1px; grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: minmax(118px, auto);
  border: 1px solid var(--text); background: var(--text); } /* rules between cells via bg */
.cell {
  background: var(--bg0);
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
a.cell:hover { background: var(--bg1); }
.cell h3 { font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cell .big { font-family: var(--archivo); font-weight: 400; font-size: 34px;
  font-variant-numeric: tabular-nums; margin-top: 8px; line-height: .95;
  text-transform: uppercase; }
.cell-slate { grid-column: 1; grid-row: 1 / span 2; }
.cell-people { grid-column: 2; grid-row: 1 / span 2; }
.cell-live { grid-column: 3; grid-row: 1; }
.cell-beef { grid-column: 3; grid-row: 2; }
.cell-live h3 { color: var(--love); }
@media (max-width: 820px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .cell-slate { grid-column: 1 / -1; grid-row: auto; }
  .cell-people { grid-column: 1; grid-row: auto; }
  .cell-live { grid-column: 2; grid-row: auto; }
  .cell-beef { grid-column: 2; grid-row: auto; }
}
@media (max-width: 540px) { .bento { grid-template-columns: 1fr; }
  .cell-people, .cell-live, .cell-beef { grid-column: 1; } }
/* scanlines: keep selector, visually suppress */
[data-scan="true"]::before { display: none; }

.faces { display: flex; margin-top: 12px; }
.faces .rshot { width: 52px; height: 52px;
  border: 2px solid var(--bg0); margin-left: -10px; }
.faces .rshot:first-child { margin-left: 0; }
.cell .meta { color: var(--muted); font-size: 12px; margin-top: auto; padding-top: 12px; }
.cell .meta b { color: var(--text); }
.peoplerow { display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-top: 1px solid var(--line); font-size: 12px; }
.peoplerow:first-of-type { border-top: 0; margin-top: 8px; }
.peoplerow .rshot { width: 28px; height: 28px; }
.peoplerow .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; }
.peoplerow.lv .nm { color: var(--love); } .peoplerow.ht .nm { color: var(--hate); }

/* ============================================================
   PLAYER SHOTS (rshot)
   ============================================================ */
.rshot { display: inline-flex; width: 44px; height: 44px; overflow: hidden;
  flex: none; background: var(--bg2); }
.rshot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.rshot[data-sport="nba"] img { transform: scale(1.4); transform-origin: 50% 26%; }
.rshot[data-sport="mlb"] img { object-position: 50% 38%; transform: scale(1.05); }
.rshot[data-sport="wc"]  img { transform: scale(1.15); transform-origin: 50% 30%; }
.rshot[data-sport="nfl"] img { transform: scale(1.28); transform-origin: 50% 22%; }
.rshot .initials { display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--muted); }

/* player-page masthead portrait — large newsprint mug (restored 2026-06-28) */
.pl-mug { width: 172px; height: 172px; border: 1px solid var(--text); background: var(--bg2);
  margin: 0 0 20px; flex: none; }
.pl-mug img { filter: grayscale(1) contrast(1.05); }
.pl-mug .initials { font-family: var(--archivo); font-weight: 400; font-size: 76px;
  color: var(--text); letter-spacing: -.02em; }

/* ============================================================
   BOARDS & VERDICT
   ============================================================ */
.board {
  background: var(--bg1);
  border: 1px solid var(--text);
  border-top: 3px solid var(--text);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.board .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.board .side { font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; }
.board .side.love { color: var(--love); } .board .side.hate { color: var(--hate); }
.board .num { font-family: var(--mono); font-weight: 700; font-size: 26px;
  font-variant-numeric: tabular-nums; }
.board .num.love { color: var(--love); } .board .num.hate { color: var(--hate); }
.board .bar { height: 5px; background: var(--hate); overflow: hidden; display: flex; }
.board .bar > span { background: var(--love); display: block; transition: width .9s var(--ease); }
.board .net { text-align: center; margin: 2px 0 12px; }
.board .net .v { font-family: var(--mono); font-weight: 700; font-size: 40px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.board .net .k { font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: block; margin-top: 2px; }
.sportchips { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.sportchip { background: var(--bg0); border: 1px solid var(--line);
  padding: 4px 10px; font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sportchip:hover { border-color: var(--text); color: var(--text); }
.verdict {
  text-align: center;
  font-family: var(--archivo);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 2px 0 14px;
  padding: 11px 16px;
  border: 2px solid var(--text);
}
.verdict.love { color: var(--love); border-color: var(--love); }
.verdict.hate { color: var(--hate); border-color: var(--hate); }
.verdict.none { color: var(--muted); border-color: var(--line); }

/* ============================================================
   WATCH CARDS (the core unit — "ruled blocks not boxed cards")
   ============================================================ */
.watchbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap; }
.watchname { font-family: var(--archivo); font-weight: 400; font-size: 21px;
  text-transform: uppercase; letter-spacing: -0.02em; }
.actions { display: flex; gap: 8px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0;
  border: 1px solid var(--text); }
/* cards are ruled blocks: hairline top/bottom, no shadow, no radius */
.card {
  position: relative;
  background: var(--bg0);
  border: 1px solid var(--line);    /* hairline */
  border-left: 4px solid var(--accent, var(--text)); /* accent stripe */
  padding: 14px 16px;
  overflow: hidden;
  /* no shadow, no radius, no transition scale */
}
.card[data-mood="love"] { --accent: var(--love); --ink: var(--love-ink); }
.card[data-mood="hate"] { --accent: var(--hate); --ink: #F2EFE4; }
@media (prefers-reduced-motion: no-preference) {
  .card[data-live="true"] { animation: cardbreathe 3.4s ease-in-out infinite; }
  @keyframes cardbreathe {
    0%, 100% { border-color: var(--line); border-left-color: var(--accent); }
    50% { border-left-color: color-mix(in srgb, var(--accent) 60%, var(--text) 40%); } }
}
/* hover: 1px underline effect — no lift or glow */
@media (hover: hover) {
  a.card:hover, button.card:hover { background: var(--bg1); }
}
/* remove dark cursor-spotlight */
.card::after { display: none; }

.crow { display: flex; gap: 12px; align-items: center; }
.cshot {
  position: relative; width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--accent, var(--text));
  overflow: hidden;
  background: var(--bg2);
}
.card[data-live="false"] .cshot { border-color: var(--line); }
.cshot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  transform: scale(1.45); transform-origin: 50% 26%; }
.card[data-sport="mlb"] .cshot img,
.cshot[data-sport="mlb"] img { object-position: 50% 38%; transform: scale(1.08); }
.card[data-sport="wc"]  .cshot img { transform: scale(1.15); transform-origin: 50% 25%; }
.card[data-sport="nfl"] .cshot img,
.cshot[data-sport="nfl"] img { transform: scale(1.3); transform-origin: 50% 22%; }
.cshot .initials { font-family: var(--mono); font-weight: 700; font-size: 17px; color: var(--accent, var(--text)); }

.cwho { flex: 1; min-width: 0; }
.cnick {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.creal { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--muted); margin-top: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.cstats { font-family: var(--mono); font-size: 11px; margin-top: 6px;
  font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: .04em; }
.cstats b { color: var(--accent, var(--text)); font-weight: 700; }
.cright { flex: none; text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px; }
/* delta: the big HATEWATCH index — mono, no pill */
.delta {
  background: transparent;
  color: var(--accent, var(--text));
  font-family: var(--mono);
  font-weight: 700;
  font-size: 32px;
  line-height: .90;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  border: 0;
  padding: 0;
}
.delta > span { display: block; }
.cverdict {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, var(--text));
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cverdict .pdot { width: 5px; height: 5px; background: var(--accent, var(--text)); }
@media (prefers-reduced-motion: no-preference) {
  .card[data-live="true"] .cverdict .pdot { animation: breathe 1.4s ease-in-out infinite; }
}
.spark { width: 64px; height: 20px; opacity: .8; }
.cnext { font-family: var(--mono); font-size: 10px; color: var(--muted);
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cnext .next-k {
  font-family: var(--mono); font-weight: 700; font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); background: var(--bg2);
  padding: 1px 5px; margin-right: 6px;
}

/* ---- the rubber stamp ---- */
.stamp {
  position: absolute; top: 41px; left: 46px; z-index: 2;
  transform: translateX(-50%) rotate(0deg);  /* press-plate straight per bible */
  transform-origin: center;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .08em;
  padding: 2px 7px;
  border: 2px solid var(--accent, var(--text));
  color: var(--accent, var(--text));
  background: var(--bg0);
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .stamp { animation: stampin .4s var(--spring) backwards; }
  @keyframes stampin {
    from { transform: translateX(-50%) rotate(0deg) scale(2.4); opacity: 0; } }
}

/* ============================================================
   BEEF STRIP
   ============================================================ */
.beef {
  background: var(--bg0);
  border: 1px solid var(--text);
  border-top: 3px solid var(--text);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.beef .bh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.beef .bt { font-family: var(--archivo); font-weight: 400; font-size: 15px; text-transform: uppercase; letter-spacing: -0.01em; }
.beef .tally { font-family: var(--mono); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; }
.beef .row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 13px; }
.beef .who { font-weight: 600; }
.beef .win { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.beef .win.me { color: var(--love); } .beef .win.them { color: var(--hate); }
.beef .win.tbd { color: var(--muted); }

/* ============================================================
   SECTIONS / LOGS
   ============================================================ */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px;
  border-bottom: 3px solid var(--text); padding-bottom: 6px; }
.sec-h .t { font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sec-h .s { font-family: var(--mono); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.sec-h .s .lv { color: var(--love); } .sec-h .s .ht { color: var(--hate); }
.log-h {
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 28px 0 10px;
}
.log .e { display: flex; gap: 10px; align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid var(--line); }
.log .e .clk { font-family: var(--mono); font-size: 10px; color: var(--muted);
  font-variant-numeric: tabular-nums; flex: none; width: 64px; letter-spacing: .06em; }
.log .e .msg { font-size: 13px; line-height: 1.4; }
.log .e[data-list="love"] .tick { color: var(--love); }
.log .e[data-list="hate"] .tick { color: var(--hate); }
.log .e .tick { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .log .e.new { animation: slidein .4s var(--ease) backwards; }
  @keyframes slidein { from { opacity: 0; transform: translateY(-6px); } }
}
.empty { color: var(--muted); font-family: var(--inter); font-size: 14px;
  padding: 40px 12px; text-align: center; line-height: 1.7; }

/* ============================================================
   COMMUNITY
   ============================================================ */
.community { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--text); border: 1px solid var(--text); }
@media (max-width: 560px) { .community { grid-template-columns: 1fr; } }
.commcol { background: var(--bg0); padding: 14px 16px; }
.commcol h3 { font-family: var(--archivo); font-weight: 400; font-size: 14px;
  text-transform: uppercase; margin-bottom: 10px; letter-spacing: -0.01em; }
.commcol.love h3 { color: var(--love); } .commcol.hate h3 { color: var(--hate); }
.commrow { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line); }
.commrow .rank { font-family: var(--mono); font-weight: 700; font-size: 15px;
  color: var(--muted); width: 18px; flex: none; }
.commrow .rshot { width: 38px; height: 38px; border: 2px solid var(--accent2); }
.commcol.love .commrow .rshot { --accent2: var(--love); }
.commcol.hate .commrow .rshot { --accent2: var(--hate); }
.commrow .cn { min-width: 0; flex: 1; }
.commrow .cnick2 { font-family: var(--inter); font-weight: 700; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commrow .creal2 { font-family: var(--mono); font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .08em; }
.commrow .ct { font-family: var(--mono); font-size: 10px; color: var(--muted);
  flex: none; font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* ============================================================
   BUILDER / FORMS
   ============================================================ */
.builder h1 {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: 30px;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  border-bottom: 3px solid var(--text);
  padding-bottom: 8px;
}
.builder .sub { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 24px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.field input {
  width: 100%;
  background: var(--bg0);
  border: 1px solid var(--text);
  border-bottom: 2px solid var(--text);
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--mono);
  letter-spacing: .04em;
  outline: none;
  transition: border-color .15s;
}
.field input:hover { border-color: var(--text); }
.field input:focus { border-bottom-color: var(--love); outline: none; }

.sports-tabs { display: flex; gap: 0; margin-bottom: 10px; flex-wrap: wrap;
  border: 1px solid var(--text); }
.stab {
  background: var(--bg0);
  border: none;
  border-right: 1px solid var(--text);
  color: var(--muted);
  padding: 7px 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.stab:last-child { border-right: none; }
.stab:active { transform: translateY(1px); }
.stab.on { background: var(--text); color: var(--bg0); }

/* search results: mono rows */
.results { display: flex; flex-direction: column; gap: 0; margin-top: 10px;
  border: 1px solid var(--text); }
.result {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg0);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}
.result:last-child { border-bottom: none; }
.result:hover { background: var(--bg1); }
.result .nm { font-weight: 700; font-size: 14px; }
.result .sl { font-family: var(--mono); font-size: 10px; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; }
.result .grow { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .result { flex-wrap: wrap; }
  .result .grow { flex: 1 1 calc(100% - 60px); }
  .result .mini { flex: 1 1 40%; }
}

/* mini: LOVE/HATE stamp buttons */
.mini {
  padding: 7px 12px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
}
.mini:active { transform: translateY(1px); }
.mini.love { background: var(--love); color: var(--bg0); border-color: var(--love); }
.mini.hate { background: var(--hate); color: #fff; border-color: var(--hate); }
.mini.ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.mini:disabled { cursor: default; opacity: .7; }

.picks { display: flex; flex-wrap: wrap; gap: 6px; min-height: 38px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px;
  font-family: var(--inter); font-weight: 600; font-size: 13px;
  border: 1px solid var(--text);
}
.chip.love { background: color-mix(in srgb, var(--love) 12%, var(--bg0));
  border-color: var(--love); }
.chip.hate { background: color-mix(in srgb, var(--hate) 12%, var(--bg0));
  border-color: var(--hate); }
.chip button {
  background: var(--bg2);
  color: var(--muted);
  width: 20px; height: 20px;
  font-size: 12px; line-height: 1;
  border: 1px solid var(--line);
  cursor: pointer;
}

.lists2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 24px; }
@media (max-width: 540px) { .lists2 { grid-template-columns: 1fr; } }
.lists2 h3 { font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.lists2 h3.love { color: var(--love); } .lists2 h3.hate { color: var(--hate); }

/* LOCK THE WATCH — the Hot Yellow CTA rubber stamp */
.save {
  width: 100%;
  background: var(--acid);
  color: var(--text);
  font-family: var(--inter);
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 16px;
  border: 2px solid var(--text);
  cursor: pointer;
  transition: none;
}
.save:hover { background: var(--acid); }
.save:active { transform: translateY(1px); }
.save:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.save:disabled { background: var(--bg2); color: var(--muted); border-color: var(--line);
  cursor: not-allowed; transform: none; }
/* sportlock variant */
.save.sportlock { background: var(--bg1); color: var(--muted); border-color: var(--line); }
.hint { text-align: center; color: var(--muted); font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; margin-top: 12px; text-transform: uppercase; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 80;
  background: var(--text); color: var(--bg0);
  border: 2px solid var(--text);
  padding: 12px 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none; max-width: min(92vw, 480px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(10px); }
[data-reveal].in { opacity: 1; transform: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(var(--i, 0) * 50ms); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   TAKES & CREWS
   ============================================================ */
.profband { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 18px;
  border: 1px solid var(--text); border-left: 4px solid var(--text); }
.profband .rec { font-family: var(--archivo); font-weight: 400; font-size: 26px;
  text-transform: uppercase; }
.profband .recl { font-family: var(--mono); color: var(--muted); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; }
.badgechip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--love); color: var(--love);
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  vertical-align: 2px;
}
.takerow { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: thin; }
.takeface { display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.takeface:hover { opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .takeface:hover { opacity: .85; }
}
.takeface .rshot { width: 52px; height: 52px; border: 2px solid var(--line); }
.takeface.on .rshot { border-color: var(--love); }
.takeface.on .tfn { color: var(--text); }
.takeface .tfn { font-family: var(--mono); color: var(--muted); font-size: 10px;
  max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em; }
.takeform {
  background: var(--bg1);
  border: 1px solid var(--text);
  padding: 16px 18px;
  margin: 6px 0 16px;
}
.tfwho { font-family: var(--archivo); font-weight: 400; font-size: 16px;
  text-transform: uppercase; margin-bottom: 10px; }
.tfbtns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tflock { display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; }
.tk { font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.tk.hit { color: var(--love); } .tk.miss { color: var(--hate); } .tk.void { color: var(--muted); }
.crewpitch { margin-top: 26px; }
.crewpitch input { width: 160px; background: var(--bg0); border: 1px solid var(--text);
  color: var(--text); padding: 8px 12px; font: inherit; font-family: var(--mono); font-size: 13px; }
.crewcode { font-family: var(--mono); color: var(--muted); font-size: 11px;
  letter-spacing: .22em; margin-top: 8px; text-align: center; text-transform: uppercase; }
.memberbar { flex: 0 0 90px; height: 4px; background: var(--bg2);
  overflow: hidden; align-self: center; }
.memberbar span { display: block; height: 100%; background: var(--love); }

/* ============================================================
   LIVE ROOM PRESENCE
   ============================================================ */
.watchers {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid var(--love);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--love);
}
.watchers .dot { width: 6px; height: 6px; background: var(--love); }
.watchers .wn { font-family: var(--mono); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .watchers .dot { animation: livepulse 1.6s ease-in-out infinite; }
  @keyframes livepulse { 50% { opacity: .35; } }
}

/* ============================================================
   PROFILE
   ============================================================ */
.profile { max-width: 600px; }
.pf-head { text-align: center; margin-bottom: 20px; }
.pf-name { font-family: var(--archivo); font-weight: 400;
  font-size: clamp(26px, 5vw, 38px); text-transform: uppercase; letter-spacing: -.02em; }
.pf-rec { font-family: var(--mono); font-weight: 700; font-size: 44px;
  line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pf-rec .hits { color: var(--love); } .pf-rec .miss { color: var(--hate); }
.pf-rec .sep { color: var(--muted); margin: 0 4px; }
.pf-sub { font-family: var(--mono); color: var(--muted); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.pf-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
@media (max-width: 540px) { .pf-badges { grid-template-columns: 1fr; } }
.pf-badge { border: 1px solid var(--line); padding: 12px 14px;
  opacity: .42; filter: grayscale(1); transition: opacity .25s, filter .25s; }
.pf-badge.on { opacity: 1; filter: none; border-color: var(--love); }
.pb-name { font-family: var(--inter); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.pf-badge.on .pb-name { color: var(--love); }
.pb-blurb { color: var(--muted); font-size: 11px; margin-top: 2px; }

/* ============================================================
   COMMUNITY WATCHES (player page)
   ============================================================ */
.commwatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.commwatch { font-family: var(--mono); font-size: 10px; padding: 3px 8px;
  border: 1px solid var(--line); color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase; }
.commwatch.love:hover { color: var(--love); border-color: var(--love); }
.commwatch.hate:hover { color: var(--hate); border-color: var(--hate); }
.nicksuggest { display: flex; gap: 6px; margin-top: 12px; }
.nicksuggest input { flex: 1; min-width: 0; background: var(--bg0);
  border: 1px solid var(--text); color: var(--text); padding: 8px 12px;
  font: inherit; font-family: var(--mono); font-size: 12px; }
.nicksuggest .mini { flex: none; }

/* ============================================================
   AWARDS WEEK NAV
   ============================================================ */
.weeknav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 18px; }
.weeknav .wk { font-family: var(--mono); font-weight: 700; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase; font-size: 11px; }
.rc-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0; }

/* ============================================================
   MORNING RECAP
   ============================================================ */
.recap { max-width: 640px; }
.rc-head { text-align: center; margin-bottom: 22px; }
.rc-day { font-family: var(--mono); color: var(--muted); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; }
.rc-verdict { font-family: var(--archivo); font-size: clamp(30px, 6vw, 52px);
  line-height: .95; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: -0.02em; }
.rc-verdict.love { color: var(--love); } .rc-verdict.hate { color: var(--hate); }
.rc-net { font-family: var(--mono); font-weight: 700; font-size: 40px;
  font-variant-numeric: tabular-nums; }
.rc-bigs { display: grid; gap: 1px; background: var(--text); border: 1px solid var(--text); }
.recapbig {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg0);
  border-left: 4px solid var(--line);
  padding: 14px 16px;
}
.recapbig:hover { background: var(--bg1); }
.recapbig.love { border-left-color: var(--love); }
.recapbig.hate { border-left-color: var(--hate); }
.recapbig .rshot { width: 56px; height: 56px; }
.rb-body { flex: 1; min-width: 0; }
.rb-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.rb-name { font-family: var(--archivo); font-weight: 400; font-size: 19px;
  line-height: 1.1; text-transform: uppercase; }
.rb-stat { font-family: var(--mono); font-size: 11px; color: var(--muted);
  margin-top: 2px; letter-spacing: .06em; }
.rb-idx { font-family: var(--mono); font-weight: 700; font-size: 22px;
  font-variant-numeric: tabular-nums; }
.rb-idx.pos { color: var(--love); } .rb-idx.neg { color: var(--hate); }
.rc-roast { margin: 20px 0; padding: 0 0 0 16px;
  border-left: 3px solid var(--text);
  font-family: var(--archivo); font-weight: 400;
  font-size: clamp(18px, 3vw, 24px); line-height: 1.25;
  font-style: italic; text-transform: uppercase; }
.rc-you { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.rc-stat { background: var(--bg1); border: 1px solid var(--line); padding: 10px 14px; }
.rc-stat .k { display: block; font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rc-stat .v { font-family: var(--mono); font-weight: 700; font-size: 20px;
  font-variant-numeric: tabular-nums; }
.rc-take { display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg0); border: 1px solid var(--line);
  padding: 6px 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; }
.rc-take.hit { color: var(--love); border-color: var(--love); }
.rc-take.miss { color: var(--hate); border-color: var(--hate); }
.rc-take.void { color: var(--muted); }

/* ============================================================
   PETTY AWARDS
   ============================================================ */
.awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--text); border: 1px solid var(--text); }
@media (max-width: 620px) { .awards { grid-template-columns: 1fr; } }
.award { background: var(--bg0); padding: 18px; }
.aw-title { font-family: var(--archivo); font-weight: 400; font-size: 20px;
  text-transform: uppercase; letter-spacing: -0.01em; }
.aw-blurb { color: var(--muted); font-size: 12px; margin: 4px 0 14px; line-height: 1.4; }
.aw-winner { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  background: var(--bg1); border: 1px solid var(--line); }
.aw-name { font-family: var(--archivo); font-weight: 400; font-size: 17px;
  text-transform: uppercase; }
.aw-stat { font-family: var(--mono); font-size: 11px; color: var(--hate);
  font-weight: 700; letter-spacing: .06em; }
.aw-runner { margin-top: 10px; font-family: var(--mono); font-size: 11px;
  color: var(--muted); letter-spacing: .06em; }

/* ============================================================
   HOME EXPLORE LINKS
   ============================================================ */
.explore { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin: 18px 0 8px; border: 1px solid var(--text); }
@media (max-width: 620px) { .explore { grid-template-columns: 1fr; } }
.xlink { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
  background: var(--bg0); border-right: 1px solid var(--text); }
.xlink:last-child { border-right: none; }
.xlink:hover { background: var(--bg1); }
.xlink b { font-family: var(--archivo); font-weight: 400; font-size: 15px;
  text-transform: uppercase; letter-spacing: -0.01em; }
.xlink span { font-family: var(--mono); color: var(--muted); font-size: 11px;
  line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }

/* ============================================================
   PLAYER PAGE
   ============================================================ */
.pp-hero { display: flex; gap: 22px; align-items: center; margin: 8px 0 20px;
  border-bottom: 3px solid var(--text); padding-bottom: 16px; }
.pp-hero .cshot { width: 96px; height: 96px; border-width: 3px; }
.pp-name { font-family: var(--archivo); font-weight: 400;
  font-size: clamp(26px, 4vw, 40px); text-transform: uppercase;
  line-height: .95; letter-spacing: -0.03em; }
.pp-real { font-family: var(--mono); color: var(--muted); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.pp-actions { display: flex; gap: 8px; margin-top: 12px; }
.pp-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
@media (max-width: 760px) { .pp-grid { grid-template-columns: 1fr; } }
.panel {
  background: var(--bg1);
  border: 1px solid var(--text);
  border-top: 3px solid var(--text);
  padding: 18px 20px;
}
.panel h3 { font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.auragraph { width: 100%; height: 130px; overflow: visible; }
.auragraph .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .auragraph .line { stroke-dasharray: 1200; stroke-dashoffset: 1200;
    animation: drawline 1.1s var(--ease) .15s forwards; }
  @keyframes drawline { to { stroke-dashoffset: 0; } }
  .auragraph .dot { opacity: 0; animation: dotpop .4s var(--ease) .95s forwards; }
  @keyframes dotpop { to { opacity: 1; } }
}

/* SPLIT BAR */
.splitbar { height: 6px; overflow: hidden; display: flex;
  background: var(--hate); margin: 8px 0 6px; }
.splitbar > span { background: var(--love); }

/* LOGGY (player log) */
.loggy .e { display: flex; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 12px; align-items: baseline; }
.loggy .e .d { font-family: var(--mono); color: var(--muted); width: 78px;
  flex: none; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.loggy .e .m { flex: 1; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.loggy .e .ix { font-family: var(--mono); font-weight: 700;
  font-variant-numeric: tabular-nums; }

.nickrow { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--line); font-size: 13px; }
.nickrow .nn { font-weight: 700; flex: 1; min-width: 0; }
.nickrow .elo { font-family: var(--mono); color: var(--muted); font-size: 11px;
  font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.nickrow .canonb {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--love);
  border: 1px solid var(--love); padding: 1px 5px;
}

/* ============================================================
   ARENA
   ============================================================ */
.arena-head { text-align: center; margin-bottom: 18px; }
.arena-head .rshot { width: 80px; height: 80px; border: 2px solid var(--line); }
.arena-head .pp-name { font-size: clamp(22px, 3.4vw, 32px); }
.battle { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--text); border: 1px solid var(--text);
  max-width: 640px; margin: 0 auto; }
@media (max-width: 540px) { .battle { grid-template-columns: 1fr; } }
.fighter { display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg0);
  padding: 26px 18px; text-align: center; cursor: pointer; }
.fighter:hover { background: var(--bg1); }
.fighter:active { transform: scale(.98); }
.fighter .fn { font-family: var(--archivo); font-weight: 400; font-size: 21px;
  text-transform: uppercase; line-height: 1.1; }
.fighter .fv { font-family: var(--mono); color: var(--muted); font-size: 10px;
  margin-top: 8px; letter-spacing: .12em; text-transform: uppercase; }
.fighter.won { border: 3px solid var(--love); }
@media (prefers-reduced-motion: no-preference) {
  .fighter.won { animation: wonpop .4s var(--spring); }
  @keyframes wonpop { 50% { transform: scale(1.02); } }
}
.arena-sub { text-align: center; font-family: var(--mono); color: var(--muted);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 16px 0; }

/* ============================================================
   GLAZER EGG
   ============================================================ */
body[data-glaze="true"] { --hate: #1A9C3E; }
body[data-glaze="true"] .brand .l2 { color: var(--love); }
.fixbanner {
  position: fixed; top: 30vh; left: 50%; z-index: 90;
  transform: translateX(-50%) rotate(0deg);
  font-family: var(--archivo); font-weight: 400;
  font-size: clamp(28px, 7vw, 64px);
  letter-spacing: .02em; color: var(--hate);
  border: 4px solid var(--hate);
  padding: 10px 28px;
  background: var(--bg0);
  text-transform: uppercase; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .fixbanner { animation: stampin .35s var(--spring) backwards; }
  body.shake { animation: shake .4s linear; }
  @keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); } }
}

/* ============================================================
   HALL OF FAME
   ============================================================ */
.hof h1 { font-family: var(--archivo); font-weight: 400; font-size: 34px;
  text-transform: uppercase; text-align: center; margin: 10px 0 4px; }
.hof .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px;
  background: var(--text); border: 1px solid var(--text); }
.banner {
  background: var(--bg0);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  padding: 18px 12px 34px; text-align: center;
  border-left: 3px solid var(--hate);
}
.banner .rshot { margin: 0 auto 10px; width: 56px; height: 56px;
  border: 2px solid var(--hate); }
.banner .bn { font-family: var(--archivo); font-weight: 400; font-size: 13px;
  text-transform: uppercase; line-height: 1.15; }
.banner .bc { font-family: var(--mono); color: var(--muted); font-size: 10px;
  margin-top: 5px; letter-spacing: .06em; text-transform: uppercase; }

/* ============================================================
   AURA
   ============================================================ */
.aurachip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-weight: 700; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--line); color: var(--muted);
}
.aurachip[data-tier="HIM"]     { color: var(--love); border-color: var(--love); }
.aurachip[data-tier="COOKING"] { color: var(--love); }
.aurachip[data-tier="COOKED"]  { color: var(--hate); border-color: var(--hate); }
.aurachip[data-tier="SHAKY"]   { color: var(--hate); }

/* ============================================================
   NEWSTYPE WIRE (inline wire — legacy selector kept for app.js)
   The old .wire/.track classes are now reused by the new topbar wire.
   In-content wire (in hero/home) uses a different approach:
============================================================ */
/* the "old" in-content wire variant — restyle to match newsprint */
/* Note: .wire is now the fixed top bar. App.js renders a .wire inside content
   (home page hero area). We style .shell .wire differently from the fixed top wire */
.shell .wire {
  position: static;
  height: auto;
  background: var(--bg1);
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-bottom-width: 1px;
  overflow: hidden;
  padding: 8px 0;
  margin: 4px -24px 26px;
}
.shell .wire .track,
.shell .wire-track {
  display: flex; gap: 42px; width: max-content; white-space: nowrap;
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
  animation: wire 38s linear infinite;
}
.shell .wire .track b { color: var(--text); font-weight: 700; }
.shell .wire .track .up   { color: var(--love); }
.shell .wire .track .down { color: var(--hate); }
@media (prefers-reduced-motion: no-preference) {
  .shell .wire:hover .track,
  .shell .wire:hover .wire-track { animation-play-state: paused; }
}

/* ============================================================
   SLATE / PICK'EM
   ============================================================ */
.slate-sec { margin-bottom: 24px; }
.slate-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; }
.slate-foot .save { width: auto; padding: 10px 16px; }
.slate-foot .btn { padding: 9px 14px; }
.locked-tag { font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; }
.lockdot { font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--love);
  border: 1px solid var(--love); padding: 1px 7px; vertical-align: 2px; margin-left: 8px; }
.result.locked { opacity: .62; }
.result.locked .mini { opacity: .5; cursor: default; }
.tipoff { font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); padding: 1px 7px; }

/* ============================================================
   OFFSEASON
   ============================================================ */
.offseason { margin: 22px 0 8px; border-top: 1px solid var(--text); padding-top: 14px; }
.offseason summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 6px 12px; opacity: .8; }
.offseason summary::-webkit-details-marker { display: none; }
.offseason summary::after { content: "▸"; color: var(--muted); margin-left: auto; font-size: 12px; }
.offseason[open] summary::after { content: "▾"; }
.offt { font-family: var(--archivo); font-size: 16px; font-weight: 400;
  text-transform: uppercase; }
.offh { font-family: var(--mono); font-size: 10px; color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase; }
.offgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--text); }
.offcard { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  background: var(--bg0); text-decoration: none; opacity: .82;
  transition: opacity .15s; }
.offcard:hover { opacity: 1; background: var(--bg1); }
.offcard .rshot { width: 38px; height: 38px; flex: 0 0 38px; }
.offcard .grow { flex: 1; min-width: 0; }
.onm { font-weight: 700; font-size: 14px; color: var(--text); }
.olast { font-family: var(--mono); color: var(--muted); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; }
.ov { font-family: var(--mono); font-size: 11px; color: var(--muted);
  margin-top: 1px; letter-spacing: .04em; }
.osea { font-family: var(--mono); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; }
.osea.lv { color: var(--love); }
.osea.ht { color: var(--hate); }
.osea.mut { color: var(--muted); }

/* ============================================================
   NEWSFEED WIDGET
   ============================================================ */
.newsfeed { margin: 36px 0 0; }
.nf-head { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px; border-bottom: 3px solid var(--text); padding-bottom: 6px; }
.nf-head h3 { margin: 0; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.nf-all { font-family: var(--mono); color: var(--love); font-weight: 700;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.nf-all:hover { color: var(--text); }
.nf-list { display: flex; flex-direction: column; gap: 0;
  max-height: 372px; overflow-y: auto; padding-right: 0;
  border: 1px solid var(--text); }
.nf-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--bg0);
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--text);
  transition: background .12s;
}
.nf-item:last-child { border-bottom: none; }
.nf-item:hover { background: var(--bg1); }
.nf-chip { flex: none; font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; border: 1px solid var(--line); padding: 2px 6px;
  text-transform: uppercase; }
.nf-hl { flex: 1; min-width: 0; font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.nf-meta { flex: none; font-family: var(--mono); color: var(--muted);
  font-size: 10px; display: flex; gap: 9px; align-items: center;
  letter-spacing: .08em; text-transform: uppercase; }
.nf-v { font-weight: 700; color: var(--love); }
.nf-v.hate { color: var(--hate); }
.nf-load { font-family: var(--mono); color: var(--muted); padding: 16px;
  text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 560px) { .nf-hl { white-space: normal; } .nf-meta .nf-v { display: none; } }

/* ============================================================
   CARDS VARIANT PAGE
   ============================================================ */
.cards-head { margin-bottom: 18px; }
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 560px; }
.cards-variant > .vlabel { font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px; }
.cards-variant .stack { display: grid; gap: 12px; }
.cx { --accent: var(--love); }
.cx[data-mood="hate"] { --accent: var(--hate); }
.cx-big { display: flex; align-items: center; gap: 14px; padding: 16px 4px;
  border-bottom: 1px solid var(--line); }
.cx-big .cshot { width: 52px; height: 52px; }
.cx-big .cx-id { flex: 1; min-width: 0; }
.cx-name { font-family: var(--archivo); font-weight: 400; font-size: 17px;
  letter-spacing: -0.01em; text-transform: uppercase; }
.cx-real { font-family: var(--mono); font-size: 10px; color: var(--muted);
  margin-top: 2px; letter-spacing: .08em; text-transform: uppercase; }
.cx-statline { font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .04em; margin-top: 6px; }
.cx-statline .miss { color: var(--accent); }
.cx-bigidx { font-family: var(--mono); font-weight: 700; font-size: 34px;
  letter-spacing: -0.03em; color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums; }
.cx-bigwrap { text-align: right; flex: none; }
.cx-bigwrap .st { font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px; display: block; }
.cx-tele {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 14px 15px;
}
.cx-tele .cx-head { display: flex; align-items: center; gap: 12px; }
.cx-tele .cshot { width: 46px; height: 46px; }
.cx-tele .cx-id { flex: 1; min-width: 0; }
.cx-tele .cx-idx { font-family: var(--mono); font-weight: 700; font-size: 18px;
  color: var(--accent); font-variant-numeric: tabular-nums; }
.cx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 12px; background: var(--text); border: 1px solid var(--text); }
.cx-grid .gcell { background: var(--bg1); padding: 9px 8px; text-align: center; }
.cx-grid .gcell b { display: block; font-family: var(--mono); font-weight: 600; font-size: 16px;
  font-variant-numeric: tabular-nums; }
.cx-grid .gcell.miss b { color: var(--accent); }
.cx-grid .gcell span { font-family: var(--mono); font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px; display: block; }

/* ============================================================
   SAMPLES / STYLE LOOKBOOK (keep selectors)
   ============================================================ */
.samples-head { margin-bottom: 20px; }
.samples-head .sub { max-width: 64ch; }
.smp { background: var(--bg0); color: var(--text); border: 1px solid var(--text);
  padding: 22px 24px 26px; margin-bottom: 16px; font-family: var(--inter); }
.smp-bar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--text); }
.smp-no { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.smp-name { font-family: var(--archivo); font-weight: 400; font-size: 20px;
  letter-spacing: var(--dls, -.02em); text-transform: uppercase; }
.smp-fonts { font-family: var(--mono); font-size: 10px; color: var(--muted);
  margin-left: auto; letter-spacing: .06em; text-transform: uppercase; }
.smp-pitch { color: var(--muted); font-size: 14px; margin: -6px 0 16px; max-width: 60ch; }
.smp .hero { display: block; padding: 0; }
.smp .hero h1 { font-size: clamp(26px, 3.3vw, 40px); line-height: 1.02; }
.smp .hero .sub { margin-top: 10px; }
.smp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0; }
.smp-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--extra, var(--love)) 50%, var(--line));
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--extra, var(--love)); }
.smp-live .dot { width: 7px; height: 7px; background: var(--extra, var(--love)); }
.smp-readout { font-family: var(--mono); font-size: 13px; color: var(--muted);
  letter-spacing: .04em; margin-top: 16px; }
.smp-readout b { color: var(--text); font-weight: 600; }
.smp-readout .pos { color: var(--love); } .smp-readout .neg { color: var(--hate); }
.kithead { margin-bottom: 18px; }
.kithead .sub { max-width: 60ch; }
.kit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .kit-cols { grid-template-columns: 1fr; } }
.kit-col { background: var(--bg0); color: var(--text); border: 1px solid var(--text);
  padding: 18px; overflow: hidden; }
.kit-theme { font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--text); }
.kit-sec { margin: 18px 0; }
.kit-sec:first-of-type { margin-top: 0; }
.kit-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.kit-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kit-stack { display: grid; gap: 8px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sw { border: 1px solid var(--line); overflow: hidden; }
.sw .chip { height: 38px; }
.sw .lab { padding: 6px 8px; font-size: 10px; }
.sw .lab b { display: block; font-family: var(--archivo); font-weight: 400;
  letter-spacing: .02em; text-transform: uppercase; }
.sw .lab span { font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums;
  font-size: 10px; }
.kit-type .d { font-family: var(--archivo); font-weight: 400; font-size: 30px;
  line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.kit-type .e { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.kit-type .b { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 40ch; }
.kit-type .n { font-family: var(--mono); font-weight: 700; font-size: 22px;
  font-variant-numeric: tabular-nums; margin-top: 6px; }
.kit-board { background: var(--bg1); border: 1px solid var(--text);
  border-top: 3px solid var(--text); padding: 14px 16px; }
.kit-board .net { display: flex; justify-content: space-between; align-items: baseline; }
.kit-board .k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.kit-board .v { font-family: var(--mono); font-weight: 700; font-size: 24px;
  font-variant-numeric: tabular-nums; }
.kit-board .bar { height: 6px; overflow: hidden; background: var(--hate); margin-top: 10px; }
.kit-board .bar span { display: block; height: 100%; background: var(--love); }

/* ============================================================
   SHARED KEYFRAMES
   ============================================================ */
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   GLOBAL FOCUS RING
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
a:focus-visible { outline: 2px solid var(--text); }

/* ============================================================
   RESPONSIVE: masthead rail collapses on mobile
   ============================================================ */
@media (max-width: 720px) {
  /* rail hides; horizontal bar at top instead */
  .masthead-rail {
    position: fixed;
    top: 67px;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 32px;
    writing-mode: horizontal-tb;
    transform: none;
    justify-content: flex-start;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    background: var(--text);
  }
  .masthead-rail a { font-size: 14px; letter-spacing: .04em; }
  .section-nav { top: 99px; padding-left: 16px; }  /* wire+section-nav+masthead bar */
  .shell { padding: 132px 16px 90px 16px; }
  .wire { font-size: 9px; }
  /* section-nav scrolls horizontally on mobile */
  .section-nav { overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex-wrap: nowrap; }
  .section-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
  .shell { padding-top: 140px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(32px, 9vw, 52px); }
  .pp-name { font-size: clamp(22px, 7vw, 36px); }
}

/* ============================================================
   REDUCED MOTION SAFETY NET
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .wire-track, .shell .wire .track, .shell .wire-track { animation: none; }
  .btn-primary:hover, .btn-ghost:hover, .save:hover,
  .nf-item:hover, .xlink:hover, .recapbig:hover,
  .cell:hover, .offcard:hover, .takeface:hover, .wcband:hover { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   BUILDER — BET SLIP / DRAFT CARD  (all selectors prefixed .bld-)
   Uses existing newsprint tokens; zero radius; hairline rules.
   ============================================================ */

/* outer wrapper — sits inside .shell */
.bld-wrap {
  max-width: 860px;
}

/* ---- HEADER SCREAMER ---- */
.bld-header {
  border-bottom: 3px solid var(--text);
  padding-bottom: 20px;
  margin-bottom: 28px;
}
.bld-headline {
  font-family: var(--archivo);
  font-weight: 400;          /* Anton is always bold by design */
  font-size: clamp(42px, 8vw, 96px);
  line-height: .86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 12px;
}
.bld-deck {
  font-family: var(--inter);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(15px, 2.2vw, 20px);
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.3;
}
.bld-dateline {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- SECTION ---- */
.bld-section {
  margin-bottom: 28px;
}
.bld-section__label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* ---- WATCH NAME INPUT ---- */
.bld-name-input {
  width: 100%;
  background: var(--bg0);
  border: 1px solid var(--text);
  border-bottom: 3px solid var(--text);
  color: var(--text);
  padding: 13px 16px;
  font-family: var(--archivo);
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  outline: none;
}
.bld-name-input::placeholder {
  color: var(--muted);
  font-size: clamp(13px, 2.2vw, 18px);
}
.bld-name-input:focus { border-bottom-color: var(--love); }

/* ---- GAMES TAB ROW ---- */
.bld-games {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--text);
}
.bld-game-btn {
  /* inherits .stab */
  border-right: 1px solid var(--text) !important;
}

/* ---- COMMAND LINE SEARCH ---- */
.bld-sport-bar {
  margin-bottom: 10px;
}
.bld-cmd-line {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--text);
  border-bottom: 3px solid var(--text);
  background: var(--bg0);
}
.bld-cmd-prompt {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--love);
  padding: 11px 10px 11px 16px;
  flex: none;
  user-select: none;
  letter-spacing: 0;
}
.bld-cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px 16px 11px 4px;
  caret-color: var(--love);
}
.bld-cmd-input::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.bld-cmd-line:focus-within { border-bottom-color: var(--love); }

/* ---- SEARCH RESULTS ---- */
.bld-results {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
  border: 1px solid var(--text);
}
.bld-result {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg0);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}
.bld-result:last-child { border-bottom: none; }
.bld-result:hover { background: var(--bg1); }
.bld-result__shot {
  flex: none;
  width: 40px;
  height: 40px;
}
.bld-result__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bld-result__name {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bld-result__nat {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .06em;
}
.bld-result__sl {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bld-result__acts {
  display: flex;
  gap: 6px;
  flex: none;
}

/* ---- STAMP BUTTONS (LOVE / HATE in results) ---- */
.bld-stamp {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: none;
}
.bld-stamp:active { transform: translateY(1px); }
.bld-stamp--love {
  background: var(--love);
  color: var(--bg0);
  border-color: var(--love);
}
.bld-stamp--hate {
  background: var(--hate);
  color: #fff;
  border-color: var(--hate);
}
.bld-stamp--love:hover { background: color-mix(in srgb, var(--love) 85%, var(--text) 15%); }
.bld-stamp--hate:hover { background: color-mix(in srgb, var(--hate) 85%, var(--text) 15%); }

/* ---- ROSTER COLUMNS ---- */
.bld-tally {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.bld-roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--text);
}
.bld-roster__col {
  border-right: 1px solid var(--text);
}
.bld-roster__col:last-child { border-right: none; }
.bld-roster__head {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 3px solid var(--text);
}
.bld-roster__col--love .bld-roster__head { color: var(--love); border-bottom-color: var(--love); }
.bld-roster__col--hate .bld-roster__head { color: var(--hate); border-bottom-color: var(--hate); }
.bld-roster__body {
  display: flex;
  flex-direction: column;
  min-height: 48px;
}

/* ---- SINGLE PICK ROW ---- */
.bld-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 9px 12px 9px 0;
  background: var(--bg0);
  position: relative;
}
.bld-pick:last-child { border-bottom: none; }
.bld-pick:hover { background: var(--bg1); }
.bld-pick__stripe {
  width: 4px;
  align-self: stretch;
  flex: none;
}
.bld-pick--love .bld-pick__stripe { background: var(--love); }
.bld-pick--hate .bld-pick__stripe { background: var(--hate); }
.bld-pick__shot {
  width: 36px;
  height: 36px;
  flex: none;
}
.bld-pick__name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bld-pick__pname {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bld-pick__nick {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bld-pick__acts {
  display: flex;
  gap: 4px;
  flex: none;
}
.bld-pick__act {
  width: 24px;
  height: 24px;
  background: var(--bg1);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-family: var(--inter);
}
.bld-pick__act:hover { background: var(--bg2); color: var(--text); }
.bld-pick__act--rm:hover { border-color: var(--hate); color: var(--hate); }

/* empty state */
.bld-picks-empty {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 12px;
}

/* ---- CTA: LOCK THE WATCH ---- */
.bld-cta {
  display: block;
  width: 100%;
  background: var(--acid);   /* Hot Yellow */
  color: var(--text);
  font-family: var(--inter);
  font-weight: 900;
  font-size: clamp(16px, 2.5vw, 22px);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 20px;
  border: 3px solid var(--text);
  cursor: pointer;
  transition: none;
  margin-bottom: 0;
}
.bld-cta:hover { background: var(--acid); }
.bld-cta:active { transform: translateY(1px); }
.bld-cta:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.bld-cta:disabled {
  background: var(--bg2);
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
  transform: none;
}

/* ---- MOBILE ---- */
@media (max-width: 600px) {
  .bld-headline { font-size: clamp(36px, 11vw, 62px); }
  .bld-roster {
    grid-template-columns: 1fr;
  }
  .bld-roster__col {
    border-right: none;
    border-bottom: 1px solid var(--text);
  }
  .bld-roster__col:last-child { border-bottom: none; }
  .bld-result { flex-wrap: wrap; }
  .bld-result__info { flex: 1 1 calc(100% - 58px); }
  .bld-result__acts { flex: 1 1 100%; }
  .bld-stamp { flex: 1; text-align: center; }
  .bld-games { flex-direction: column; }
  .bld-game-btn { border-right: none !important; border-bottom: 1px solid var(--text) !important; }
}

/* ============================================================
   HOME — NEWSPRINT MAGAZINE FRONT PAGE  (.hm-*)
   ============================================================ */

/* ---- Masthead screamer ---- */
.hm-masthead {
  border-bottom: 3px solid var(--text);
  padding-bottom: 16px;
  margin-bottom: 0;
}
.hm-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.hm-screamer {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 96px);
  line-height: .88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
}
.hm-screamer .hate-word { color: var(--hate); }
.hm-screamer .love-word { color: var(--love); }
.hm-deck {
  font-family: var(--inter);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 18px);
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.4;
  max-width: 60ch;
}
.hm-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---- two-column editorial body ---- */
.hm-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--text);
  margin-top: 24px;
}
@media (max-width: 680px) {
  .hm-body { grid-template-columns: 1fr; }
}

.hm-col {
  padding: 20px 20px 20px 0;
}
.hm-col + .hm-col {
  padding-left: 20px;
  border-left: 1px solid var(--text);
}
@media (max-width: 680px) {
  .hm-col + .hm-col {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--text);
  }
}

.hm-col-head {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  margin-bottom: 0;
  border-bottom: 3px solid var(--text);
}

/* ---- leaderboard row ---- */
.hm-lb-list {
  display: flex;
  flex-direction: column;
}
.hm-lb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}
.hm-lb-row:hover { background: var(--bg1); }
.hm-lb-rank {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hm-lb-body {
  min-width: 0;
}
.hm-lb-name {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: clamp(15px, 2.5vw, 20px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-lb-name.love { color: var(--love); }
.hm-lb-name.hate { color: var(--hate); }
.hm-lb-slug {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-lb-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
.hm-lb-odds {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hm-lb-odds.love { color: var(--love); }
.hm-lb-odds.hate { color: var(--hate); }
.hm-minibar {
  width: 52px;
  height: 4px;
  background: var(--hate);
  overflow: hidden;
  display: flex;
  flex: none;
}
.hm-minibar > span { background: var(--love); display: block; }

/* ---- news feed rows ---- */
.hm-nf-list {
  display: flex;
  flex-direction: column;
}
.hm-nf-row {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}
.hm-nf-row:hover { background: var(--bg1); }
.hm-nf-headline {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);   /* ink — NOT hot-yellow */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
}
.hm-nf-dateline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hm-nf-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hm-nf-chip {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1px 5px;
  border: 1px solid var(--line);
}
.hm-nf-minibar {
  width: 36px;
  height: 3px;
  background: var(--hate);
  overflow: hidden;
  display: inline-flex;
  flex: none;
  vertical-align: middle;
}
.hm-nf-minibar > span { background: var(--love); display: block; }

/* ---- below-fold: explore strip + example cards ---- */
.hm-explore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 32px 0 8px;
  border: 1px solid var(--text);
  border-top: 3px solid var(--text);
}
@media (max-width: 620px) { .hm-explore { grid-template-columns: 1fr; } }

/* ============================================================
   PLAYER PAGE — NEWSPRINT PROFILE SPREAD  (.pl-*)
   ============================================================ */

/* ---- masthead / name block ---- */
.pl-masthead {
  border-bottom: 3px solid var(--text);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.pl-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.pl-name {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 80px);
  line-height: .88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 8px;
}
.pl-realname {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ---- election box (verdict display) ---- */
.pl-election {
  border: 1px solid var(--text);
  border-top: 3px solid var(--text);
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--bg1);
}
.pl-election-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.pl-verdict-stack {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.pl-verdict-fraud {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--hate);
}
.pl-verdict-or {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: clamp(14px, 2vw, 22px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--muted);
}
.pl-verdict-him {
  font-family: var(--archivo);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--love);
}
.pl-odds-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.pl-odds {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(20px, 3.5vw, 28px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pl-odds .love { color: var(--love); }
.pl-odds .hate { color: var(--hate); }
.pl-odds .sep  { color: var(--muted); margin: 0 2px; }
.pl-splitbar {
  flex: 1;
  height: 6px;
  background: var(--hate);
  overflow: hidden;
  display: flex;
}
.pl-splitbar > span { background: var(--love); display: block; }
.pl-dateline {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pl-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---- editorial grid: graph + log left, community right ---- */
.pl-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  border-top: 1px solid var(--text);
}
@media (max-width: 760px) { .pl-grid { grid-template-columns: 1fr; } }

.pl-left {
  padding-right: 20px;
  border-right: 1px solid var(--text);
}
@media (max-width: 760px) {
  .pl-left { padding-right: 0; border-right: none; border-bottom: 1px solid var(--text); }
}
.pl-right {
  padding-left: 20px;
}
@media (max-width: 760px) { .pl-right { padding-left: 0; } }

.pl-section {
  margin-top: 20px;
}
.pl-section-head {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--text);
}

/* ---- game log rows (in player page) ---- */
.pl-log-row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  align-items: baseline;
}
.pl-log-date {
  font-family: var(--mono);
  color: var(--muted);
  width: 78px;
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  font-size: 10px;
}
.pl-log-line {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-log-idx {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 12px;
}