/* ---------------------------------------------------------------------------
   FBGM 27
   Palette rules carried over: electric blue accent, no orange in the chrome,
   solid saturated fills only (never a washed-out tint), no emoji, no
   left-edge stripes, nothing at regular weight.
--------------------------------------------------------------------------- */
:root {
  --bg:        #0b0e14;
  --bg-2:      #111621;
  --bg-3:      #172032;
  --line:      #243049;
  --line-soft: #1b2436;
  --txt:       #eef2f9;
  --txt-2:     #9fb0cc;
  --txt-3:     #6b7d9c;
  --accent:    #3ea6ff;
  --accent-2:  #1e63d6;
  --good:      #22c55e;
  --bad:       #ff3a55;

  --iron:      #3a3f49;
  --bronze:    #c0743d;
  --silver:    #9aa1ae;
  --gold:      #ffd700;
  --diamond:   #ff3a55;
  --enchanted: #d9a400;   /* legendary gold (was purple) */

  /* attribute scale: dark red → red → yellow → green → dark green */
  --a-1: #8b0f14;
  --a-2: #e0262b;
  --a-3: #f2c500;
  --a-4: #2fb344;
  --a-5: #0b6b2a;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font: 500 14px/1.45 var(--sans);
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
}

/* --- shell ---------------------------------------------------------------- */
#shell { display: grid; grid-template-columns: 232px 1fr; height: 100vh; }

#sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto;
}

.brand {
  padding: 18px 18px 14px;
  font-size: 17px; font-weight: 800; letter-spacing: -0.3px;
  border-bottom: 1px solid var(--line);
}
.brand b { color: var(--accent); }
.brand span {
  display: block; margin-top: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--txt-3);
}

nav { padding: 10px 8px; flex: 1; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%;
  padding: 9px 11px; margin-bottom: 2px;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--txt-2);
  font: 600 13.5px/1 var(--sans); text-align: left; cursor: pointer;
}
.nav-item:hover { background: var(--bg-3); color: var(--txt); }
.nav-item.on { background: var(--accent-2); color: #fff; font-weight: 700; }
.nav-item .count {
  font: 600 11px/1 var(--mono);
  color: var(--txt-3); font-variant-numeric: tabular-nums;
}
.nav-item.on .count { color: #cfe3ff; }

.side-foot {
  padding: 12px 16px; border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--txt-3);
}

/* --- main ----------------------------------------------------------------- */
main { overflow-y: auto; padding: 22px 26px 60px; }
.head { margin-bottom: 18px; }
.head h1 { font-size: 23px; font-weight: 800; letter-spacing: -0.4px; }
.head p { margin-top: 4px; color: var(--txt-2); font-size: 13px; font-weight: 700; }

/* --- controls ------------------------------------------------------------- */
.bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
input[type=search], select {
  background: var(--bg-2); color: var(--txt);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 11px; font: 600 13px var(--sans); outline: none;
}
input[type=search] { min-width: 250px; }
input[type=search]:focus, select:focus { border-color: var(--accent); }
input[type=search]::placeholder { color: var(--txt-3); font-weight: 700; }
select { cursor: pointer; }

.hits {
  margin-left: auto; font: 700 12px var(--mono);
  color: var(--txt-3); font-variant-numeric: tabular-nums;
}

/* --- stat tiles ----------------------------------------------------------- */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.tile {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 15px;
}
.tile .k {
  font: 700 10.5px/1 var(--sans); letter-spacing: 1px;
  text-transform: uppercase; color: var(--txt-3);
}
.tile .v {
  margin-top: 7px; font: 800 25px/1 var(--mono);
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
}
.tile .s { margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--txt-2); }

/* --- tables --------------------------------------------------------------- */
.tw { border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; overflow-y: hidden; background: var(--bg-2); }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-3); color: var(--txt-2);
  font: 700 10.5px/1 var(--sans); letter-spacing: 0.9px; text-transform: uppercase;
  text-align: left; padding: 10px 11px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
thead th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td {
  padding: 8px 11px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover td { background: var(--bg-3); }
td.num { font-family: var(--mono); font-weight: 700; }
td .sub { display: block; font-size: 11px; font-weight: 600; color: var(--txt-3); }

/* --- identity cell -------------------------------------------------------- */
.who { display: flex; align-items: center; gap: 9px; }
.who img { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); object-fit: cover; }
.who .nm { font-weight: 700; }

