/* Ultimate Sports — shared P2P-client design system.
   This is the canonical source of truth for the silver-gray Windows/P2P-client
   look used by lobby-app, shell, and the dashboard. It contains design tokens,
   window chrome, LCD readouts, panels, tables, buttons, and reusable components.
   It MUST NOT contain layout-only rules that belong to a single app (e.g.
   lobby-specific .desk / .win page wrappers). Those stay in the app's own
   override sheet, loaded after this file. */

:root {
  color-scheme: light;
  --desk: #1a1e26;
  --chrome: #e7eaf0;
  --chrome-2: #d5dae4;
  --frame: #5c636f;
  --bevel-hi: #ffffff;
  --bevel-lo: #b3bac6;
  --field: #ffffff;
  --field-alt: #f2f5fb;
  --field-line: #e3e7f0;
  --ink: #12151c;
  --ink-dim: #626a78;
  --ink-faint: #8b93a1;
  --sel: #2f6bff;
  --sel-deep: #2456c9;
  --lcd: #34f08a;
  --lcd-dim: #1a8a4f;
  --lcd-bg: #05130b;
  --lcd-line: #0c2a1a;
  --gold: #b97f10;
  --live: #ff4d4d;
  --pos: #1a8a4f;
  --neg: #cf3d5e;
  --ui: Tahoma, Geneva, Verdana, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, "Lucida Console", monospace;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  font-family: var(--ui);
  color: var(--ink);
  background: radial-gradient(120% 120% at 50% -10%, #2c3340, var(--desk) 70%);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sel); color: #fff; }

.tnum { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ok { color: var(--ink-faint); }
.fatal-error { padding: 24px; font-family: Tahoma, system-ui, sans-serif; color: #eef1f6; }
.fatal-error-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8b93a1; }
.fatal-error-title { font-size: 20px; }
.fatal-error-msg { color: #97a0b0; }

.browser-error { padding: 18px 14px; text-align: center; }
.browser-error-label { font-size: 12px; font-weight: 700; color: var(--neg); margin: 0 0 4px; }
.browser-error-msg { font-size: 11px; color: var(--ink-faint); margin: 0 0 10px; line-height: 1.45; }

/* ---------- window chrome ---------- */

.titlebar {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 10px;
  background: linear-gradient(180deg, #262b35, #191d25);
  color: #eef1f6;
  border-bottom: 1px solid #0d0f14;
  user-select: none;
}
.app-ico {
  width: 18px; height: 18px; border-radius: 4px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--lcd), var(--lcd-dim));
  color: var(--lcd-bg);
  font-weight: 900; font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.titlebar .t { font-size: 12px; font-weight: 700; }
.titlebar .t small { color: #97a0b0; font-weight: 400; margin-left: 6px; }
.win-btns { margin-left: auto; display: flex; gap: 6px; }
.win-btns i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.win-btns .mi { background: #f5bd4f; }
.win-btns .ma { background: #34c759; }
.win-btns .cl { background: #ff5f57; }

.menubar {
  display: flex; gap: 2px; padding: 3px 6px;
  background: var(--chrome);
  border-bottom: 1px solid var(--bevel-lo);
  box-shadow: inset 0 1px 0 var(--bevel-hi);
  font-size: 12.5px;
  user-select: none;
}
.menubar span { padding: 3px 9px; border-radius: 3px; cursor: default; }
.menubar span:hover { background: var(--sel); color: #fff; }
/* An inert menubar has no handlers, so it must not offer a hover affordance. */
.menubar.is-inert span:hover { background: transparent; color: inherit; }

.toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px;
  background: linear-gradient(180deg, #eef1f6, var(--chrome-2));
  border-bottom: 1px solid var(--bevel-lo);
  box-shadow: inset 0 1px 0 var(--bevel-hi);
}
.tbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #e6eaf2);
  border: 1px solid var(--bevel-lo); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.tbtn:hover { border-color: var(--sel); }
.tbtn:active { background: linear-gradient(180deg, #dfe4ee, #eef1f6); }
.tbtn:focus-visible, .wbtn:focus-visible, .tnode:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
.tbtn.primary { background: linear-gradient(180deg, #4f86ff, var(--sel)); color: #fff; border-color: var(--sel-deep); }
.tb-spacer { flex: 1; }

.wallet-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #e6eaf2);
  border: 1px solid var(--bevel-lo); border-radius: 4px;
  cursor: pointer;
}
.wallet-chip:hover { border-color: var(--sel); }
.wallet-ico { width: 7px; height: 13px; background: var(--gold); transform: skewX(-10deg); border-radius: 1px; }

.peers {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 4px;
  background: var(--lcd-bg); border: 1px solid var(--lcd-line);
  font-family: var(--mono); font-size: 11px; color: var(--lcd);
  text-shadow: 0 0 6px rgba(52, 240, 138, 0.5);
}
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--lcd); box-shadow: 0 0 7px var(--lcd); animation: blink 2.4s infinite; }
@keyframes blink { 0%, 92%, 100% { opacity: 1; } 95% { opacity: 0.35; } }

/* ---------- LCD ticker ---------- */

.lcd-strip {
  display: flex; align-items: center; gap: 12px;
  margin: 8px; padding: 8px 12px;
  background: var(--lcd-bg); border: 1px solid var(--lcd-line); border-radius: 5px;
  font-family: var(--mono); font-size: 12.5px; color: var(--lcd);
  text-shadow: 0 0 6px rgba(52, 240, 138, 0.45);
  overflow: hidden;
}
.lcd-strip .tag { color: var(--live); text-shadow: 0 0 6px rgba(255, 77, 77, 0.5); font-weight: 700; white-space: nowrap; }
.lcd-strip .scroll { white-space: nowrap; overflow: hidden; flex: 1; }
.lcd-strip .scroll b { display: inline-block; font-weight: 400; animation: marq 26s linear infinite; padding-left: 100%; }
@keyframes marq { to { transform: translateX(-100%); } }
.lcd-strip .eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.lcd-strip .eq i { width: 3px; background: var(--lcd); box-shadow: 0 0 5px var(--lcd); animation: eq 900ms ease-in-out infinite; }
.lcd-strip .eq i:nth-child(2) { animation-delay: 0.15s; }
.lcd-strip .eq i:nth-child(3) { animation-delay: 0.3s; }
.lcd-strip .eq i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* ---------- body ---------- */

.group {
  background: var(--field);
  border: 1px solid var(--bevel-lo); border-radius: 5px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6);
}
.group h3 {
  margin: 0; padding: 8px 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--field-alt);
  border-bottom: 1px solid var(--field-line);
  border-radius: 5px 5px 0 0;
}
.pad { padding: 11px; }

.label-sm {
  display: block; margin: 10px 0 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.label-sm:first-child { margin-top: 0; }

/* category tree */
.tree { padding: 5px; }
.tnode {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 9px; border: 0; border-radius: 3px;
  background: transparent; text-align: left;
  font-family: var(--ui); font-size: 12.5px; color: var(--ink);
  cursor: pointer;
}
.tnode:hover { background: var(--field-alt); }
.tnode.on { background: var(--sel); color: #fff; }
.tnode.on .c { color: rgba(255, 255, 255, 0.75); }
.tnode .c { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

/* wallet */
.lcd-bal {
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--lcd-bg); border: 1px solid var(--lcd-line); border-radius: 5px;
  font-family: var(--mono); color: var(--lcd);
  text-shadow: 0 0 6px rgba(52, 240, 138, 0.45);
}
.lcd-bal .big { font-size: 22px; font-weight: 700; }
.lcd-bal .sub { margin-top: 2px; font-size: 10.5px; letter-spacing: 0.04em; color: var(--lcd-dim); text-shadow: none; }
.wallet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wbtn {
  padding: 7px 9px;
  font-family: var(--ui); font-size: 11.5px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #e6eaf2);
  border: 1px solid var(--bevel-lo); border-radius: 4px;
  cursor: pointer;
}
.wbtn:hover { border-color: var(--sel); }
.wbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.wbtn.wide { grid-column: span 2; background: linear-gradient(180deg, #4f86ff, var(--sel)); color: #fff; border-color: var(--sel-deep); }
.wnote { margin: 10px 0 0; font-size: 10px; line-height: 1.5; color: var(--ink-faint); }
.wnote b { color: var(--lcd-dim); }

.ledger { display: flex; flex-direction: column; margin-top: 8px; }
.ledger:empty { display: none; }
.lrow {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 2px;
  border-top: 1px solid var(--field-line);
  font-size: 11.5px;
}
.lrow:first-child { border-top: 0; }
.lrow .l { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .a { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lrow .a.pos { color: var(--pos); }
.lrow .a.neg { color: var(--neg); }
.ledger-empty { font-size: 11px; color: var(--ink-faint); margin: 6px 0 0; }

/* friends */
.identity .id-row { display: flex; gap: 6px; align-items: center; }
.id-key {
  flex: 1; min-width: 0;
  padding: 6px 8px;
  background: var(--lcd-bg); border: 1px solid var(--lcd-line); border-radius: 4px;
  color: var(--lcd); font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 0 5px rgba(52, 240, 138, 0.4);
}
.id-crypto { margin: 7px 0 0; font-size: 10.5px; font-weight: 700; color: var(--lcd-dim); letter-spacing: .02em; }

.linkbtn {
  border: 0; background: none; cursor: pointer; padding: 0 6px;
  color: var(--sel); font-family: var(--ui); font-size: 11.5px; font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--sel-deep); }

.redeem-bar { padding: 10px 12px 12px; border-top: 1px solid var(--field-line); }
.redeem-form { display: grid; grid-template-columns: 1fr 84px; gap: 6px; }
.redeem-form input {
  width: 100%; padding: 7px 9px; border: 1px solid var(--bevel-lo); border-radius: 4px;
  background: var(--field); font-family: var(--mono); font-size: 11px; color: var(--ink);
}
.redeem-form input:focus { outline: 2px solid var(--sel); outline-offset: -1px; }
.room-note { margin: 8px 0 0; min-height: 14px; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); opacity: 0; transition: opacity .2s; }
.room-note.show { opacity: 1; color: var(--pos); }

.friend-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.friend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--field-alt); border: 1px solid var(--field-line); border-radius: 4px;
  font-size: 12px;
}
.friend-row .f-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.friend-row .f-dot.on { background: var(--lcd-dim); box-shadow: 0 0 6px var(--lcd); animation: fpulse 2.2s infinite; }
.friend-row .f-key { transition: color .15s; }
@keyframes fpulse { 0%, 90%, 100% { opacity: 1; } 95% { opacity: .5; } }
.friend-row .f-name { font-weight: 700; }
.friend-row .f-key { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.friend-row .f-del { border: 0; background: none; color: var(--ink-faint); font-size: 13px; cursor: pointer; padding: 0 2px; }
.friend-row .f-del:hover { color: var(--neg); }
.friend-empty { font-size: 11px; color: var(--ink-faint); margin: 8px 0 0; }
.friend-add { display: grid; grid-template-columns: 1fr 88px; gap: 6px; margin-top: 10px; }
.friend-add .wbtn.wide { grid-column: span 2; }

.set-input, .friend-add input {
  width: 100%;
  padding: 7px 9px;
  font-family: var(--ui); font-size: 12px; color: var(--ink);
  background: var(--field); border: 1px solid var(--bevel-lo); border-radius: 4px;
}
.friend-add input { font-family: var(--mono); font-size: 11px; }
.set-input:focus, .friend-add input:focus { outline: 2px solid var(--sel); outline-offset: -1px; }

/* settings */
.settings-countries { display: flex; flex-wrap: wrap; gap: 5px; }
.country-chip {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--bevel-lo); border-radius: 4px;
  background: var(--field); font-size: 17px; cursor: pointer;
}
.country-chip:hover { border-color: var(--sel); }
.country-chip.is-active { border-color: var(--sel); box-shadow: 0 0 0 2px var(--sel) inset; }
.settings-money { display: flex; gap: 6px; }
.settings-money button {
  flex: 1; padding: 7px;
  font-family: var(--ui); font-size: 11.5px; font-weight: 700; color: var(--ink);
  background: var(--field); border: 1px solid var(--bevel-lo); border-radius: 4px;
  cursor: pointer;
}
.settings-money button.is-active { background: var(--sel); border-color: var(--sel-deep); color: #fff; }
.realmoney-gate {
  margin-top: 8px; padding: 9px 11px;
  border: 1px dashed var(--bevel-lo); border-radius: 4px; background: var(--field-alt);
}
.gate-title { margin: 0 0 5px; font-size: 11px; font-weight: 700; }
.gate-list { margin: 0; padding-left: 15px; font-size: 10.5px; line-height: 1.6; color: var(--ink-dim); }

/* ---------- server browser ---------- */

.browser { border: 1px solid var(--bevel-lo); border-radius: 5px; overflow: hidden; background: var(--field); }
.br-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--field-alt); border-bottom: 1px solid var(--field-line);
}
.br-head h3 { margin: 0; font-size: 12.5px; font-weight: 700; }
.br-head .n { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }

.lv-wrap { overflow-x: auto; }
.lv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lv thead th {
  padding: 7px 12px;
  text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
  background: linear-gradient(180deg, #fbfcfe, #eef1f7);
  border-bottom: 1px solid var(--bevel-lo); border-right: 1px solid var(--field-line);
}
.lv thead th:last-child { border-right: 0; }
.lv thead th.num, .lv td.num { text-align: right; }
.lv tbody tr { border-bottom: 1px solid var(--field-line); cursor: pointer; }
.lv tbody tr:nth-child(even) { background: var(--field-alt); }
.lv tbody tr:hover { background: #eaf0ff; }
.lv tbody tr.sel { background: var(--sel); color: #fff; }
.lv tbody tr.sel .dim, .lv tbody tr.sel .kind, .lv tbody tr.sel .st { color: rgba(255, 255, 255, 0.85); }
.lv td { padding: 8px 12px; white-space: nowrap; }
.lv td.srv { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.lv td.srv .fl { margin-right: 0; }
.lv td.srv .srv-cover {
  width: 44px;
  height: 28px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--field-line);
  flex: none;
}
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); }
.st .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.st.live .d { background: var(--live); box-shadow: 0 0 6px var(--live); }
.st.open .d { background: var(--lcd-dim); }
.st.priv .d { background: var(--sel); }
/* Fight-card onboarding: no fighter picker, no jersey — just handle + photo + wallet. */
.screen.profile-only #teamGrid,
.screen.profile-only .kit-card { display: none !important; }

@media (max-width: 560px) {
  /* Override EVERY portrait constraint together — the base min-width:122px beat a lone
     width:92px, so the old mobile shrink was dead and the hero clipped its right corner. */
  .fh-portrait {
    width: min(88px, 24vw); height: min(88px, 24vw);
    min-width: min(88px, 24vw); min-height: min(88px, 24vw);
    max-width: 88px; max-height: 88px;
    flex-basis: min(88px, 24vw);
  }
  .fh-class { max-width: 90px; }
  .fh-name { font-size: 12.5px; }
  .fh-stage { gap: 8px; }
}

.st.locked { color: var(--gold, #f59e0b); font-weight: 700; }
.st.locked .d { background: var(--gold, #f59e0b); box-shadow: 0 0 6px var(--gold, #f59e0b); }
.lv tbody tr.locked-row { background: color-mix(in srgb, var(--gold, #f59e0b) 8%, transparent); }
.kind { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.dim { color: var(--ink-dim); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.empty-note { margin: 0; padding: 12px; font-size: 11.5px; color: var(--ink-faint); }
.empty-note.is-hidden { display: none; }

/* ---------- status bar ---------- */

.statusbar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px;
  background: var(--lcd-bg); border-top: 1px solid var(--lcd-line);
  font-family: var(--mono); font-size: 11px; color: var(--lcd);
  text-shadow: 0 0 6px rgba(52, 240, 138, 0.4);
}
.statusbar .sep { color: var(--lcd-dim); }
.statusbar .ok { color: var(--lcd); }
.statusbar .right { margin-left: auto; color: var(--lcd-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- modal ---------- */

.modal-back {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 18, 0.55);
}
.modal-back.is-hidden { display: none; }
/* Phone widths: the lobby column stacks at 880px, making .win thousands of px tall, so
   an absolutely-positioned overlay centers in the whole document and lands off-screen
   (the room-password dialog was unreachable). Anchor overlays to the viewport instead.
   Placed AFTER the base rule so it wins on source order without !important. */
@media (max-width: 880px) {
  .modal-back { position: fixed; }
}
.modal {
  width: min(380px, calc(100% - 40px));
  padding: 16px;
  background: var(--chrome);
  border: 1px solid var(--frame); border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--bevel-hi);
}
.modal-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.modal .set-input { background: var(--field); }
.room-friends { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; }
.room-friend {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--field); border: 1px solid var(--bevel-lo); border-radius: 4px;
  font-size: 12px; cursor: pointer;
}
.room-friend input { margin: 0; }
.room-friend .f-key { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.room-none { font-size: 11px; color: var(--ink-faint); }
.modal-acts { display: grid; grid-template-columns: 90px 1fr; gap: 6px; margin-top: 14px; }

/* ---------- app loader ---------- */

.app-loader { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--desk); }
.app-loader.is-hidden { display: none; }
/* On a phone the stacked layout is thousands of px tall; anchor the room loader to the
   viewport so it (and its "← Back to lobby" bar) is on screen, not a mid-page slice. */
@media (max-width: 880px) {
  .app-loader { position: fixed; height: 100dvh; }
}
.loader-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 8px;
  background: linear-gradient(180deg, #eef1f6, var(--chrome-2));
  border-bottom: 1px solid var(--bevel-lo);
  font-size: 12.5px; font-weight: 700;
}
.app-frame { flex: 1; width: 100%; border: 0; background: #fff; }

/* ---------- misc ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- social feed ---------- */
.social-feed {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px 10px;
}
.sf-post {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.sf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
}
.sf-author { font-weight: 600; color: #dfe4ee; }
.sf-verified { color: #5b9bf5; font-size: 10px; }
.sf-source {
  background: rgba(91,155,245,.12);
  color: #7eb0ff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: .03em;
}
.sf-time { color: #6b7280; margin-left: auto; font-size: 10px; }
.sf-text { color: #b8c0d0; font-size: 12px; line-height: 1.5; margin: 0 0 6px; }
.sf-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #6b7280;
}
.sf-cat {
  background: rgba(255,255,255,.05);
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}
.sf-media { color: #8b93a1; }
.sf-actions { margin-left: auto; display: flex; gap: 6px; }
.sf-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sf-btn:hover { color: #97a0b0; }
.social-controls {
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ---- social feed → early-P2P newsgroup / transfer list (LimeWire) ---- */
.social-feed { padding: 0; border-top: 1px solid var(--bevel-lo); }
.sf-post {
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  padding: 5px 10px;
  margin: 0;
  font-family: var(--mono);
}
.sf-post:nth-child(even) { background: var(--field-alt); }
.sf-head { gap: 6px; margin-bottom: 2px; font-size: 11px; }
.sf-author { font-weight: 700; color: var(--ink); font-family: var(--mono); }
.sf-verified { color: var(--sel); }
.sf-source {
  background: var(--field-alt);
  color: var(--ink-dim);
  border: 1px solid var(--bevel-lo);
  border-radius: 2px;
  padding: 0 5px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 9px;
}
.sf-time { color: var(--ink-faint); font-family: var(--mono); }
.sf-text { color: var(--ink); font-family: var(--mono); font-size: 12px; margin: 0 0 3px; }
.sf-meta { font-family: var(--mono); color: var(--ink-dim); }
.sf-cat {
  background: transparent;
  color: var(--lcd-dim);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0;
  font-size: 9.5px;
}
.sf-cat::before { content: '['; }
.sf-cat::after { content: ']'; }
.sf-btn {
  color: var(--ink-dim);
  text-decoration: none;
  font-family: var(--mono);
  border: 1px solid transparent;
  padding: 0 3px;
  border-radius: 2px;
}
.sf-btn:hover { color: var(--ink); background: var(--field-alt); border-color: var(--bevel-lo); text-decoration: none; }
.social-controls { border-top: 1px solid var(--bevel-lo); }

/* ============ fight-night hero — featured live event marquee ============
   Win98 panel chrome wrapping a dark broadcast "screen" (screens stay dark
   in the light client, same rule as the LCD strip). */
.fight-hero {
  border: 1px solid var(--frame);
  background: var(--chrome);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
  margin-bottom: 14px;
}
.fh-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  background: linear-gradient(180deg, var(--chrome), var(--chrome-2));
  border-bottom: 1px solid var(--bevel-lo);
  font-size: 11px;
}
.fh-live {
  display: inline-flex; align-items: center; gap: 4px;
  color: #fff; background: var(--live);
  padding: 1px 6px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid #a01f1f;
}
.fh-live .d { width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: fhpulse 1.2s infinite; }
@keyframes fhpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.fh-eyebrow { font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.fh-server { margin-left: auto; color: var(--ink-faint); font-family: var(--mono); }

.fh-stage {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background-color: var(--lcd-bg);
  background-image:
    radial-gradient(120% 90% at 18% 6%, rgba(239, 68, 68, .30), transparent 55%),
    radial-gradient(120% 90% at 82% 6%, rgba(34, 197, 94, .30), transparent 55%);
  border-top: 1px solid #000; border-bottom: 1px solid #000;
  padding: 16px 12px; gap: 8px;
}
.fh-corner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.fh-portrait {
  position: relative;
  width: 122px; height: 122px;
  min-width: 122px; min-height: 122px;
  max-width: 122px; max-height: 122px;
  overflow: hidden;
  flex: 0 0 122px;
  border: 2px solid var(--corner, #666);
  box-shadow: 0 0 20px -5px var(--corner, #666), inset 0 0 0 1px rgba(0, 0, 0, .6);
  background: #000;
}
/* Absolute crop — HD full-body fighter PNGs must never expand the frame */
.fh-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.fh-name { color: #fff; font-weight: 700; font-size: 14px; }
.fh-nick { color: var(--lcd); font-family: var(--mono); font-size: 11px; font-style: italic; }
.fh-rec { color: #cbd3df; font-size: 12px; }

.fh-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; }
.fh-vs {
  font-family: var(--mono); font-weight: 900; font-size: 32px; color: #ffcf33;
  text-shadow: 0 2px 0 #7a3d00, 0 0 14px rgba(255, 207, 51, .35); letter-spacing: .02em;
}
.fh-class { color: #cbd3df; font-size: 11px; text-align: center; max-width: 116px; letter-spacing: .03em; }

.fh-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, var(--chrome), var(--chrome-2));
  border-top: 1px solid var(--bevel-hi);
}
.fh-meta { color: var(--ink-dim); font-size: 11.5px; font-family: var(--mono); }
.fh-join {
  margin-left: auto;
  font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: .03em;
  color: #fff; background: var(--sel); border: 1px solid var(--sel-deep);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35), inset -1px -1px 0 rgba(0, 0, 0, .3);
  padding: 7px 18px; cursor: pointer;
}
.fh-join:hover { background: var(--sel-deep); }
.fh-join:active { box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .3), inset -1px -1px 0 rgba(255, 255, 255, .2); }

@media (max-width: 560px) {
  .fh-portrait { width: 92px; height: 92px; }
  .fh-vs { font-size: 26px; }
  .fh-foot { flex-wrap: wrap; }
}