/* CS Manager.

   FIFA career mode's bones: a strip of tabs, a menu down the left for where
   you can go inside a tab, and cards with loud coloured titles. Motorsport
   Manager's event cards for the season. On a broadcast-dark ground, with two
   sides to the palette: CT blue for you, T sand for them. */

:root {
  --ground: #0b0e14;
  --ground-2: #0f131b;
  --panel: #131923;
  --panel-2: #0e1219;
  --raise: #1b2431;
  --line: #242e3e;
  --line-soft: #1b2331;

  --ink: #eaf0f8;
  --ink-2: #9fb0c6;
  --ink-3: #66748c;

  --ct: #4fa3ee;
  --ct-2: #2c6fb3;
  --ct-dim: #1b3450;
  --t: #e5b04f;
  --t-dim: #4a3a1c;
  --teal: #37d3c2;
  --red: #ef5b5b;
  --purple: #b48bff;

  --win: #4cc38a;
  --loss: #e0574f;
  --warn: #e8b04a;

  --disp: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: 18px;
  --radius: 4px;
  --side: 210px;
}

* { box-sizing: border-box; }
html { overflow-x: auto; background: var(--ground); }
body {
  margin: 0; min-width: 1240px;
  background: var(--ground);
  background-image: radial-gradient(1200px 600px at 20% -10%, rgba(79,163,238,.08), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(229,176,79,.05), transparent 60%);
  color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; }