.logo { width: 20px; height: 20px; object-fit: contain; }

/* --- badges --------------------------------------------------------------- */
.ovr {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 3px 7px; border-radius: 6px;
  font: 800 13px/1.2 var(--mono); font-variant-numeric: tabular-nums;
  color: #0b0e14;
}
.t-iron      { background: var(--iron);      color: #dfe6f2; }
.t-bronze    { background: var(--bronze);    color: #1a1005; }
.t-silver    { background: var(--silver);    color: #12161f; }
.t-gold      { background: var(--gold);      color: #1a1500; }
.t-diamond   { background: var(--diamond);   color: #2a0006; }
/* 90+: legendary — white card, bold gold number, gold rim */
.t-enchanted { background: #fff; color: #a87400; box-shadow: inset 0 0 0 2px #e0a800; text-shadow: none; }

.pill {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font: 700 10.5px/1.3 var(--sans); letter-spacing: 0.4px; text-transform: uppercase;
  background: var(--bg-3); color: var(--txt-2); border: 1px solid var(--line);
}
.pill.acc  { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.pill.warn { background: var(--diamond);  color: #fff; border-color: var(--diamond); }
.pill.ok   { background: var(--good);     color: #04220f; border-color: var(--good); }

.src { font: 700 10px var(--mono); color: var(--txt-3); text-transform: uppercase; }

/* --- team grid ------------------------------------------------------------ */
.divs { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
.div-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.div-card h3 {
  padding: 9px 13px; background: var(--bg-3);
  font: 700 11px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--txt-2); border-bottom: 1px solid var(--line);
}
.team-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.team-row:last-child { border-bottom: 0; }
.team-row:hover { background: var(--bg-3); }
.team-row .nm { font-weight: 700; flex: 1; }
.team-row .rc { font: 700 12px var(--mono); color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* --- detail overlay ------------------------------------------------------- */
#overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 7, 13, 0.78);
  display: none; align-items: flex-start; justify-content: center;
  padding: 36px 20px; overflow-y: auto;
}
#overlay.on { display: flex; }
.sheet {
  width: min(980px, 100%); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
}
.sheet-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.sheet-head img.face { width: 56px; height: 56px; border-radius: 50%; background: var(--bg); object-fit: cover; }
.sheet-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.sheet-head .meta { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--txt-2); }
.x {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-2); color: var(--txt-2);
  font: 700 15px/1 var(--sans); cursor: pointer;
}
.x:hover { background: var(--diamond); color: #fff; border-color: var(--diamond); }
.sheet-body { padding: 16px 18px; }

.sect { margin-bottom: 18px; }
.sect:last-child { margin-bottom: 0; }
.sect h4 {
  font: 700 10.5px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--txt-3); margin-bottom: 9px;
}

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
.kv > div { background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.kv .k { font: 700 10px/1 var(--sans); letter-spacing: 0.8px; text-transform: uppercase; color: var(--txt-3); }
.kv .v { margin-top: 5px; font: 700 14px var(--mono); font-variant-numeric: tabular-nums; }

/* attribute grid */
.attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.attr {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 9px;
}
.attr .an { font: 700 10.5px var(--mono); color: var(--txt-3); width: 30px; flex: none; }
.attr .ab { flex: 1; height: 5px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.attr .ab i { display: block; height: 100%; border-radius: 3px; }
.attr .av { font: 700 12px var(--mono); font-variant-numeric: tabular-nums; width: 22px; text-align: right; }

/* --- schedule ------------------------------------------------------------- */
.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 12px; }
.wk { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wk h3 {
  padding: 8px 12px; background: var(--bg-3); border-bottom: 1px solid var(--line);
  font: 700 11px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--txt-2);
  display: flex; justify-content: space-between;
}
.gm {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  padding: 7px 12px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.gm:last-child { border-bottom: 0; }
.gm .tm { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.gm .sc { font: 700 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--txt-2); }
.gm .win { color: var(--good); }

/* --- misc ----------------------------------------------------------------- */
.empty { padding: 44px; text-align: center; color: var(--txt-3); font-weight: 600; }
.spin {
  width: 22px; height: 22px; margin: 44px auto;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: sp 0.7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

.note {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 13px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 600; color: var(--txt-2);
}
.note b { color: var(--txt); }

.more {
  display: block; width: 100%; padding: 11px;
  background: var(--bg-3); color: var(--accent);
  border: 0; border-top: 1px solid var(--line);
  font: 700 12.5px var(--sans); cursor: pointer;
}
.more:hover { background: var(--accent-2); color: #fff; }

/* ---------------------------------------------------------------------------
   Player profile
--------------------------------------------------------------------------- */
.back {
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 9px;
  padding: 7px 14px 6px; font: 900 12.5px var(--sans); cursor: pointer; margin-bottom: 14px;
}
.back:hover { background: var(--ink); color: #fff; }

.pf-hero {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(120deg, var(--team) 0%, var(--bg-2) 62%);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; margin-bottom: 16px;
}
.pf-face {
  width: 96px; height: 96px; flex: none; border-radius: 50%;
  background: rgba(0,0,0,0.35); object-fit: cover;
  border: 2px solid rgba(255,255,255,0.22);
}
.pf-noface {
  display: flex; align-items: center; justify-content: center;
  font: 800 30px/1 var(--sans); color: rgba(255,255,255,0.65);
}
.pf-id { flex: 1; min-width: 0; }
.pf-line { display: flex; align-items: baseline; gap: 11px; }
.pf-num { font: 800 21px/1 var(--mono); color: rgba(255,255,255,0.55); }
.pf-hero h1 { font-size: 31px; font-weight: 800; letter-spacing: -0.7px; }
.pf-sub {
  display: flex; align-items: center; gap: 7px; margin-top: 5px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.86);
}
.pf-vitals { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 13px; }
.pf-vital { font: 700 13px var(--sans); color: #fff; }
.pf-vital b {
  display: block; font: 700 10.5px/1 var(--sans); letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 3px;
}
.pf-ovr { text-align: center; flex: none; }
.pf-ovr-sub {
  margin-top: 7px; font: 700 10.5px/1.35 var(--sans);
  color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px;
}

.pf-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.55fr); gap: 14px; }
.pf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1080px) { .pf-grid { grid-template-columns: 1fr; } }

.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; }
.panel h4 {
  font: 700 10.5px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--txt-3); margin-bottom: 12px;
}
.panel h5 {
  font: 700 10px/1 var(--sans); letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); margin: 14px 0 8px;
}
.panel h5:first-child { margin-top: 0; }

/* headline ratings */
.keyattrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px; }
.ka { background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; }
.ka-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ka-n { font: 700 11px/1.25 var(--sans); color: var(--txt-2); }
.ka-v { font: 800 19px/1 var(--mono); font-variant-numeric: tabular-nums; }
.ka-bar { height: 5px; border-radius: 3px; background: var(--bg); margin: 8px 0 5px; overflow: hidden; }
.ka-bar i { display: block; height: 100%; border-radius: 3px; }
.ka-p { font: 600 10px/1 var(--sans); color: var(--txt-3); }

/* full attribute list */
.agroup { margin-bottom: 4px; }
.arows { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 4px 14px; }
.arow { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.a-n { flex: 1; font: 600 12px var(--sans); color: var(--txt-2); white-space: nowrap;
       overflow: hidden; text-overflow: ellipsis; }
.a-b { width: 74px; flex: none; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.a-b i { display: block; height: 100%; border-radius: 3px; }
.a-v { width: 24px; flex: none; text-align: right;
       font: 700 12.5px var(--mono); font-variant-numeric: tabular-nums; }

.pf-more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pf-more summary {
  cursor: pointer; font: 700 12px var(--sans); color: var(--accent); list-style: none;
}
.pf-more summary::-webkit-details-marker { display: none; }
.pf-more summary:before { content: '+ '; }
.pf-more[open] summary:before { content: '- '; }

.statblock { margin-bottom: 12px; }
.statblock .tw { border-radius: 8px; }

.pf-note { margin-top: 10px; font: 600 11px/1.45 var(--sans); color: var(--txt-3); }
.pf-gap {
  background: var(--bg-3); border: 1px solid var(--line); border-left: 0;
  border-radius: 8px; padding: 11px 13px;
  font: 600 12.5px/1.5 var(--sans); color: var(--txt-2);
}
.pf-gap b { color: var(--txt); display: block; margin-bottom: 3px; }

/* --- intangibles ---------------------------------------------------------- */
.perso-top { display: flex; align-items: center; gap: 9px; }
.perso-fam { font: 700 10px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--txt-3); }
.perso-desc { margin-top: 8px; font: 600 12.5px/1.5 var(--sans); color: var(--txt-2); }

.motiv { display: flex; flex-direction: column; gap: 5px; }
.mrow {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 10px;
}
.mlabel { font: 700 10.5px var(--sans); letter-spacing: 1px; text-transform: uppercase;
          color: var(--txt-3); width: 62px; flex: none; white-space: nowrap; }
.mval { flex: 1; font: 700 12.5px var(--sans); }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.badge {
  background: var(--bg-3); border: 1px solid var(--accent-2);
  border-radius: 8px; padding: 9px 11px;
}
.badge.bad { border-color: var(--diamond); }
.b-l { display: block; font: 800 12.5px var(--sans); color: var(--accent); }
.badge.bad .b-l { color: var(--diamond); }
.b-d { display: block; margin-top: 3px; font: 600 11px/1.4 var(--sans); color: var(--txt-2); }

/* --- career traits -------------------------------------------------------- */
.traits { display: flex; flex-direction: column; gap: 8px; }
.trait {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px;
}
.trait.good  { border-color: var(--good); }
.trait.bad   { border-color: var(--diamond); }
.trait.mixed { border-color: var(--gold); }
.t-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.t-l { font: 800 13px var(--sans); }
.trait.good .t-l  { color: var(--good); }
.trait.bad .t-l   { color: var(--diamond); }
.trait.mixed .t-l { color: var(--gold); }
.t-f { font: 700 10.5px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--txt-3); }
.t-d { margin-top: 5px; font: 600 12px/1.45 var(--sans); color: var(--txt-2); }
.t-e {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  font: 700 11.5px/1.4 var(--mono); color: var(--txt);
}

.t-tags { display: flex; gap: 5px; flex: none; }
.t-mag, .t-acq {
  font: 700 10px/1 var(--sans); letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line);
  color: var(--txt-3); background: var(--bg);
}
.t-mag.major    { background: var(--diamond); color: #fff; border-color: var(--diamond); }
.t-mag.moderate { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.t-fut {
  margin-top: 7px; font: 600 11.5px/1.45 var(--sans); color: var(--txt-2);
}
.t-fut b {
  display: block; font: 700 10px/1 var(--sans); letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 3px;
}
.t-meta {
  margin-top: 5px; font: 600 10.5px/1.4 var(--sans); color: var(--txt-3);
}
.t-meta b { color: var(--txt-2); text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; }

/* --- effort --------------------------------------------------------------- */
.effort {
  margin-top: 12px; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px;
}
.ef-top { display: flex; align-items: baseline; gap: 9px; }
.ef-k {
  font: 700 10.5px/1 var(--sans); letter-spacing: 1px;
  text-transform: uppercase; color: var(--txt-3);
}
.ef-v { font: 800 21px/1 var(--mono); font-variant-numeric: tabular-nums; }
.ef-l { font: 700 12px var(--sans); color: var(--accent); margin-left: auto; }
.ef-bar { height: 6px; border-radius: 3px; background: var(--bg); margin: 9px 0 7px; overflow: hidden; }
.ef-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--diamond) 0%, var(--gold) 52%, var(--good) 100%);
}
.ef-n { font: 600 11.5px/1.4 var(--sans); color: var(--txt-2); }
.ef-m {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--line);
  font: 700 10.5px var(--mono); color: var(--txt-3);
}

/* --- catalogue ------------------------------------------------------------ */
.cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 11px; }
.cat-item {
  background: var(--bg-2); border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px;
}
.cat-item.good  { border-color: var(--good); }
.cat-item.bad   { border-color: var(--diamond); }
.cat-item.mixed { border-color: var(--gold); }
.ci-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-l { font: 800 14px var(--sans); }
.cat-item.good .ci-l  { color: var(--good); }
.cat-item.bad .ci-l   { color: var(--diamond); }
.cat-item.mixed .ci-l { color: var(--gold); }
.ci-n {
  margin-left: auto; font: 700 12px var(--mono);
  font-variant-numeric: tabular-nums; color: var(--txt-3);
}
.ci-d { margin-top: 7px; font: 600 12px/1.45 var(--sans); color: var(--txt-2); }
.ci-e {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line);
  font: 700 11.5px/1.4 var(--mono); color: var(--txt);
}
.ci-m { margin-top: 5px; font: 600 10.5px/1.4 var(--sans); color: var(--txt-3); }
.ci-m b { color: var(--txt-2); text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; }
.ci-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ci-ex a {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 7px 3px 4px; font: 700 11px var(--sans); color: var(--txt-2); text-decoration: none;
}
.ci-ex a:hover { border-color: var(--accent); color: var(--txt); }
.ci-ex.none { font: 600 11px var(--sans); color: var(--txt-3); }