input:focus, select:focus { outline: none; border-color: var(--ct); }
h1, h2, h3, h4 { font-family: var(--disp); margin: 0; letter-spacing: .01em; font-weight: 700; text-transform: uppercase; }
a { color: var(--ct); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--ink-2); } .dim2 { color: var(--ink-3); }
.win { color: var(--win); } .loss { color: var(--loss); } .ct { color: var(--ct); } .t { color: var(--t); } .warn { color: var(--warn); }
.right { text-align: right; } .center { text-align: center; }
.small { font-size: 12px; }
.tiny { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.nowrap { white-space: nowrap; }
.clickable { cursor: pointer; } .clickable:hover { color: var(--ink); text-decoration: underline; }
.ic { vertical-align: -3px; }

/* ---------------------------------------------------------------- shell */

.app { display: flex; flex-direction: column; min-height: 100vh; }

.top { display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 var(--pad); background: linear-gradient(180deg, #141b27, #0f141d); border-bottom: 1px solid var(--line); }
.top .brand { display: flex; align-items: center; gap: 12px; min-width: 300px; }
.top .brand .name { font-family: var(--disp); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.top .brand .sub { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.top .spacer { flex: 1; }
.top .fact { display: flex; flex-direction: column; line-height: 1.15; padding: 0 14px; border-left: 1px solid var(--line-soft); }
.top .fact .v { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.top .fact .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.top .go { margin-left: 8px; padding: 0 22px; height: 40px; display: inline-flex; align-items: center; gap: 8px; background: var(--ct); color: #06111f; font-family: var(--disp); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; border-radius: 3px; }
.top .go:hover { filter: brightness(1.1); }
.top .go.hot { background: var(--t); }

.tabs { display: flex; align-items: stretch; height: 44px; padding: 0 var(--pad); background: var(--ground-2); border-bottom: 1px solid var(--line); }
.tabs .tab { padding: 0 24px; display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tabs .tab:hover { color: var(--ink); background: rgba(255,255,255,.03); }
.tabs .tab.active { color: #06111f; background: var(--teal); }
.tabs .tab .badge { background: var(--red); color: #fff; font-family: var(--mono); font-size: 11px; border-radius: 10px; padding: 1px 7px; font-weight: 600; }
.tabs .tab.active .badge { background: #06111f; color: var(--teal); }

.frame { display: flex; flex: 1; min-height: 0; }
.side { width: var(--side); flex: none; padding: 14px 10px; border-right: 1px solid var(--line-soft); background: rgba(0,0,0,.15); }
.side .dest { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 3px; font-family: var(--disp); font-weight: 600; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); text-align: left; }
.side .dest:hover { background: rgba(255,255,255,.04); color: var(--ink); }
.side .dest.active { background: var(--ct-dim); color: var(--ink); box-shadow: inset 3px 0 0 var(--ct); }
.side .dest .ic { color: var(--ink-3); } .side .dest.active .ic { color: var(--ct); }
.side .hint { margin-top: 18px; padding: 0 12px; font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.side kbd { font-family: var(--mono); background: var(--raise); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; font-size: 11px; color: var(--ink-2); }
.app main { flex: 1; min-width: 0; padding: var(--pad); max-width: 1500px; }

/* ---------------------------------------------------------------- panels */

.grid { display: grid; gap: 14px; }
.grid.central { grid-template-columns: 400px 1fr 340px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.squad { grid-template-columns: 1fr 420px; }
.grid.market { grid-template-columns: 1fr 380px; }
.rows { display: flex; flex-direction: column; gap: 14px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; position: relative; }
.panel > .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 8px; border-bottom: 1px solid var(--line-soft); }
.panel > .head h3 { font-size: 19px; letter-spacing: .05em; color: var(--teal); font-weight: 800; }
.panel.tone-t > .head h3 { color: var(--t); }
.panel.tone-ct > .head h3 { color: var(--ct); }
.panel.tone-red > .head h3 { color: var(--red); }
.panel.tone-purple > .head h3 { color: var(--purple); }
.panel.tone-win > .head h3 { color: var(--win); }
.panel > .head .meta { font-size: 12px; color: var(--ink-3); }
.panel > .body { padding: 12px 14px; }
.panel > .body.flush { padding: 0; }
.panel.hero { background: linear-gradient(160deg, #162034, #0f151f); border-color: #2a3a52; }
.panel.hero::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 220px; height: 220px; border-radius: 50%; border: 26px solid rgba(79,163,238,.06); pointer-events: none; }

/* ---------------------------------------------------------------- tables */

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
table.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.num, table.tbl th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.tbl tr.me td { background: rgba(79,163,238,.10); }
table.tbl tr.me td:first-child { box-shadow: inset 3px 0 0 var(--ct); }
table.tbl tr.zone-top td { box-shadow: inset 3px 0 0 var(--win); }
table.tbl tr.zone-drop td { box-shadow: inset 3px 0 0 var(--loss); }
table.tbl tr.me.zone-top td:first-child, table.tbl tr.me.zone-drop td:first-child { box-shadow: inset 3px 0 0 var(--ct); }
table.tbl tr.hover:hover td { background: rgba(255,255,255,.03); cursor: pointer; }
table.tbl tr.sel td { background: rgba(79,163,238,.14); }
table.tbl .name { font-weight: 600; }
table.tbl .sep td { border-bottom: 1px dashed var(--line); }
.tbl .role { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }

.rating { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.rating.soft { color: var(--ink-3); }
.rating.withheld { color: var(--ink-3); font-weight: 400; }
.rating.good { color: var(--win); } .rating.bad { color: var(--loss); }
.lastmark { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-left: 5px; vertical-align: 1px; }
.trend { display: inline-block; width: 12px; text-align: center; font-size: 11px; }
.trend.up { color: var(--win); } .trend.down { color: var(--loss); }
.stars { display: inline-flex; gap: 1px; color: var(--t); vertical-align: -1px; }
.ga { font-size: 9px; width: 18px; display: inline-block; text-align: center; color: var(--ink-3); }
.ga.up, .ga.up2 { color: var(--win); } .ga.down, .ga.down2 { color: var(--loss); }

/* ---------------------------------------------------------------- buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: 3px; border: 1px solid var(--line); background: var(--raise); color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); background: #222d3d; }
.btn.primary { background: var(--ct); color: #06111f; border-color: transparent; font-family: var(--disp); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; padding: 9px 18px; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.hot { background: var(--t); color: #1a1205; border-color: transparent; font-family: var(--disp); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; padding: 9px 18px; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #5a2a28; color: #f0a19c; } .btn.danger:hover { background: #3a1c1b; }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: default; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- advance */

.advance .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin-bottom: 12px; border-top: 2px solid var(--line); }
.advance .day { padding: 8px 4px 6px; text-align: center; min-height: 74px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; border-right: 1px solid var(--line-soft); position: relative; }
.advance .day:last-child { border-right: 0; }
.advance .day .wd { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.advance .day .dom { font-family: var(--disp); font-size: 26px; font-weight: 700; line-height: 1; color: var(--ink-2); }
.advance .day .blk { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); margin-top: 4px; }
.advance .day.today { background: rgba(79,163,238,.12); }
.advance .day.today .dom { color: var(--ink); }
.advance .day.today::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--ct); }
.advance .day.past { opacity: .4; }
.advance .day.match .blk { color: var(--t); }
.advance .day.match::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--t); }
.advance .day.scrim .blk { color: var(--win); }
.advance .next { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 3px; margin-bottom: 12px; }
.advance .next .what { font-family: var(--disp); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.advance .next .when { font-size: 12px; color: var(--ink-2); }
.advance .running { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-top: 8px; min-height: 18px; }

.dials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dial .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 4px; }
.dial .bar { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--line-soft); }
.dial .bar i { display: block; height: 100%; background: var(--ct); }
.dial.good .bar i { background: var(--win); } .dial.bad .bar i { background: var(--loss); } .dial.mid .bar i { background: var(--warn); }
.dial .v { font-size: 12px; color: var(--ink-2); margin-top: 4px; }

/* ---------------------------------------------------------------- feed */

.feed { display: flex; flex-direction: column; }
.feed .item { display: flex; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.feed .item:last-child { border-bottom: 0; }
.feed .item .when { font-family: var(--mono); font-size: 11px; color: var(--ink-3); min-width: 54px; padding-top: 2px; }
.feed .item .title { font-weight: 600; }
.feed .item .text { color: var(--ink-2); font-size: 13px; }
.feed .item.unread .title { color: var(--ink); }
.feed .item.unread .when::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 3px; background: var(--ct); margin-right: 6px; vertical-align: middle; }
.feed .item.decision { background: rgba(229,176,79,.06); box-shadow: inset 3px 0 0 var(--t); }
.feed .item .tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.feed .actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.feed .actions input { width: 90px; }
.feed .item.sel { background: rgba(79,163,238,.1); }

/* ---------------------------------------------------------------- player */

.pcard { display: flex; gap: 14px; }
.pcard .face { border-radius: 4px; border: 1px solid var(--line); flex: none; }
.pcard .who .nick { font-family: var(--disp); font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.pcard .who .real { color: var(--ink-2); font-size: 13px; }
.pcard .who .facts { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.pcard .who .fact .v { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.pcard .who .fact .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }

.statline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.statline .s { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 3px; padding: 8px 6px; text-align: center; }
.statline .s .v { font-family: var(--mono); font-size: 18px; font-weight: 600; }
.statline .s .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }

.bars { display: flex; flex-direction: column; gap: 6px; }
.bars .b { display: grid; grid-template-columns: 82px 1fr 40px 18px; align-items: center; gap: 8px; font-size: 12px; }
.bars .b .k { color: var(--ink-2); }
.bars .b .track { height: 8px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; position: relative; overflow: hidden; }
.bars .b .track i { position: absolute; top: 0; bottom: 0; background: var(--ct); opacity: .5; }
.bars .b .track b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); z-index: 2; }
/* which way he moved last split: taken ground ahead of the line, lost ground behind it */
.bars .b .track u { position: absolute; top: 0; bottom: 0; z-index: 1; }
.bars .b .track u.up { background: var(--win); }
.bars .b .track u.down { background: var(--loss); }
.bars .b .v { font-family: var(--mono); color: var(--ink-3); text-align: right; font-size: 11px; }

.lineup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.slot { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 10px; text-align: center; min-width: 0; }
.slot.sel { border-color: var(--ct); }
.slot .role { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t); font-weight: 700; }
.slot .nick { font-family: var(--disp); font-size: 20px; font-weight: 700; text-transform: uppercase; margin-top: 4px; }
.slot .face { border-radius: 4px; margin: 6px auto 0; display: block; }
.slot .r { font-family: var(--mono); font-size: 13px; margin-top: 4px; }
.slot select { width: 100%; margin-top: 6px; font-size: 12px; padding: 3px 6px; }

/* ---------------------------------------------------------------- season */

.events-row { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; }
.ecard { background: linear-gradient(180deg, #172032, #10161f); border: 1px solid var(--line); border-radius: 4px; padding: 0; display: flex; flex-direction: column; min-height: 210px; position: relative; overflow: hidden; }
.ecard .eh { padding: 9px 12px; font-family: var(--disp); font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--line-soft); }
.ecard .eb { flex: 1; padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.ecard .eb .ic { width: 44px; height: 44px; opacity: .9; }
.ecard .eb .en { font-family: var(--disp); font-weight: 700; font-size: 19px; text-transform: uppercase; line-height: 1.05; }
.ecard .eb .es { font-size: 12px; color: var(--ink-2); }
.ecard .ef { padding: 8px 12px 12px; display: flex; justify-content: center; }
.ecard .status { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 12px; background: var(--raise); color: var(--ink-2); }
.ecard.match .eh { color: var(--t); } .ecard.match .eb .ic { color: var(--t); }
.ecard.playoff .eh { color: var(--win); } .ecard.playoff .eb .ic { color: var(--win); }
.ecard.major .eh { color: var(--purple); } .ecard.major .eb .ic { color: var(--purple); }
.ecard.window .eh { color: var(--ct); } .ecard.window .eb .ic { color: var(--ct); }
.ecard.season .eh { color: var(--teal); } .ecard.season .eb .ic { color: var(--teal); }
.ecard.today { border-color: var(--ct); box-shadow: 0 0 0 1px var(--ct); }
.ecard.today .status { background: var(--ct); color: #06111f; }
.ecard.done { opacity: .55; }
.ecard .status.w { background: #173527; color: var(--win); } .ecard .status.l { background: #3d1f1d; color: var(--loss); }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .h { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; text-align: center; padding: 4px 0; }
.cal .d { min-height: 72px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 3px; padding: 5px 6px; font-size: 11px; cursor: pointer; }
.cal .d:hover { border-color: var(--ink-3); }
.cal .d.blank { background: transparent; border-color: transparent; cursor: default; }
.cal .d.today { border-color: var(--ct); background: rgba(79,163,238,.12); }
.cal .d.past { opacity: .5; }
.cal .d .n { font-family: var(--mono); color: var(--ink-3); }
.cal .d .m { display: block; margin-top: 2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .d .m .ic { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; }
.cal .d .m.match { color: var(--t); } .cal .d .m.major { color: var(--purple); } .cal .d .m.playoff { color: var(--win); } .cal .d .m.window { color: var(--ct); }
.cal .d .m.league { color: var(--ink-3); font-weight: 400; } .cal .d .m.season { color: var(--teal); }
.cal .d .m .res { font-family: var(--mono); font-weight: 700; }

.report { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rcard { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 12px; }
.rcard .rh { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.rcard .rh .face { border-radius: 4px; }
.rcard .rh .nick { font-family: var(--disp); font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.rcard .rh .sub { font-size: 11px; color: var(--ink-2); }
.rcard .kv { font-size: 12px; }
.rcard .growth { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 8px; font-size: 11px; }
.rcard .growth .g { display: flex; justify-content: space-between; color: var(--ink-2); }

/* ---------------------------------------------------------------- match */

.match { max-width: 1100px; margin: 0 auto; }
.match .versus { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; gap: 20px; padding: 24px; }
.match .side { text-align: center; }
.match .side .team { font-family: var(--disp); font-size: 34px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.match .side .div { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.match .side.me .team { color: var(--ct); } .match .side.them .team { color: var(--t); }
.match .score { font-family: var(--disp); font-size: 64px; font-weight: 800; text-align: center; line-height: 1; }
.match .score small { display: block; font-size: 13px; color: var(--ink-3); letter-spacing: .1em; font-family: var(--body); text-transform: uppercase; margin-top: 4px; font-weight: 700; }
.match .odds { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 0 24px 18px; }
.match .odds i { display: block; height: 100%; }
.match .maps { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.match .map { font-family: var(--mono); font-size: 15px; padding: 6px 12px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 3px; }
.match .map.w { border-color: var(--win); } .match .map.l { border-color: var(--loss); }
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.board .hdr { padding: 8px 12px; font-family: var(--disp); text-transform: uppercase; font-weight: 700; font-size: 16px; letter-spacing: .04em; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; }
.events { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.events .e { padding: 8px 12px; background: var(--panel-2); border-left: 3px solid var(--ct); border-radius: 3px; font-size: 13px; }
.events .e.upset, .events .e.hot, .events .e.standout, .events .e.milestone { border-left-color: var(--win); }
.events .e.slip, .events .e.cold, .events .e.stinker { border-left-color: var(--loss); }

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

.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ladder .tier { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 10px; }
.ladder .tier.me { border-color: var(--ct); }
.ladder .tier h4 { font-size: 15px; letter-spacing: .06em; color: var(--ink-2); }
.ladder .tier .t1 { font-size: 10px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.ladder .tier ol { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-2); }
.ladder .tier ol li.me { color: var(--ct); font-weight: 700; }

.form { display: inline-flex; gap: 3px; }
.form i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--line); }
.form i.w { background: var(--win); } .form i.l { background: var(--loss); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.kv .k { color: var(--ink-3); } .kv .v { font-family: var(--mono); }

.start { max-width: 520px; margin: 80px auto; }
.start h1 { font-size: 56px; letter-spacing: .02em; line-height: 1; }
.start .lede { color: var(--ink-2); margin: 10px 0 24px; font-size: 15px; }
.start .field { margin-bottom: 12px; }
.start label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 4px; }
.start input { width: 100%; font-size: 16px; padding: 10px 12px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--raise); border: 1px solid var(--line); color: var(--ink); padding: 10px 16px; border-radius: 4px; font-size: 13px; z-index: 20; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.toast.bad { border-color: var(--loss); }

.empty { color: var(--ink-3); padding: 18px; text-align: center; font-size: 13px; }
.pill { display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 3px; background: var(--raise); color: var(--ink-2); }
.pill.ct { background: var(--ct-dim); color: var(--ct); } .pill.t { background: var(--t-dim); color: var(--t); }
.pill.win { background: #173527; color: var(--win); } .pill.loss { background: #3d1f1d; color: var(--loss); }

.bracket { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bracket .rnd h4 { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 6px; }
.bracket .m { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 3px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px; }
.bracket .m .r { display: flex; justify-content: space-between; }
.bracket .m .r.w { color: var(--ink); font-weight: 600; } .bracket .m .r.l { color: var(--ink-3); } .bracket .m .r.me { color: var(--ct); }

.swiss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.swiss .grp h4 { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 6px; }
.swiss .grp .tm { font-size: 12px; padding: 3px 0; } .swiss .grp .tm.me { color: var(--ct); font-weight: 700; }
.swiss .grp.through h4 { color: var(--win); } .swiss .grp.out h4 { color: var(--loss); }

.chat { display: flex; flex-direction: column; min-height: 520px; }
.chat .chat-head { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.chat .chat-head .face { border-radius: 22px; }
.chat .chat-head .nick { font-family: var(--disp); font-size: 20px; font-weight: 700; text-transform: uppercase; }
.chat .thread { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 68%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.35; }
.bubble.him { align-self: flex-start; background: #1d2636; border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--ct); color: #06111f; border-bottom-right-radius: 4px; }
.bubble .when { font-size: 10px; opacity: .55; margin-top: 3px; font-family: var(--mono); }
.chat .compose { padding: 12px 14px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chat .compose input { width: 100px; }

.tc { display: inline-flex; align-items: center; gap: 7px; }
.tc .crest { flex: none; }
.trophy { vertical-align: -4px; }
.cabinet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cabinet .cup { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 12px 8px; text-align: center; }
.cabinet .cup .cn { font-size: 11px; color: var(--ink-2); margin-top: 6px; }
.match .side .crest { display: block; margin: 0 auto 8px; }
.ladder .tier ol li { display: flex; align-items: center; gap: 5px; }

.scoutnote { margin-top: 8px; padding: 8px 10px; background: var(--panel-2); border-left: 3px solid var(--teal); border-radius: 3px; font-size: 12px; color: var(--ink-2); }
.pill.warn { background: #4a3a1c; color: var(--warn); }


/* ================================================================ life
   A backdrop with light in it, cards on glass, one accent per tab, and
   numbers that are not a terminal. Overrides what is above. */

:root {
  --accent: #4fa3ee;
  --glass: rgba(15, 21, 31, .66);
  --glass-2: rgba(10, 14, 22, .55);
  --edge: rgba(255, 255, 255, .07);
  --radius: 8px;
  --mono: 'Barlow', system-ui, sans-serif;
}

html { background: #0a0f18; }
body { background: transparent; background-image: none; min-height: 100vh; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(79,163,238,.22), transparent 62%),
    radial-gradient(700px 480px at 88% 14%, rgba(55,211,194,.14), transparent 60%),
    radial-gradient(760px 560px at 70% 100%, rgba(229,176,79,.13), transparent 60%),
    radial-gradient(380px 380px at 30% 70%, rgba(180,139,255,.08), transparent 60%),
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.045) 46%, rgba(255,255,255,.02) 52%, transparent 60%),
    linear-gradient(180deg, #0e1521 0%, #0a0f18 55%, #070a10 100%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* bokeh, a few soft lights hanging in the haze */
.app::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background:
    radial-gradient(14px 14px at 18% 22%, rgba(120,190,255,.35), transparent 70%),
    radial-gradient(9px 9px at 26% 31%, rgba(120,190,255,.28), transparent 70%),
    radial-gradient(22px 22px at 74% 18%, rgba(55,211,194,.22), transparent 70%),
    radial-gradient(7px 7px at 81% 26%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(12px 12px at 60% 86%, rgba(229,176,79,.26), transparent 70%),
    radial-gradient(18px 18px at 88% 78%, rgba(229,176,79,.16), transparent 70%),
    radial-gradient(6px 6px at 40% 12%, rgba(255,255,255,.18), transparent 70%);
}

.top { background: rgba(10, 15, 24, .55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--edge); height: 64px; }
.top .go { background: var(--accent); border-radius: 6px; }
.top .go.hot { background: var(--t); }
.tabs { background: rgba(8, 12, 19, .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--edge); height: 46px; }
.tabs .tab { color: rgba(234,240,248,.62); font-weight: 600; letter-spacing: .1em; }
.tabs .tab.active { background: var(--accent); color: #07111c; }
.tabs .tab.active .badge { background: #07111c; color: var(--accent); }
.side { background: rgba(8, 12, 19, .35); border-right: 1px solid var(--edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.side .dest { border-radius: 6px; font-weight: 600; }
.side .dest.active { background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 var(--accent); }
.side .dest.active .ic { color: var(--accent); }
.app main { padding: 22px 24px 40px; }

.panel {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.panel > .head { padding: 12px 16px 10px; border-bottom: 1px solid var(--edge); }
.panel > .head h3 { font-size: 16px; letter-spacing: .12em; font-weight: 700; color: var(--accent); }
.panel.tone-t > .head h3, .panel.tone-ct > .head h3, .panel.tone-red > .head h3, .panel.tone-purple > .head h3, .panel.tone-win > .head h3 { color: var(--accent); }
.panel > .head h3::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); margin-right: 10px; vertical-align: 1px; opacity: .9; }
.panel > .body { padding: 14px 16px; }
.panel.hero { background: linear-gradient(150deg, rgba(79,163,238,.16), rgba(15,21,31,.55) 45%, rgba(15,21,31,.7)); border-color: rgba(120,180,255,.18); }
.panel.hero::after { border-color: rgba(255,255,255,.05); }

/* tables: lighter, roomier, and no more terminal font */
table.tbl { font-size: 13.5px; }
table.tbl th { padding: 9px 12px; color: rgba(234,240,248,.45); border-bottom-color: var(--edge); letter-spacing: .1em; }
table.tbl td { padding: 9px 12px; border-bottom-color: rgba(255,255,255,.045); }
table.tbl tr.hover:hover td { background: rgba(255,255,255,.045); }
table.tbl tr.me td { background: rgba(255,255,255,.06); }
table.tbl tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.num, .mono, table.tbl td.num, table.tbl th.num, .rating, .top .fact .v, .statline .s .v, .kv .v, .advance .day .dom { font-family: var(--body); font-variant-numeric: tabular-nums; }
.rating { font-weight: 700; }
.bubble .when, .feed .item .when, .cal .d .n { font-family: var(--body); }
/* the scoreboard keeps its columns */
.board table.tbl td.num, .board table.tbl th.num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }

.btn { border-radius: 6px; background: rgba(255,255,255,.06); border-color: var(--edge); }
.btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); }
.btn.primary { background: var(--accent); color: #07111c; }
.btn.hot { background: var(--t); }
input, select { background: rgba(0,0,0,.28); border-color: var(--edge); border-radius: 6px; }

.advance .days { border-top-color: var(--edge); }
.advance .day { border-right-color: rgba(255,255,255,.04); }
.advance .day.today { background: rgba(255,255,255,.06); }
.advance .day.today::before { background: var(--accent); }
.advance .next { background: rgba(0,0,0,.22); border-color: var(--edge); border-radius: 6px; }
.dial .bar { background: rgba(0,0,0,.3); border-color: var(--edge); }

.statline .s, .slot, .rcard, .ecard, .bracket .m, .cabinet .cup, .ladder .tier, .cal .d, .scoutnote, .events .e, .chat .thread .bubble.him { background: rgba(0,0,0,.22); border-color: var(--edge); }
.statline .s { border-radius: 6px; }
.ecard { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25)); border-radius: 8px; }
.ecard .eh { background: rgba(255,255,255,.04); border-bottom-color: var(--edge); }
.ecard.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 30px rgba(0,0,0,.3); }
.ecard.today .status { background: var(--accent); color: #07111c; }
.feed .item { border-bottom-color: rgba(255,255,255,.045); }
.feed .item.decision { background: rgba(229,176,79,.08); }
.bubble.me { background: var(--accent); color: #07111c; }
.bubble.him { background: rgba(255,255,255,.08); }
.chat .compose, .chat .chat-head { border-color: var(--edge); }
.pill { background: rgba(255,255,255,.08); }
.toast { background: rgba(20, 28, 40, .9); backdrop-filter: blur(12px); border-color: var(--edge); border-radius: 8px; }

/* the matchup: the two crests get the stage */
.match .versus { padding: 34px 24px 20px; }
.match .side .team { font-size: 38px; }
.match .score { font-size: 72px; }
.match .odds { height: 5px; border-radius: 3px; }

.start { margin: 90px auto; }
.start h1 { font-size: 64px; color: #fff; text-shadow: 0 10px 40px rgba(79,163,238,.35); }

.flag { font-size: 13px; margin-right: 2px; vertical-align: -1px; }
.grid.mailgrid { grid-template-columns: 380px 1fr; align-items: start; }
.mail-list { max-height: calc(100vh - 200px); overflow-y: auto; }
.mail-row { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; }
.mail-row:hover { background: rgba(255,255,255,.04); }
.mail-row.sel { background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 var(--accent); }
.mail-row.decision { box-shadow: inset 3px 0 0 var(--t); }
.mail-row.decision.sel { box-shadow: inset 3px 0 0 var(--t); background: rgba(229,176,79,.1); }
.mail-row .mr-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.mail-row .mr-from { font-weight: 700; text-transform: uppercase; }
.mail-row .mr-title { font-weight: 600; margin-top: 2px; color: var(--ink-2); }
.mail-row.unread .mr-title { color: var(--ink); }
.mail-row.unread .mr-from::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 4px; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.mail-row .mr-snip { font-size: 12px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail { padding: 22px 26px 26px; }
.mail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.mail-head .face { border-radius: 24px; }
.mail-avatar { width: 48px; height: 48px; border-radius: 24px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.mail-from { font-weight: 700; font-size: 15px; }
.mail-title { font-size: 30px; letter-spacing: .02em; line-height: 1.05; margin-bottom: 14px; text-transform: none; font-weight: 700; }
.mail-body { font-size: 15.5px; line-height: 1.6; color: var(--ink); max-width: 720px; white-space: pre-line; }
.mail-actions { margin-top: 20px; padding: 16px; background: rgba(229,176,79,.08); border: 1px solid rgba(229,176,79,.25); border-radius: 8px; }
.mail-actions .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mail-related { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--edge); }

.veto { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 12px; }
.vmap { background: rgba(0,0,0,.25); border: 1px solid var(--edge); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.vmap.live { border-color: rgba(255,255,255,.2); }
.vmap.banned { opacity: .38; }
.vmap.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vmap .vm-name { font-family: var(--disp); font-size: 18px; font-weight: 700; text-transform: uppercase; }
.vmap .vm-ord { font-size: 10px; letter-spacing: .08em; color: var(--accent); margin-left: 4px; }
.vmap .vm-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.vmap .vm-bar { flex: 1; height: 6px; background: rgba(0,0,0,.35); border-radius: 3px; overflow: hidden; margin-left: 8px; }
.vmap .vm-bar i { display: block; height: 100%; background: var(--accent); }
.vmap .vm-status { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-top: auto; }
.vmap .btn { margin-top: auto; }

select.small { font-size: 12px; padding: 3px 6px; }

.infra-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.infra { background: rgba(0,0,0,.22); border: 1px solid var(--edge); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 130px; }
.infra.have { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.infra.past { opacity: .55; }
.infra .in-name { font-family: var(--disp); font-size: 18px; font-weight: 700; text-transform: uppercase; }
.infra .in-cost { font-size: 12px; color: var(--ink-2); }
.infra .in-blurb { font-size: 12px; color: var(--ink-3); flex: 1; }

.grid.three { grid-template-columns: 1fr 1fr 1fr; }
.pl .pl-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13.5px; }
.pl .pl-row.in span:last-child { color: var(--win); }
.pl .pl-row.out span:last-child { color: var(--loss); }
.pl .pl-row.total { border-bottom: 0; border-top: 1px solid var(--edge); margin-top: 4px; padding-top: 10px; font-size: 15px; }
.bankchart { width: 100%; height: 180px; display: block; }
.chart-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; }


/* ================================================================ photos
   Real rooms behind the glass. One per screen family, blurred and darkened
   here so the type sits on them. The drawn glows stay on top for depth. */

.app::before {
  content: ''; position: fixed; inset: -40px; z-index: -1; pointer-events: none; opacity: 1;
  background: #0a0f18 center / cover no-repeat;
  filter: blur(7px) brightness(.5) saturate(1.05);
  transform: none;
}
.app::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,20,.55) 0%, rgba(8,12,20,.35) 40%, rgba(8,12,20,.75) 100%);
}
.app[data-tab="central"]::before { background-image: url('assets/bigarena1.jpg'); }
.app[data-tab="circuit"]::before { background-image: url('assets/bigarena1.jpg'); }
.app[data-tab="season"]::before  { background-image: url('assets/bigarena2.jpg'); }
.app[data-tab="squad"]::before   { background-image: url('assets/small-lan2.jpg'); }
.app[data-tab="market"]::before  { background-image: url('assets/small-tourney2.jpg'); }
.app[data-tab="inbox"]::before   { background-image: url('assets/small-tourney2.jpg'); }
.app[data-tab="office"]::before  { background-image: url('assets/practice-bootcamp.jpg'); }
.app.match-mode::before          { background-image: url('assets/small-tourney1.jpg'); filter: blur(5px) brightness(.45) saturate(1.1); }
body::before { opacity: .55; }

/* panels a touch more opaque now that there is a photo behind */
.panel { background: rgba(12, 17, 26, .78); }
.panel.hero { background: linear-gradient(150deg, rgba(79,163,238,.14), rgba(12,17,26,.72) 45%, rgba(12,17,26,.82)); }
.top { background: rgba(8, 12, 19, .72); }
.tabs { background: rgba(6, 10, 16, .7); }
.side { background: rgba(6, 10, 16, .55); }

/* the four-tile hub */
.grid.hub { grid-template-columns: 1.1fr 1fr; }
.tile-stat { display: flex; flex-direction: column; gap: 4px; }
.tile-stat .big { font-family: var(--disp); font-size: 44px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.tile-stat .sub { color: var(--ink-2); font-size: 13px; }

/* a card with a photo block on the right, the FIFA tile */
.panel.pic { overflow: hidden; }
.panel.pic > .body { padding-right: 44%; min-height: 200px; }
.panel.pic .picimg { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; background-size: cover; background-position: center; }
.panel.pic .picimg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,17,26,1) 0%, rgba(12,17,26,.35) 30%, rgba(12,17,26,0) 60%); }

.app[data-tab="circuit"]::before { background-image: url('assets/crowd-mediumbig.jpg'); }
.app[data-tab="circuit"][data-sub="major"]::before { background-image: url('assets/major-crowd.jpg'); }
.app[data-tab="circuit"][data-sub="ranking"]::before { background-image: url('assets/crowd-closeup.jpg'); }
.app[data-tab="season"]::before  { background-image: url('assets/crowd-small-lan.jpg'); }
.app[data-tab="season"][data-sub="report"]::before { background-image: url('assets/bigarena2.jpg'); }
.app[data-tab="inbox"]::before   { background-image: url('assets/crowd-closeup.jpg'); }
.app.match-mode.win-mode::before { background-image: url('assets/small-lan-team-celebrate-victory.jpg'); filter: blur(4px) brightness(.5) saturate(1.15); }
.picstrip { height: 110px; background-size: cover; background-position: center 40%; position: relative; }
.picstrip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,17,26,.1), rgba(12,17,26,.95)); }

.app[data-tab="squad"]::before { background-image: url('assets/esports-pracc-room-skrim.jpg'); }
.app[data-tab="squad"][data-sub="development"]::before { background-image: url('assets/small-lan2.jpg'); }
.app[data-tab="office"][data-sub="staff"]::before { background-image: url('assets/coach-backshot.jpg'); }
.app[data-tab="market"][data-sub="coaches"]::before { background-image: url('assets/coach-backshot.jpg'); }
.app.match-mode.loss-mode::before { background-image: url('assets/esports-loss.jpg'); filter: blur(4px) brightness(.45) saturate(.9); }
.grid.squad .panel.pic > .body { padding-right: 40%; }
.grid.squad .panel.pic .picimg { width: 40%; }


/* ================================================================ bold
   FIFA's nerve: big type, solid blocks, one loud title per card, numbers
   you can read from the sofa. Overrides the glass above. */

:root { --radius: 4px; }
body { font-size: 15px; }
.app main { padding: 18px 28px 48px; }

.screen-head { margin: 4px 0 18px; }
.screen-head .crumb { font-size: 14px; color: var(--ink-2); letter-spacing: .02em; }
.screen-head .crumb span { margin: 0 6px; color: var(--ink-3); }
.screen-head .screen-title { font-family: var(--disp); font-size: 46px; font-weight: 800; letter-spacing: .01em; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.6); }

.top { height: 72px; }
.top .brand .name { font-size: 28px; }
.top .brand .sub { font-size: 13px; }
.top .fact .v { font-size: 18px; font-weight: 700; }
.top .fact .k { font-size: 11px; }
.top .go { height: 48px; padding: 0 28px; font-size: 20px; letter-spacing: .08em; border-radius: 4px; }

.tabs { height: 54px; padding: 0 28px; gap: 2px; }
.tabs .tab { padding: 0 30px; font-size: 20px; font-weight: 800; letter-spacing: .1em; color: rgba(234,240,248,.7); }
.tabs .tab.active { background: var(--accent); color: #07111c; }
.side { width: 230px; padding: 18px 12px; }
.side .dest { font-size: 18px; font-weight: 700; padding: 11px 14px; }
.side .dest.active { background: var(--accent); color: #07111c; box-shadow: none; }
.side .dest.active .ic { color: #07111c; }

.panel { background: rgba(10, 14, 22, .9); border: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.panel > .head { padding: 16px 20px 12px; border-bottom: 0; }
.panel > .head h3 { font-size: 26px; letter-spacing: .02em; font-weight: 800; color: var(--accent); text-transform: uppercase; }
.panel > .head h3::before { display: none; }
.panel > .head .meta { font-size: 13px; color: var(--ink-2); }
.panel > .body { padding: 6px 20px 20px; }
.panel > .body.flush { padding: 0; }
.panel.hero { background: linear-gradient(150deg, rgba(79,163,238,.22), rgba(10,14,22,.92) 50%); }
.panel.hero::after { display: none; }

.tile-stat .big { font-size: 64px; }
.tile-stat .sub { font-size: 15px; }
.statline .s .v { font-size: 24px; font-weight: 700; }
.statline .s .k { font-size: 11px; }
.pcard .who .nick { font-size: 36px; }

table.tbl { font-size: 14.5px; }
table.tbl th { font-size: 11.5px; padding: 10px 14px; color: rgba(234,240,248,.55); }
table.tbl td { padding: 11px 14px; }
table.tbl tr.me td:first-child { box-shadow: inset 5px 0 0 var(--accent); }
table.tbl tr.zone-top td { box-shadow: inset 5px 0 0 var(--win); }
table.tbl tr.zone-drop td { box-shadow: inset 5px 0 0 var(--loss); }
table.tbl tr.sel td { background: rgba(79,163,238,.22); }
table.tbl .name { font-weight: 700; font-size: 15px; }
.rating { font-size: 15px; }

.btn { font-size: 14px; padding: 9px 16px; font-weight: 700; }
.btn.primary, .btn.hot { font-size: 18px; padding: 11px 22px; letter-spacing: .06em; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn.small.primary, .btn.small.hot { font-size: 14px; padding: 6px 14px; }

.advance .day .dom { font-size: 32px; }
.advance .day .blk { font-size: 11px; }
.advance .next .what { font-size: 24px; }
.dial .k { font-size: 12px; }
.dial .bar { height: 8px; }

.feed .item .title { font-size: 15px; font-weight: 700; }
.mail-title { font-size: 38px; }
.mail-body { font-size: 17px; }
.mail-row .mr-title { font-size: 15px; }

.ecard { min-height: 230px; }
.ecard .eh { font-size: 18px; }
.ecard .eb .en { font-size: 22px; }
.ecard .status { font-size: 12px; padding: 5px 12px; }

.match .side .team { font-size: 44px; }
.match .score { font-size: 84px; }
.vmap .vm-name { font-size: 20px; }
.infra .in-name { font-size: 21px; }
.rcard .rh .nick { font-size: 22px; }
.chat .chat-head .nick { font-size: 24px; }
.bubble { font-size: 15px; }
.pl .pl-row { font-size: 15px; padding: 8px 0; }
.pl .pl-row.total { font-size: 18px; }
.kv { font-size: 14.5px; }
.cabinet .cup .cn { font-size: 12px; }
.start h1 { font-size: 80px; }

.subtabs { display: flex; gap: 4px; margin: 0 0 12px; }
.subtab { padding: 8px 18px; font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: rgba(10,14,22,.7); border-radius: 4px; }
.subtab:hover { color: var(--ink); }
.subtab.active { background: var(--accent); color: #07111c; }
.match .subtabs { margin: 0 0 12px; }
.match .versus.compact { padding: 16px 24px 8px; grid-template-columns: 1fr 120px 1fr; }
.match .versus.compact .side .team { font-size: 30px; }
.match .versus.compact .side .crest { width: 44px; height: 44px; margin-bottom: 4px; }
.match .versus.compact .score { font-size: 40px; }
.match .odds { margin: 0 24px 12px; }
.screen-head { margin: 0 0 12px; }
.screen-head .screen-title { font-size: 34px; }
.app main { padding: 14px 28px 40px; }
.panel > .head { padding: 12px 20px 8px; }
.panel > .head h3 { font-size: 22px; }
.statline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.statline .s { min-width: 0; overflow: hidden; padding: 8px 4px; }
.statline .s .v { font-size: 20px; }
.report { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.rcard .statline .s .v { font-size: 17px; }
.rcard .statline .s .k { font-size: 9.5px; letter-spacing: .04em; }
.grid.squad .statline .s .v { font-size: 19px; }


/* ================================================================ no scroll
   The window is the frame. Screens fit it; cards with long lists scroll
   inside themselves; the page never does. */

html, body { height: 100%; overflow: hidden; }
.app { height: 100vh; overflow: hidden; }
.frame { flex: 1; min-height: 0; }
.side { overflow: auto; }
.app main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.screen-head { flex: none; }
.app main > .grid, .app main > .rows, .app main > .match, .app main > .panel { flex: 1; min-height: 0; }
.app main > .match { overflow: hidden; display: flex; }
.match > .panel.hero { flex: 1; min-height: 0; overflow: auto; }
.grid { align-items: stretch; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
.grid.mailgrid { align-items: stretch; }
.mail-list { max-height: none; }
.rows { display: flex; flex-direction: column; min-height: 0; }
.rows > * { flex: 0 1 auto; min-height: 0; }
.rows > .panel { flex: 1 1 auto; }
.rows > .grid { flex: 0 1 auto; }
.rows > .subtabs, .grid > .subtabs { flex: none; }
.panel { min-height: 0; overflow: hidden; }
.panel > .head { flex: none; }
.panel > .body { flex: 1; min-height: 0; overflow: auto; }
.panel.pic .picimg { pointer-events: none; }
.events-row { flex: none; }
.app main > .grid.squad > .subtabs { grid-column: 1 / -1; }
/* Home: the advance card and the table set the top row; the rest takes what is left. */
.grid.hub { grid-template-rows: auto minmax(0, 1fr); }
.grid.hub > .panel:nth-child(-n+2) > .body { overflow: visible; }
.advance .next .what.warn { color: var(--warn); }
.qvcol > .panel:last-child { flex: none; }
.lineupcol > .panel:first-child { flex: none; }
.lineupcol > .panel:first-child > .body { overflow: visible; }
.lineup .slot .r .stars svg, .lineup .slot .stars { vertical-align: middle; }
.qvcol > .panel:first-child { flex: 1 1 auto; }
.qvcol > .panel:first-child > .body { padding-bottom: 8px; }
.qvcol .subtabs { margin: 8px 0 0; }
.qvcol > .panel:last-child > .body { padding-top: 4px; padding-bottom: 12px; }

/* ================================================================ brackets
   Rounds as columns, a box a match, lines between them. */
.bkt { display: flex; gap: 32px; overflow-x: auto; padding: 10px 2px 8px; }
.bkt-col { min-width: 220px; flex: 1; display: flex; flex-direction: column; }
.bkt-col h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; text-align: center; }
.bkt-ms { height: var(--h); display: flex; flex-direction: column; }
.bkt-slot { height: var(--slot); display: flex; align-items: center; position: relative; }
.bkt-m { position: relative; width: 100%; background: rgba(10,14,22,.85); border: 1px solid var(--edge, rgba(255,255,255,.08)); border-radius: 4px; font-size: 13px; }
.bkt-m .t { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-left: 3px solid rgba(255,255,255,.14); cursor: pointer; }
.bkt-m .t + .t { border-top: 1px solid rgba(255,255,255,.05); }
.bkt-m .t.w { border-left-color: var(--win); color: var(--ink); font-weight: 700; }
.bkt-m .t.l { border-left-color: var(--loss); color: var(--ink-3); }
.bkt-m .t.tbd { color: var(--ink-3); font-style: italic; cursor: default; }
.bkt-m .t.me .nm { color: var(--accent); }
.bkt-m .t .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkt-m .t .sc { font-variant-numeric: tabular-nums; min-width: 14px; text-align: right; font-weight: 700; }
.bkt-m .crest-gap { display: inline-block; width: 16px; height: 16px; }
.bkt-bo { position: absolute; top: -9px; right: 8px; font-size: 9px; letter-spacing: .08em; color: var(--ink-3); background: #0b1018; padding: 0 5px; border-radius: 2px; border: 1px solid rgba(255,255,255,.06); }
.bkt-m.empty-m { border-style: dashed; opacity: .6; }
.bkt-col:not(.bk-last) .bkt-m::after { content: ''; position: absolute; left: 100%; width: 16px; top: 50%; border-top: 1px solid rgba(255,255,255,.18); }
.bkt-col:not(.bk-last) .bkt-m.bk-up::after { height: calc(var(--slot) / 2); border-right: 1px solid rgba(255,255,255,.18); }
.bkt-col:not(.bk-last) .bkt-m.bk-dn::after { height: calc(var(--slot) / 2); top: auto; bottom: 50%; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.18); border-right: 1px solid rgba(255,255,255,.18); }
.bkt-col:not(.bk-first) .bkt-m::before { content: ''; position: absolute; right: 100%; width: 16px; top: 50%; border-top: 1px solid rgba(255,255,255,.18); }
.swiss .grp .tm { display: flex; align-items: center; gap: 6px; }
.swiss-rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.swiss-rounds .sr h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.swiss-rounds .sm { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.swiss-rounds .sm > span { display: inline-flex; align-items: center; gap: 4px; }
.swiss-rounds .sm .w { color: var(--ink); font-weight: 700; } .swiss-rounds .sm .l { color: var(--ink-3); } .swiss-rounds .sm .me { color: var(--accent); }

.grid.orgs { grid-template-columns: minmax(300px, 1fr) 2fr; }
.grid.orgs table.tbl tr.me td { color: var(--accent); }

/* honours: what a player has actually won, as a row of small badges */
.hons { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 4px; }
.hon { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); line-height: 1; }
.hon b { font-size: 10px; font-weight: 800; color: var(--ink-2); }
.hon.major { background: rgba(255,196,84,.12); border-color: rgba(255,196,84,.25); }
.hon.t20 { font-size: 9.5px; letter-spacing: .04em; font-weight: 800; text-transform: uppercase; color: var(--ink-2); padding: 2px 5px; }
.hon.t20.no1 { color: #ffd479; background: rgba(255,196,84,.16); border-color: rgba(255,196,84,.35); }

/* The ranking's two halves at a glance: who you beat, where you finished. */
.split { display: inline-flex; width: 54px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--panel-2); vertical-align: middle; }
.split i { background: var(--ct); }
.split u { background: var(--t); }

.hon.mvp { background: rgba(255,196,84,.18); border-color: rgba(255,196,84,.4); color: #ffd479; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 5px; }
.hon.evp { background: rgba(160,190,255,.12); border-color: rgba(160,190,255,.28); color: #b9ccff; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 5px; }
.rows.profile > .panel:first-child { flex: none; }
.rows.profile > .panel:first-child > .body { overflow: visible; }
.rows.profile > :last-child { flex: 1 1 auto; min-height: 0; }
.rows.profile > .panel:first-child .facts { flex-wrap: wrap; gap: 14px 22px; }
.rows.profile .pcard .who .nick { font-size: 30px; }

.grid.honours { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
/* the three columns share the height left over and each one scrolls itself */
.rows.profile > .grid { flex: 1 1 auto; min-height: 0; }
.grid.honours > .panel { min-height: 0; }
.grid.honours table.tbl tr.sep td { padding-top: 10px; }
@media (max-width: 1200px) { .grid.honours { grid-template-columns: 1fr 1fr; } }

/* Whether the career is on disk. Quiet when it is, honest when it is not. */
.savechip { border: 0; background: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.savechip:hover { color: var(--t); }
.savechip i { width: 7px; height: 7px; border-radius: 50%; background: var(--win); flex: none; }
.savechip.saving i { background: var(--t); animation: savepulse .9s ease-in-out infinite; }
.savechip.error { color: var(--loss); }
.savechip.error i { background: var(--loss); }
@keyframes savepulse { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }

/* the system: one axis, loose to structured, with the side's own mark on it */
.sysdial .track { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(120,170,255,.25), rgba(255,255,255,.06), rgba(255,196,84,.25)); border: 1px solid var(--edge, rgba(255,255,255,.08)); }
.sysdial .track i { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--ink); border-radius: 2px; }
.sysdial .ends { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.sysdial .ends span:nth-child(2) { color: var(--accent); font-weight: 800; }

/* the question mark, and the card it opens */
.panel > .head .helpq { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--edge, rgba(255,255,255,.14)); background: transparent; color: var(--ink-3); font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; margin-left: 8px; }
.panel > .head .helpq:hover { color: var(--accent); border-color: var(--accent); }
.helpwrap { position: fixed; inset: 0; background: rgba(4,7,12,.62); display: flex; align-items: center; justify-content: center; z-index: 60; }
.helpcard { max-width: 460px; padding: 22px 24px; background: #0e131c; border: 1px solid var(--edge, rgba(255,255,255,.12)); border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.helpcard h4 { font-family: var(--disp); font-size: 20px; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.helpcard p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }

.hon em { font-style: normal; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.searchbox { width: 190px; padding: 5px 9px; border-radius: 4px; border: 1px solid var(--edge, rgba(255,255,255,.12)); background: rgba(0,0,0,.28); color: var(--ink); font: inherit; font-size: 12px; }
.searchbox::placeholder { color: var(--ink-3); }
.searchbox:focus { outline: none; border-color: var(--accent); }
.panel > .head .meta .btnrow { flex-wrap: wrap; justify-content: flex-end; }
.panel > .head { flex-wrap: wrap; gap: 6px 10px; }

/* the scouting card: identity, numbers and every button above the fold, with
   the read underneath as the only thing that can lose its bottom */
.scoutcard { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.scoutcard .sc-head { display: flex; align-items: center; gap: 12px; flex: none; }
.scoutcard .sc-head .who { flex: 1; min-width: 0; }
.scoutcard .sc-head .nick { font-family: var(--disp); font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scoutcard .sc-head .real { font-size: 12px; color: var(--ink-2); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.scoutcard .sc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; flex: none; }
.scoutcard .sc-facts .fact { background: rgba(0,0,0,.22); border: 1px solid var(--edge, rgba(255,255,255,.06)); border-radius: 5px; padding: 7px 9px; }
.scoutcard .sc-facts .fact .v { font-size: 15px; font-weight: 700; line-height: 1.1; }
.scoutcard .sc-facts .fact .k { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.scoutcard .sc-act { flex: none; }
.scoutcard .sc-second { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The attributes are the reason you opened him, so they sit under his name
   and take the room. Everything else is a line of numbers under them. */
.scoutcard .sc-read { flex: 0 0 auto; min-height: 0; padding-top: 2px; }
.scoutcard .sc-read h4 { margin: 0 0 8px; }
.scoutcard .sc-read .bars .b { margin: 4px 0; }
.scoutcard .sc-read .bars .b .k { font-size: 11px; letter-spacing: .05em; color: var(--ink-2); }
.scoutcard .sc-read .bars .b .track { height: 9px; }
.scoutcard .sc-read .bars .b .v { font-size: 12px; font-weight: var(--w-loud); }
.sc-line { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: var(--fs-cap); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); padding: 6px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sc-line b { font-size: 13px; color: var(--ink); font-weight: var(--w-loud); margin-right: 3px; font-variant-numeric: tabular-nums; }
.sc-line .rating { font-size: 13px; }
.scoutcard .sc-hon { flex: none; }

/* one line a deal */
.deals { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dealrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; background: rgba(0,0,0,.2); border: 1px solid var(--edge, rgba(255,255,255,.06)); }
.dealrow .dl-name { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dealrow .dl-note { white-space: nowrap; }

/* ==================================================================== 8/10
   A design pass, and the last word in this file.

   Three rules, applied everywhere rather than per screen.

   TYPE. Four sizes and three weights, and one thing decides which: is this a
   number a decision turns on? Ratings, money, rank and placings are loud.
   Everything that labels them is quiet. Nothing is in between, because a page
   where everything is medium is a page with no hierarchy.

   COLOUR. Blue meant selected, and link, and yours, all at once, so it meant
   nothing. Now: accent is interaction, mine is you, and every division and
   event class carries its own tier colour in the same place every time.

   TABLES. Most of the game is read off a table, so a table gets the work:
   taller rows, the name column carrying weight, the supporting columns
   stepped back, figures aligned, headers that stay put, and a selected row
   you can find without hunting. */

:root {
  /* type */
  --fs-hero: 34px;      /* the one number a screen is about */
  --fs-loud: 19px;      /* a figure a decision turns on */
  --fs-body: 13.5px;    /* rows, prose */
  --fs-cap: 10.5px;     /* the label under or beside a figure */
  --w-quiet: 500;
  --w-mid: 650;
  --w-loud: 800;

  /* colour with a job */
  --accent: #4fa3ee;            /* interaction: selected, focused, pressed */
  --mine: #5ad1ff;              /* you, your org, your player */
  --mine-bg: rgba(90,209,255,.11);
  --danger: #e0574f;
  --danger-bg: rgba(224,87,79,.12);
  --chance: #4cc38a;            /* an opportunity, a gain, a promotion */
  --chance-bg: rgba(76,195,138,.12);
  --caution: #e8b04a;

  /* the ladder, one colour a rung, used wherever a tier is named */
  --tier-open: #7f8ea6;
  --tier-intermediate: #62b7a8;
  --tier-main: #5aa9e6;
  --tier-advanced: #8f7fe8;
  --tier-challenger: #e08b4a;
  --tier-pro: #e5b04f;
  --tier-major: #ffd479;
}

/* ---------------------------------------------------------------- type */
body { font-size: var(--fs-body); }
.panel > .head h3 { font-family: var(--disp); font-size: 17px; font-weight: var(--w-loud); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.panel > .head .meta { font-size: var(--fs-cap); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-mid); }
.tiny, .k, table.tbl th { font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; font-weight: var(--w-loud); color: var(--ink-3); }
.dim { color: var(--ink-2); }
.dim2, .dim.small, .small.dim { color: var(--ink-3); }

/* a figure a decision turns on */
.rating, .facts .fact .v, .tile-stat .big, .statline .s .v, .sc-facts .fact .v {
  font-variant-numeric: tabular-nums; font-weight: var(--w-loud); letter-spacing: -.01em;
}
.facts .fact .v, .sc-facts .fact .v { font-size: var(--fs-loud); }
.tile-stat .big { font-size: var(--fs-hero); }
.statline .s .v { font-size: 21px; }

/* ---------------------------------------------------------------- tables */
table.tbl { font-size: var(--fs-body); }
table.tbl th {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, var(--panel) 70%, rgba(19,25,35,.86));
  padding: 9px 11px; border-bottom: 1px solid var(--line);
}
table.tbl td { padding: 9px 11px; }
table.tbl tbody tr:nth-child(even) td, table.tbl tr:nth-child(even) td { background: rgba(255,255,255,.014); }
table.tbl .name { font-weight: var(--w-mid); color: var(--ink); font-size: 14px; }
table.tbl td.dim, table.tbl td .dim { color: var(--ink-3); }
table.tbl td.num { font-weight: var(--w-mid); }
table.tbl tr.hover:hover td { background: rgba(255,255,255,.055); }
table.tbl tr.sel td, table.tbl tr.sel:nth-child(even) td { background: rgba(79,163,238,.16); }
table.tbl tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.tbl tr.me td, table.tbl tr.me:nth-child(even) td { background: var(--mine-bg); }
table.tbl tr.me td:first-child { box-shadow: inset 3px 0 0 var(--mine); }
table.tbl tr.me .name { color: var(--mine); }
/* the marker is one bar at the start of the row, not a bar in every cell */
table.tbl tr.zone-top td, table.tbl tr.zone-drop td, table.tbl tr.me td { box-shadow: none; }
table.tbl tr.zone-top td:first-child { box-shadow: inset 3px 0 0 var(--chance); }
table.tbl tr.zone-drop td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.tbl tr.me td:first-child { box-shadow: inset 3px 0 0 var(--mine); }

/* ---------------------------------------------------------------- states */
.win { color: var(--chance); } .loss { color: var(--danger); } .warn { color: var(--caution); }
.pill { font-size: 9.5px; font-weight: var(--w-loud); letter-spacing: .06em; text-transform: uppercase; }
.pill.win { background: var(--chance-bg); color: var(--chance); }
.pill.loss { background: var(--danger-bg); color: var(--danger); }
.pill.ct { background: var(--mine-bg); color: var(--mine); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #061019; font-weight: var(--w-loud); }
.btn:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- the match
   A result is the one screen that should not look like the rest of the game.
   The tabs and the rail go away, the score is the size of the score, and the
   night is summed up by one player rather than by two tables you have to read.
   The only thing to do is Continue, which is already under the thumb. */
.app.win-mode .tabs, .app.loss-mode .tabs,
.app.win-mode aside.side, .app.loss-mode aside.side { display: none; }
.app.win-mode .frame, .app.loss-mode .frame { grid-template-columns: 1fr; }
.app.win-mode main, .app.loss-mode main { padding: 0; }

.match.moment { max-width: 1180px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 10px 16px 16px; overflow: auto; }
.match.moment .bigline { text-align: center; }
.match.moment .what {
  font-size: var(--fs-cap); letter-spacing: .16em; text-transform: uppercase;
  font-weight: var(--w-loud); color: var(--ink-3); padding: 6px 0 2px;
}
.match.moment .what .dot { opacity: .5; }
.match.moment .versus { grid-template-columns: 1fr 300px 1fr; padding: 8px 24px 10px; }
.match.moment .side .team { font-size: 30px; letter-spacing: .01em; }
.match.moment .side .crest { margin-bottom: 6px; }
.match.moment .side .div { font-size: var(--fs-cap); letter-spacing: .09em; text-transform: uppercase; }
.match.moment .score { font-size: 108px; letter-spacing: -.02em; line-height: .92; }
.match.moment .score i { font-style: normal; opacity: .3; margin: 0 6px; }
.match.moment .score small { font-size: 12px; letter-spacing: .22em; margin-top: 8px; }
.match.moment.won .score { color: var(--chance); text-shadow: 0 0 46px rgba(76,195,138,.28); }
.match.moment.lost .score { color: var(--danger); text-shadow: 0 0 46px rgba(224,87,79,.22); }

/* the trail: every map of the series in the order it was played */
.match.moment .trail { display: flex; gap: 8px; justify-content: center; align-items: stretch; position: relative; }
.match.moment .trail::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 50%;
  height: 1px; background: var(--line-soft); z-index: 0;
}
.match.moment .trail .stop {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 7px 16px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px;
  cursor: pointer;
}
.match.moment .trail .stop .mp { font-size: var(--fs-cap); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); }
.match.moment .trail .stop .sc { font-family: var(--mono); font-size: 17px; font-weight: var(--w-loud); }
.match.moment .trail .stop.w { border-color: rgba(76,195,138,.5); } .match.moment .trail .stop.w .sc { color: var(--chance); }
.match.moment .trail .stop.l { border-color: rgba(224,87,79,.45); } .match.moment .trail .stop.l .sc { color: var(--danger); }
.match.moment .trail .stop.sel { background: rgba(255,255,255,.08); border-color: var(--ink-2); }
.match.moment .trail .stop:hover { background: rgba(255,255,255,.06); }

/* whoever owned the night */
.match.moment .star {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: linear-gradient(90deg, rgba(229,176,79,.14), rgba(19,25,35,.5) 55%);
  border: 1px solid rgba(229,176,79,.28); border-radius: 6px;
}
.match.moment .star.them { background: linear-gradient(90deg, rgba(224,87,79,.1), rgba(19,25,35,.5) 55%); border-color: rgba(224,87,79,.22); }
.match.moment .star .who { flex: 1; min-width: 0; }
.match.moment .star .cap { font-size: var(--fs-cap); letter-spacing: .16em; text-transform: uppercase; color: var(--tier-pro); font-weight: var(--w-loud); }
.match.moment .star.them .cap { color: var(--danger); }
.match.moment .star .nick { font-family: var(--disp); font-size: 26px; font-weight: var(--w-loud); text-transform: uppercase; line-height: 1.1; }
.match.moment .star .sub { font-size: var(--fs-cap); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-mid); }
.match.moment .star .lines { display: flex; gap: 26px; padding-right: 8px; }
.match.moment .star .l { text-align: right; }
.match.moment .star .l b { display: block; font-size: 21px; font-weight: var(--w-loud); font-variant-numeric: tabular-nums; }
.match.moment .star .l span { font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); }

.match.moment .board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; }
.match.moment .board .panel { min-width: 0; }
.match.moment .events { display: flex; flex-wrap: wrap; gap: 8px; }
.match.moment .events .e { font-size: var(--fs-body); color: var(--ink-2); }

/* ---------------------------------------------------------------- glyphs
   A role is read a hundred times a session. Giving each of the five a shape
   and a colour means the eye finds the AWPer in a table without reading it. */
.ic { vertical-align: -.16em; }
.ic.ri { margin-right: 5px; opacity: .95; }
.ri-igl { color: var(--caution); }
.ri-awp { color: #a58ef0; }
.ri-entry { color: var(--danger); }
.ri-support { color: var(--chance); }
.ri-lurker { color: var(--accent); }
td.role, .role { white-space: nowrap; }
.btn .ic { margin-right: 5px; vertical-align: -.18em; }
.btn.off { opacity: .45; cursor: default; }
.btn.off:active { transform: none; }
/* a panel that is a header, not a list: it takes the height it needs and the
   list below it gets the rest */
.rows > .panel.fixed { flex: 0 0 auto; }
.rows > .panel.fixed > .body { overflow: visible; }

/* a row of the numbers a decision turns on, big enough to read across a room */
.factrow { display: flex; flex-wrap: wrap; gap: 26px; padding: 2px 0 10px; }
.factrow .fact { min-width: 0; }
.factrow .fact .v { font-size: var(--fs-loud); font-weight: var(--w-loud); font-variant-numeric: tabular-nums; line-height: 1.15; }
.factrow .fact .k { font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); }
.tabs .tab .ic { margin-right: 6px; opacity: .7; vertical-align: -.18em; }
.tabs .tab.active .ic { opacity: 1; }

/* ---------------------------------------------------------------- choices
   Nothing in this game opens an operating system menu. A choice with a handful
   of answers shows all of them and marks the one that is on, which is one
   press on a pad and one glance on a screen. */
.seg { display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; background: rgba(0,0,0,.28); border: 1px solid var(--line-soft); border-radius: 5px; }
.seg.wrap { flex-wrap: wrap; }
.seg .sgb {
  padding: 5px 11px; border-radius: 3px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--body); font-size: var(--fs-cap); font-weight: var(--w-loud);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.seg .sgb:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.seg .sgb.on { background: rgba(79,163,238,.18); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(79,163,238,.35); }
.seg .sgb.on .ic { opacity: 1; }
.seg .sgb .ic { opacity: .75; margin: 0; }
.seg .sgb:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.seg.tiny .sgb { padding: 3px 8px; font-size: 9.5px; }

/* the bar over a list: what you are looking at, filtered, sorted. Rows rather
   than one long wrap, so the controls land in the same place every time. */
.filterbar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.filterbar .fb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.filterbar .fb-row.end { justify-content: flex-end; }
.filterbar .fb-gap { flex: 1; }
.filterbar .lbl { font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); }
.panel > .head { flex-wrap: wrap; }
.swapbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.swapbar .lbl { font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); }

/* what is left of the browser's own furniture: a text box and a number box.
   They are ours now: same ground, same caps, same focus ring as everything. */
input[type="text"], input[type="number"], input[type="search"] {
  background: rgba(0,0,0,.3); border: 1px solid var(--line-soft); border-radius: 5px;
  padding: 7px 10px; color: var(--ink); font-family: var(--body); font-size: var(--fs-body); font-weight: var(--w-mid);
}
input[type="number"] { font-variant-numeric: tabular-nums; font-weight: var(--w-loud); width: 110px; }
input::placeholder { color: var(--ink-3); }
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
/* a filter bar is not a caption: it takes the whole width under the title */
.panel > .head .meta:has(.filterbar) { flex: 1 0 100%; }

/* ------------------------------------------------------------- watchlist
   A name you are keeping an eye on. The star is in every row of the market so
   a list is built while browsing, not by opening each man in turn. */
table.tbl td.watch, table.tbl th:first-child:empty { width: 26px; padding-left: 8px; padding-right: 0; }
.star-btn { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--ink-3); opacity: .45; line-height: 0; border-radius: 3px; }
.star-btn:hover { opacity: 1; color: var(--caution); background: rgba(255,255,255,.06); }
.star-btn.on { opacity: 1; color: var(--tier-pro); }
table.tbl tr.hover:hover .star-btn { opacity: .8; }
table.tbl tr.hover:hover .star-btn.on { opacity: 1; }

/* --------------------------------------------------------------- compare
   Every row is the same shape: his number, the gap, his number. The gap sits
   on the winner's side of the label and the winner's number is lit, so the
   answer is readable without reading anything. Bars grow out of the middle in
   opposite directions, because a length only compares against another length
   that starts where it starts. */
.compare { max-width: 1180px; margin: 0 auto; width: 100%; }
.c-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 6px; }
.compare .panel > .body { padding-bottom: 10px; }
.c-head { display: flex; align-items: center; gap: 12px; }
.c-head.b { flex-direction: row-reverse; text-align: right; }
.c-head .c-btns { order: -1; }
.c-head .face { border-radius: 5px; border: 1px solid var(--line); flex: none; }
.c-who { flex: 1; min-width: 0; }
.c-who .nick { font-family: var(--disp); font-size: 22px; font-weight: var(--w-loud); text-transform: uppercase; line-height: 1.1; }
.c-who .sub { font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-mid); }
.c-who .sub .ic { margin-right: 3px; }

/* one column: the faces, then what they are, then everything else about them.
   The bars take the full width because length is the comparison; the facts sit
   in a narrower block so a number never drifts away from its label. */
.ctab { width: 100%; }
.ctab.bars { margin-bottom: 4px; }
.compare .ctab:not(.bars) { max-width: 780px; margin: 0 auto; }

.crow { display: grid; grid-template-columns: 1fr 170px 1fr; align-items: center; border-bottom: 1px solid var(--line-soft); }
.crow:nth-child(even) { background: rgba(255,255,255,.016); }
.cv { padding: 1px 12px; font-size: 15px; font-weight: var(--w-mid); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cv.a { text-align: right; }
.cv.b { text-align: left; }
.cv.lead { color: var(--chance); font-weight: var(--w-loud); }
.cv.behind { color: var(--ink-3); }

/* the middle: the label, and the gap on the side of whoever won it */
.ck { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 0 4px; }
.cl { font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); text-align: center; white-space: nowrap; }
.cd { font-size: 11px; font-weight: var(--w-loud); font-variant-numeric: tabular-nums; color: var(--chance); }
.cd.l { text-align: right; }
.cd.r { text-align: left; }
.cd b::before { content: ''; display: inline-block; border: 4px solid transparent; vertical-align: 1px; }
.cd.l b::before { border-right-color: var(--chance); margin-right: 3px; }
.cd.r b::after { content: ''; display: inline-block; border: 4px solid transparent; border-left-color: var(--chance); margin-left: 3px; vertical-align: 1px; }

/* an attribute: the bar out of the middle, the doubt behind it, the number */
.ctab.bars .cv { display: flex; align-items: center; gap: 9px; padding: 1px 12px; }
.ctab.bars .cv.a { flex-direction: row-reverse; }
.ab { position: relative; flex: 1; height: 9px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.ab .fill { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(79,163,238,.25), rgba(79,163,238,.6)); border-radius: 5px; }
.ab.a .fill { background: linear-gradient(270deg, rgba(79,163,238,.25), rgba(79,163,238,.6)); }
.ab.lead .fill { background: linear-gradient(90deg, rgba(76,195,138,.3), rgba(76,195,138,.75)); }
.ab.a.lead .fill { background: linear-gradient(270deg, rgba(76,195,138,.3), rgba(76,195,138,.75)); }
/* what nobody has seen yet, drawn as the width of the doubt */
.ab .doubt { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 4px); }
.an { width: 58px; font-size: 14px; font-weight: var(--w-loud); font-variant-numeric: tabular-nums; color: var(--ink); }
.ctab.bars .cv.a .an { text-align: left; }
.ctab.bars .cv.b .an { text-align: right; }
.an em { font-style: normal; font-size: 10px; font-weight: var(--w-mid); color: var(--ink-3); margin-left: 3px; }
.ctab.bars .cv.lead .an { color: var(--chance); }

.c-btns { display: flex; flex-direction: column; gap: 3px; flex: none; }
.c-btns .btn { padding: 3px 9px; }
.c-head.b .c-btns { align-items: flex-start; }
.c-btns .btn { width: 100%; justify-content: center; }
.ctally { font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--w-loud); color: var(--ink-2); margin-right: 10px; }
.ctally b.win { color: var(--chance); }

/* half a comparison, waiting for its other half */
.cmp-tray {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: rgba(12,17,26,.94); border: 1px solid var(--accent); border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45); font-size: var(--fs-body);
}
.cmp-tray .ic { color: var(--accent); }

/* ---------------------------------------------------------------- the shirt
   Four places on it, drawn where they actually sit, so the screen is a kit
   rather than a table of contracts. */
.kitwrap { display: flex; align-items: center; justify-content: center; padding: 4px; min-height: 0; flex: 1; }
.jersey { width: auto; max-width: 100%; max-height: 300px; height: 100%; }
.jersey .patch rect { fill: rgba(0,0,0,.34); stroke: rgba(255,255,255,.22); stroke-width: 1; cursor: pointer; }
.jersey .patch.small text { font-size: 5.4px; }
.jersey .patch text { font-family: var(--body); font-size: 8px; font-weight: 800; fill: rgba(255,255,255,.9); letter-spacing: .02em; pointer-events: none; }
.jersey .patch.on rect { fill: rgba(0,0,0,.6); stroke: rgba(255,255,255,.5); }
.jersey .patch:hover rect { stroke: var(--accent); }
.jersey .patch.sel rect { stroke: var(--accent); stroke-width: 2; }
.lockup { display: inline-flex; align-items: center; gap: 7px; }
.lockup .mark { flex: none; border-radius: 3px; }
.panel > .head h3 .mark { vertical-align: -4px; margin-right: 4px; }

/* your colours, under the shirt that wears them */
.kitpick { padding: 4px 4px 2px; flex: none; }
.panel .body:has(.kitwrap) { display: flex; flex-direction: column; }
.kitpick .lbl { font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); margin: 8px 0 5px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch:hover { border-color: rgba(255,255,255,.45); }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 0 12px rgba(255,255,255,.25); }


/* --------------------------------------------------------------- lineup
   One page: the five across the top, the system and the bench beneath them.
   The cards shrink to the width they are given rather than pushing the fifth
   man off the side of the screen. */
.lineupgrid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; }
.lineupgrid > .panel.five { grid-column: 1 / -1; }
.lineupgrid > .panel.five > .body { overflow: visible; }
.slot .seg { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; margin-top: 6px; }
.slot .seg .sgb { padding: 3px 7px; font-size: 9.5px; }
.slot .swapbar { justify-content: center; }
.slot .nick { font-size: 18px; }
.slot .face { width: 56px; height: 56px; }
.slot { padding: 8px; }
table.tbl.tight th, table.tbl.tight td { padding: 3px 10px; }
.sysdial { margin-bottom: 2px; }
.lineupgrid > .panel > .body { padding-bottom: 8px; }

/* loose or structured: where a man wants the side to sit. The band is how
   sure you are of it, which for somebody nobody has watched is most of it. */
.stylebar { padding: 2px 0 0; }
.stylebar .track { position: relative; display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, rgba(224,87,79,.22), rgba(255,255,255,.06) 50%, rgba(79,163,238,.22)); overflow: hidden; }
.stylebar .track i { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.16); }
.stylebar .track b { position: absolute; top: -2px; width: 2px; height: 11px; background: var(--ink-2); }
.stylebar.sure .track b { background: var(--accent); }
.stylebar .ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); }
.stylebar .ends .mid { color: var(--ink); }
.stylebar.sure .ends .mid { color: var(--accent); }
.sc-style { display: flex; align-items: center; gap: 12px; padding: 2px 0 6px; }
.sc-style .stylebar { flex: 1; min-width: 0; }
.sc-style .fitline { flex: none; }

/* ---------------------------------------------------------------- hovers
   Who is that, answered where you are. It sits on the body so a redraw cannot
   take it away mid-hover, and it never takes the pointer. */
.hovercard {
  position: fixed; z-index: 90; width: 330px; max-width: 92vw;
  background: rgba(10, 14, 22, .97); border: 1px solid var(--edge, #2a3a52); border-radius: 8px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55); padding: 12px 14px;
  opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .12s ease, transform .12s ease;
}
.hovercard.on { opacity: 1; transform: none; }
.hov .hh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hov .hh .face, .hov .hh .crest { border-radius: 5px; flex: none; }
.hov .hh .nick { font-family: var(--disp); font-size: 19px; font-weight: var(--w-loud); text-transform: uppercase; line-height: 1.1; }
.hov .hh .sub { font-size: var(--fs-cap); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); font-weight: var(--w-mid); margin-top: 2px; }
.hov .hf { display: flex; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.hov .hf > div { display: flex; flex-direction: column; }
.hov .hf b { font-size: 15px; font-weight: var(--w-loud); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hov .hf span { font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-loud); }
.hov .bars .b { margin: 3px 0; }
.hov .hstyle { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hov .hstyle .stylebar { flex: 1; min-width: 0; }
.hov .hnote { margin-top: 8px; font-size: var(--fs-cap); color: var(--ink-2); }
.hov .hovtbl td { padding: 2px 6px; font-size: 12px; }
/* a finished cup: who won it, and who played it, side by side */
.cupcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
@media (max-width: 1200px) { .cupcols { grid-template-columns: 1fr; } }
/* a pack, loaded and waiting for Start */
.packline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: rgba(76,195,138,.10); border: 1px solid rgba(76,195,138,.3); border-radius: 5px; }
.packline b { font-size: 14px; }

/* ---------------------------------------------------------------- the maker */
/* You, made before the world exists: a head on the left, the knobs that turn
   it on the right, and nothing that needs a manual. */
.maker { display: grid; grid-template-columns: 172px 1fr; gap: 16px; align-items: start; }
.maker .mug { display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--panel-2, #10151f); border: 1px solid var(--line, #232b38); border-radius: 10px; padding: 10px; }
.maker .mug .face { border-radius: 8px; background: #0c111a; }
.maker .knobs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.maker .knobs input { width: 100%; }
.maker .parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.maker .part { display: flex; align-items: center; justify-content: space-between; gap: 4px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line, #232b38); border-radius: 7px; padding: 3px 4px; }
.maker .part span { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #93a1b5); }
.maker .part .btn.tiny { padding: 1px 8px; font-size: 14px; line-height: 1.2; }
.maker .tone { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maker .tone > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #6d7b90); width: 34px; }
.maker .tone .swatch { width: 20px; height: 20px; border-radius: 4px; }
@media (max-width: 620px) { .maker { grid-template-columns: 1fr; } }

/* You, in the corner of every screen after that. */
.top .you { display: flex; align-items: center; gap: 7px; padding-right: 4px; }
.top .you .face { width: 30px; height: 30px; border-radius: 50%; background: #0c111a; }
.top .you span { font-size: 13px; font-weight: 600; color: var(--ink-2, #93a1b5); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- the phone wall */
/* Said once, plainly, with a way past it for anyone who insists. */
/* Fixed to the page's own canvas, which a phone shows zoomed out to fit: the
   page is declared 1280 wide for the game's sake and changing that from script
   after load is not something every browser honours. So the wall is laid out
   at that width and sized to survive the zoom, rather than fighting it. */
.wall { position: fixed; inset: 0; z-index: 50; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px; text-align: center; background: var(--bg, #0b0f16); }
.wall > * { max-width: 52rem; }
.wall h1 { font-family: var(--disp, 'Barlow Condensed', sans-serif); font-size: 88px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; margin-bottom: 18px; }
.wall p { color: var(--ink-2, #93a1b5); font-size: 30px; line-height: 1.5; margin-bottom: 8px; }
.wall p.dim { color: var(--ink-3, #6d7b90); font-size: 24px; }
.wall .btnrow { justify-content: center; gap: 18px; margin-top: 34px; }
.wall .btn { font-size: 24px; padding: 14px 26px; }

/* A club's own badge and a player's own photograph, when a picture pack is
   loaded. Same footprint as the drawn ones, so nothing on any screen moves. */
img.crest.shot { object-fit: contain; }
img.face.shot { object-fit: cover; object-position: 50% 18%; border-radius: 6px; background: #0c111a; }
.top .you img.face.shot, .mug img.face.shot { border-radius: 50%; }
.face.blank { border-radius: 6px; }
.top .you .face.blank, .mug .face.blank { border-radius: 50%; }

/* The front of the game got tall enough to push Start off the bottom of a
   laptop, on a screen with 700px of unused width either side of it. Two
   columns: who you are on the left, what world you are walking into on the
   right, and the button that starts it underneath both. */
.start { max-width: 1080px; margin: 44px auto 64px; }
.startgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.startgrid .scol { min-width: 0; }
.startgrid .scol > .field:last-child { margin-bottom: 0; }
.start .startgo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
/* And whatever the height ends up being, the page scrolls to reach it. */
html, body { height: auto; overflow-y: auto; }
@media (max-width: 1100px) { .startgrid { grid-template-columns: 1fr; } }