/* --- season screen -------------------------------------------------------- */
.ss-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ss-logo { width: 64px; height: 64px; object-fit: contain; }
.ss-id h1 { font: 800 26px/1.1 var(--sans); letter-spacing: -0.3px; }
.ss-sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--txt-2); font-weight: 700; }
.ss-rec { font: 800 15px var(--mono); color: var(--txt); }
.ss-go { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  padding: 9px 15px; border-radius: 8px; cursor: pointer;
  font: 700 13px var(--sans); color: var(--txt);
  background: var(--bg-3); border: 1px solid var(--line);
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--txt-3); }
.btn:disabled { opacity: 0.55; cursor: progress; }

.seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; }
.seg button { padding: 7px 13px; border: 0; border-radius: 7px; cursor: pointer;
  font: 700 12.5px var(--sans); color: var(--txt-2); background: transparent; }
.seg button:hover { color: var(--txt); }
.seg button.on { background: var(--accent-2); color: #fff; }
.seg.sm { margin-bottom: 0; }
.seg.sm button { padding: 6px 11px; font-size: 12px; }

.sb { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sb-g { text-align: left; cursor: pointer; padding: 8px 10px; color: var(--txt);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; font: var(--sans); }
.sb-g:hover { border-color: var(--accent); }
.sb-g.mine { border: 2px solid var(--accent); }
.sb-r { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 700; color: var(--txt-2); }
.sb-r b { margin-left: auto; font: 800 16px var(--mono); }
.sb-r.w { color: var(--txt); }
.sb-r.w b { color: var(--good); }
.sb-inj { margin-top: 4px; font: 700 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.4px; color: var(--bad); }

.box-sc { display: flex; align-items: center; gap: 10px; font: 800 20px var(--sans); }
.box-sc span { color: var(--txt-3); font-size: 14px; }
.box-sc .logo { width: 30px; height: 30px; }

.grade { display: inline-block; min-width: 42px; padding: 2px 7px; border-radius: 6px; text-align: center;
  font: 800 12px var(--mono); color: #fff; }
.g-elite { background: var(--enchanted); }
.g-good  { background: var(--good); color: #04220f; }
.g-avg   { background: var(--accent-2); }
.g-bad   { background: var(--bad); }

a.plink { color: var(--txt); font-weight: 700; text-decoration: none; }
a.plink:hover { color: var(--accent); }
tbody tr.mine td { background: var(--bg-3); }
.team-row.mine { background: var(--bg-3); }
.team-row.mine .nm { color: var(--accent); }
.team-row.hdr { cursor: default; padding-top: 6px; padding-bottom: 6px; font: 700 10px var(--sans);
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--txt-3); }
.team-row.hdr span:first-child { width: 22px; }

.ss-log { margin-top: 18px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2); font: 600 12px var(--mono); color: var(--txt-3); }
.ss-log div { padding: 2px 0; }

.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pick-t { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px;
  cursor: pointer; color: var(--txt); font: var(--sans);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.pick-t:hover { border-color: var(--accent); background: var(--bg-3); }
.pick-t img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 4px; }
.pick-t b { font-weight: 800; }
.pick-t span { font-weight: 700; font-size: 12px; color: var(--txt-2); }

/* ---- playoffs ---- */
.po-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.po-seeds { padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.po-seeds h3, .po-conf h3 { font: 800 15px var(--sans); margin-bottom: 8px; }
.po-seed { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-weight: 700;
  border-bottom: 1px solid var(--line-soft); }
.po-seed:last-child { border-bottom: 0; }
.po-seed.mine .nm { color: var(--accent); }
.po-seed .nm { flex: 1; }
.po-seed .rc { font: 800 13px var(--mono); }
.po-n { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font: 800 12px var(--mono); background: var(--bg-3); color: var(--txt); }
.po-n.div { background: var(--accent-2); color: #fff; }
.po-tag { font: 700 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.4px; color: var(--txt-3); }
.po-conf { margin-bottom: 16px; }
.po-cols { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 12px; }
.po-cols.one { grid-template-columns: minmax(190px, 320px); }
.po-col { display: flex; flex-direction: column; gap: 10px; }
.po-col h4 { font: 800 11px var(--sans); text-transform: uppercase; letter-spacing: 0.6px; color: var(--txt-2); }
.po-g:disabled { cursor: default; }
.po-g:disabled:hover { border-color: var(--line); }
.po-sd { width: 16px; font: 800 11px var(--mono); color: var(--txt-3); }
.po-next { margin-top: 4px; font: 700 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent); }
.po-tbd { padding: 14px 10px; font-weight: 700; font-size: 12px; color: var(--txt-3);
  border: 1px dashed var(--line); border-radius: 10px; }
.po-tbd:empty { display: none; }
.po-bye { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-weight: 700;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; }
.po-bye span { margin-left: auto; font-size: 11px; color: var(--txt-2); }
.po-champ { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--gold); color: #1a1400; border-radius: 12px; }
.po-champ .logo { width: 48px; height: 48px; }
.po-champ .k { font: 800 11px var(--sans); text-transform: uppercase; letter-spacing: 0.6px; }
.po-champ b { display: block; font: 800 22px var(--sans); }
.po-champ span { font-weight: 700; font-size: 13px; }
@media (max-width: 760px) { .po-cols { grid-template-columns: 1fr; } }

/* ===========================================================================
   The player page, as a game screen (src/profile.js, all classes `pf2-`).

   The old panels read like a document: paragraphs of prose, a wall of effect
   rows, thin grey bars. Every fact is still here — the exact maths just folds
   away behind a click, and everything on top of it is a number, a meter or a
   chip you can take in at a glance.
   =========================================================================== */
.pf2-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 8px; }
.pf2-k { padding: 9px 11px 8px; border: 3px solid var(--ink); border-radius: 10px; color: #fff; }
.pf2-k b { display: block; font-family: var(--disp); font-weight: 400; font-size: 40px; line-height: .86; }
.pf2-k .l { display: block; margin-top: 3px; font: 900 11.5px/1.2 var(--sans); }
.pf2-k .g { display: block; font: 800 10px var(--sans); letter-spacing: .8px; text-transform: uppercase; opacity: .95; }
.pf2-k.a3 { color: var(--ink); }

.pf2-grps { display: grid; gap: 5px; }
.pf2-grow { display: grid; grid-template-columns: 104px 1fr 34px; align-items: center; gap: 9px; }
.pf2-grow .n { font: 900 11.5px var(--sans); }
.pf2-grow .b { height: 13px; background: #fff; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.pf2-grow .b > i { display: block; height: 100%; }
.pf2-grow .v { font: 900 12px/1 var(--sans); text-align: center; padding: 3px 0;
  border: 2px solid var(--ink); border-radius: 6px; color: #fff; }
.pf2-grow .v.a3 { color: var(--ink); }

.pf2-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.pf2-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 7px; }
.pf2-fact { padding: 6px 10px 7px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; }
.pf2-fact .k { display: block; font: 800 10.5px var(--sans); letter-spacing: .8px; text-transform: uppercase; color: var(--txt-3); }
.pf2-fact b { display: block; font: 900 14px var(--sans); }
.pf2-fact.big b { font-family: var(--disp); font-weight: 400; font-size: 27px; line-height: 1; }

.pf2-perso { padding: 12px 14px; border: 3px solid var(--ink); border-radius: 11px; }
.pf2-perso .who { font-family: var(--disp); font-weight: 400; font-size: 34px; line-height: .95; text-transform: uppercase; }
.pf2-perso .fam { font: 900 10px var(--sans); letter-spacing: 1.4px; text-transform: uppercase; opacity: .9; }
.pf2-perso p { margin: 7px 0 0; font: 700 13px/1.45 var(--sans); }

.pf2-meter { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 9px; }
.pf2-meter .n { font-family: var(--disp); font-weight: 400; font-size: 30px; line-height: 1; text-align: center;
  border: 2px solid var(--ink); border-radius: 8px; color: #fff; padding: 2px 0 0; }
.pf2-meter .n.a3 { color: var(--ink); }
.pf2-meter .b { height: 15px; background: #fff; border: 2px solid var(--ink); border-radius: 7px; overflow: hidden; }
.pf2-meter .b > i { display: block; height: 100%; }
.pf2-meter .w { font: 900 12px var(--sans); text-transform: uppercase; letter-spacing: .6px; }

.pf2-line { margin: 8px 0; font: 700 12.5px/1.5 var(--sans); color: var(--txt-2); }
.pf2-line b { color: var(--txt); font-weight: 900; }

.pf2-chip { display: inline-block; padding: 2px 9px; border: 2px solid var(--ink); border-radius: 7px;
  background: var(--ink); color: #fff; font: 800 11px/1.45 var(--sans); }
.pf2-chip.sm { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }

.pf2-fold { margin: 7px 0 2px; }
.pf2-fold > summary { cursor: pointer; display: inline-block; padding: 3px 10px;
  border: 2px solid var(--ink); border-radius: 7px; background: #fff; color: var(--ink);
  font: 800 10.5px var(--sans); letter-spacing: .6px; text-transform: uppercase; list-style: none; }
.pf2-fold > summary::-webkit-details-marker { display: none; }
.pf2-fold > summary:before { content: '+ '; }
.pf2-fold[open] > summary:before { content: '\2212 '; }
.pf2-fold[open] > summary { background: var(--ink); color: #fff; }
.pf2-fold > *:not(summary) { margin-top: 7px; }

.pf2-traits { display: grid; gap: 8px; }
.pf2-trait { padding: 9px 11px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; }
.pf2-trait.good { border-color: var(--a-4); } .pf2-trait.bad { border-color: var(--bad); }
.pf2-trait.mixed { border-color: #a16207; }
.pf2-trait .h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf2-trait .h b { font-family: var(--disp); font-weight: 400; font-size: 22px; line-height: 1; text-transform: uppercase; }
.pf2-trait .tg { margin-left: auto; display: flex; gap: 5px; }
.pf2-trait .d { margin-top: 5px; font: 700 12.5px/1.45 var(--sans); color: var(--txt-2); }

.pf2-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.pf2-badge { padding: 9px 11px; background: #fff; border: 3px solid var(--a-4); border-radius: 10px; }
.pf2-badge.bad { border-color: var(--bad); }
.pf2-badge b { display: block; font-family: var(--disp); font-weight: 400; font-size: 21px; line-height: 1; text-transform: uppercase; }
.pf2-badge .d { display: block; margin-top: 4px; font: 700 12px/1.4 var(--sans); color: var(--txt-2); }

.pf2-wants { display: grid; gap: 7px; }
.pf2-want { padding: 8px 11px; background: #fff; border: 2px solid var(--ink); border-radius: 9px; }
.pf2-want .r { display: inline-block; min-width: 42px; font: 800 10.5px var(--sans); letter-spacing: .9px;
  text-transform: uppercase; color: var(--txt-3); }
.pf2-want b { font: 900 13.5px var(--sans); margin-right: 7px; }

.pf2-status { display: flex; gap: 11px; align-items: stretch; flex-wrap: wrap; }
.pf2-mood { flex: none; width: 92px; display: grid; place-content: center; text-align: center;
  border: 3px solid var(--ink); border-radius: 11px; color: #fff; padding: 9px 4px; }
.pf2-mood b { display: block; font-family: var(--disp); font-weight: 400; font-size: 42px; line-height: .9; }
.pf2-mood span { font: 900 10.5px var(--sans); letter-spacing: .7px; text-transform: uppercase; }
.pf2-facts.grow { flex: 1; min-width: 240px; align-content: start; }

/* the all-58 list: thicker bars, a solid number, no hairlines */
.a-b { height: 9px; border-radius: 4px; border: 2px solid var(--ink); background: #fff; box-sizing: border-box; }
.a-v { font-weight: 900; }
.arow { padding: 4px 0; }
.a-n { font-weight: 700; }

@media (max-width: 720px) {
  .pf2-grow { grid-template-columns: 84px 1fr 32px; }
  .pf2-status { flex-direction: column; }
  .pf2-mood { width: auto; }
}

/* no double-tap zoom on a phone (owner: "sometimes a double tap zooms in") —
   iOS ignores user-scalable, but honours this */
html, body, button, a, [role="button"] { touch-action: manipulation; }