/* Components the screens are built from. dev.css holds the tokens and the shell; this holds the rooms. */

/* ── shell extras ───────────────────────────────────────────────────────── */
.ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico.lg{width:22px;height:22px}
.cont{margin-left:14px;padding:8px 15px;background:#e8e9eb;color:#0e0f11;font:800 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.cont.due{background:var(--warn)}
.cont.stop{background:#d9655f;color:#fff}
.cont.stop:hover{background:#e8837d}
/* the day the week is on, while it rolls */
.wkc.now{animation:none}
.wkband.rolling .wkc.now{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 2px rgba(255,255,255,.12)}
.cont[disabled]{background:rgba(255,255,255,.1);color:var(--ink3);cursor:default}
.back{color:var(--ink2)}
.here{color:var(--ink3);margin-left:8px}
.toast{position:fixed;left:50%;bottom:26px;z-index:9;transform:translate(-50%,10px);max-width:560px;padding:12px 20px;background:#e8e9eb;color:#0e0f11;font:600 13.5px/1.4 var(--body);opacity:0;transition:opacity .28s,transform .28s;pointer-events:none}
.toast.bad{background:#41262a;color:var(--ink)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.udot{display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--warn)}
.sub .n{margin-left:5px;padding:1px 5px;background:var(--warn);color:#0e0f11;font:800 10px/1.3 var(--disp);vertical-align:1px}

/* ── the week (home) ────────────────────────────────────────────────────── */
.today-g{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:16px 18px 0;overflow:hidden;color:var(--ink);text-align:left;background:linear-gradient(180deg,#1b1c20,#0d0e10);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.tile.big{grid-row:1/3;padding:20px 22px 0}
.tile.lit{background:#e8e9eb;color:#0e0f11}
.tile.lit .tile-k,.tile.lit .tile-s,.tile.lit .tile-go,.tile.lit .jb-s{color:#4a4d53}
.tile.lit .cell b{color:#0e0f11}
.tile.lit .cell i{color:#4a4d53}
.tile.lit .cell{border-left-color:rgba(0,0,0,.08)}
.tile.lit .jb{border-top-color:rgba(0,0,0,.1)}
.tile.lit .jb b{color:#0e0f11}
.tile.mday{background:linear-gradient(104deg,#13234c,#131418 55%,#3d2c10)}
.tile-k{display:flex;align-items:center;gap:10px;font:700 11px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.tile-k .due{color:var(--warn)}
.tile-go{margin-left:auto}
.tile-t{margin-top:11px;font:800 30px/.94 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.tile.big .tile-t{margin-top:14px;font-size:46px}
.tile-s{margin-top:9px;font:500 13.5px/1.4 var(--body);color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .cells{margin:auto -18px 0;border-top:1px solid rgba(255,255,255,.07);background:rgba(8,9,11,.45)}
.tile.big .cells{margin:auto -22px 0}
/* the jobs still on the desk — the rest of the week, under the one big call */
.jobs{margin-top:16px;overflow:hidden;min-height:0}
/* the NAME of the job takes its own width and the detail takes what is left, not the other way round: with
   the detail on `auto` a long one (the press question) squeezed the name until it wrapped and the row ran
   past its own button. The name never wraps; a long detail gives way at the right-hand end. */
.jb{display:grid;grid-template-columns:18px auto minmax(0,1fr);align-items:center;gap:11px;width:100%;padding:9px 0;border-top:1px solid rgba(255,255,255,.09);text-align:left;color:inherit}
.jb b{font:700 15px/1.1 var(--disp);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.jb-s{font:500 12px/1 var(--body);color:var(--ink3);white-space:nowrap;text-align:right;overflow:hidden;text-overflow:ellipsis}
.lead{display:block;margin-top:13px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.09)}
.lead em{display:inline-flex;align-items:center;gap:6px;font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase}
.lead b{display:block;margin-top:8px;font:800 20px/1.06 var(--disp);text-transform:uppercase}
.lead i{display:block;margin-top:5px;font:400 12px/1.4 var(--body);font-style:normal;color:var(--ink3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the messages sit at the top of the tile, at their own height — a grid given a tall box stretches its
   rows, which spread three lines across the whole card (Lucas, 2026-09-21: "theyre spread very far apart") */
.news3{display:grid;gap:8px;margin-top:11px;align-content:start}
.news3 > span.un > span{color:var(--ink)}
.news3 > span.un > em::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--club,#e8e9eb)}
.news3>span{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:baseline;font-size:12.5px;color:var(--ink2)}
.news3 em{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.news3 span span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlad{display:grid;gap:2px;margin-top:11px}
.mlr{display:grid;grid-template-columns:20px 20px minmax(0,1fr) 44px 26px;align-items:center;gap:9px;padding:3px 0}
.mlr em{font:700 12px/1 var(--disp);font-style:normal;color:var(--ink3);text-align:right}
.mlr b{font:700 14px/1 var(--disp);text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlr u,.mlr s{text-decoration:none;font-size:12px;color:var(--ink3);text-align:right}
.mlr.me{margin-left:-6px;padding-left:6px;background:rgba(255,255,255,.08);box-shadow:inset 2px 0 0 #e8e9eb}
.mlr.me b,.mlr.me s{color:var(--ink)}
.mini-mu{display:flex;align-items:center;gap:10px;margin-top:13px}
.mini-mu b{font:800 17px/1 var(--disp)}
.mini-mu span{font-size:12.5px;color:var(--ink3)}
.plist{display:grid;gap:7px;margin-top:11px}
.pl{display:grid;grid-template-columns:18px 28px minmax(0,1fr);align-items:center;gap:10px}
.pl .fc{width:28px;height:28px}
.pl-n b{display:block;font:700 13.5px/1 var(--disp);text-transform:uppercase}
.pl-n i{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--ink3)}
.frm{display:flex;gap:4px;margin-top:11px}
.frm span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 2px;background:rgba(255,255,255,.05)}
.frm b{font:800 15px/1 var(--disp)}
.frm i{font:600 9.5px/1 var(--body);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.frm span.w b{color:var(--good)}.frm span.l b{color:var(--bad)}

/* ── calendar ───────────────────────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;padding:0 14px 14px;flex:1;min-height:0}
.cal-h{font:700 9.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:0 0 4px 3px}
.cd{display:flex;flex-direction:column;gap:3px;min-height:0;padding:6px 7px;background:rgba(255,255,255,.035);overflow:hidden}
.cd.off{background:transparent}
.cd.now{box-shadow:inset 0 0 0 1px var(--ink4)}
.cd em{font:700 12px/1 var(--disp);font-style:normal;color:var(--ink3)}
.cd.now em{color:var(--ink)}
.ce{font:600 10.5px/1.25 var(--body);padding:3px 5px;background:rgba(255,255,255,.06);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ce.match{background:rgba(255,255,255,.14);color:var(--ink)}
.ce.mine{background:#e8e9eb;color:#0e0f11;font-weight:700}

/* ── inbox / news ───────────────────────────────────────────────────────── */
.msg{padding:0 14px 14px}
.msg h3{margin:0 0 6px;font:800 24px/1.05 var(--disp);text-transform:uppercase}
.msg p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink2)}

/* ── tactics ────────────────────────────────────────────────────────────── */
.pset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:0 14px 12px}
.ps{display:flex;flex-direction:column;gap:6px;padding:11px 12px;background:rgba(255,255,255,.045);border-left:2px solid transparent;text-align:left;color:var(--ink)}
.ps.on{background:#e8e9eb;color:#0e0f11;border-left-color:#0e0f11}
.ps.on i,.ps.on small{color:#4a4d53}
.ps b{font:700 15px/1 var(--disp);text-transform:uppercase}
.ps i{font:400 11.5px/1.35 var(--body);font-style:normal;color:var(--ink3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ps small{display:flex;align-items:center;gap:6px;font:700 9.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.fam{display:grid;grid-template-columns:130px minmax(0,1fr) 46px;align-items:center;gap:11px;padding:6px 14px;font-size:12.5px;color:var(--ink2)}
.fam b{font:700 13px/1 var(--disp);text-align:right;color:var(--ink)}

/* ── deal builder ───────────────────────────────────────────────────────── */
.deal{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);gap:9px;padding:0 14px 12px;flex:1;min-height:0}
.side2{display:flex;flex-direction:column;min-height:0;background:rgba(255,255,255,.04);padding:9px}
.side2 h4{margin:0 0 7px;font:700 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.side2 .scroll{flex:1;min-height:0}
.asset{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:5px 8px;margin-bottom:4px;background:rgba(255,255,255,.05);color:var(--ink);text-align:left}
.asset.on{background:#e8e9eb;color:#0e0f11}
.asset b{font:700 12.5px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset small{display:block;margin-top:3px;font:500 10.5px/1 var(--body);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset.on small{color:#4a4d53}
.asset u{text-decoration:none;font:800 14px/1 var(--disp)}
.asset .pick{display:grid;place-items:center;width:28px;height:28px;background:rgba(255,255,255,.08);font:800 11px/1 var(--disp)}
.asset .fc{width:28px;height:28px}
.scale{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.scale-n{font:800 28px/1 var(--disp)}
.scale-b{position:relative;width:7px;flex:1;background:rgba(255,255,255,.07)}
.scale-b i{position:absolute;left:0;right:0;bottom:50%;height:var(--h);background:var(--good)}
.scale-b i.short{top:50%;bottom:auto;background:var(--bad)}
.scale-w{font:700 9.5px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);text-align:center}

/* ── draft ──────────────────────────────────────────────────────────────── */
.pro-i{display:grid;place-items:center;width:34px;height:34px;background:rgba(255,255,255,.07);font:800 11px/1 var(--disp);color:var(--ink2)}

/* ── forms, buttons, small controls ─────────────────────────────────────── */
.mini-s{display:inline-flex;align-items:center}
.mini-s input{width:190px;padding:5px 9px;background:rgba(255,255,255,.06);border:0;border-bottom:1px solid var(--ink4);color:var(--ink);font:500 12.5px/1.2 var(--body);outline:none}
.fld{display:inline-flex;flex-direction:column;gap:4px;margin-right:10px}
.fld em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.fld input,.fld select{width:104px;padding:6px 8px;background:rgba(255,255,255,.06);border:0;border-bottom:1px solid var(--ink4);color:var(--ink);font:600 13px/1.2 var(--body);outline:none}
.btn.sm{height:30px;padding:0 13px;font-size:12px}
.btn[disabled]{background:rgba(255,255,255,.08);color:var(--ink3);cursor:default}
.btnrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:7px;padding:12px 14px 12px}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;background:rgba(255,255,255,.08);font:700 9.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.pill.good{background:rgba(127,199,166,.16);color:var(--good)}
.pill.warn{background:rgba(232,191,122,.16);color:var(--warn)}
.pill.bad{background:rgba(235,143,138,.16);color:var(--bad)}

/* ── match day ──────────────────────────────────────────────────────────── */
.mh{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;padding:18px 22px;background:linear-gradient(104deg,#13234c,#131418 55%,#3d2c10)}
.mh-t{display:flex;align-items:center;gap:13px;min-width:0}
.mh-t.a{justify-content:flex-end}
.mh-t .crest{width:40px;height:40px}
.mh-n{font:800 32px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-v{color:var(--ink4);font:700 14px/1 var(--disp)}
.mh-w{grid-column:1/-1;display:flex;justify-content:center;gap:22px;font:700 10px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.mh-w b{color:var(--ink);font-weight:700}

/* ── misc panels ────────────────────────────────────────────────────────── */
.stack{display:grid;gap:4px;padding:0 14px 12px}
.brd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;background:rgba(255,255,255,.04)}
.brd b{display:block;font:700 14px/1 var(--disp);text-transform:uppercase}
.brd i{display:block;margin-top:5px;font:400 12px/1.45 var(--body);font-style:normal;color:var(--ink3)}
.wk{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;align-items:center;gap:11px;padding:5px 14px;font-size:12.5px;color:var(--ink2)}
.wk b{font:700 13px/1 var(--disp);text-align:right;color:var(--ink)}
.cap{position:relative;height:12px;margin:2px 14px 12px;background:rgba(255,255,255,.07)}
.cap i{position:absolute;left:0;top:0;bottom:0;width:var(--v);background:var(--ink2)}
.cap i.over{background:var(--bad)}
.cap u{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--warn);left:var(--s)}
@media (max-width:1240px){.today-g{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.tile.big{grid-row:1/3}}

/* the ceiling marker on an attribute bar: how far the engine thinks he can still go */
.at .bar{position:relative}
.at .bar u{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--ink);opacity:.55;left:var(--c)}
.at .t-s{text-align:right}

/* the board's standing ask, sitting under the day's one call */
.obj{display:block;margin-top:auto;padding:14px 0 12px}
.obj em{display:block;font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.obj b{display:block;margin:7px 0 9px;font:800 19px/1.05 var(--disp);text-transform:uppercase}
.tile.lit .obj em{color:#4a4d53}
.tile.lit .obj .bar{background:rgba(0,0,0,.1)}
.tile.lit .obj .bar i{background:#0e0f11}
/* a light tile needs a light footer — the dark wash read as a grey smear over it */
.tile.lit .cells{background:rgba(0,0,0,.05);border-top-color:rgba(0,0,0,.1)}
.jobs{margin-top:14px;overflow:hidden;min-height:0;flex:0 0 auto}

/* the week across the bottom of the day's call */
.wkstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:16px}
.wd{display:flex;flex-direction:column;gap:5px;min-width:0;padding:8px 7px;background:rgba(255,255,255,.05)}
.wd em{font:700 9px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.wd b{font:800 17px/1 var(--disp)}
.wd i{font:500 10px/1.25 var(--body);font-style:normal;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd.now{background:rgba(255,255,255,.14)}
.wd.game{box-shadow:inset 0 -2px 0 var(--warn)}
.tile.lit .wd{background:rgba(0,0,0,.055)}
.tile.lit .wd em,.tile.lit .wd i{color:#4a4d53}
.tile.lit .wd.now{background:rgba(0,0,0,.13)}

/* the day's call sits at the top of the big tile; the week and the board's ask hug the bottom */
.tile.big .jobs{flex:1 1 auto}
.tile.big .wkstrip{margin-top:auto}
.tile.big .obj{margin-top:0;padding-top:16px}

/* the dossier portrait is a bigger box than a list thumbnail, so it needs its own crop —
   the list offsets cut the top of the head off at this size */
.who .fc img{left:-9%;top:-2%;width:118%}

/* ── the season room ────────────────────────────────────────────────────── */
.winner{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding:14px}
.winner .fc{width:96px;height:106px}
.winner em{display:block;font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.winner b{display:block;margin:8px 0 5px;font:800 34px/.95 var(--disp);text-transform:uppercase}
.winner i{font:500 13px/1 var(--body);font-style:normal;color:var(--ink2)}
.offcal{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:5px;padding:0 14px 12px}
.offd{display:flex;flex-direction:column;gap:5px;padding:10px 11px;background:rgba(255,255,255,.04);border-top:2px solid rgba(255,255,255,.1)}
.offd em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.offd b{font:700 14px/1.05 var(--disp);text-transform:uppercase}
.offd i{font:500 10.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.offd.done{opacity:.5}
.offd.current{background:#e8e9eb;color:#0e0f11;border-top-color:#0e0f11}
.offd.current em,.offd.current i{color:#4a4d53}
.gatebar{display:flex;align-items:center;gap:10px;margin:0 14px;padding:11px 13px;background:rgba(232,191,122,.1);box-shadow:inset 2px 0 0 var(--warn);font-size:13px;color:var(--ink)}

/* quarter-by-quarter, in the same cell language as the stat strips */
.qtrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:0 14px 12px}
.qt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;background:rgba(255,255,255,.05)}
.qt em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.qt b{font:800 18px/1 var(--disp)}
.qt i{font:600 13px/1 var(--disp);font-style:normal;color:var(--ink3)}

/* ── the segmented control ──────────────────────────────────────────────
   One device for "this room holds more than one thing". It sits inline under the card header, sized
   to its labels — stretched full-width it read as a second header rather than a control. */
/* a card is a column flex container, so its children stretch — the control has to opt out or it
   spans the card and reads as a second header rather than a control */
.seg{display:inline-flex;align-self:flex-start;flex:0 0 auto;gap:2px;margin:0 14px 10px;padding:2px;background:rgba(255,255,255,.05)}
.seg button{padding:7px 14px;background:transparent;font:700 10.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);transition:color .18s,background .18s}
.seg button:hover{color:var(--ink2)}
.seg button.on{background:#e8e9eb;color:#0e0f11}

/* How a card fits its content. A card is a column flex box of fixed height, and by default every child
   may shrink — which squashed the dossier header to nothing and let a list slide under its own footer.
   So nothing in a card shrinks except its one scrolling list, which takes the space that is left and
   scrolls inside it; if even that is not enough (a long dossier), the card itself scrolls. */
.card > *{flex-shrink:0}
.card > .scroll{flex:1 1 auto;min-height:150px;overflow-y:auto}
.pg-b > .card{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink4) transparent}

/* ── match day: the room ─────────────────────────────────────────────────
   Big tiles, one lit for the kick-off. Drawn patterns, not pictures: ground arcs behind the call, team-sheet
   rules behind their side, a dot grid behind the danger men, mown stripes behind the ground. */
.md-h{padding:16px 22px 14px}
.md-h .mh-n{font-size:30px}
.md-h .mh-v{font:800 16px/1 var(--disp);color:var(--ink3)}
.md-h .mh-w{margin-top:2px;gap:18px}
.md-g{flex:1;min-height:0;display:grid;margin-top:10px;gap:10px;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
.md-g .tile{padding:16px 18px 14px}
.md-go{grid-column:1;grid-row:1/3}
.md-side{grid-column:2/4;grid-row:1}
.md-danger{grid-column:4;grid-row:1}
.md-read{grid-column:2;grid-row:2}
.md-answer{grid-column:3;grid-row:2}
.md-ground{grid-column:4;grid-row:2}
.tile > *{position:relative}
.tpat{position:absolute !important;inset:0;pointer-events:none;opacity:.5}
.tpat.arcs{background:
  radial-gradient(ellipse 88% 58% at 50% 118%,transparent 61%,rgba(0,0,0,.07) 61.3%,transparent 61.9%),
  radial-gradient(ellipse 42% 26% at 50% 118%,transparent 70%,rgba(0,0,0,.07) 70.8%,transparent 72%)}
.tpat.rules{background:repeating-linear-gradient(180deg,transparent 0 33px,rgba(255,255,255,.035) 33px 34px)}
.tpat.dots{background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/14px 14px;opacity:.6}
.tpat.stripes{background:repeating-linear-gradient(90deg,rgba(127,199,166,.035) 0 26px,transparent 26px 52px)}
.md-go .tile-t{margin-top:10px;font-size:48px;line-height:.92}
.md-go .tile-s{-webkit-line-clamp:1}
.md-rows{display:flex;flex-direction:column;margin-top:18px}
.md-row{display:grid;grid-template-columns:18px 104px minmax(0,1fr) 12px;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(0,0,0,.1);color:#0e0f11;text-align:left}
.md-row b{font:700 13px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#4a4d53}
.md-row span{font:600 14px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-row span.c-inj{color:#b3423b}
.md-row em{font-style:normal;color:#8a8d93}
.md-row:hover span{text-decoration:underline;text-underline-offset:3px}
.md-cta{display:flex;gap:8px;margin-top:auto;padding-top:18px}
.md-cta .btn{flex:1;height:54px;font-size:17px}
.md-go .md-cta .btn{background:#0e0f11;color:#f3f4f6}
.md-go .md-cta .btn.dim{background:rgba(0,0,0,.08);color:#0e0f11}
.md-cta.sm{margin-top:12px;padding-top:0}
.md-cta.sm .btn{flex:0 0 auto;height:32px;font-size:12px}
.md-watch{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:12px;font:700 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#6a6d73}
.md-watch .chipline{padding:0;margin-right:10px}
.md-go .chip2{background:rgba(0,0,0,.07);color:#4a4d53}
.md-go .chip2.on{background:#0e0f11;color:#f3f4f6}
/* their side, drawn as a team sheet */
.sheet{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:3px;flex:1;min-height:0;margin-top:10px}
.sh-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;min-height:0}
.sh-s{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:0 9px;background:rgba(255,255,255,.045);text-align:left;color:var(--ink)}
.sh-s em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.12em;color:var(--ink3)}
.sh-s b{font:700 14px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-s u{text-decoration:none;font:800 14px/1 var(--disp);color:var(--ink2)}
.sh-s:hover{background:rgba(255,255,255,.08)}
.md-bench{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.md-bench em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-right:2px}
.md-bench button{color:var(--ink2)}
.md-bench button b{font:800 12.5px/1 var(--disp);color:var(--ink)}
.md-bench.out span i{font-style:normal;color:var(--bad)}
/* danger men */
.md-dm{display:flex;flex-direction:column;gap:7px;margin-top:11px;min-height:0;overflow:hidden}
.dm{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;padding:7px 8px;background:rgba(255,255,255,.04)}
.dm.on{box-shadow:inset 2px 0 0 var(--warn)}
.dm-p{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;text-align:left;color:var(--ink)}
.dm-p .fc{width:30px;height:30px}
.dm-p b{display:block;font:700 13.5px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-p i{display:block;margin-top:3px;font:500 11px/1 var(--body);font-style:normal;color:var(--ink3)}
.dm-p u{text-decoration:none;font:800 17px/1 var(--disp)}
.dm small{grid-column:1/-1;font:400 11.5px/1.35 var(--body);color:var(--ink3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dm .chip2{grid-row:1;grid-column:2}
.md-tagger{display:block;margin-top:10px}
.md-tagger em,.md-lev em{display:block;margin-bottom:6px;font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.md-tagger .chipline,.md-lev .chipline{padding:0}
.md-foot{display:block;margin-top:auto;padding-top:10px;font:400 11.5px/1.4 var(--body);color:var(--ink3)}
/* the read */
.md-threat{display:block;margin-top:11px;font:500 13.5px/1.45 var(--body);color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.md-kvs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:11px}
.md-kv{display:flex;flex-direction:column;gap:5px;padding:8px 9px;background:rgba(255,255,255,.045)}
.md-kv em{font:700 9px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.md-kv b{font:700 14px/1.05 var(--disp);text-transform:uppercase}
.md-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.md-read .frm{margin-top:auto;padding-top:10px}
.md-recs{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.md-recs span{padding-left:10px;border-left:2px solid var(--ink4);font:400 12px/1.4 var(--body);color:var(--ink2)}
.md-lev{display:block;margin-top:10px}
button.tile-go{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink3)}
button.tile-go:hover{color:var(--ink)}
/* the lines, you against them */
.tug{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-top:12px}
.tug-h{display:grid;grid-template-columns:30px 1fr 34px 1fr 30px;font:700 9px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.tug-h em{font-style:normal}
.tug-h em:nth-child(2){grid-column:3;text-align:center}
.tug-h em:last-child{grid-column:5;text-align:right}
.tug-r{display:grid;grid-template-columns:30px 1fr 34px 1fr 30px;align-items:center;gap:6px}
.tug-r b{font:800 15px/1 var(--disp)}
.tug-r b:last-child{text-align:right}
.tug-r em{font:700 10px/1 var(--body);font-style:normal;letter-spacing:.12em;text-align:center;color:var(--ink3)}
/* EVERY COMPARISON IS DRAWN IN THE TWO CLUBS' COLOURS. Grey against white told you nothing and looked
   like a spreadsheet; your bar is your club, theirs is theirs, on every step. */
.tug-b{position:relative;height:10px;background:rgba(255,255,255,.05)}
.tug-b i{position:absolute;top:0;bottom:0;right:0;width:var(--w);
  background:linear-gradient(90deg,color-mix(in srgb,var(--h1,#e8e9eb) 55%,#0b0c0e),color-mix(in srgb,var(--h1,#e8e9eb) 92%,#fff))}
.tug-b.r i{left:0;right:auto;
  background:linear-gradient(90deg,color-mix(in srgb,var(--a1,#8b8f96) 92%,#fff),color-mix(in srgb,var(--a1,#8b8f96) 55%,#0b0c0e))}
.tug-r b{color:var(--ink)}
.tug-r b.up{color:color-mix(in srgb,var(--h1,#e8e9eb) 45%,#fff)}
.tug-r b.down{color:color-mix(in srgb,var(--a1,#d9655f) 45%,#fff)}
@media (max-width:1240px){.md-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;overflow-y:auto}
  .md-go,.md-side,.md-danger,.md-read,.md-answer,.md-ground{grid-column:auto;grid-row:auto;min-height:320px}}

/* ── selection: the team sheet ───────────────────────────────────────────
   Six lines of three, forwards at the top as a sheet is read, then the interchange. A post you set
   yourself carries a thin light edge; a man who cannot play reads in the injury colour. */
.tsheet{display:grid;grid-template-rows:repeat(7,minmax(52px,1fr));gap:4px;flex:1 1 auto;padding:6px 14px 4px}
.ts-l{display:grid;grid-template-columns:104px repeat(3,minmax(0,1fr));gap:4px;min-height:0}
.ts-l.bench{grid-template-columns:104px repeat(5,minmax(0,1fr));margin-top:6px}
.ts-l > em{align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font:700 9px/1.2 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ts-l > em i{font-style:normal}
.ts-l > em .qb{min-width:28px;height:22px;font-size:13px}
.ts-s{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:5px 8px 5px 5px;background:rgba(255,255,255,.05);border-left:2px solid rgba(255,255,255,.1);text-align:left;color:var(--ink);transition:background .15s}
.ts-s .fc{width:40px;height:40px}
.ts-s.empty{grid-template-columns:40px minmax(0,1fr)}
.ts-w{display:flex;flex-direction:column;gap:4px;min-width:0}
.ts-s:hover{background:rgba(255,255,255,.085)}
.ts-w em{display:flex;gap:8px;font:800 10px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.ts-w em u{min-width:0;font-weight:600;text-decoration:none;letter-spacing:.08em;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-w > b{font:800 15.5px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-w > span{font:500 11px/1 var(--body);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-s.named{border-left-color:#e8e9eb}
.ts-s.out{border-left-color:var(--bad)}
.ts-s.out .ts-w > b,.ts-s.out .ts-w > span{color:var(--bad)}
.ts-s.pick{background:#e8e9eb;border-left-color:#0e0f11;color:#0e0f11}
.ts-s.pick .ts-w em,.ts-s.pick .ts-w em u,.ts-s.pick .ts-w > span{color:#4a4d53}
.ts-role{padding:8px 14px 0}
.ts-role em{display:block;margin-bottom:6px;font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ts-role .chipline{padding:0}
.trow.dim{opacity:.45}

/* form, read against the rest of the list */
.frel{font:700 11px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.frel.up{color:var(--good)}
.frel.down{color:var(--bad)}
.kv .frel{font-size:14px}
.md-form{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.md-form-h{font:700 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#6a6d73}
.md-form-r{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,26px);align-items:center;gap:4px}
.md-form-r b{font:700 14px/1 var(--disp);text-transform:uppercase;color:#0e0f11;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-form-r i{display:grid;place-items:center;height:24px;font:800 12px/1 var(--disp);font-style:normal;background:rgba(0,0,0,.07);color:#4a4d53}
.md-form-r i.w{background:#2f7d5b;color:#fff}
.md-form-r i.l{background:#a8403a;color:#fff}
.md-form-r em{grid-column:2/-1;font:500 12px/1 var(--body);font-style:normal;color:#6a6d73}
.dm small{-webkit-line-clamp:2}

/* ── home: the day ───────────────────────────────────────────────────────
   Today's one job and the way on, as two tile-buttons (the lit one is the call); the rest of the desk
   under it, each row its own door; the six days to the match along the bottom. */
.hm-day .tile-t{font-size:46px;margin-top:12px}
.hm-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.hm-b{height:44px;padding:0 18px;background:rgba(0,0,0,.07);color:#0e0f11;font:800 14px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;transition:background .15s}
.hm-b:hover{background:rgba(0,0,0,.12)}
.hm-b.on{background:#0e0f11;color:#f3f4f6}
.hm-b.on:hover{background:#26282c}
.tile.big .jobs{flex:1 1 auto;margin-top:16px;overflow-y:auto}
button.jb{cursor:pointer}
button.jb:hover b{text-decoration:underline;text-underline-offset:3px}
.wd{cursor:pointer;text-align:left;border:0}
.wd.past{opacity:.45}
.wd.gate i{color:#9a5a12}
.tile.lit .wd.now{background:#0e0f11}
.tile.lit .wd.now em,.tile.lit .wd.now i{color:rgba(243,244,246,.6)}
.tile.lit .wd.now b{color:#f3f4f6}
.tile.lit .wd.game{box-shadow:inset 0 -2px 0 #0e0f11}

/* the finals line under eighth */
.trow.cut{box-shadow:inset 0 -1px 0 rgba(232,233,235,.35)}

/* ── the draft room ───────────────────────────────────────────────────── */
.chip-sep{width:1px;height:18px;margin:3px 6px;background:var(--ink4)}
.pro-i.sl{background:#e8e9eb;color:#0e0f11}
.trow.on .pro-i{background:rgba(0,0,0,.1);color:#0e0f11}
.pro-i.lg{width:52px;height:52px;font-size:16px}
.dclock{display:flex;flex-direction:column;gap:6px;margin:14px 14px 10px;padding:14px 16px;background:rgba(255,255,255,.05)}
.dclock.on{background:#e8e9eb;color:#0e0f11}
.dclock em{font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.dclock.on em,.dclock.on i{color:#4a4d53}
.dclock b{font:800 30px/.95 var(--disp);text-transform:uppercase}
.dclock i{font:500 12.5px/1.3 var(--body);font-style:normal;color:var(--ink3)}
.dos{padding:4px 0 0}
.dos-h{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:6px 14px 12px}
.dos-h b{display:block;font:800 24px/1 var(--disp);text-transform:uppercase}
.dos-h i{display:block;margin-top:5px;font:500 12px/1.3 var(--body);font-style:normal;color:var(--ink3)}
.dos-rec{margin:10px 14px 0;padding:10px 12px;border-left:2px solid #e8e9eb;background:rgba(255,255,255,.04);font:500 13px/1.45 var(--body);color:var(--ink)}
.dos-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 14px 6px}
.dos-l{display:flex;flex-direction:column;gap:5px}
.dos-l em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.dos-l span{font:500 12.5px/1.3 var(--body)}
.dos-l span.good{color:var(--good)}.dos-l span.bad{color:var(--bad)}.dos-l span.n{color:var(--ink3)}
.cmp{margin:0 14px 10px;background:rgba(255,255,255,.04)}
.cmp-h{display:grid;grid-template-columns:1fr 1fr;padding:9px 12px 6px;font:700 13px/1 var(--disp);text-transform:uppercase}
.cmp-h span:last-child{text-align:right}
.cmp-r{display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;padding:6px 12px;border-top:1px solid rgba(255,255,255,.05)}
.cmp-r b{font:800 16px/1 var(--disp)}
.cmp-r b:last-child{text-align:right}
.cmp-r em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--ink3)}
.pstrip{display:flex;gap:3px;padding:10px 14px 12px;overflow-x:auto;scrollbar-width:thin}
.ps1{display:flex;align-items:center;gap:5px;flex:none;padding:5px 8px;background:rgba(255,255,255,.04)}
.ps1 b{font:800 12px/1 var(--disp);color:var(--ink2)}
.ps1.now{box-shadow:inset 0 -2px 0 var(--ink2)}
.ps1.you{background:#e8e9eb}
.ps1.you b{color:#0e0f11}
.ptg{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 10px}
.ptg > div{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px}
.ptg em{flex:0 0 100%;font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.pt1{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;background:rgba(255,255,255,.06);font:800 12px/1 var(--disp);color:var(--ink)}
.pt1 .crest{width:14px;height:14px}
.pt1 u{text-decoration:none;font-weight:600;color:var(--ink3)}
.pt1.on{background:#e8e9eb;color:#0e0f11}
.pt1.on u{color:#4a4d53}
.pt1.dim{opacity:.35}
.dconf{margin:24px 14px;padding:18px;background:rgba(235,143,138,.08);box-shadow:inset 2px 0 0 var(--bad)}
.dconf b{display:block;font:800 22px/1.05 var(--disp);text-transform:uppercase}
.dconf i{display:block;margin-top:8px;font:500 13px/1.45 var(--body);font-style:normal;color:var(--ink2)}
.hm-day .wkstrip{grid-template-columns:repeat(6,minmax(0,1fr))}
.hm-evs{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:14px}
.hm-evs em{font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#6a6d73}
.hm-ev{display:grid;grid-template-columns:18px 150px minmax(0,1fr);align-items:baseline;gap:10px;color:#0e0f11}
.hm-ev .ico{align-self:center;color:#4a4d53}
.hm-ev b{font:700 14px/1.1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.hm-ev i{font:500 13px/1.35 var(--body);font-style:normal;color:#4a4d53}
.hm-day .wkstrip{margin-top:14px}
.lk-sw{width:30px;height:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.lk-sw.on{box-shadow:0 0 0 2px #e8e9eb}

/* ── the first week ──────────────────────────────────────────────────── */
.onb-prog{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:16px}
.onb-prog i{position:relative;height:6px;background:rgba(0,0,0,.1)}
.onb-prog i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);background:#0e0f11}
.onb-prog b{font:700 12px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#4a4d53}
.jb.onb{grid-template-columns:26px minmax(0,1fr) auto}
.onb-n{display:grid;place-items:center;width:22px;height:22px;background:rgba(0,0,0,.08);font:800 12px/1 var(--disp)}
.jb.onb.done .onb-n{background:#2f7d5b;color:#fff}
.jb.onb.done b{color:#4a4d53}
.onbbar{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:10px 12px 10px 16px;background:#e8e9eb;color:#0e0f11}
.onbbar span{flex:1;display:flex;flex-direction:column;gap:4px}
.onbbar em{font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#4a4d53}
.onbbar b{font:800 18px/1 var(--disp);text-transform:uppercase}
.onbbar .btn{height:36px;background:#0e0f11;color:#f3f4f6}
.onbbar .btn.dim{background:rgba(0,0,0,.08);color:#0e0f11}
.jb.onb{grid-template-columns:26px 250px minmax(0,1fr)}
.jb.onb .jb-s{overflow:hidden;text-overflow:ellipsis;text-align:right}
.trow.on .frel{color:#4a4d53}
.trow.on .frel.up{color:#2f7d5b}
.trow.on .frel.down{color:#a8403a}
/* a scored area: what it is and why, the bar, the number */
.wk2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 54px;align-items:center;gap:14px;padding:9px 14px;border-top:1px solid rgba(255,255,255,.045)}
.wk2 span b{display:block;font:700 14px/1.1 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.wk2 span i{display:block;margin-top:4px;font:400 12px/1.35 var(--body);font-style:normal;color:var(--ink3)}
.wk2 u{text-decoration:none;font:800 15px/1 var(--disp);text-align:right}
.leave{display:flex;align-items:center;gap:8px;padding:2px 14px 6px}
.leave b{min-width:90px;text-align:center;font:800 18px/1 var(--disp);text-transform:uppercase}
.leave .btn{margin-left:auto;height:34px;font-size:12px}
.crest0{display:inline-block}
/* the generic build's drawn crest sits exactly where a logo image would; a player without a photo
   gets a quiet head-and-shoulders silhouette in the same frame */
svg.crest{display:block;flex:none}
.fc .sil{position:absolute;left:0;right:0;bottom:0;width:100%;height:94%;fill:rgba(214,219,228,.15)}
.trow.on .fc .sil{fill:rgba(14,15,17,.18)}
/* the chrome's own display rule would otherwise beat the hidden attribute (the careers page hides it) */
#top[hidden],#sub[hidden]{display:none}
.trow.mine{box-shadow:inset 2px 0 0 #e8e9eb}
.hm-evs{margin-bottom:2px}
.hm-day .wkstrip{margin-top:16px}
.mh-v.score{display:flex;align-items:center;gap:14px;font:800 52px/1 var(--disp);color:var(--ink)}
.mh-v.score i{font-style:normal;font-size:28px;color:var(--ink3)}
.mh.gf{padding:22px 24px}
.mh.gf .mh-n{font-size:34px}
.mh-v.score.sm{font-size:30px;gap:10px}
.mh-v.score.sm i{font-size:18px}
.trow.on .t-n small,.trow.on small{color:#4a4d53}
.trow.on .c-con{color:#9a5a12}

/* ── your careers / taking charge ────────────────────────────────────────
   The front door. Full page, no rail: the careers as big crest cards, and one lit tile to start a new
   one. Taking charge is three steps on the page itself, never a modal. */
.me-s{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink3)}
.me-s:hover{color:var(--ink)}
.cr{height:100%;display:flex;flex-direction:column;min-height:0;padding-top:12px}
.cr-h{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cr-h h1{margin:0;font:800 40px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase}
.cr-h .by{margin-left:auto;color:var(--ink3);font-size:13px}
.cr-g{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.cr-list{display:flex;flex-direction:column;gap:8px;min-height:0;overflow-y:auto}
.cr-c{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 20px;background:linear-gradient(180deg,#1b1c20,#0d0e10);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cr-c.on{box-shadow:inset 3px 0 0 #e8e9eb,inset 0 1px 0 rgba(255,255,255,.06)}
.cr-t b{display:block;font:800 28px/1 var(--disp);text-transform:uppercase}
.cr-t i{display:block;margin-top:7px;font:500 13px/1.3 var(--body);font-style:normal;color:var(--ink2)}
.cr-t em{display:block;margin-top:6px;font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.cr-a{display:flex;align-items:center;gap:8px}
.cr-x{font:600 12px/1 var(--body);color:var(--ink3);padding:8px}
.cr-x:hover{color:var(--bad)}
.cr-warn{max-width:260px;font:500 12px/1.35 var(--body);color:var(--bad)}
.cr-empty{padding:40px 20px;color:var(--ink3);background:rgba(255,255,255,.03)}
.cr-new{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:30px 30px;background:#e8e9eb;color:#0e0f11;text-align:left;overflow:hidden}
.cr-new::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 90% 60% at 50% 120%,transparent 60%,rgba(0,0,0,.06) 60.4%,transparent 61.2%),
  radial-gradient(ellipse 50% 32% at 50% 120%,transparent 68%,rgba(0,0,0,.06) 68.8%,transparent 70%)}
.cr-new > *{position:relative}
.cr-new-k{font:700 11px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:#4a4d53}
.cr-new b{font:800 52px/.92 var(--disp);text-transform:uppercase}
.cr-new i{font:500 14px/1.45 var(--body);font-style:normal;color:#4a4d53;max-width:420px}
.cr-new-go{margin-top:8px;align-self:flex-start;padding:14px 22px;background:#0e0f11;color:#f3f4f6;font:800 15px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.cr-new.locked{background:rgba(255,255,255,.07);color:var(--ink)}
.cr-new.locked .cr-new-k,.cr-new.locked i{color:var(--ink3)}
.cr-new.locked .cr-new-go{background:var(--warn);color:#0e0f11}
.nc-steps{margin-left:auto;display:flex;gap:4px}
.nc-steps span{padding:8px 14px;background:rgba(255,255,255,.05);font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.nc-steps span.on{background:#e8e9eb;color:#0e0f11}
.nc-steps span.done{color:var(--ink2)}
.nc-clubs{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;align-content:start}
.nc-club{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:5px;align-items:center;padding:16px;background:linear-gradient(180deg,#1b1c20,#0d0e10);text-align:left;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:background .15s}
.nc-club .crest,.nc-club .crest0{grid-row:1/3}
.nc-club b{align-self:end;font:800 19px/1 var(--disp);text-transform:uppercase}
.nc-club i{align-self:start;font:500 11.5px/1.3 var(--body);font-style:normal;color:var(--ink3)}
.nc-club u{position:absolute;top:12px;right:14px;text-decoration:none;font:800 18px/1 var(--disp);color:var(--ink2)}
.nc-club u.new{font-size:11px;letter-spacing:.14em;color:var(--warn)}
.nc-club:hover{background:linear-gradient(180deg,#24252a,#131417)}
.nc-club.on{background:#e8e9eb;color:#0e0f11}
.nc-club.on i,.nc-club.on u{color:#4a4d53}
.nc-club.exp{box-shadow:inset 0 -2px 0 var(--warn),inset 0 1px 0 rgba(255,255,255,.06)}
.nc-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.08)}
.nc-pick{display:flex;align-items:center;gap:10px;margin-right:auto}
.nc-pick b{font:800 20px/1 var(--disp);text-transform:uppercase}
.nc-foot .btn{height:48px;min-width:150px}
.nc-you{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.nc-col{display:flex;flex-direction:column;gap:6px;padding:8px 0;background:linear-gradient(180deg,rgba(26,27,30,.9),rgba(12,13,15,.94))}
.nc-g{padding:10px 18px}
.nc-g em{display:block;margin-bottom:8px;font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.nc-g .chipline{padding:0}
.nc-d{display:block;margin-top:7px;font:400 12.5px/1.4 var(--body);color:var(--ink2)}
.nc-name input{width:320px;font-size:16px;padding:10px 12px}
.nc-list{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.nc-list .card{min-height:0}
.nc-exp{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;max-width:760px;padding:24px;background:linear-gradient(180deg,#1b1c20,#0d0e10)}
.nc-exp b{display:block;font:800 30px/1 var(--disp);text-transform:uppercase}
.nc-exp i{display:block;margin-top:6px;font:500 13px/1 var(--body);font-style:normal;color:var(--ink3)}
.nc-exp p{margin:14px 0 0;font:400 14px/1.55 var(--body);color:var(--ink2)}
.nc-busy{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.nc-busy b{font:800 34px/1 var(--disp);text-transform:uppercase}
.nc-busy i{max-width:460px;font:500 14px/1.45 var(--body);font-style:normal;color:var(--ink2)}
.nc-spin{width:120px;height:3px;margin-top:10px;background:linear-gradient(90deg,transparent,#e8e9eb,transparent) 0 0/60px 100% no-repeat,rgba(255,255,255,.08);animation:ncspin 1.1s linear infinite}
@keyframes ncspin{from{background-position:-60px 0,0 0}to{background-position:120px 0,0 0}}
@media (max-width:1100px){.cr-g,.nc-you,.nc-list{grid-template-columns:minmax(0,1fr)}}
.cr-wall{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));justify-items:center;gap:18px 10px;margin-top:auto;padding-top:26px;opacity:.28;filter:grayscale(1)}
.cr-new.locked .cr-wall{opacity:.18}
.cr-wall .crest{width:100%!important;height:auto!important;max-width:44px;aspect-ratio:1}
.nc-club b{padding-right:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── the front door, part two: online leagues, the Hub, the account ─────────
   The careers list shares its column with the two other ways into the game; the account menu is a
   quiet square with the manager's initial, at the end of every bar. */
.cr-side{display:flex;flex-direction:column;gap:12px;min-height:0}
.cr-side .cr-list{flex:0 1 auto;max-height:42%}
.cr-side > .cr-hero{flex:1 1 auto;min-height:230px}
.cr-side > .cr-list:only-of-type:first-child{flex:1;max-height:none}
/* the career you were last in, as a Continue with its club colour behind the crest */
.cr-hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:30px;padding:30px 32px;overflow:hidden;
  background:radial-gradient(90% 140% at 0% 50%,color-mix(in srgb,var(--c1) 26%,transparent),transparent 62%),linear-gradient(180deg,#1b1c20,#0d0e10);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.cr-hero-c{display:flex;filter:drop-shadow(0 16px 30px rgba(0,0,0,.5))}
.cr-hero-t b{display:block;margin-top:8px;font:800 56px/.9 var(--disp);text-transform:uppercase}
.cr-hero-t i{display:block;margin-top:12px;font:500 15px/1.35 var(--body);font-style:normal;color:var(--ink2)}
.cr-hero-t em{display:block;margin-top:8px;font:700 12px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.cr-hero-a{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cr-go-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;background:#e8e9eb;color:#0e0f11;font:800 17px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;transition:background .15s}
.cr-go-b:hover{background:#fff}
.cr-go-b u{text-decoration:none;font-size:20px;line-height:0}
.cr-sub{display:block;margin:6px 0 2px;font:700 11px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--ink3)}
.cr-list .cr-c{grid-template-columns:48px minmax(0,1fr) auto;padding:14px 18px}
.cr-list .cr-c .cr-t b{font-size:22px}
.cr-more{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;flex:none}
.cr-more-r{display:flex;flex-direction:column;gap:12px;min-width:0}.cr-more-r>.cr-hub{flex:1}
.cr-own b{font-size:22px}.cr-own{gap:8px;padding:16px 22px}
.cr-lg,.cr-hub{display:flex;flex-direction:column;gap:10px;padding:20px 22px;background:linear-gradient(180deg,#1b1c20,#0d0e10);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);text-align:left;color:var(--ink)}
.cr-lg .cr-new-k,.cr-hub .cr-new-k{color:var(--ink3)}
.cr-lg-h b,.cr-hub b{display:block;margin-top:7px;font:800 26px/1 var(--disp);text-transform:uppercase}
.cr-hub i,.cr-lg-p{margin:0;font:500 13px/1.45 var(--body);font-style:normal;color:var(--ink2)}
.cr-go{margin-top:auto;font:800 13px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.cr-hub:hover{background:linear-gradient(180deg,#24252a,#131417)}
.cr-lg-l{display:flex;flex-direction:column;gap:4px;max-height:132px;overflow-y:auto}
.cr-lg-r{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;background:rgba(255,255,255,.035)}
.cr-lg-r.on{box-shadow:inset 3px 0 0 #e8e9eb}
.cr-lg-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cr-lg-f .seg{margin:0}
.cr-lg-f .mini-s{flex:1;min-width:150px}
.cr-lg-f .mini-s input{width:100%;height:30px}
.cr-lg-n{font:500 11.5px/1.3 var(--body);color:var(--ink3)}
.ac-b{flex:none;display:grid;place-items:center;width:32px;height:32px;background:rgba(255,255,255,.08);font:800 14px/1 var(--disp);letter-spacing:0;color:var(--ink);transition:background .18s}
.ac-b:hover{background:rgba(255,255,255,.16)}
.cr-h .ac-b{width:38px;height:38px;font-size:16px}
.acct{position:fixed;z-index:40;top:64px;right:44px;width:300px;padding:6px;background:#141518;box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);animation:acIn .16s var(--ease)}
@keyframes acIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ac-h{display:flex;align-items:center;gap:12px;padding:12px 12px 14px}
.ac-av{display:grid;place-items:center;width:40px;height:40px;background:#e8e9eb;color:#0e0f11;font:800 18px/1 var(--disp)}
.ac-h b{display:block;font:800 19px/1 var(--disp);text-transform:uppercase}
.ac-h i{display:block;margin-top:5px;font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.ac-m{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:6px;padding:12px;background:rgba(255,255,255,.05);text-align:left}
.ac-m span{flex:1;min-width:0}
.ac-m b{display:block;font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--good)}
.ac-m i{display:block;margin-top:6px;font:500 12.5px/1.35 var(--body);font-style:normal;color:var(--ink2)}
.ac-m.up{background:#e8e9eb;color:#0e0f11}
.ac-m.up b{color:#0e0f11}.ac-m.up i{color:#4a4d53}
.ac-m.up u{text-decoration:none;font:800 20px/1 var(--disp)}
.ac-l{display:flex;flex-direction:column}
.ac-i{display:flex;align-items:center;gap:12px;padding:10px 12px;font:500 13.5px/1 var(--body);color:var(--ink2)}
.ac-i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--ink3)}
.ac-i:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.ac-i.out{margin-top:4px;border-top:1px solid rgba(255,255,255,.07);padding-top:13px}
.ac-i.out:hover{color:var(--bad)}

/* signing in: the mark, one line, the card — nothing else on the page */
.au{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding-bottom:4vh}
.au-brand{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.au-brand img{width:260px;height:auto}
.au-brand span{font:500 14px/1.4 var(--body);color:var(--ink2)}
.au-card{display:flex;flex-direction:column;gap:12px;width:380px;max-width:100%;padding:22px;background:linear-gradient(180deg,rgba(26,27,30,.94),rgba(12,13,15,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.au-seg{margin:0 0 4px;align-self:stretch;display:grid;grid-template-columns:1fr 1fr}
.au-seg button{padding:10px 0;text-align:center}
.au-f{display:flex;flex-direction:column;gap:6px}
.au-f em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.au-f input,.fb-c textarea{width:100%;padding:10px 11px;background:rgba(255,255,255,.06);border:0;border-bottom:1px solid var(--ink4);color:var(--ink);font:500 14px/1.3 var(--body);outline:none}
.au-f input:focus,.fb-c textarea:focus{border-bottom-color:#e8e9eb}
.au-req{display:grid;grid-template-columns:1fr;gap:4px;font:500 11.5px/1.3 var(--body);color:var(--ink3)}
.au-req span::before{content:"–";display:inline-block;width:14px}
.au-req span.ok{color:var(--good)}
.au-req span.ok::before{content:"✓"}
.au-err{min-height:16px;font:500 12.5px/1.35 var(--body);color:var(--bad)}
.au-go{width:100%;height:48px}
.au-link{align-self:center;padding:4px;font:500 12.5px/1 var(--body);color:var(--ink3)}
.au-link:hover{color:var(--ink)}
.au-h{font:800 26px/1 var(--disp);text-transform:uppercase}
.au-p{margin:0;font:400 13.5px/1.5 var(--body);color:var(--ink2)}
.au-foot{font:700 11px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}

/* the full game: what it adds on the left, the price on a light card on the right */
.bare{height:100%;display:flex;flex-direction:column;min-height:0;padding-top:12px}
.ul-g{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-content:start}
.ul-l{padding:8px 28px 0 0}
.ul-l h1{margin:6px 0 14px;font:800 56px/.94 var(--disp);text-transform:uppercase}
.ul-why{margin:0 0 26px;max-width:620px;font:400 15px/1.55 var(--body);color:var(--ink2)}
.ul-f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ul-f div{padding:16px 18px;background:linear-gradient(180deg,#1b1c20,#0d0e10);box-shadow:inset 3px 0 0 #e8e9eb,inset 0 1px 0 rgba(255,255,255,.05)}
.ul-f b{display:block;font:800 19px/1 var(--disp);text-transform:uppercase}
.ul-f i{display:block;margin-top:7px;font:400 13px/1.45 var(--body);font-style:normal;color:var(--ink2)}
.ul-r{display:flex;flex-direction:column;gap:10px;padding:30px;background:#e8e9eb;color:#0e0f11}
.ul-k{font:700 11px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:#4a4d53}
.ul-p{font:800 64px/.9 var(--disp)}
.ul-r > i{margin-top:-4px;font:500 14px/1.3 var(--body);font-style:normal;color:#4a4d53}
.ul-go{margin-top:14px;height:54px;background:#0e0f11;color:#f3f4f6;font-size:16px}
.ul-go.dim{background:rgba(0,0,0,.1);color:#0e0f11}
.ul-no{margin-top:14px;font:600 14px/1.4 var(--body)}
.ul-s{font:400 12.5px/1.45 var(--body);color:#4a4d53}
.ul-lk{display:flex;gap:16px;margin-top:auto;padding-top:18px;font:600 12px/1 var(--body)}
.ul-lk a{color:#4a4d53;text-decoration:none}
.ul-lk a:hover{color:#0e0f11;text-decoration:underline}

/* getting in touch */
.fb-c{display:flex;flex-direction:column;gap:14px;width:640px;max-width:100%;padding:26px;background:linear-gradient(180deg,rgba(26,27,30,.9),rgba(12,13,15,.94))}
.fb-c p{margin:0;font:400 14px/1.5 var(--body);color:var(--ink2)}
.fb-c .seg{margin:0}
.fb-c textarea{resize:vertical;min-height:150px;font-size:14.5px;line-height:1.5}
.fb-c .btn{align-self:flex-start;min-width:150px}
.fb-ok{font:800 28px/1.05 var(--disp);text-transform:uppercase}

/* taking charge, the last step: the rename desk offered under the summary */
.nc-r{display:flex;flex-direction:column;gap:12px;min-height:0}
.nc-r > .card{flex:1}
.nc-ren{display:flex;align-items:center;gap:18px;padding:18px 20px;background:linear-gradient(180deg,#1b1c20,#0d0e10);box-shadow:inset 3px 0 0 var(--ink4)}
.nc-ren span{flex:1;min-width:0}
.nc-ren em{display:block;font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.nc-ren b{display:block;margin-top:6px;font:800 21px/1 var(--disp);text-transform:uppercase}
.nc-ren i{display:block;margin-top:7px;font:400 12.5px/1.45 var(--body);font-style:normal;color:var(--ink2)}
.nc-ren .btn{flex:none}

/* the rename desk: the clubs by competition on the left, the chosen club on a team card on the right */
.rn .cr-h .mini-s{margin-left:auto}
.rn .cr-h .mini-s input{width:260px;height:36px;font-size:13.5px}
.rn-sub{margin:-6px 0 14px;font:400 13.5px/1.4 var(--body);color:var(--ink3)}
.rn-g{flex:1;min-height:0;display:grid;grid-template-columns:340px minmax(0,1fr);gap:12px}
.rn-l .seg{margin:12px 14px 8px}
.rn-found{padding:14px 16px 8px;font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.rn-c{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:12px;width:100%;padding:9px 14px;text-align:left}
.rn-c:hover{background:rgba(255,255,255,.04)}
.rn-c.on{background:#e8e9eb;color:#0e0f11}
.rn-c.on small{color:#4a4d53}
.rn-slot{display:block;flex:none;border:1px dashed var(--ink4);border-radius:50%}
.rn-e{box-shadow:inset 4px 0 0 var(--cc),inset 0 1px 0 rgba(255,255,255,.05)}
.rn-h{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:22px;row-gap:8px;align-items:end;padding:22px 24px 18px}
.rn-cr{grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:8px}
.rn-cr .rn-slot{border-width:2px}
.rn-up{font:700 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.rn-up:hover{color:var(--ink)}
.rn-n{display:flex;flex-direction:column;gap:6px}
.rn-n em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.rn-n input{width:100%;max-width:560px;padding:6px 0;background:none;border:0;border-bottom:2px solid var(--ink4);color:var(--ink);font:800 44px/1 var(--disp);text-transform:uppercase;outline:none}
.rn-n input:focus{border-bottom-color:#e8e9eb}
.rn-k{align-self:start;font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.rn-note{padding:0 24px 10px;font:500 12.5px/1.4 var(--body);color:var(--ink3)}
.rn-ps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px 24px 22px}
.rn-p{width:100%;padding:9px 10px;background:rgba(255,255,255,.045);border:0;border-bottom:1px solid transparent;color:var(--ink);font:500 13.5px/1.2 var(--body);outline:none}
.rn-p:hover{background:rgba(255,255,255,.07)}
.rn-p:focus{border-bottom-color:#e8e9eb;background:rgba(255,255,255,.08)}
.rn-p.ok,.rn-n input.ok{border-bottom-color:var(--good)}
.rn-p.bad,.rn-n input.bad{border-bottom-color:var(--bad)}
@media (max-width:1100px){.cr-more,.ul-g,.rn-g{grid-template-columns:minmax(0,1fr)}.rn-ps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── sound: a speaker in the bar, a small pop-over, the full panel in Settings ── */
.pg-col{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink4) transparent}
.pg-col > .card{flex:none}
.snd-b{flex:none;display:grid;place-items:center;width:32px;height:32px;color:var(--ink3);transition:color .18s}
.snd-b:hover{color:var(--ink)}
.snd-b svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sndp{width:320px;padding:8px 10px 10px}
.sn-h{padding:8px 4px 10px;font:800 19px/1 var(--disp);text-transform:uppercase}
.sn-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px;font:500 13px/1 var(--body);color:var(--ink2)}
.sn-r .seg{margin:0}
.sn-r.pad,.card .pad{padding-left:14px;padding-right:14px}
.sn-now{display:flex;align-items:center;gap:6px;margin:8px 0;padding:10px;background:rgba(255,255,255,.04)}
.card .sn-now{margin:8px 14px}
.sn-k{display:grid;place-items:center;flex:none;width:30px;height:30px;background:rgba(255,255,255,.07);font:700 14px/1 var(--body);color:var(--ink2)}
.sn-k:hover{color:var(--ink)}
.sn-k.pri{background:#e8e9eb;color:#0e0f11;font-size:11px}
.sn-t{min-width:0;flex:1;padding-left:6px}
.sn-t b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 13px/1.25 var(--body)}
.sn-cr{display:block;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 11px/1.3 var(--body);color:var(--ink3)}
.sn-cr a{color:var(--ink2)}
.sn-v{display:flex;align-items:center;gap:12px;padding:6px 4px}
.sn-v em{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.sn-v input{flex:1;accent-color:#e8e9eb}
.sn-g{padding:4px 14px 2px}
.sn-dim{font:400 12px/1.3 var(--body);color:var(--ink3)}
.sn-more{width:100%;margin-top:6px;padding:10px 4px 4px;border-top:1px solid rgba(255,255,255,.07);text-align:left;font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.sn-more:hover{color:var(--ink)}
.sn-list{display:flex;flex-direction:column;max-height:260px;overflow-y:auto;margin:0 14px;scrollbar-width:thin;scrollbar-color:var(--ink4) transparent}
.sn-trk{display:flex;align-items:center;gap:10px;padding:7px 8px;text-align:left}
.sn-trk span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 12.5px/1.25 var(--body);color:var(--ink2)}
.sn-trk small{margin-left:8px;color:var(--ink3);font-size:11px}
.sn-trk i{font:500 11px/1 var(--body);font-style:normal;color:var(--ink3);font-variant-numeric:tabular-nums}
.sn-trk:hover{background:rgba(255,255,255,.04)}
.sn-trk.on{box-shadow:inset 2px 0 0 #e8e9eb}
.sn-trk.on span{color:var(--ink)}

/* a new build is out: one quiet bar at the foot of the page, a reload the manager chooses */
.verbar{position:fixed;left:50%;bottom:22px;z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:12px 18px;background:#e8e9eb;color:#0e0f11;box-shadow:0 14px 40px rgba(0,0,0,.5);animation:acIn .2s var(--ease)}
.verbar b{font:800 14px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.verbar span{font:500 12.5px/1 var(--body);color:#4a4d53}

/* the state-league club's signings desk: your list beside the market, a swap picked on the page */
.sl-g{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:rgba(255,255,255,.05)}
.sl-col{display:flex;flex-direction:column;min-height:0;background:#111215}
.sl-col > .scroll{flex:1}
.sl-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px 6px}
.sl-h b{font:800 16px/1 var(--disp);text-transform:uppercase}
.sl-h span{font:500 11.5px/1.3 var(--body);color:var(--ink3);text-align:right}
.sl-q{padding:2px 14px 8px}
.sl-q .mini-s{display:flex}
.sl-q .mini-s input{width:100%}
.sl-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:4px 14px 10px;padding:14px 16px;background:rgba(255,255,255,.04);box-shadow:inset 3px 0 0 #e8e9eb}
.sl-in b{font:800 18px/1 var(--disp);text-transform:uppercase}
.sl-in i{flex-basis:100%;order:3;font:400 12.5px/1.45 var(--body);font-style:normal;color:var(--ink2)}
.sl-in .btn{margin-left:auto}

/* the finals zones on every ladder: 1-6 straight in, 7-10 the Wildcard Round, a line under each */
.rk.direct{color:var(--good)}
.rk.wild{color:var(--warn)}
.trow.on .rk.direct{color:#2c6f4f}
.trow.on .rk.wild{color:#86601c}
.trow.cut.direct{box-shadow:inset 0 -1px 0 rgba(127,199,166,.5)}
.trow.cut.wild{box-shadow:inset 0 -1px 0 rgba(232,191,122,.45)}
.mlr.cut.direct{box-shadow:0 1px 0 rgba(127,199,166,.4)}
.mlr.cut.wild{box-shadow:0 1px 0 rgba(232,191,122,.35)}

/* a club's room, and the search in the bar */
.cv-h{display:flex;align-items:center;gap:16px;padding:18px 18px 14px}
.cv-h .back{align-self:flex-start}
.cv-t b{display:block;font:800 34px/1 var(--disp);text-transform:uppercase}
.cv-t i{display:block;margin-top:7px;font:500 13px/1 var(--body);font-style:normal;color:var(--ink2)}
.cv .rk{font:inherit}
.gs{position:relative}
.gs input{width:230px;height:32px;padding:0 12px;background:rgba(255,255,255,.06);border:0;border-bottom:1px solid var(--ink4);color:var(--ink);font:500 13px/1 var(--body);outline:none;transition:width .2s var(--ease),background .2s}
.gs input:focus{width:300px;background:rgba(255,255,255,.09);border-bottom-color:#e8e9eb}
.gres{position:absolute;z-index:45;top:calc(100% + 8px);right:0;width:360px;max-height:70vh;overflow-y:auto;padding:6px;background:#141518;box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}
.gh{padding:10px 10px 6px;font:700 10.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.gh.none{text-transform:none;letter-spacing:0;font:500 13px/1.4 var(--body)}
.gi{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;text-align:left}
.gi:hover{background:rgba(255,255,255,.06)}
.gi .fc{width:30px;height:30px}
.gi .gi-t{flex:1;min-width:0}
.gi b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 14px/1.1 var(--disp);text-transform:uppercase}
.gi i{display:block;margin-top:3px;font:500 11.5px/1.2 var(--body);font-style:normal;color:var(--ink3)}
.gi u{text-decoration:none;font:800 16px/1 var(--disp);color:var(--ink2)}

/* a quiet value: the football department has nothing to say about him */
.t-s.dim{color:var(--ink4)}

/* the academy: the recruiters' read of a prospect's potential as a range, and the no-academy note */
.potc{display:flex;align-items:center;gap:10px}
.potr{position:relative;flex:1;height:5px;background:rgba(255,255,255,.08)}
.potr i{position:absolute;top:0;bottom:0;background:#e8e9eb}
.trow.on .potr{background:rgba(0,0,0,.12)}
.trow.on .potr i{background:#0e0f11}
.potc b{font:700 12px/1 var(--body);font-variant-numeric:tabular-nums}
.ac0{max-width:620px;margin:10px 14px 16px;padding:22px 24px;background:rgba(255,255,255,.035);box-shadow:inset 3px 0 0 var(--ink4)}
.ac0 b{display:block;font:800 22px/1 var(--disp);text-transform:uppercase}
.ac0 p{margin:10px 0 0;font:400 14px/1.55 var(--body);color:var(--ink2)}
.ac0 i{display:block;margin-top:10px;font:500 12.5px/1.45 var(--body);font-style:normal;color:var(--ink3)}
.ac-rng{margin-left:auto;align-self:center;font:500 12px/1 var(--body);color:var(--ink3)}

/* training: saved plans as chips, and one player's development beside the board */
.trp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 14px 8px}
.trp-c{display:inline-flex;background:rgba(255,255,255,.06)}
.trp-c > button:first-child{padding:7px 12px;text-align:left}
.trp-c b{display:block;font:700 12px/1.1 var(--disp);letter-spacing:.08em;text-transform:uppercase}
.trp-c i{display:block;margin-top:3px;font:500 11px/1 var(--body);font-style:normal;color:var(--ink3)}
.trp-c > button:first-child:hover{background:rgba(255,255,255,.06)}
.trp-x{padding:0 10px;color:var(--ink3);font:600 14px/1 var(--body)}
.trp-x:hover{color:var(--bad)}
.trp-x.on{font:700 11px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--bad)}
.trp-n{display:inline-flex;align-items:center;gap:6px}
.trp-n input{width:170px;height:30px;padding:0 9px;background:rgba(255,255,255,.06);border:0;border-bottom:1px solid var(--ink4);color:var(--ink);font:500 12.5px/1 var(--body);outline:none}
.chip2 u{text-decoration:none;opacity:.6;margin-left:4px}
.dv-h{display:flex;align-items:center;gap:14px;padding:6px 14px 4px}
.dv-h .fc{width:56px;height:62px}
.dv-h b{display:block;font:800 22px/1 var(--disp);text-transform:uppercase}
.dv-h i{display:block;margin-top:5px;font:500 12.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.dv-t{margin:8px 14px 4px;font:400 14px/1.5 var(--body);color:var(--ink2)}
.dv-m{max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink4) transparent}

/* Category B: the destinations, the budget, the scouts out */
.cbd{display:flex;align-items:center;gap:12px;margin:0 14px 6px;padding:12px 14px;background:rgba(255,255,255,.035)}
.cbd span{flex:1;min-width:0}
.cbd b{display:block;font:800 15px/1 var(--disp);text-transform:uppercase}
.cbd i{display:block;margin-top:5px;font:400 12px/1.4 var(--body);font-style:normal;color:var(--ink2)}
.cbm{height:4px;margin:12px 14px 0;background:rgba(255,255,255,.08)}
.cbm i{display:block;height:100%;background:#e8e9eb}

/* a segment row above a page of cards takes only its own height (it was stretching to half the page) */
.segrow{grid-column:1/-1}
.pg-b:has(> .segrow){grid-template-rows:auto minmax(0,1fr)}
.t-n small.dim{color:var(--ink4)}

/* the money: the reserve and its health, the four vitals, the books as bars */
.good{color:var(--good)}.bad{color:var(--bad)}
.fh{display:flex;align-items:center;gap:18px;padding:14px 14px 8px}
.fh-v{font:800 54px/.9 var(--disp)}
.fh-m b{display:block;font:800 18px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.fh-m i{display:block;margin-top:5px;font:600 12.5px/1 var(--body);font-style:normal;color:var(--ink2)}
.fh-m small{display:block;margin-top:6px;font:700 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.fsp{margin-left:auto;width:170px;height:40px}
.fsp line{stroke:rgba(255,255,255,.14);stroke-dasharray:3 4}
.fsp polyline{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.fhb{position:relative;display:flex;justify-content:space-between;height:26px;margin:4px 14px 10px;padding-top:12px;border-top:4px solid rgba(255,255,255,.07);font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.fhb i{position:absolute;top:-8px;width:3px;height:12px;background:currentColor;transform:translateX(-50%)}
.fhb i.good{color:var(--good)}.fhb i.warn{color:var(--warn)}.fhb i.bad{color:var(--bad)}
.fvs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 14px 12px}
.fv{padding:12px 14px;background:rgba(255,255,255,.035)}
.fv-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fv-l b{font:800 14px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.fv-l i{font:700 12px/1 var(--body);font-style:normal}
.fv-b{display:block;height:4px;margin:9px 0 7px;background:rgba(255,255,255,.08)}
.fv-b i{display:block;height:100%;background:currentColor}
.fv-b i.good{color:var(--good)}.fv-b i.warn{color:var(--warn)}.fv-b i.bad{color:var(--bad)}
.fv-d{font:400 12px/1.35 var(--body);color:var(--ink3)}
.fb{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:6px 14px 6px}
.fb-h{display:flex;justify-content:space-between;margin-bottom:8px;font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.fb-h b{font:800 15px/1 var(--disp);letter-spacing:0;color:var(--ink)}
.ff{display:grid;grid-template-columns:128px minmax(0,1fr) 64px;align-items:center;gap:10px;padding:4px 0;font:500 12.5px/1.2 var(--body);color:var(--ink2)}
.ff-t{height:6px;background:rgba(255,255,255,.05)}
.ff-t i{display:block;height:100%}
.ff.in .ff-t i{background:rgba(127,199,166,.7)}
.ff.out .ff-t i{background:rgba(235,143,138,.65)}
.ff b{font:700 12.5px/1 var(--body);text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.fn{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:8px 14px 14px;padding:12px 14px;background:rgba(255,255,255,.035)}
.fn span{font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.fn b{font:800 24px/1 var(--disp)}
.fn.good b{color:var(--good)}.fn.bad b{color:var(--bad)}
.fn i{flex-basis:100%;font:400 12.5px/1.4 var(--body);font-style:normal;color:var(--ink2)}

/* the department mix: one slider per pillar */
.mixe{margin:4px 14px 8px;padding:12px 14px;background:rgba(255,255,255,.035)}
.mix-r{display:grid;grid-template-columns:120px minmax(0,1fr) 34px;align-items:center;gap:12px;padding:5px 0;font:500 12.5px/1 var(--body);color:var(--ink2)}
.mix-r input{accent-color:#e8e9eb}
.mix-r b{text-align:right;font:700 13px/1 var(--body);color:var(--ink)}

/* ladder movement, and the newsroom flags */
.mv{font-size:11.5px;font-weight:700}
.mv.dim{color:var(--ink4)}
.brk{display:inline-block;margin-right:8px;padding:2px 6px 1px;background:var(--bad);color:#0e0f11;font:800 9.5px/1.2 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;vertical-align:2px}
.brk.rum{background:var(--warn)}
.mv.up{color:var(--good)}.mv.down{color:var(--bad)}
.trow.on .mv.up{color:#2c6f4f}.trow.on .mv.down{color:#9a3a35}
.ps.off{opacity:.5;cursor:default}

/* the negotiation on the dossier: the offer, the term, the load, his reply */
.ng{padding:4px 14px 6px}
.ng .fld{margin:0}
.ng-s{display:inline-flex;align-items:center;gap:4px}
.ng-s button{width:30px;height:30px;background:rgba(255,255,255,.07);font:700 15px/1 var(--body);color:var(--ink2)}
.ng-s input{width:96px;text-align:center}
.ng-r{display:flex;align-items:center;gap:10px;padding:4px 14px}
.ng-r em{flex:none;width:52px;font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ng-r .chipline{padding:0}
.ng-reply{display:flex;flex-direction:column;gap:8px;margin:6px 14px 4px;padding:12px 14px;background:rgba(232,191,122,.08);box-shadow:inset 3px 0 0 var(--warn)}
.ng-reply.wont{background:rgba(235,143,138,.08);box-shadow:inset 3px 0 0 var(--bad)}
.ng-reply b{font:800 15px/1 var(--disp);text-transform:uppercase}
.ng-reply i{font:400 13px/1.45 var(--body);font-style:normal;color:var(--ink2)}
.ng-reply .btn{align-self:flex-start}
.ng-y{margin:2px 0 2px 14px}
.ng-y input{width:110px}
.ssp-sal{min-width:70px;text-align:center;font:800 18px/1 var(--disp)}

/* ── scouting: the league database ──────────────────────────────────── */
.sc-tools{align-items:center;padding-bottom:8px}
.sc-tools:first-child{padding-top:12px}
.sc-sp{flex:1}
.sc-n{font:600 11px/1 var(--body);letter-spacing:.06em;color:var(--ink3)}
.chip2 svg{width:11px;height:11px;margin-right:6px;fill:currentColor}
.chsel{position:relative;display:inline-flex;align-items:center;height:24px;background:rgba(255,255,255,.06);color:var(--ink2)}
.chsel::after{content:"";position:absolute;right:9px;top:10px;border:4px solid transparent;border-top-color:currentColor;pointer-events:none}
.chsel select{height:24px;padding:0 26px 0 10px;background:none;border:0;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;
  font:700 11px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:inherit}
.chsel select option{background:#16171a;color:var(--ink);text-transform:none;letter-spacing:0;font:500 13px var(--body)}
.chsel.on{background:#e8e9eb;color:#0e0f11}
.chsel:focus-within{outline:1px solid var(--ink3);outline-offset:2px}
.trow.hd .hs{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;white-space:nowrap}
.trow.hd .hs.r{text-align:right}
.trow.hd .hs:hover,.trow.hd .hs.on{color:var(--ink)}
.trow.hd .hs i{font-style:normal;margin-left:4px;font-size:8px;vertical-align:1px}
.slst{display:grid;place-items:center;width:20px;height:20px;color:var(--ink4);cursor:pointer;transition:color .15s,transform .15s}
.slst svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3}
.slst:hover{color:var(--ink2);transform:scale(1.12)}
.slst.on{color:var(--warn)}
.slst.on svg{fill:currentColor}
.trow.on .slst{color:rgba(14,15,17,.3)}
.trow.on .slst.on{color:#9a6b12}
.sc-tg{display:inline-block;margin-left:8px;padding:2px 5px 1px;background:rgba(255,255,255,.08);font:700 9px/1 var(--body);font-style:normal;letter-spacing:.12em;color:var(--ink2);vertical-align:2px}
.sc-tg.bad{background:rgba(235,143,138,.14);color:var(--bad)}
.trow.on .sc-tg{background:rgba(0,0,0,.1);color:#0e0f11}
.sc-club{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.sc-club span{overflow:hidden;text-overflow:ellipsis}
.sc-club .crest,.sc-club img{flex:none;width:16px;height:16px}
.h2h-top{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0 14px 10px}
.h2h-p{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(255,255,255,.045);text-align:left;min-width:0}
.h2h-p:hover{background:rgba(255,255,255,.08)}
.h2h-p .fc{width:44px;height:48px}
.h2h-p span{display:flex;flex-direction:column;gap:4px;min-width:0}
.h2h-p b{font:700 15px/1.05 var(--disp);letter-spacing:.03em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-p i{font:500 11px/1.2 var(--body);font-style:normal;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2h-r{display:grid;grid-template-columns:minmax(0,1fr) 86px 86px;align-items:center;gap:10px;padding:6px 14px;border-top:1px solid rgba(255,255,255,.045);font-size:13px;color:var(--ink2)}
.h2h-r b{font:700 15px/1 var(--disp);letter-spacing:.03em;text-align:right;color:var(--ink3)}
.h2h-r b.win{color:var(--ink)}
.h2h-r b.win::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;background:var(--good);vertical-align:3px}
.h2h-r .frel{font-size:11px}
.h2h-g{padding:14px 14px 6px;font:700 10px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}

/* draft night: your selection, for a beat */
.drv{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(22,23,26,.84),rgba(3,4,5,.95));backdrop-filter:blur(3px);animation:drvin .26s var(--ease);cursor:pointer}
.drv.out{animation:drvout .32s ease forwards}
.drv-c{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;animation:drvpop .5s cubic-bezier(.2,.9,.25,1.2)}
.drv-club{display:flex;flex-direction:column;align-items:center;gap:10px;font:700 12.5px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
.drv-club .crest,.drv-club img{width:84px;height:84px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.6))}
.drv-n{font:800 clamp(40px,6vw,68px)/.95 var(--disp);letter-spacing:.02em;text-transform:uppercase;text-align:center;text-shadow:0 6px 28px rgba(0,0,0,.6)}
.drv-l{font:500 13px/1 var(--body);color:var(--ink3)}
.drv .cells{min-width:300px;margin-top:6px;background:rgba(255,255,255,.04)}
@keyframes drvin{from{opacity:0}}
@keyframes drvout{to{opacity:0}}
@keyframes drvpop{from{opacity:0;transform:translateY(14px) scale(.96)}}
.drv-face .fc{width:128px;height:142px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.drv-t{font:700 15px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.drv-w{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font:500 13px/1 var(--body);color:var(--ink2)}
.drv-w .crest,.drv-w img{width:30px;height:30px}

/* free agency: the offer table and rival bids */
.fo-h{display:flex;align-items:center;gap:14px;padding:0 14px 6px}
.fo-h .fc{width:64px;height:70px}
.fo-h span{display:flex;flex-direction:column;gap:5px;min-width:0}
.fo-h b{font:800 24px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.fo-h i{font:500 12px/1.2 var(--body);font-style:normal;color:var(--ink3)}
.fo-was{margin-left:auto;font:500 12px/1 var(--body);color:var(--ink3)}
.fo-rfa{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 14px 6px;padding:10px 12px;background:rgba(255,255,255,.045);border-left:2px solid var(--warn)}
.fo-rfa span:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.fo-rfa b{font:700 15px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.fo-rfa i{font:500 12px/1.2 var(--body);font-style:normal;color:var(--ink3)}
.fo-rfa .chipline{padding:0;flex:none}
.pl-top{display:flex;align-items:center;gap:12px;padding-right:14px}
.pl-top .mini-s{margin-left:auto}
.pl-top{margin-bottom:10px}
.pl-top .seg{margin-bottom:0}

/* ── the trophy room (League › Awards) ── gold is honours only */
:root{--gold:#d9b35b;--silver:#b9c0c9;--bronze:#c58b5b}
.tr-top{margin:-4px 0 8px}
.tr-top .seg{margin:0}
.tr-k{font:700 11px/1 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.tr-m{flex:none;width:22px;height:22px}
.tr-m circle{fill:var(--gold)}.tr-m .in{fill:rgba(0,0,0,.18)}.tr-m .rb{fill:#8a2f2f}
.tr-races{flex:1;min-height:0;display:grid;gap:10px}
.tr-race{display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,rgba(26,27,30,.9),rgba(12,13,15,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.tr-rh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 14px 10px}
.tr-rh b{font:800 17px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.tr-pod{display:flex;flex-direction:column;gap:2px;padding:0 10px 10px}
.tr-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.04);border-left:3px solid var(--c);text-align:left;color:var(--ink)}
.tr-p:hover{background:rgba(255,255,255,.08)}
.tr-p.gold{--c:var(--gold);background:linear-gradient(90deg,rgba(217,179,91,.16),rgba(255,255,255,.03))}.tr-p.silver{--c:var(--silver)}.tr-p.bronze{--c:var(--bronze)}
.tr-p .fc{width:34px;height:36px}
.tr-p.gold .fc{width:52px;height:56px}
.tr-pn{display:flex;flex-direction:column;gap:3px;min-width:0}
/* a long name (Nasiah Wanganeen-Milera) takes a second line in a vote count rather than an ellipsis — in
   the awards lists only, where the name column is a quarter of a narrow card, never in a real table */
.tr-rest .t-n{white-space:normal;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* a long name (Nasiah Wanganeen-Milera) takes a second line on the podium rather than an ellipsis */
.tr-pn b{font:700 15px/1.1 var(--disp);letter-spacing:.03em;text-transform:uppercase;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tr-p.gold .tr-pn b{font-size:19px}
.tr-pn i{font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.tr-pv{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tr-pv b{font:800 22px/1 var(--disp);color:var(--c)}
.tr-p.gold .tr-pv b{font-size:30px}
.tr-pv i{font:700 9px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.tr-rest{flex:1;min-height:0}
.tr-cab{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:10px}
.tr-gold{color:var(--gold)!important}

/* training: the program beside what moved */
.tn-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:10px}

/* contact: the form beside the latest update */
.fbk-g{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:12px;align-items:start}
.fbk-g .fb-c{width:auto}
.fbk-w{font:500 12px/1.4 var(--body)!important;color:var(--ink3)!important}

/* the dossier header wears the player's club: its first colour washed behind the photo, its second along the foot */
.who[style*="--c1"]{background:radial-gradient(130% 150% at 0% 50%,color-mix(in srgb,var(--c1) 62%,transparent),transparent 64%),linear-gradient(180deg,rgba(26,27,30,.92),rgba(12,13,15,.96));box-shadow:inset 0 -3px 0 var(--c2)}
.who[style*="--c1"] .fc{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 80%,#000),color-mix(in srgb,var(--c1) 35%,#000))}

/* line tags — the lines' own hues (not the good/warn/bad set) */
.ln{justify-self:start;display:inline-block;padding:3px 6px 2px;font:700 10.5px/1 var(--disp);letter-spacing:.12em;color:var(--lc);background:color-mix(in srgb,var(--lc) 14%,transparent);box-shadow:inset 2px 0 0 var(--lc)}
.ln-DEF{--lc:#76a6dc}.ln-MID{--lc:#5cc3b4}.ln-RUC{--lc:#b99be2}.ln-FWD{--lc:#e6a064}
.trow.on .ln{color:#0e0f11;background:color-mix(in srgb,var(--lc) 45%,#e8e9eb)}

.tr-live{background:rgba(217,179,91,.05)}
.tr-live .t-s em{font-style:normal;color:var(--ink3)}
.tr-cab.one{grid-template-columns:minmax(0,1fr);align-items:start}
/* a setting or a choice on one line — name, then the control (Settings, Training) */
.orow{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:12px;padding:9px 14px;border-top:1px solid rgba(255,255,255,.045)}
.orow > span{font:500 13.5px/1.2 var(--body);color:var(--ink2)}
.orow .chipline{padding:0}
/* contact: the latest update's headlines, one line each */
.fbk-news .kv{cursor:pointer;text-align:left;width:100%;align-items:center}
.fbk-news .kv:hover{background:rgba(255,255,255,.05)}
.fbk-news .kv b{font:600 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
/* settings: two cards, one control per row in a fixed right-hand column so every control lines up */
/* the single ROW is bounded (minmax(0,1fr)), so a column's max-height:100% has something definite to
   resolve against and each column scrolls INSIDE itself. Without the row the track was auto — sized to
   its content — max-height:100% meant nothing, and a tall career card pushed the whole page down
   (863px of settings in a 626px window). align-items:start is kept so a short column keeps its own
   height rather than stretching to a card of empty space. */
.set2{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:10px;align-items:start}
.set2 > .card,.set2 > .pg-col{max-height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink4) transparent}
.set2 .card-h + .card-h{padding-top:14px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:center;gap:18px;min-height:50px;padding:8px 16px;border-top:1px solid rgba(255,255,255,.045)}
.srow-l{min-width:0}
.srow-l b{display:block;font:500 14px/1.25 var(--body);color:var(--ink)}
.srow-l i{display:block;margin-top:3px;font:400 12px/1.35 var(--body);font-style:normal;color:var(--ink3)}
.srow > :last-child{justify-self:end}
.srow-v{font:600 13.5px/1 var(--body);color:var(--ink2)}
.sel{position:relative;display:block;width:210px}
.sel select{appearance:none;-webkit-appearance:none;width:100%;height:32px;padding:0 32px 0 12px;border:0;background:rgba(255,255,255,.07);color:var(--ink);font:500 13.5px/1 var(--body);cursor:pointer}
.sel select:hover{background:rgba(255,255,255,.1)}
.sel select:focus-visible{outline:1px solid var(--ink3)}
.sel select option{background:#16171b;color:#e8e9eb}
.sel::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--ink2);border-bottom:1.5px solid var(--ink2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sw{position:relative;width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,.14);cursor:pointer;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#aeb2b9;transition:transform .15s,background .15s}
.sw.on{background:#e8e9eb}
.sw.on::after{transform:translateX(18px);background:#0e0f11}
.sw:focus-visible{outline:1px solid var(--ink3);outline-offset:2px}
.srange{width:210px;accent-color:#e8e9eb}
.set2 .sn-now{margin:10px 0 6px}
.c-dim{color:var(--ink3)!important;font:500 12.5px/1.2 var(--body)!important}
/* an action still running: one press at a time (dev.js BUSY) */
.busy{opacity:.55;pointer-events:none;cursor:progress}
/* a sub-line under a row name: ellipsis, never a silent mid-word clip; .wrap where the whole line matters */
.t-n small{overflow:hidden;text-overflow:ellipsis}
.t-n small.wrap{white-space:normal;line-height:1.3}
.nc-club.locked img.crest{filter:grayscale(.55) brightness(.85)}
.nc-club.locked u.new{color:var(--warn)}
/* ── the full game: a pop-up over wherever you are (dev_account D.unlock) ──
   THE VALUE LEADS (Lucas, 2026-09-19, of a big black headline panel beside a small list: "quite confronting and
   distracting from the value of the full game"). One lifted panel, not a black slab: a short headline, then the six
   things you get as tiles — each a title and one line — with the door you came through lit, then the price and one
   amber button. No footage, no art. */
.uk-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:28px;
  background:rgba(4,5,7,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:ukFade .22s ease-out both}
.uk-scrim.out{animation:ukFadeOut .18s ease-in both}
.uk{position:relative;display:flex;flex-direction:column;width:min(900px,100%);max-height:calc(100vh - 56px);overflow:auto;
  background:linear-gradient(180deg,#1a1b20,#131418);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 50px 140px -40px rgba(0,0,0,.9);animation:ukRise .4s cubic-bezier(.2,.8,.2,1) both}
.uk::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#ffc95a,#f0a92a)}
.uk-x{position:absolute;top:14px;right:16px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;color:rgba(236,238,241,.5);transition:color .15s}
.uk-x:hover{color:#fff}
.uk-hero{padding:34px 40px 0}
.uk-k{display:block;font:700 11px/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:#f5b83a;animation:ukUp .45s .05s cubic-bezier(.2,.8,.2,1) both}
.uk-hero h2{margin:12px 0 0;font:800 46px/.92 var(--disp);letter-spacing:.005em;text-transform:uppercase;color:#f5f6f7;animation:ukUp .5s .1s cubic-bezier(.2,.8,.2,1) both}
.uk-hero p{margin:10px 0 0;max-width:52ch;font:500 16px/1.45 var(--body);color:rgba(236,238,241,.78);animation:ukUp .5s .16s cubic-bezier(.2,.8,.2,1) both}
.uk-feats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:26px 0 0;padding:0 40px}
.uk-feats li{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 18px 17px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  opacity:0;animation:ukUp .45s var(--d) cubic-bezier(.2,.8,.2,1) both}
.uk-feats li.on{background:linear-gradient(180deg,rgba(245,184,58,.14),rgba(245,184,58,.04));border-color:rgba(245,184,58,.55)}
.uk-feats b{display:flex;align-items:center;gap:10px;font:800 18px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#f5f6f7}
.uk-feats span{font:500 13.5px/1.4 var(--body);color:rgba(236,238,241,.7)}
.uk-i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px}
.uk-i svg{width:22px;height:22px;fill:none;stroke:#f5b83a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.uk-i img.crest,.uk-i .crest{width:24px!important;height:24px!important}
.uk-ok{margin-left:auto;font-style:normal;color:var(--good,#7fc7a6)}
.uk-foot{display:flex;align-items:center;gap:22px;margin-top:24px;padding:22px 40px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18)}
.uk-price{display:flex;align-items:flex-end;gap:12px;animation:ukUp .5s .55s cubic-bezier(.2,.8,.2,1) both}
.uk-price b{font:800 44px/.85 var(--disp);letter-spacing:.005em;color:#fff}
.uk-price span{display:flex;flex-direction:column;gap:5px;padding-bottom:2px;font:600 13px/1 var(--body);color:var(--ink2)}
.uk-price i{font-style:normal;font-weight:500;color:var(--ink3)}
.uk-cta{display:flex;align-items:center;gap:6px;margin-left:auto;animation:ukUp .5s .62s cubic-bezier(.2,.8,.2,1) both}
.uk-go{position:relative;overflow:hidden;height:54px;padding:0 30px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#ffc95a,#f0a92a);color:#141004;font:800 16px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;text-align:center;
  box-shadow:0 14px 36px -12px rgba(245,184,58,.7),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .15s,box-shadow .15s}
.uk-go:hover{transform:translateY(-1px);box-shadow:0 20px 44px -12px rgba(245,184,58,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.uk-go u{text-decoration:none;font-size:20px;line-height:0}
.uk-go::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:ukSheen 1.1s 1.1s ease-out both}
.uk-go:disabled{filter:saturate(.6);opacity:.8}
.uk-later{padding:0 14px;height:54px;display:inline-flex;align-items:center;font:600 13px/1 var(--body);color:var(--ink3)}
.uk-later:hover{color:var(--ink)}
.uk-no{font:600 14px/1 var(--body);color:var(--ink2)}
.uk-wait{display:flex;align-items:center;gap:12px;font:500 14px/1.3 var(--body);color:var(--ink2)}
.uk-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(245,184,58,.25);border-top-color:#f5b83a;animation:ukSpin .8s linear infinite}
.uk-s{padding:0 40px 18px;font:400 11.5px/1.4 var(--body);color:var(--ink3);background:rgba(0,0,0,.18)}
.uk-s a{color:var(--ink2)}
.uk-scrim.again,.uk-scrim.again .uk,.uk-scrim.again *{animation:none!important;opacity:1}
@keyframes ukFade{from{opacity:0}to{opacity:1}}
@keyframes ukFadeOut{from{opacity:1}to{opacity:0}}
@keyframes ukRise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
@keyframes ukUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ukSheen{from{left:-40%}to{left:130%}}
@keyframes ukSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.uk-scrim,.uk-scrim *{animation:none!important;opacity:1}}

/* ── THE MAIN MENU (dev_careers renderCareers) ──
   A title menu: the ways into the game down the left in big condensed caps, the one you point at lit with a light
   bar; its panel on the right, drawn from the game's own pieces (the crest, the club colour, the season, the crests
   of every club). No art. */
.mm{display:grid;grid-template-columns:400px minmax(0,1fr);height:100%;min-height:0}
.mm-l{display:flex;flex-direction:column;min-height:0;padding:26px 26px 24px 0}
.mm-logo{width:210px;height:auto;margin:0 0 30px 22px;animation:ukUp .5s cubic-bezier(.2,.8,.2,1) both}
.mm-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.mm-i{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:13px 18px 12px 22px;text-align:left;transition:background .2s;
  animation:ukUp .45s var(--d,0ms) cubic-bezier(.2,.8,.2,1) both}
.mm-i b{font:800 30px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);transition:color .2s}
.mm-i i{font:500 13px/1 var(--body);font-style:normal;color:rgba(243,244,246,.3);transition:color .2s}
.mm-i:hover b{color:var(--ink2)}
.mm-i.on{background:linear-gradient(90deg,rgba(255,255,255,.075),rgba(255,255,255,0) 85%)}
.mm-i.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;background:#e8e9eb}
.mm-i.on b{color:#fff}
.mm-i.on i{color:var(--ink2)}
.mm-i:focus-visible{outline:1px solid var(--ink3);outline-offset:-1px}
.mm-r{position:relative;min-height:0;overflow-y:auto;padding:26px 0 24px 44px;border-left:1px solid var(--ink5)}
.mm-acct{position:absolute;top:26px;right:0;z-index:2}
#mmr{height:100%}
.mm-p{display:flex;flex-direction:column;min-height:100%;padding:70px 60px 10px 0;animation:mmIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes mmIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.mm-k{font:700 12px/1 var(--disp);letter-spacing:.28em;text-transform:uppercase;color:var(--ink3)}
.mm-h{margin:12px 0 0;font:800 64px/.9 var(--disp);letter-spacing:.005em;text-transform:uppercase;color:#f5f6f7}
.mm-h.big{font-size:92px}
.mm-line{margin:16px 0 0;max-width:58ch;font:500 16.5px/1.55 var(--body);color:var(--ink2)}
.mm-line.dim{font-size:14px;color:var(--ink3)}
.mm-row{display:flex;align-items:center;gap:22px;margin-top:34px}
.mm-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;padding:0 34px;background:#e8e9eb;color:#0e0f11;
  font:800 18px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;text-align:center;transition:background .15s,transform .15s}
.mm-go:hover{background:#fff;transform:translateY(-1px)}
.mm-go u{text-decoration:none;font-size:22px;line-height:0}
.mm-go.amber{background:linear-gradient(180deg,#ffc95a,#f0a92a);color:#141004;box-shadow:0 14px 36px -12px rgba(245,184,58,.7)}
.mm-by{font:500 14px/1.3 var(--body);color:var(--ink3)}
/* continue: the club you were last in, its colour behind its crest */
.mm-cont{flex-direction:row;align-items:center;gap:56px;position:relative}
.mm-cont::before{content:"";position:absolute;left:-44px;top:0;bottom:0;width:70%;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 55% at 22% 50%,color-mix(in srgb,var(--c1) 34%,transparent),transparent 72%)}
.mm-cont-c{flex:none;display:flex;filter:drop-shadow(0 24px 44px rgba(0,0,0,.55));animation:mmCrest .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes mmCrest{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.mm-cont-t{min-width:0}
.mm-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border-top:1px solid var(--ink5);border-bottom:1px solid var(--ink5)}
.mm-facts span{display:flex;flex-direction:column;gap:7px;padding:14px 30px 13px 0;margin-right:30px}
.mm-facts i{font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.mm-facts b{font:800 26px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.mm-next{display:flex;align-items:baseline;gap:12px;margin:18px 0 0;font:600 16px/1.3 var(--body);color:var(--ink)}
.mm-next i{font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
/* new career: every club, in its own crest */
.mm-wall{display:grid;grid-template-columns:repeat(10,64px);gap:18px 22px;margin-top:34px}
.mm-wall span{display:flex;opacity:0;animation:ukUp .4s var(--d,0ms) cubic-bezier(.2,.8,.2,1) both}
/* load: the careers */
.mm-list{display:flex;flex-direction:column;gap:6px;margin-top:26px;max-width:980px}
.mm-lr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:18px;padding:14px 18px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mm-lr.on{box-shadow:inset 3px 0 0 #e8e9eb,inset 0 1px 0 rgba(255,255,255,.05)}
.mm-lt b{display:block;font:800 24px/1 var(--disp);text-transform:uppercase}
.mm-lt i{display:block;margin-top:6px;font:500 13px/1.3 var(--body);font-style:normal;color:var(--ink2)}
.mm-lt em{display:block;margin-top:5px;font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
/* online: the leagues card, given room */
.mm-p .cr-lg{margin-top:26px;max-width:760px;padding:22px 24px}
.mm-p .cr-lg-l{max-height:260px}
/* the points a panel makes, as chips */
.mm-pts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;max-width:760px}
.mm-pts li{padding:10px 16px 9px 14px;border-left:3px solid #e8e9eb;background:rgba(255,255,255,.04);font:700 14px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#e3e5e8}
/* analytics: the owner's numbers */
.mm-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:10px;margin-top:30px}
.mm-kpi span{display:flex;flex-direction:column;gap:9px;padding:18px 20px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mm-kpi b{font:800 40px/1 var(--disp);letter-spacing:.01em}
.mm-kpi i{font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.mm-kpi .mm-wait{grid-column:1/-1;background:none;box-shadow:none;padding:0;color:var(--ink3);font:500 14px var(--body)}
@media (prefers-reduced-motion:reduce){.mm *{animation:none!important}}

/* ── the match layer (dev_live.js): the match screen over the new UI, the page never changes ── */
html.mxl-on body{overflow:hidden}
.mxl{position:fixed;inset:0;z-index:200;background:#050607;animation:ukFade .22s ease-out both}
.mxl.out{animation:ukFadeOut .24s ease-in both}
.mxl::before,.mxl::after{content:"";position:absolute;width:1100px;height:1100px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,currentColor,transparent)}
.mxl::before{color:#2f63d6;opacity:.16;left:-420px;top:-520px}
.mxl::after{color:#d49a22;opacity:.1;right:-480px;bottom:-560px}
.mxl-f{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;opacity:0;transition:opacity .4s ease;background:#050607}
.mxl.ready .mxl-f{opacity:1}
.mxl-load{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .3s}
.mxl.ready .mxl-load{opacity:0;pointer-events:none}
.mxl-k{font:700 12px/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--ink3)}
.mxl-load b{font:800 56px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:#f5f6f7;text-align:center}
.mxl-bar{width:220px;height:3px;margin-top:10px;background:rgba(255,255,255,.12);overflow:hidden}
.mxl-bar i{display:block;width:35%;height:100%;background:#e8e9eb;animation:mxlRun 1.15s ease-in-out infinite}
@keyframes mxlRun{from{transform:translateX(-110%)}to{transform:translateX(310%)}}
.mxl-x{margin-top:22px;height:46px;padding:0 24px;display:inline-flex;align-items:center;border:1px solid var(--ink4);font:700 14px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.mxl-x:hover{color:var(--ink);border-color:var(--ink3)}

/* ── online leagues (dev_online.js): the League room and trades between managers ── */
.pg-b > .col{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;overflow-y:auto}
.ol-live{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:18px 18px;background:linear-gradient(90deg,rgba(245,184,58,.14),rgba(245,184,58,0) 80%);box-shadow:inset 3px 0 0 #f5b83a}
.ol-live b{display:block;font:800 24px/1 var(--disp);text-transform:uppercase}
.ol-live i{display:block;margin-top:6px;font:500 13px/1.35 var(--body);font-style:normal;color:var(--ink2)}
.ol-dot{width:12px;height:12px;border-radius:50%;background:#f5b83a;box-shadow:0 0 0 4px rgba(245,184,58,.2);animation:olPulse 1.4s ease-in-out infinite}
@keyframes olPulse{50%{box-shadow:0 0 0 9px rgba(245,184,58,0)}}
.ol-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;background:#e8e9eb;color:#0e0f11;font:800 15px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;text-align:center;transition:background .15s}
.ol-go:hover{background:#fff}
.ol-go u{text-decoration:none;font-size:18px;line-height:0}
.ol-mrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 18px}
.ol-m b{display:block;font:800 22px/1.05 var(--disp);text-transform:uppercase;text-align:center}
.ol-m i{display:block;margin-top:6px;font:500 12.5px/1 var(--body);font-style:normal;color:var(--ink3);text-align:center}
.ol-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 18px 16px}
.ol-round{display:flex;flex-direction:column;gap:14px;padding-top:14px}
.ol-state{margin:0 18px;padding:14px 16px;background:rgba(255,255,255,.035);box-shadow:inset 3px 0 0 var(--ink3)}
.ol-state.in{box-shadow:inset 3px 0 0 var(--good)}
.ol-state.out{box-shadow:inset 3px 0 0 #f5b83a}
.ol-state b{display:block;font:800 22px/1 var(--disp);text-transform:uppercase}
.ol-state i{display:block;margin-top:6px;font:500 13px/1.35 var(--body);font-style:normal;color:var(--ink2)}
.ol-mgrs{display:flex;flex-direction:column;padding:6px 0 10px}
.ol-mg{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 18px}
.ol-mg.you{background:rgba(255,255,255,.04)}
.ol-mg em{font-style:normal;font:700 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-left:6px}
.ol-on{width:8px;height:8px;border-radius:50%;background:var(--ink4)}
.ol-on.on{background:var(--good);box-shadow:0 0 8px var(--good)}
.ol-adv{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 16px;padding:16px 18px}
.ol-adv .btn{grid-column:1/-1;justify-self:start}
.ol-count b{display:block;font:800 36px/1 var(--disp)}
.ol-count i{display:block;margin-top:4px;font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.ol-wait{font:500 13.5px/1.4 var(--body);color:var(--ink2)}
.ol-comm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--ink5)}
.ol-comm .mm-k{width:100%;margin-bottom:4px}
.ol-comm .mini-s input{width:70px;height:32px}
.ol-draft{display:flex;flex-direction:column;gap:12px;padding:14px 18px 16px}
.ol-draft b{display:block;font:800 20px/1 var(--disp);text-transform:uppercase}
.ol-draft i{display:block;margin-top:6px;font:500 13px/1.35 var(--body);font-style:normal;color:var(--ink2)}
.ol-draft .ol-acts{padding:0}
.ol-code{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px 16px}
.ol-code b{font:800 34px/1 var(--disp);letter-spacing:.2em}
.ol-code i{width:100%;font:500 12.5px/1.35 var(--body);font-style:normal;color:var(--ink3)}
.ol-feed{display:flex;flex-direction:column;padding:6px 0 10px;max-height:280px;overflow-y:auto}
.ol-fe{display:flex;justify-content:space-between;gap:12px;padding:7px 18px;font:500 13px/1.35 var(--body);color:var(--ink2)}
.ol-fe i{font-style:normal;color:var(--ink3);font-size:11.5px}
.ol-leave{display:flex;align-items:center;gap:8px;padding:6px 2px}
.ol-claim{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:14px 18px 18px}
.ol-club{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 14px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:background .15s}
.ol-club:hover{background:rgba(255,255,255,.08)}
.ol-club b{font:800 17px/1 var(--disp);text-transform:uppercase;text-align:center}
.ol-club i{font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.ol-tp{padding:12px 18px 0}
.ol-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 18px}
.ol-two .mm-k{display:block;margin-bottom:8px}
.ol-pl{display:flex;flex-direction:column;gap:3px;max-height:420px;overflow-y:auto}
.ol-p{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.03);text-align:left}
.ol-p b{font:800 18px/1 var(--disp)}
.ol-p.on{background:rgba(245,184,58,.14);box-shadow:inset 3px 0 0 #f5b83a}
.ol-note{flex:1}
.ol-note input{width:100%;height:36px}
.ol-offer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--ink5)}
.ol-msg{font-style:italic}
.pg-b > .ol-runs{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.pg-b > .ol-runs span{flex:1}

/* ══ THE CONTROLS, IN THE GAME'S OWN DRESS (2026-09-19) ══
   Lucas: "the sub tab navs are so boring, filtration… when you drop down it feels like a web app… the game starts to
   look a little dead". One control language, everywhere: condensed caps; a lit bar under the room you are in; slanted
   white tabs for segments (as the areas on the bar); line filters in their line's colour; the game's own drop-down;
   rows and buttons that answer the pointer; a room that arrives rather than appears. */

/* the rooms of an area: a strip on a track, the one you are in lit */
.sub{gap:2px;padding:10px var(--pad-x) 0;align-items:flex-end}
.sub::after{content:"";position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:0;height:1px;background:rgba(255,255,255,.07);pointer-events:none}
.sub button{padding:10px 16px 12px;font:700 14px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);transition:color .18s,background .18s}
.sub button:hover{color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.045))}
.sub button.on{color:#fff}
.sub button.on::after{left:12px;right:12px;bottom:0;height:3px;background:#e8e9eb;box-shadow:0 0 16px rgba(232,233,235,.45);animation:subIn .32s cubic-bezier(.2,.9,.2,1) both}
@keyframes subIn{from{opacity:0;transform:scaleX(.25)}to{opacity:1;transform:none}}
.sub .back{margin-right:10px;padding:10px 14px 12px 0;font:600 13px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--ink3)}
.sub .here{padding:10px 0 12px;font:700 14px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.sub .n{margin-left:7px;padding:2px 6px 1px;background:#f5b83a;color:#141004;font:800 11px/1.2 var(--disp);letter-spacing:.04em}

/* the areas on the bar answer the pointer */
.hub{transition:color .2s,background .2s}
.hub:not(.on):hover{background:rgba(255,255,255,.06);color:var(--ink)}

/* segments: slanted white tab for the one on show, the rest on a track */
.seg{gap:0;padding:0;background:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.seg button{padding:10px 16px 10px;font:700 12px/1 var(--disp);letter-spacing:.16em;color:var(--ink3);transition:color .15s,background .15s}
.seg button:hover:not(.on){color:#fff;background:rgba(255,255,255,.05)}
.seg button.on{background:#e8e9eb;color:#0e0f11;padding-right:22px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}

/* chips: outlined, lit when on; the line filters wear their line's colour */
.chip2{height:28px;padding:0 12px;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:700 12px/1 var(--disp);letter-spacing:.14em;color:var(--ink2);
  transition:background .15s,color .15s,box-shadow .15s,transform .1s}
.chip2:hover:not(.on){box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff}
.chip2:active{transform:scale(.96)}
.chip2.on{background:#e8e9eb;color:#0e0f11;box-shadow:0 6px 18px -8px rgba(232,233,235,.6)}
.chip2[data-act$="|DEF"]{--lc:#76a6dc}.chip2[data-act$="|MID"]{--lc:#5cc3b4}.chip2[data-act$="|RUC"]{--lc:#b99be2}.chip2[data-act$="|FWD"]{--lc:#e6a064}
.chip2[data-act$="|DEF"]:not(.on),.chip2[data-act$="|MID"]:not(.on),.chip2[data-act$="|RUC"]:not(.on),.chip2[data-act$="|FWD"]:not(.on){color:var(--lc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lc) 40%,transparent)}
.chip2.on[data-act$="|DEF"],.chip2.on[data-act$="|MID"],.chip2.on[data-act$="|RUC"],.chip2.on[data-act$="|FWD"]{background:var(--lc);color:#0e0f11;box-shadow:0 6px 18px -8px var(--lc)}
.chip-sep{width:1px;height:20px;margin:0 6px;background:rgba(255,255,255,.12);align-self:center}

/* the drop-down (dev.js dd) */
.dd{position:relative;display:inline-flex;vertical-align:middle}
.dd-b{display:inline-flex;align-items:center;gap:10px;height:28px;padding:0 10px 0 13px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:700 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:background .15s,box-shadow .15s}
.dd-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .2s}
.dd-b:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.dd.open .dd-b{box-shadow:inset 0 0 0 1px #e8e9eb;background:rgba(255,255,255,.1)}
.dd.open .dd-b svg{transform:rotate(180deg)}
.dd-chip.on .dd-b{background:#e8e9eb;color:#0e0f11;box-shadow:0 6px 18px -8px rgba(232,233,235,.6)}
.dd-sel{min-width:230px}
.dd-sel .dd-b{width:100%;justify-content:space-between;height:36px;padding:0 12px 0 14px;font:600 14px/1 var(--body);letter-spacing:0;text-transform:none}
.dd-m{position:absolute;z-index:80;top:calc(100% + 6px);left:0;min-width:100%;max-height:320px;overflow-y:auto;padding:6px;
  background:linear-gradient(180deg,#1e1f24,#141519);box-shadow:0 26px 60px -14px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12);transform-origin:top;animation:ddIn .16s cubic-bezier(.2,.9,.2,1) both}
.dd.up .dd-m{top:auto;bottom:calc(100% + 6px);transform-origin:bottom}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px) scaleY(.95)}to{opacity:1;transform:none}}
.dd-o{position:relative;display:flex;align-items:center;width:100%;min-height:34px;padding:0 34px 0 14px;white-space:nowrap;font:700 13px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-align:left;transition:background .12s,color .12s,box-shadow .12s}
.dd-sel .dd-o{font:500 14px/1.2 var(--body);letter-spacing:0;text-transform:none}
.dd-o:hover,.dd-o:focus{background:rgba(255,255,255,.07);color:#fff;outline:none;box-shadow:inset 3px 0 0 #e8e9eb}
.dd-o.on{color:#fff}
.dd-o.on::after{content:"";position:absolute;right:13px;top:50%;width:9px;height:5px;margin-top:-4px;border-left:2px solid #f5b83a;border-bottom:2px solid #f5b83a;transform:rotate(-45deg)}

/* search fields in a card */
.mini-s input{height:30px;padding:0 12px;background:rgba(255,255,255,.05);border:0;border-bottom:1px solid rgba(255,255,255,.14);font:500 13px/1 var(--body);transition:background .15s,border-color .15s}
.mini-s input:focus{background:rgba(255,255,255,.08);border-bottom-color:#e8e9eb}

/* rows and buttons answer the pointer */
.trow{transition:background .12s,box-shadow .12s}
.trow:hover:not(.hd):not(.on){background:rgba(255,255,255,.05);box-shadow:inset 3px 0 0 rgba(232,233,235,.55)}
.btn{transition:transform .12s,background .15s,box-shadow .15s,color .15s}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:not(.dim):hover:not(:disabled){background:#fff;box-shadow:0 10px 24px -14px rgba(255,255,255,.55)}
.btn.dim:hover:not(:disabled){background:rgba(255,255,255,.13);color:#fff}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:default}

/* Continue, when something is due, breathes */
.cont{transition:background .15s,box-shadow .2s}
.cont:hover{background:#fff}
.cont.due{animation:contDue 2.4s ease-in-out infinite}
.cont.due:hover{background:#f7d18b}
@keyframes contDue{0%,100%{box-shadow:0 0 0 0 rgba(232,191,122,0)}50%{box-shadow:0 0 0 6px rgba(232,191,122,.2)}}

/* a room arrives: the page rises, its cards follow (only on arriving — a redraw on a filter does not replay it) */
#main.enter .pg-h{animation:roomIn .34s cubic-bezier(.2,.8,.2,1) both}
#main.enter .pg-b > *{animation:roomIn .42s cubic-bezier(.2,.8,.2,1) both}
#main.enter .pg-b > :nth-child(2){animation-delay:.05s}
#main.enter .pg-b > :nth-child(3){animation-delay:.1s}
#main.enter .pg-b > :nth-child(4){animation-delay:.15s}
#main.enter .pg-b > .col > *{animation:roomIn .42s cubic-bezier(.2,.8,.2,1) both}
#main.enter .pg-b > .col > :nth-child(2){animation-delay:.06s}
#main.enter .pg-b > .col > :nth-child(3){animation-delay:.12s}
@keyframes roomIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the two room lights drift */
.light{animation:lightDrift 32s ease-in-out infinite alternate}
.light.b{animation-duration:38s;animation-direction:alternate-reverse}
@keyframes lightDrift{from{transform:translate(0,0)}to{transform:translate(90px,60px)}}

/* scrollbars in the dark */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
::-webkit-scrollbar-track{background:transparent}
::selection{background:rgba(245,184,58,.35);color:#fff}

@media (prefers-reduced-motion:reduce){#main.enter *,.light,.cont.due,.sub button.on::after{animation:none!important}}

/* ══ COLOUR, SUBTLETY, TACTILITY — THE WHOLE GAME (2026-09-20) ══
   Lucas: "its all just pure black and white… the whole atmosphere of the game is such a bore… just need more colour,
   cooler subtlety, more tactility… this isnt exclusive to the main menu, sort of across the board". No photos, no AI
   pictures, no footage: the colour is your club's — its two colours and its guernsey (dev.js kitBg, --club, --kit) —
   and the surfaces are things: lit from above, shadowed below, answering the pointer. */

/* your club, along the top of every room: the guernsey as a band, the lights in its colours, a little stronger */
.top::before{content:"";position:fixed;left:0;right:0;top:0;height:4px;z-index:5;background:var(--kit,linear-gradient(90deg,#2f63d6,#d49a22));opacity:.95;pointer-events:none}
.light{opacity:.22}
.light.b{opacity:.14}
.app::after{content:"";position:fixed;inset:0 0 auto 0;height:340px;z-index:0;pointer-events:none;
  background:radial-gradient(70% 100% at 50% -30%,color-mix(in srgb,var(--club,#2f63d6) 16%,transparent),transparent 72%)}

/* the club's tone where a room names itself and where a card does */
.pg-h .tab.lt{background:var(--club,#e8e9eb);color:#0b0c0e}
.pg-h .tab.lt::before{background:#0b0c0e}
.card-h .tab::before{background:var(--club,#e8e9eb);box-shadow:0 0 10px color-mix(in srgb,var(--club,#e8e9eb) 60%,transparent)}
.sub button.on::after{background:var(--club,#e8e9eb);box-shadow:0 0 16px color-mix(in srgb,var(--club,#e8e9eb) 70%,transparent)}
.hub.on{box-shadow:inset 0 -3px 0 var(--club,#e8e9eb)}

/* cards: lit from above, a shadow below, a hairline of the club along the top edge */
.card{position:relative;background:linear-gradient(180deg,rgba(30,31,36,.94),rgba(14,15,18,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 22px 46px -32px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.035)}
.card::before{content:"";position:absolute;left:0;top:0;width:64px;height:2px;background:var(--club,#e8e9eb);opacity:.85;pointer-events:none}
/* a stat cell reads as a small plate */
.cell{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0))}
.cell.hi{box-shadow:inset 0 -3px 0 var(--club,#0e0f11)}

/* rows: the one you point at, lit in the club's tone */
.trow:hover:not(.hd):not(.on){box-shadow:inset 3px 0 0 var(--club,rgba(232,233,235,.55))}

/* ── THE MAIN MENU, IN COLOUR ── */
.mm-i{flex-direction:row;align-items:center;gap:14px;padding:11px 18px 11px 16px}
.mm-ic{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:color-mix(in srgb,var(--mc) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 35%,transparent);transition:background .2s,box-shadow .2s,transform .2s}
.mm-ic svg{width:20px;height:20px;fill:none;stroke:var(--mc);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mm-it{display:flex;flex-direction:column;gap:6px;min-width:0}
.mm-i.on .mm-ic{background:var(--mc);box-shadow:0 10px 24px -10px var(--mc);transform:scale(1.04)}
.mm-i.on .mm-ic svg{stroke:#0b0c0e}
.mm-i.on{background:linear-gradient(90deg,color-mix(in srgb,var(--mc) 16%,transparent),rgba(255,255,255,0) 85%)}
.mm-i.on::before{background:var(--mc);box-shadow:0 0 14px var(--mc)}
.mm-p{padding:56px 56px 10px 0}
/* continue: the club's guernsey as the stage, its crest standing on it */
.mm-cont{padding:40px 50px 30px 0}
.mm-stage{position:relative;flex:1;display:flex;align-items:center;gap:40px;min-height:520px;padding:48px 56px;overflow:hidden;perspective:1200px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.mm-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,7,9,.92) 0%,rgba(6,7,9,.7) 42%,rgba(6,7,9,.25) 75%,rgba(6,7,9,.45) 100%),
  radial-gradient(120% 90% at 80% 50%,rgba(255,255,255,.08),transparent 60%)}
.mm-stage .mm-cont-t{position:relative;z-index:1;order:1;flex:1;min-width:0}
.mm-stage .mm-cont-c{position:relative;z-index:1;order:2;display:flex;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:mmFloat 6s ease-in-out infinite}
@keyframes mmFloat{50%{translate:0 -6px}}
.mm-stage .mm-h.big{font-size:104px;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.mm-facts{border:0;gap:8px}
.mm-facts span{margin:0;padding:12px 18px 11px;background:rgba(8,9,11,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
/* new career: every club on its own guernsey */
.mm-kits{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-top:28px;max-width:1040px}
.mm-kt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:132px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -20px rgba(0,0,0,.9);opacity:0;animation:ukUp .4s var(--d,0ms) cubic-bezier(.2,.8,.2,1) both;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s}
.mm-kt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));pointer-events:none}
.mm-kt > *{position:relative;z-index:1}
.mm-kt .crest{filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));transition:transform .18s}
.mm-kt-n{font:800 13px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.mm-kt:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 40px -18px rgba(0,0,0,.95),0 0 0 2px rgba(255,255,255,.55)}
.mm-kt:hover .crest{transform:scale(1.08)}
.mm-kits.locked .mm-kt{filter:saturate(.35) brightness(.7)}
/* load: each career on its club's stripe */
.mm-lr{position:relative;grid-template-columns:8px 52px minmax(0,1fr) auto;padding:12px 18px 12px 0;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 26px -20px rgba(0,0,0,.9);transition:transform .15s,background .15s}
.mm-lr:hover{transform:translateX(3px);background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.mm-lr.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.18)}
.mm-lr-k{align-self:stretch;width:8px}
/* online: you v your mates */
.mm-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;height:200px;margin-bottom:30px;max-width:900px;
  box-shadow:0 30px 60px -36px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1)}
.mm-vs-a,.mm-vs-b{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;overflow:hidden}
.mm-vs-a::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,.55))}
.mm-vs-a > *,.mm-vs-b > *{position:relative;z-index:1}
.mm-vs-a .crest{filter:drop-shadow(0 12px 20px rgba(0,0,0,.6))}
.mm-vs-a b,.mm-vs-b b{font:800 30px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 3px 14px rgba(0,0,0,.6)}
.mm-vs-b{background:repeating-linear-gradient(135deg,rgba(72,192,232,.14) 0 14px,rgba(72,192,232,.05) 14px 28px),linear-gradient(135deg,#0f2f45,#081823)}
.mm-vs-v{display:flex;align-items:center;justify-content:center;width:64px;background:#e8e9eb;color:#0e0f11;font:800 34px/1 var(--disp);text-transform:uppercase}
.mm-q{display:flex;align-items:center;justify-content:center;width:110px;height:110px;border-radius:50%;border:3px dashed rgba(72,192,232,.7);font:800 56px/1 var(--disp);color:#48c0e8}
.mm-q.sm{width:44px;height:44px;border-width:2px;font-size:22px}
.mm-form{margin-top:24px;max-width:760px;padding:18px 20px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.mm-form .cr-lg-f .mini-s input{height:36px}
/* the hub: a row of clubs, one of them being renamed */
.mm-hubart{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;height:190px;margin-bottom:30px;max-width:960px}
.mm-ht{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:0;animation:ukUp .45s var(--d,0ms) cubic-bezier(.2,.8,.2,1) both;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.mm-ht::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5))}
.mm-ht .crest{position:relative;z-index:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.mm-ht.edit{box-shadow:0 0 0 3px #b395f0,0 0 30px -4px #b395f0;z-index:1}
.mm-ht-n{position:absolute;z-index:2;left:8px;right:8px;bottom:10px;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;background:#b395f0;color:#140b24;
  font:800 11px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;animation:mmBlink 1.6s steps(1) infinite}
.mm-ht-n svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2}
@keyframes mmBlink{50%{box-shadow:inset -2px 0 0 #140b24}}
.mm-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px;max-width:900px}
.mm-pack{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;padding:12px 14px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.mm-pk-i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;font:800 16px/1 var(--disp);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* analytics: coloured numbers and the line of the month */
.mm-kpi span{box-shadow:inset 0 3px 0 var(--kc,#e8e9eb),inset 0 1px 0 rgba(255,255,255,.06)}
.mm-kpi b{color:var(--kc,#fff)}
.mm-sparkw{margin-top:18px;max-width:700px;padding:16px 18px 10px;background:rgba(255,255,255,.035)}
.mm-sparkw i{font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.mm-spark{display:block;width:100%;height:90px;margin-top:10px}
.mm-spark polyline{fill:none;stroke:#62d6a0;stroke-width:2.5;vector-effect:non-scaling-stroke}
.mm-spark polygon{fill:rgba(98,214,160,.14)}
/* what's new: the reel, as the chips it is */
.mm-reel{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;max-width:900px}
.mm-reel span{display:flex;flex-direction:column;gap:7px;padding:14px 18px;background:rgba(255,255,255,.045);border-left:3px solid #e8e9eb;opacity:0;animation:ukUp .4s var(--d,0ms) both}
.mm-reel i{font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.mm-reel b{font:800 20px/1 var(--disp);text-transform:uppercase}
/* the full game: six things, amber */
.mm-fg{display:grid;grid-template-columns:repeat(3,minmax(0,240px));gap:8px;margin-top:26px}
.mm-fg span{display:flex;align-items:center;gap:14px;padding:18px 18px;background:linear-gradient(180deg,rgba(245,184,58,.12),rgba(245,184,58,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(245,184,58,.2);
  opacity:0;animation:ukUp .4s var(--d,0ms) both}
.mm-fg svg{flex:none;width:24px;height:24px;fill:none;stroke:#f5b83a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-fg b{font:800 17px/1.1 var(--disp);letter-spacing:.05em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.mm-stage .mm-cont-c{animation:none}}

/* the menu's panels sit in the middle of the room, never at the top of an empty one */
.mm-p{justify-content:center}
/* how a thing works, as numbered marks rather than a paragraph */
.mm-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:22px;max-width:900px}
.mm-steps.hub{grid-template-columns:repeat(3,minmax(0,1fr))}
.mm-steps span{display:flex;align-items:center;gap:14px;padding:16px 16px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.mm-steps b{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:rgba(72,192,232,.16);box-shadow:inset 0 0 0 1px rgba(72,192,232,.45);color:#48c0e8;font:800 18px/1 var(--disp)}
.mm-steps.hub b{background:rgba(179,149,240,.16);box-shadow:inset 0 0 0 1px rgba(179,149,240,.45)}
.mm-steps.hub svg{width:18px;height:18px;fill:none;stroke:#b395f0;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mm-steps i{font:700 14px/1.2 var(--disp);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* ratings in colour: gold for the elite, green for the good, dimmed for the fringe (dev.js band) */
.rb-elite{color:#f6c860}.rb-good{color:#7fd6ae}.rb-low{color:var(--ink3)}
.trow.on .rb-elite{color:#8a5c00}.trow.on .rb-good{color:#1f6f4c}.trow.on .rb-low{color:#6b6e75}

/* an empty card is a deliberate panel, not a black hole (Lucas, 2026-09-20: "no pages with tiles with a massive corner or
   area of space with nothing"): it fills its card, the club's guernsey faint behind, a mark above the words */
.card .empty,.card .scroll > .empty{position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:200px;
  margin:6px 14px 14px;padding:36px 30px;overflow:hidden;font:700 17px/1.35 var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);
  background:radial-gradient(70% 90% at 50% 40%,color-mix(in srgb,var(--club,#48c0e8) 12%,transparent),transparent 70%),rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.card .empty::before{content:"";position:absolute;inset:0;background:var(--kit,none);opacity:.07;pointer-events:none}
.card .empty::after{content:"";order:-1;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--club,#e8e9eb) 70%,transparent),0 0 24px -6px var(--club,#e8e9eb);
  background:radial-gradient(circle,color-mix(in srgb,var(--club,#e8e9eb) 40%,transparent) 0 5px,transparent 6px)}

.fa-soon{margin:4px 14px 10px;padding:11px 14px;background:linear-gradient(90deg,color-mix(in srgb,var(--club,#48c0e8) 16%,transparent),transparent 80%);box-shadow:inset 3px 0 0 var(--club,#48c0e8);
  font:700 13px/1.3 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.t-s .crest{vertical-align:-4px}

/* ══ 2026-09-20, second look — Lucas: "aspect ratio of club logos are stretched, horrendous… weird colour in places for
   the sake of it". A logo keeps its own shape in any box; colour stays only where it MEANS something (a club's own
   identity, a rating's band, a line's hue) — the decoration comes back off. ══ */
img.crest{object-fit:contain}
.pg-h .tab.lt{background:#e8e9eb;color:#0e0f11}
.pg-h .tab.lt::before{background:#0e0f11}
.card-h .tab::before{background:#e8e9eb;box-shadow:none}
.sub button.on::after{background:#e8e9eb;box-shadow:0 0 14px rgba(232,233,235,.35)}
.hub.on{box-shadow:none}
.card::before{display:none}
.cell.hi{box-shadow:none}
.trow:hover:not(.hd):not(.on){box-shadow:inset 3px 0 0 rgba(232,233,235,.55)}
.app::after{display:none}
.card .empty,.card .scroll > .empty{background:rgba(255,255,255,.02)}
.card .empty::before{display:none}
.card .empty::after{box-shadow:inset 0 0 0 2px rgba(232,233,235,.35);background:radial-gradient(circle,rgba(232,233,235,.4) 0 5px,transparent 6px)}
.fa-soon{background:rgba(255,255,255,.04);box-shadow:inset 3px 0 0 #e8e9eb}
/* the menu's marks: one quiet language, the full game its one amber */
.mm-i{--mc:#e8e9eb}
.mm-i[data-mm="full"]{--mc:#f5b83a}
.mm-ic{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mm-ic svg{stroke:var(--ink2)}
.mm-i[data-mm="full"] .mm-ic svg{stroke:#f5b83a}
.mm-i.on{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,0) 85%)}
.mm-steps b,.mm-steps.hub b{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
.mm-steps.hub svg{stroke:#e8e9eb}
.mm-k[style]{color:var(--ink3)!important}
.mm-kpi span{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.mm-kpi b{color:#fff}
.mm-spark polyline{stroke:#e8e9eb}
.mm-spark polygon{fill:rgba(232,233,235,.08)}
.mm-ht.edit{box-shadow:0 0 0 3px #e8e9eb}
.mm-ht-n{background:#e8e9eb;color:#0e0f11}
.mm-vs-b{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,rgba(255,255,255,.02) 14px 28px),linear-gradient(135deg,#1a1c21,#0c0d10)}
.mm-q{border-color:rgba(232,233,235,.5);color:#e8e9eb}
/* the club you are choosing wears its guernsey behind its crest */
.nc-club{grid-template-columns:78px minmax(0,1fr);padding:0 16px 0 0;min-height:92px;overflow:hidden}
.nc-club .nc-kit{grid-row:1/3;align-self:stretch;display:flex;align-items:center;justify-content:center;position:relative}
.nc-club .nc-kit::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.35))}
.nc-club .nc-kit > *{position:relative;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}

/* ── take charge · you and the rules (dev_careers stepYou): a board, not a wall ── */
.nc-rules{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:34px}
.rl-main{min-height:0;overflow-y:auto;padding-right:8px}
.rl-name{display:flex;flex-direction:column;gap:10px;margin:4px 0 26px}
.rl-name input{width:min(560px,100%);padding:4px 0 10px;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.14);outline:none;
  font:800 46px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:#fff;transition:border-color .2s}
.rl-name input:focus{border-bottom-color:#e8e9eb}
.rl-s{margin-bottom:22px}
.rl-h{display:block;padding-bottom:10px;font:700 12px/1 var(--disp);letter-spacing:.28em;text-transform:uppercase;color:var(--ink3)}
.rl{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:22px;padding:9px 12px 9px 0;border-top:1px solid rgba(255,255,255,.06);transition:background .15s}
.rl.focus{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,0))}
.rl-l{font:800 17px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.rl.off{opacity:.38;pointer-events:none}
.rl-t{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px;max-width:560px;padding:3px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06)}
.rl-o{height:38px;padding:0 10px;font:700 13px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .18s,color .18s,box-shadow .18s,transform .12s}
.rl-o:hover:not(.on){color:#fff;background:rgba(255,255,255,.06)}
.rl-o:active{transform:scale(.97)}
.rl-o.on{background:linear-gradient(180deg,#f2f3f5,#d9dbdf);color:#0e0f11;box-shadow:0 6px 16px -8px rgba(0,0,0,.8),inset 0 1px 0 #fff}
.rl-o.on[style]{background:var(--sc);color:#0b0c0e;box-shadow:0 6px 18px -8px var(--sc),inset 0 1px 0 rgba(255,255,255,.5)}
.rl-aside{display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,rgba(30,31,36,.94),rgba(14,15,18,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -36px rgba(0,0,0,.95)}
.rl-club{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:230px;overflow:hidden}
.rl-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,.15),rgba(6,7,9,.75))}
.rl-club > *:not(.rl-shade){position:relative;z-index:1}
.rl-club .crest{filter:drop-shadow(0 16px 24px rgba(0,0,0,.6))}
.rl-club b{font:800 26px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 3px 14px rgba(0,0,0,.6)}
.rl-read{flex:1;padding:26px 28px 10px;animation:ukUp .3s cubic-bezier(.2,.8,.2,1) both}
.rl-now{display:block;margin-top:10px;font:800 34px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.rl-desc{margin:14px 0 0;font:500 15px/1.55 var(--body);color:var(--ink2)}
.rl-foot{margin:0;padding:14px 28px 20px;font:500 12.5px/1.4 var(--body);color:var(--ink3);border-top:1px solid rgba(255,255,255,.06)}

/* the rules fit the screen; the clubs fill it */
.rl-name{margin:0 0 16px;gap:6px}
.rl-name input{font-size:40px;padding-bottom:8px}
.rl-s{margin-bottom:12px}
.rl-h{padding-bottom:7px}
.rl{padding:6px 12px 6px 0}
.rl-o{height:34px}
.nc-clubs{grid-auto-rows:minmax(92px,1fr);align-content:stretch}
.nc-club{grid-template-columns:96px minmax(0,1fr)}
.nc-club .nc-kit .crest{width:60px!important;height:60px!important}

/* a card holds what it has: only a card with a list to scroll runs the height of the room (2026-09-20: no tiles that are
   mostly empty) */
.pg-b > .card:not(:has(.scroll)){align-self:start}
.pg-b > .col > .card:not(:has(.scroll)){flex:none}
.pg-b > .col{align-self:stretch}
.dm-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;padding-bottom:12px}
.pg-b:not(:has(.scroll)){align-content:start}

/* finances: the year's money as two rings with their shares */
.fb.fb-rings{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 14px 6px}
.fring{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:18px;padding:14px;background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.fring-c{position:relative;width:170px;height:170px}
.fring-c svg{width:100%;height:100%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.fring-c circle{animation:ringIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes ringIn{from{stroke-dasharray:0 999}}
.fring-c span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.fring-c i{font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.fring-c b{font:800 22px/1 var(--disp)}
.fring-l{display:flex;flex-direction:column;gap:7px;min-width:0}
.fring-l span{display:grid;grid-template-columns:10px minmax(0,1fr) auto 38px;align-items:center;gap:10px;font:500 13px/1.2 var(--body);color:var(--ink2)}
.fring-l span i{width:10px;height:10px}
.fring-l em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fring-l b{font:800 15px/1 var(--disp);color:var(--ink)}
.fring-l small{text-align:right;color:var(--ink3);font-size:12px}

/* game plan: how the season has gone, round by round */
.gp-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;padding:12px 14px 14px}
.gp-r{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px 8px;background:rgba(255,255,255,.035);box-shadow:inset 0 -3px 0 var(--r,#8a8f97),inset 0 1px 0 rgba(255,255,255,.05)}
.gp-r.W{--r:#5fc49a}.gp-r.L{--r:#e8836f}.gp-r.D{--r:#e8bf7a}
.gp-r i{font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.14em;color:var(--ink3)}
.gp-r b{font:800 15px/1 var(--disp);color:var(--r)}

/* picking a club: the logo in a square, grey mist behind it, lit when you point at it — no guernseys, no names */
.mm-kits{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.mm-kt{height:112px;gap:0;background:radial-gradient(58% 58% at 50% 46%,rgba(210,214,222,.13),rgba(210,214,222,0) 72%),linear-gradient(180deg,#18191d,#101114)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 12px 26px -20px rgba(0,0,0,.9)}
.mm-kt::after{display:none}
.mm-kt:hover{transform:translateY(-3px);background:radial-gradient(62% 62% at 50% 46%,rgba(225,229,236,.24),rgba(225,229,236,0) 74%),linear-gradient(180deg,#1d1e23,#121317)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 20px 34px -18px rgba(0,0,0,.95)}
.mm-kt:hover .crest{transform:scale(1.07)}
.nc-clubs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:minmax(150px,1fr);gap:10px}
.nc-sq{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(58% 58% at 50% 46%,rgba(210,214,222,.13),rgba(210,214,222,0) 72%),linear-gradient(180deg,#18191d,#101114);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 12px 26px -20px rgba(0,0,0,.9);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s}
.nc-sq .crest{filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));transition:transform .18s}
.nc-sq:hover{transform:translateY(-3px);background:radial-gradient(62% 62% at 50% 46%,rgba(225,229,236,.24),rgba(225,229,236,0) 74%),linear-gradient(180deg,#1d1e23,#121317);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 20px 34px -18px rgba(0,0,0,.95)}
.nc-sq:hover .crest{transform:scale(1.07)}
.nc-sq.on{background:radial-gradient(62% 62% at 50% 46%,rgba(235,238,244,.3),rgba(235,238,244,0) 76%),linear-gradient(180deg,#22242a,#15161a);box-shadow:inset 0 0 0 2px #e8e9eb,0 20px 34px -18px rgba(0,0,0,.95)}
.nc-sq.locked .crest{filter:grayscale(.6) brightness(.7)}
.nc-sq u{position:absolute;top:10px;right:10px;padding:3px 7px 2px;background:rgba(255,255,255,.1);font:800 10px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink2)}
.nc-pick{display:flex;align-items:center;gap:12px}
.nc-pick i{font:500 13px/1 var(--body);font-style:normal;color:var(--ink3)}
.rl-club{background:radial-gradient(55% 60% at 50% 42%,rgba(210,214,222,.16),rgba(210,214,222,0) 72%),linear-gradient(180deg,#1a1b20,#111215)}

/* no guernsey anywhere: no band along the top, no stripe on a career row */
.top::before{display:none}
.mm-lr{grid-template-columns:52px minmax(0,1fr) auto;padding-left:16px}
.mm-lr-k{display:none}
.mm-vs-a::after{background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.25))}
.mm-ht::after{display:none}

/* selection: the side across the page; out of the 23 in a drawer along the foot */
.sd{position:fixed;left:var(--pad-x);right:var(--pad-x);bottom:0;z-index:30;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(30,31,36,.98),rgba(16,17,20,.99));box-shadow:0 -24px 60px -20px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1)}
.sd-h{display:flex;align-items:center;gap:22px;height:54px;padding:0 20px;text-align:left}
.sd-h b{font:800 16px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.sd-h span{font:700 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.sd-h span i{font-style:normal;margin-left:4px;color:var(--ink)}
.sd-h span.bad i{color:var(--bad)}
.sd-h em{margin-left:auto;font:500 13px/1 var(--body);font-style:normal;color:var(--ink2)}
.sd-h u{text-decoration:none;padding:8px 14px;background:rgba(255,255,255,.07);font:800 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.sd-h:hover u{background:rgba(255,255,255,.14)}
.sd-b{display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:4px 16px 16px;max-height:46vh;overflow-y:auto}
.sd.open .sd-b{display:grid;animation:sdUp .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes sdUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sd-c{display:flex;flex-direction:column;gap:4px;min-width:0}
.sd-c em{position:sticky;top:0;z-index:1;padding:8px 2px 8px;font:700 11.5px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);background:#1b1c20}
.sd-c em u{text-decoration:none;color:var(--ink)}
.sd-p{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px 7px 7px;background:rgba(255,255,255,.04);text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:background .12s,box-shadow .12s,transform .12s}
.sd-p:hover{background:rgba(255,255,255,.09);box-shadow:inset 3px 0 0 #e8e9eb;transform:translateX(2px)}
.sd-p.out{opacity:.55}
.sd-n{display:flex;flex-direction:column;gap:3px;min-width:0}
.sd-n b{font:800 14.5px/1.1 var(--disp);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-n i{font:500 11.5px/1.2 var(--body);font-style:normal;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-v{display:flex;align-items:center;gap:3px}
.sd-v b{font:800 18px/1 var(--disp)}
.sd-v i{font:500 11px/1 var(--body);font-style:normal;color:var(--ink3)}
.sd-none{padding:10px 4px;font:500 12.5px/1.3 var(--body);color:var(--ink3)}
/* room for the drawer's strip under the sheet */
#main:has(.sd) .pg{padding-bottom:60px}

/* ── the first week (dev_firstweek.js): a gated, full-screen set-up ── */
.fw{height:100%;display:flex;flex-direction:column;min-height:0;padding-top:10px}
.fw-h{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.fw-h > span{display:flex;flex-direction:column;gap:6px}
.fw-h i{font:700 12px/1 var(--disp);font-style:normal;letter-spacing:.26em;text-transform:uppercase;color:var(--ink3)}
.fw-h h1{margin:0;font:800 54px/.9 var(--disp);letter-spacing:.02em;text-transform:uppercase;animation:ukUp .45s cubic-bezier(.2,.8,.2,1) both}
.fw-h em{font:500 15px/1.3 var(--body);font-style:normal;color:var(--ink2)}
.fw-steps{margin-left:auto;display:flex;gap:4px}
.fw-steps button{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;background:rgba(255,255,255,.04);font:700 13px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.fw-steps button u{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);text-decoration:none;font-size:12px}
.fw-steps button.on{background:#e8e9eb;color:#0e0f11}
.fw-steps button.on u{box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.fw-steps button.done{color:var(--ink)}
.fw-steps button.done u{background:#5fc49a;color:#0b0c0e;box-shadow:none}
.fw-steps button:disabled{opacity:.5;cursor:default}
.fw-stage{flex:1;min-height:0;display:flex}
.fw-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;animation:fwIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes fwIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fw-k{display:block;margin:0 0 12px;font:700 12px/1 var(--disp);letter-spacing:.26em;text-transform:uppercase;color:var(--ink3)}
.fw-side{display:flex;flex-direction:column;min-height:0;padding:26px 28px;background:linear-gradient(180deg,rgba(30,31,36,.94),rgba(14,15,18,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -36px rgba(0,0,0,.95)}
.fw-side h3{margin:0;font:800 38px/.95 var(--disp);letter-spacing:.02em;text-transform:uppercase}
.fw-side p{margin:14px 0 0;font:500 15px/1.55 var(--body);color:var(--ink2)}
.fw-side p.fw-dim{margin-top:auto;padding-top:18px;font-size:13px;color:var(--ink3)}
.fw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fw-chips span{padding:9px 14px 8px;background:rgba(255,255,255,.05);border-left:3px solid #e8e9eb;font:700 13px/1.2 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.fw-chips span.good{border-left-color:#5fc49a}
.fw-chips span.bad{border-left-color:#e8836f}
/* the game plan: every style as a play on the ground */
.fw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;min-height:0}
.fw-t{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 10px;background:radial-gradient(60% 55% at 50% 42%,rgba(210,214,222,.08),transparent 72%),linear-gradient(180deg,#18191d,#101114);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);opacity:0;animation:ukUp .4s var(--d,0ms) cubic-bezier(.2,.8,.2,1) both;transition:box-shadow .15s,transform .15s}
.fw-t:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.fw-t.on{box-shadow:inset 0 0 0 2px #e8e9eb,0 16px 30px -18px rgba(0,0,0,.95)}
.fw-t .pl-mini{width:100%;flex:1;min-height:0;max-height:150px}
.fw-t i{font:500 12px/1.2 var(--body);font-style:normal;color:var(--ink3);text-align:center}
.fw-t b{font:800 13.5px/1.05 var(--disp);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.fw-big{margin:-8px -10px 18px}
.fw-body.fw-tac{grid-template-columns:minmax(0,1fr) 470px}
/* THE PLAYS (dev_plays.js) — the old tactics room's replays, on the broadcast's charcoal. White is your side, grey
   theirs; colour only where a zone means something. */
.pl-hero{display:block;width:100%;height:auto}
.pl-lines{fill:none;stroke:rgba(255,255,255,.13);stroke-width:.7}
.pl-lines .edge{stroke:rgba(255,255,255,.34);stroke-width:1}
.pl-dir{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-linecap:round}
.pl-us{fill:#f2f3f5}
.pl-ring{fill:none;stroke:#f2f3f5;stroke-width:1.9}
.pl-ring.k{stroke-width:2.2}
.pl-halo{fill:none;stroke:#f2f3f5;stroke-width:1;opacity:.45}
.pl-them{fill:#9aa0aa;opacity:.42}
.pl-man circle{filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.6))}
.pl-man.opp circle{filter:none}
.pl-run{fill:none;stroke:#f2f3f5;stroke-width:1.3;opacity:.22;stroke-dasharray:3 5;stroke-linecap:round;animation:plMarch 1.4s linear infinite}
.pl-trail{fill:none;stroke:#f2f3f5;stroke-width:1.8;opacity:.45;stroke-dasharray:2.5 5;stroke-linecap:round;stroke-linejoin:round;animation:plMarch .95s linear infinite}
.pl-ball .glow{fill:#fff;opacity:.16}
.pl-ball .core{fill:#fff;stroke:#0b0c0e;stroke-width:.8;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
@keyframes plMarch{to{stroke-dashoffset:-15}}
.pl-lane{stroke-width:3;stroke-linecap:round;stroke-dasharray:5 4;animation:plMarch 1.1s linear infinite}
.pl-zone{mix-blend-mode:screen}
.pl-zone.dgr{mix-blend-mode:normal;stroke-width:1;stroke-dasharray:3.5 2.5}
.pl-sc{fill:rgba(255,255,255,.62);font:700 6.6px var(--body);letter-spacing:.4px;text-transform:uppercase}
.pl-lbl{font:700 5.6px var(--body);letter-spacing:.2px;text-transform:uppercase;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:1.4px}
.pl-out{fill:rgba(255,255,255,.85);font:800 8.5px var(--disp);letter-spacing:.4px;text-transform:uppercase}
.pl-mini{display:block;color:inherit}
.pl-mini .ov{fill:rgba(255,255,255,.025);stroke:currentColor;stroke-opacity:.2;stroke-width:.6}
.pl-mini .ln{fill:none;stroke:currentColor;stroke-opacity:.1;stroke-width:.45}
.pl-mini .ar line{stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.pl-mini .f{fill:currentColor}
.pl-mini .o{fill:none;stroke:currentColor;stroke-width:.9}
.pl-mb{fill:#fff;opacity:0;offset-rotate:0deg;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.9))}
.on .pl-mb,:hover > .pl-mini .pl-mb{animation:plRun 2.5s cubic-bezier(.55,.05,.45,1) infinite}
.ps.on .pl-mb{fill:#0e0f11;filter:none}
@keyframes plRun{0%{offset-distance:0%;opacity:0}10%{opacity:.95}88%{opacity:.95}100%{offset-distance:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){.pl-mb{animation:none!important}.pl-run,.pl-trail,.pl-lane{animation:none}}
/* the coaching box */
.fw-main{min-height:0;overflow-y:auto;padding-right:6px}
.fw-coaches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:24px}
.fw-co{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:16px 18px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;animation:ukUp .4s var(--d,0ms) both}
.fw-co em{grid-column:1/-1;font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.fw-co b{font:800 20px/1.1 var(--disp);text-transform:uppercase}
.fw-co span{font:800 26px/1 var(--disp)}
.fw-phil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fw-ph{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 16px 14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);text-align:left;transition:box-shadow .15s,transform .15s}
.fw-ph:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.fw-ph.on{box-shadow:inset 0 0 0 2px #e8e9eb}
.fw-ph b{font:800 19px/1 var(--disp);text-transform:uppercase}
.fw-ph > i{font:500 12.5px/1.2 var(--body);font-style:normal;color:var(--ink3)}
.fw-split{display:flex;width:100%;height:8px;margin-top:4px;gap:2px}
.fw-split i{display:block;height:100%}
.fw-key{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.fw-key span{display:flex;align-items:center;gap:6px;font:500 12px/1 var(--body);color:var(--ink3)}
.fw-key i{width:10px;height:10px}
/* training */
.fw-st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:26px}
.fw-s{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 18px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);text-align:left;
  opacity:0;animation:ukUp .4s var(--d,0ms) both;transition:box-shadow .15s,transform .15s}
.fw-s:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.fw-s.on{box-shadow:inset 0 0 0 2px #e8e9eb;background:rgba(255,255,255,.07)}
.fw-s svg{width:30px;height:30px;fill:none;stroke:#e8e9eb;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fw-s b{font:800 21px/1 var(--disp);text-transform:uppercase}
.fw-s i{font:500 13px/1.35 var(--body);font-style:normal;color:var(--ink3)}
.fw-int{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fw-i{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:4px 16px;align-items:center;padding:18px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);text-align:left;transition:box-shadow .15s}
.fw-i:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.fw-i.on{box-shadow:inset 0 0 0 2px #e8e9eb}
.fw-bars{grid-row:1/3;display:flex;align-items:flex-end;gap:4px;height:34px}
.fw-bars i{width:8px;background:rgba(255,255,255,.12)}
.fw-bars i:nth-child(1){height:40%}.fw-bars i:nth-child(2){height:70%}.fw-bars i:nth-child(3){height:100%}
.fw-bars i.lit.l1{background:#5fc49a}.fw-bars i.lit.l2{background:#e8bf7a}.fw-bars i.lit.l3{background:#e8836f}
.fw-i b{font:800 20px/1 var(--disp);text-transform:uppercase}
.fw-i > i{font:500 12.5px/1.3 var(--body);font-style:normal;color:var(--ink3)}
/* the board */
.fw-board{grid-template-columns:1fr;place-items:center}
.fw-brief{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:760px;text-align:center}
.fw-brief .crest{filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.fw-brief h2{margin:0;font:800 68px/.95 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.fw-conf{width:100%;max-width:560px;margin-top:10px}
.fw-conf > span:first-child{display:flex;justify-content:space-between;align-items:baseline}
.fw-conf > span:first-child i{font:700 12px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.fw-conf > span:first-child b{font:800 34px/1 var(--disp)}
.fw-gauge{display:block;height:10px;margin-top:10px;background:linear-gradient(90deg,#e8836f,#e8bf7a 50%,#5fc49a);opacity:.28;position:relative}
.fw-gauge i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#e8836f,#e8bf7a 50%,#5fc49a);animation:fwGrow 1s .2s cubic-bezier(.2,.8,.2,1) both}
.fw-conf{position:relative}
@keyframes fwGrow{from{width:0}}
.fw-scale{display:flex;justify-content:space-between;margin-top:6px}
.fw-scale i{font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.fw-brief .fw-chips{justify-content:center}
/* the foot */
.fw-f{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.fw-prog{flex:1;height:3px;background:rgba(255,255,255,.1)}
.fw-prog i{display:block;height:100%;background:#e8e9eb;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.fw-back{height:52px;padding:0 22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:800 15px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.fw-back:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.fw-go{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 30px;background:#e8e9eb;color:#0e0f11;font:800 16px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;transition:background .15s,transform .12s}
.fw-go:hover{background:#fff}
.fw-go:active{transform:scale(.98)}
.fw-go u{text-decoration:none;font-size:20px;line-height:0}
.fw-go:disabled{opacity:.6}

.fw-main{display:flex;flex-direction:column;justify-content:center}
.fw-s{min-height:200px;justify-content:flex-end;padding:24px 20px}
.fw-s svg{width:38px;height:38px;margin-bottom:auto}
.fw-i{min-height:130px}
.fw-co{padding:22px 20px}
.fw-co b{font-size:22px}
.fw-ph{min-height:140px;justify-content:flex-end}

/* Home: form and the run home */
.tile.ft{display:flex;flex-direction:column;gap:12px}
.ft-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ft-next{display:flex;flex-direction:column;gap:6px}
.ft-next em{font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.ft-n{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;background:rgba(255,255,255,.04)}
.ft-n b{font:800 15px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-n i{font:600 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.ft-fit{margin-top:auto;font:500 12.5px/1.3 var(--body);color:var(--ink3)}
.ft-fit b{font-weight:700;color:var(--ink)}
/* the game plan room: the plan you run, replayed; every other plan with its signature beside its name */
.gp-hero{margin:0 14px 12px;background:#0b0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.gp-hero .pl-hero{max-height:300px;margin:0 auto}
.pset .ps{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:12px}
.pset .ps > span{display:flex;flex-direction:column;gap:6px;min-width:0}
.pset .ps .pl-mini{width:78px;height:47px}
/* quality boxes (dev.js qbox): a rating solid, a ceiling hollow, one scale */
.qb{display:inline-grid;place-items:center;min-width:31px;height:27px;padding:0 4px;font:800 15px/1 var(--disp);letter-spacing:0;color:#0d0e10;background:var(--q,#3a3d44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px -4px rgba(0,0,0,.8)}
.qb.pot{background:color-mix(in srgb,var(--q) 16%,#0d0e10);color:var(--q);box-shadow:inset 0 0 0 1.5px var(--q)}
.qb.none{background:rgba(255,255,255,.06);color:var(--ink3);box-shadow:none}
.q6{--q:#f2c35a}.q5{--q:#4fbf8b}.q4{--q:#9ccb6a}.q3{--q:#767c86}.q2{--q:#e3955b}.q1{--q:#d9655f}
.qb.q3{color:#f2f3f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 8px -4px rgba(0,0,0,.8)}
.ts-q{display:flex;gap:3px}
.ts-key{display:flex;align-items:center;gap:18px;padding:10px 14px 2px;font:600 11px/1 var(--body);color:var(--ink3)}
.ts-key > span{display:flex;align-items:center;gap:7px}
.ts-key .qb{min-width:26px;height:20px;font-size:12px}
.ts-scale{margin-left:auto}
.ts-scale i{width:12px;height:12px;background:var(--q)}
.ts-scale u{margin-right:8px;text-decoration:none}
.pset .ps small{line-height:1.35}
.fw-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:20px;background:rgba(255,255,255,.06)}
.fw-spec span{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:#141518}
.fw-spec i{font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.fw-spec b{font:800 18px/1 var(--disp);text-transform:uppercase}
/* a signature drawn big keeps a fine line: strokes stay at screen width, the men smaller */
.fw-t .pl-mini :is(line,ellipse,rect,circle){vector-effect:non-scaling-stroke}
.fw-t .pl-mini .ar line{stroke-width:2.4}
.fw-t .pl-mini .ov{stroke-width:1.2}.fw-t .pl-mini .ln{stroke-width:1}
.fw-t .pl-mini .f{r:1.05}.fw-t .pl-mini .o{r:1.35;stroke-width:2}
.fw-t .pl-mb{r:1.2}
.t-q{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.t-q i{font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-q .qb{min-width:30px;height:24px;font-size:14px}
.trow.on .t-q i{color:#4a4d53}
/* HOW THE BALL MOVES (dev_plays.js playFlow): the chutes, the direction, foot and hand, the pace */
.pf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
.pf-k{display:block;margin:0 0 10px;font:700 10.5px/1 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.pf-l{display:flex;flex-direction:column;min-width:0}
.pf-pc,.pf-ln{display:grid;grid-template-columns:44.4fr 31.1fr 44.4fr;text-align:center}
.pf-pc span{display:flex;flex-direction:column;align-items:center;gap:2px}
.pf-pc b{font:800 26px/1 var(--disp);letter-spacing:.01em}
.pf-pc b small,.pf-t b small{font-size:.55em;margin-left:1px;color:var(--ink2)}
.pf-ln i{font:700 9.5px/1.2 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.pf-svg{display:block;width:100%;height:auto;margin:4px 0 6px}
.pf-g{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.pf-g.f50{stroke-dasharray:3 3}
.pf-ch{fill:rgba(242,243,245,var(--o));stroke:rgba(242,243,245,.4);stroke-width:.8;stroke-linejoin:round}
.pf-b{fill:#fff;filter:drop-shadow(0 0 2px rgba(255,255,255,.8))}
.pf u{margin-left:5px;font:700 11px/1 var(--body);text-decoration:none;color:var(--ink3)}
.pf u.up{color:#cfd3da}
.pf-r{display:flex;flex-direction:column;min-width:0}
.pf-d{display:grid;grid-template-columns:16px minmax(0,1fr) auto 30px;align-items:center;gap:5px 8px;margin-bottom:10px}
.pf-d .pf-bar{grid-column:1/-1;grid-row:2}
.pf-d svg{width:16px;height:16px;fill:none;stroke:#e8e9eb;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-d em{font:700 12px/1 var(--disp);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.pf-d b{font:800 17px/1 var(--disp);text-align:right}
.pf-d u{margin:0}
.pf-bar{height:6px;background:rgba(255,255,255,.06)}
.pf-bar i{display:block;height:100%;background:linear-gradient(90deg,rgba(242,243,245,.55),#f2f3f5)}
.pf-d.b .pf-bar i{background:rgba(242,243,245,.4)}
.pf-d + .pf-k{margin-top:10px}
.pf-kh{display:flex;height:30px;gap:2px;margin-bottom:14px}
.pf-kh i{display:flex;align-items:center;gap:6px;padding:0 10px;min-width:0;overflow:hidden;white-space:nowrap;font:600 11.5px/1 var(--body);font-style:normal;color:#0e0f11;background:#e8e9eb}
.pf-kh i + i{color:var(--ink);background:rgba(255,255,255,.12)}
.pf-kh b{font:800 15px/1 var(--disp)}
.pf-t{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pf-t span{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:rgba(255,255,255,.04)}
.pf-t b{font:800 22px/1 var(--disp)}
.pf-t i{font:500 11.5px/1.2 var(--body);font-style:normal;color:var(--ink3)}
/* in the game plan room: the replay and the ball's movement side by side */
.gp-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:center;margin:0 14px 12px}
.gp-top .gp-hero{margin:0}
.gp-top .pf{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px}
/* in the first week: under the plan's words */
.fw-side .pf{margin-top:18px;gap:16px}
.fw-side .pf-pc b{font-size:21px}
/* training's program as tiles (dev_squad.js render.training) */
.tg-h{display:flex;align-items:baseline;justify-content:space-between;padding:16px 14px 8px}
.tg-h span{font:700 10.5px/1 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.tg-h b{font:700 11px/1 var(--body);color:var(--ink2)}
.tg{display:grid;gap:6px;padding:0 14px}
.tg.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tg.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tg-t{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;padding:13px 14px 12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  text-align:left;color:var(--ink);transition:background .15s,box-shadow .15s,transform .12s}
.tg-t:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.tg-t:active{transform:scale(.985)}
.tg-t.on{background:linear-gradient(180deg,#f2f3f5,#d9dbdf);color:#0e0f11;box-shadow:0 10px 22px -14px rgba(0,0,0,.9),inset 0 1px 0 #fff}
.tg-t svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tg-t b{font:800 15px/1.05 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.tg-t > i{font:500 12px/1.3 var(--body);font-style:normal;color:var(--ink3)}
.tg-t.on > i{color:#4a4d53}
.tg-t.sm{justify-content:center;min-height:62px}
.tg-t b{overflow-wrap:anywhere}
.tg-t.sm{padding:11px 10px 10px}
.tg-bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.tg-bars i{width:6px;background:rgba(255,255,255,.14)}
.tg-bars i:nth-child(1){height:7px}.tg-bars i:nth-child(2){height:12px}.tg-bars i:nth-child(3){height:18px}
.tg-bars i.l1{background:#7fd6ae}.tg-bars i.l2{background:#e8bf7a}.tg-bars i.l3{background:#e8836f}
.tg-fam{display:block;width:100%;height:5px;background:rgba(255,255,255,.08)}
.tg-fam i{display:block;height:100%;background:currentColor;opacity:.8}
.tg-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px;align-items:start}
.tg-2 > .tg-h:first-child,.tg-2 > div > .tg-h:first-child{padding-top:16px}
.tg-2 .orow{margin-top:14px}
/* the medical room (dev_squad.js screens.medical): the condition board, who is out, who runs the room */
.cb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:10px 14px 14px}
.cb-p{display:grid;grid-template-columns:36px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:6px 8px 6px 6px;background:rgba(255,255,255,.04);text-align:left;color:var(--ink);
  box-shadow:inset 3px 0 0 var(--cbc,transparent);transition:background .15s,transform .12s}
.cb-p:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.cb-n{display:flex;flex-direction:column;gap:3px;min-width:0}
.cb-n b{font:800 13.5px/1.1 var(--disp);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-n i{font:500 11px/1 var(--body);font-style:normal;color:var(--ink3)}
.cb-r{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:conic-gradient(var(--cbc,#e8e9eb) calc(var(--v)*1%),rgba(255,255,255,.08) 0)}
.cb-r::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#16171a}
.cb-r b{position:relative;font:800 13px/1 var(--disp)}
.cb-p.ok{--cbc:#4fbf8b}.cb-p.mid{--cbc:#e8bf7a}.cb-p.low{--cbc:#e3955b}.cb-p.inj{--cbc:#d9655f}
.cb-p.ok{box-shadow:none}
.cb-p.inj .cb-n i{color:#e8836f}
.md-clear{display:flex;flex-direction:column;gap:6px;margin:4px 14px 6px;padding:16px 16px;background:rgba(79,191,139,.08);box-shadow:inset 3px 0 0 #4fbf8b}
.md-clear b{font:800 16px/1.1 var(--disp);text-transform:uppercase}
.md-clear i{font:500 12.5px/1.3 var(--body);font-style:normal;color:var(--ink2)}
.md-risk{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:10px;margin:10px 14px 4px;padding:12px 14px;background:rgba(255,255,255,.04)}
.md-risk span{display:flex;flex-direction:column;gap:6px}
.md-risk i{font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.md-risk b{font:800 18px/1 var(--disp);text-transform:uppercase}
.md-s{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 14px 4px;padding:10px 12px;background:rgba(255,255,255,.035)}
.md-s span{display:flex;flex-direction:column;gap:4px;min-width:0}
.md-s b{font:800 15px/1.1 var(--disp);text-transform:uppercase}
.md-s i{font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.md-o{grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px}
.md-o > .fc{flex:none}
/* the staff room (dev_office.js render.staff): the box as tiles, the philosophy as splits */
.sf{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:6px;padding:4px 14px 12px}
.sf-d{grid-area:d;margin-top:-2px;font:500 11.5px/1.35 var(--body);color:var(--ink3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-t{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"e q" "m q" "d d" "f f";align-items:center;gap:6px 12px;min-width:0;padding:14px 14px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);text-align:left;color:var(--ink);transition:box-shadow .15s,transform .12s}
.sf-t:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.sf-t.on{box-shadow:inset 0 0 0 2px #e8e9eb}
.sf-t.vac .sf-m b{color:var(--warn)}
.sf-t em{grid-area:e;font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.sf-m{grid-area:m;display:flex;flex-direction:column;gap:3px;min-width:0}
.sf-m b{font:800 19px/1.05 var(--disp);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-m i{font:500 11.5px/1.2 var(--body);font-style:normal;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-t > .qb{grid-area:q;min-width:40px;height:36px;font-size:19px}
.sf-f{grid-area:f;display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)}
.sf-sl{display:flex;gap:3px}
.sf-sl i{width:14px;height:6px;background:rgba(255,255,255,.12)}
.sf-sl i.in{background:#e8e9eb}
.sf-f > i{font:600 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.sf-f u{margin-left:auto;font:800 14px/1 var(--disp);text-decoration:none;color:var(--ink2)}
.sf-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:4px 14px 0}
.sf-ph .fw-ph{min-height:0;justify-content:flex-start;padding:13px 14px 12px}
.sf-ph .fw-ph b{font-size:16px}
.sf-key{padding:4px 14px 6px}
.wk2 .bar i{background:var(--pc,#e8e9eb)}
.srow:has(.st-t){grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.st-t{width:100%;max-width:none}
.st-t .rl-o{height:34px;font-size:12px;letter-spacing:.1em}
/* the boardroom's career tab in a first season (dev_manager.js firstSeason) */
.mg-now{display:flex;align-items:center;gap:18px;padding:18px 16px 16px}
.mg-now span{display:flex;flex-direction:column;gap:6px}
.mg-now em{font:700 10.5px/1 var(--disp);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.mg-now b{font:800 30px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase}
.mg-now i{font:500 13.5px/1.3 var(--body);font-style:normal;color:var(--ink2)}
.mg-wait{margin:14px 16px;font:500 13px/1.4 var(--body);color:var(--ink3)}
/* the draft meeting's list by line (dev_draft.js meetB) */
.dl4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:4px 14px 12px}
.dl{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:14px 14px 12px;background:rgba(255,255,255,.04);box-shadow:inset 0 -3px 0 #4fbf8b}
.dl.need{box-shadow:inset 0 -3px 0 #e8bf7a}
.dl > b{margin-top:6px;font:800 34px/1 var(--disp)}
.dl > i{margin-top:-4px;font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.dl span{font:500 12px/1.3 var(--body);color:var(--ink3)}
.dl span u{font:800 14px/1 var(--disp);text-decoration:none;color:var(--ink)}
.dl em{margin-top:4px;font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#7fd6ae}
.dl.need em{color:#e8bf7a}
.st-club{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
/* ⚠ ON A LIT (WHITE) CARD THE BUTTONS ARE DARK, so the generic white-on-hover made them vanish into the card
   (Lucas, 2026-09-20: "when you hover over kick off and match sim... the button disappears"). */
.tile.lit .btn:not(.dim):hover:not(:disabled),.md-go .btn:not(.dim):hover:not(:disabled){background:#000;color:#fff;box-shadow:0 12px 26px -16px rgba(0,0,0,.85)}
.tile.lit .btn.dim:hover:not(:disabled),.md-go .btn.dim:hover:not(:disabled){background:rgba(0,0,0,.18);color:#0e0f11}
.tile.lit .hm-b:not(.on):hover,.md-go .hm-b:not(.on):hover{background:rgba(0,0,0,.14);color:#0e0f11}
/* MATCH DAY, rebuilt (dev_match.js): the three calls that are yours on the day, then the way in.
   Lucas, 2026-09-20: "where is the option to change your lineup on gameday… settings and tactics… too black and
   white… i hate all the freetext". */
.md-blk{display:block;margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,0,0,.12)}
.md-bh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.md-bh em{font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#6a6d73}
.md-bh b{font:700 13px/1 var(--body);color:#0e0f11}
.md-lines{display:flex;flex-wrap:wrap;gap:6px}
.md-ln{flex:0 0 auto}
.md-ln{display:flex;align-items:center;gap:7px;padding:7px 8px;background:rgba(0,0,0,.05)}
.md-ln .qb{min-width:30px;height:26px;font-size:15px}
.md-ln i{font:700 12px/1 var(--disp);font-style:normal;color:#6a6d73}
.md-ln i.up{color:#1f7a52}.md-ln i.dn{color:#b3423b}
.md-go .ln{background:rgba(0,0,0,.08);color:#0e0f11}
.md-outs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}
.md-outs em{font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#b3423b}
.md-outs i{padding:3px 7px;background:rgba(179,66,59,.12);font:600 11.5px/1 var(--body);font-style:normal;color:#8d3630}
.md-plan{display:flex;align-items:center;gap:12px}
.md-plan .pl-mini{width:78px;height:47px;flex:none;color:#0e0f11}
.md-plan .pl-mini .ov{fill:rgba(0,0,0,.04)}
.md-plan span{display:flex;flex-direction:column;gap:4px;min-width:0}
.md-plan b{font:800 17px/1 var(--disp);text-transform:uppercase}
.md-plan i{font:500 12px/1.2 var(--body);font-style:normal;color:#6a6d73}
.md-go .chip2{background:rgba(0,0,0,.07);color:#3a3d43}
.md-go .chip2:hover{background:rgba(0,0,0,.12);color:#0e0f11}
.md-go .chip2.on{background:#0e0f11;color:#f3f4f6}
.md-go .md-lev em{color:#6a6d73}
.md-go .md-foot{color:#6a6d73}
/* their panel wears their crest, quietly */
.md-mark{position:absolute;right:-42px;top:50%;transform:translateY(-50%);opacity:.05;pointer-events:none}
.md-mark img.crest,.md-mark .crest{filter:none}
.md-read{position:relative;overflow:hidden}
.md-play{display:flex;align-items:center;gap:14px;margin-top:12px}
.md-play .pl-mini{width:104px;height:63px;flex:none}
.md-play .md-threat{margin-top:0}
/* the assistant's calls are things you can DO, not paragraphs */
.md-rec{display:grid;grid-template-columns:18px minmax(0,1fr) 10px;align-items:center;gap:10px;padding:9px 10px;background:rgba(255,255,255,.04);text-align:left;color:var(--ink2);transition:background .15s,transform .12s}
.md-rec:hover{background:rgba(255,255,255,.09);color:var(--ink);transform:translateX(2px)}
.md-rec span{font:500 12.5px/1.35 var(--body)}
.md-rec em{font-style:normal;color:var(--ink3)}
/* the ground it is played on, at its real size, in the day's weather */
.md-gr{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:center;margin-top:12px}
.md-osvg{display:block;width:100%;height:auto;max-height:clamp(140px,32vh,300px)}
.md-osvg .md-o{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.5);stroke-width:1.2}
.md-osvg.dull .md-o{stroke:rgba(255,255,255,.26)}
.md-osvg .md-l{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.8}
.md-osvg .md-dim{fill:var(--ink3);font:700 8px var(--body);letter-spacing:.14em;text-transform:uppercase}
.md-wind{stroke:rgba(159,180,208,.55);stroke-width:1.2;stroke-linecap:round;fill:none;animation:mdWind 2.6s linear infinite;animation-delay:calc(var(--d,0) * 1s);opacity:0}
@keyframes mdWind{0%{opacity:0;transform:translateX(-6px)}30%{opacity:.9}100%{opacity:0;transform:translateX(26px)}}
.md-rain{stroke:rgba(159,180,208,.5);stroke-width:1;stroke-linecap:round;fill:none;animation:mdRain 1.1s linear infinite;animation-delay:calc(var(--d,0) * 1s)}
@keyframes mdRain{from{transform:translateY(-8px);opacity:0}20%{opacity:.85}to{transform:translateY(16px);opacity:0}}
.md-grk{display:flex;flex-direction:column;gap:6px;min-width:0}
.md-note{margin-top:4px;font:500 12.5px/1.4 var(--body);color:var(--ink2)}
@media (prefers-reduced-motion:reduce){.md-wind,.md-rain{animation:none;opacity:.5}}
/* the walk out (dev_live.js runout): both clubs, their colours, the ground — held while the match loads */
.ro{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:26px;width:min(860px,88vw);padding:26px 30px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--h1) 55%,#0b0c0e) 0%,#0b0c0e 46%,#0b0c0e 54%,color-mix(in srgb,var(--a1) 55%,#0b0c0e) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 90px -50px #000;animation:roIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes roIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
.ro-t{display:flex;align-items:center;gap:16px;min-width:0}
.ro-t.a{justify-content:flex-end}
.ro-t b{font:800 30px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 3px 18px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro-t .crest{filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
.ro-v{font:700 14px/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--ink3)}
.mxl-load .mxl-k{margin-top:18px}
.mxl-msg{display:block;margin-top:8px;font:700 13px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
/* the day wears the club: its colour along the top of the match centre, and on the way in */
.md-go{box-shadow:inset 0 4px 0 var(--club,#0e0f11)}
.md-go .md-cta .btn:not(.dim){background:var(--club,#0e0f11);color:#fff}
.md-go .md-cta .btn:not(.dim):hover:not(:disabled){background:#000;color:#fff}
.md-go .tile-t{color:#0e0f11}
/* HOME, rebuilt (dev_home.js): the week across the top as the carousel, the cards under it */
.hm{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
/* HOME FITS THE WINDOW — there is nothing to scroll (Lucas, 2026-09-21: "why do i have to scroll? that
   doesnt make any sense at all"). Four columns, two rows, always: the day card is half the room, the match
   and the board share a column, the inbox runs the full height beside them. The tiles FLOW into that grid
   (no hand-placed cells — those put tiles on top of each other on a window I had not designed on), so a
   week with no match or no board just leaves one cell empty instead of overlapping anything. */
.hm-g{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;overflow:hidden}
.hm-g > .tile{min-height:0}
.hm-g > .tile.big{grid-column:span 2;grid-row:span 2;padding:18px 20px 0}
.hm-g > .hm-inb{grid-row:span 2}
@media (max-width:1100px){.hm-g{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  .hm-g > .tile.big{grid-row:span 1}.hm-g > .hm-inb{grid-row:span 1}}
/* inside a Home tile: the list takes what is left and scrolls, the stat row is pinned under it, and the
   day card's picture fills the space rather than leaving a hole */
/* NOTHING IN A TILE IS SQUASHED. A tile is a flex column: on a short window its children shrink, and a
   line of type given 8px of height is a smear, not a sentence. Everything holds its size and the one list
   in the tile takes what is left and scrolls. */
.hm-g > .tile > *{flex:0 0 auto}
.hm-g > .tile > .cells{flex:none;margin-top:auto}
.hm-g > .tile .news3,.hm-g > .tile .mlad,.hm-g > .tile .jobs{flex:1 1 auto;min-height:0;overflow-y:auto}
.hm-g > .tile.big .jobs{flex:1 1 auto;min-height:0;overflow-y:auto}
/* the day card holds the day, its two calls, last week and what still needs you — all four, inside the
   tile, on the shortest window the game is played on */
/* last week as one bar, not a panel: the two crests, the score, the margin. It is the anchor of the day
   card, but what still needs you is the point of it. */
.hm-g > .tile.big .dv{flex:none;display:flex;align-items:center;gap:14px;margin-top:12px;padding:9px 14px}
.hm-g > .tile.big .dv > em{margin:0;flex:none}
.hm-g > .tile.big .dv-sc{flex:1;gap:12px}
.hm-g > .tile.big .dv-sc b{font-size:26px}
.hm-g > .tile.big .dv-sc i{min-width:72px;font-size:10px}
.hm-g > .tile.big .dv-sc .crest{width:28px;height:28px}
.hm-g > .tile.big .jb{padding:7px 0}
/* the last five results are the form strip's job now — the day card shows the score and gives the rest of
   its room to what still needs you */
.hm-g > .tile.big .dv-f{display:none}
.hm-g > .tile.big .tile-t{font-size:34px}
.hm-g > .tile.big .hm-acts{margin-top:12px}
.hm-g > .tile.big .jobs{margin-top:10px}
/* the board: the mandate, the meter it moves on, the record — nothing of it below the fold */
.hm-brd .brd-o{padding:12px 14px 0}
.hm-brd .brd-o em{font-size:9.5px}
.hm-brd .brd-o b{margin-top:5px;font-size:15px;line-height:1.15}
.hm-brd .brd-c{margin:7px 0 8px}
.hm-brd .cell{padding:8px 5px;gap:5px}
.hm-brd .cell b{font-size:20px}
/* ONE SHEET, BOTH SIDES — the slot is the same shape everywhere; the club it belongs to is the colour on it */
.sheet .sh-s{display:grid;grid-template-columns:30px 30px minmax(0,1fr) auto;align-items:center;gap:9px;
  padding:5px 10px;background:rgba(255,255,255,.045);text-align:left;color:var(--ink);min-width:0}
.sheet .sh-s em{font:700 9px/1 var(--disp);font-style:normal;letter-spacing:.1em;color:var(--ink3);text-align:center}
.sheet .sh-s .fc{width:30px;height:30px}
.sheet .sh-s .fc.none{background:rgba(255,255,255,.05)}
.sheet .sh-s b{font:800 13.5px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet .sh-s u{font:800 14px/1 var(--disp);text-decoration:none;color:var(--ink2)}
.sheet.mine .sh-s{box-shadow:inset 2px 0 0 var(--club,#e8e9eb)}
.sheet.theirs .sh-s{box-shadow:inset 2px 0 0 var(--t1,rgba(255,255,255,.25))}
/* the read, drawn: the win chance each way and the score the model expects */
.odb{display:flex;flex-direction:column;gap:7px;padding:12px 14px 4px}
.odb-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.odb-h em{font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.odb-h em:nth-child(2){color:var(--ink4,#6a6d73)}
.odb-b{position:relative;display:flex;height:26px;background:rgba(255,255,255,.05)}
.odb-b i{width:var(--w);height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--h1,#e8e9eb) 45%,#0b0c0e),color-mix(in srgb,var(--h1,#e8e9eb) 92%,#fff))}
.odb-b u{width:var(--w);height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--a1,#8b8f96) 78%,#fff),color-mix(in srgb,var(--a1,#8b8f96) 45%,#0b0c0e))}
.odb-b b,.odb-b s{position:absolute;top:50%;transform:translateY(-50%);font:800 12px/1 var(--disp);text-decoration:none}
.odb-b b{left:9px;color:#0e0f11}
.odb-b s{right:9px;color:var(--ink2)}
.odb-x{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.odb-x span{font:800 17px/1 var(--disp)}
.odb-x em{font:700 9px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
/* the tag: one picker over their whole 23, the dangerous men under it as quick calls */
.md-tagsel{display:flex;flex-direction:column;gap:7px;padding:12px 14px 4px}
.md-tagger{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.md-tagger em{font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.md-tagger.none .btn{align-self:flex-start}
.md-nowt{font:500 12.5px/1.45 var(--body);color:var(--ink3)}
.md-nowt b{color:var(--ink2)}
.md-tagsel em{font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.dd-wide{display:block;width:100%}
.dd-wide .dd{width:100%}
.dd-wide .dd-b{width:100%;justify-content:space-between}
.dd-wide .dd-m{max-height:260px}
/* how they are built — counted off their 23, never a paragraph about it */
/* their shape, drawn: three lines of the ground, each split by what the men in it are */
.ob-g{display:flex;flex-direction:column;gap:9px;padding:12px 14px 4px}
.ob-r{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:10px}
.ob-l{font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.ob-bar{display:flex;gap:3px;height:38px}
.ob-s{width:var(--w);min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  padding:0 9px;background:rgba(255,255,255,.07);box-shadow:inset 2px 0 0 rgba(255,255,255,.22);overflow:hidden}
.ob-s.s1{background:rgba(255,255,255,.13);box-shadow:inset 2px 0 0 #e8e9eb}
.ob-s.s2{background:rgba(255,255,255,.085)}
.ob-s.s3{background:rgba(255,255,255,.055)}
.ob-s b{font:800 15px/1 var(--disp)}
.ob-s em{font:700 8.5px/1 var(--disp);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ob-none{grid-column:2;font:600 11px/1 var(--body);font-style:normal;color:var(--bad,#d9655f)}
.ob-age{display:block;padding:8px 14px 14px;font:500 12px/1.4 var(--body);color:var(--ink3)}
.ob-age b{font-weight:800;color:var(--ink2)}
/* YOUR PLAN, as a briefing: the play drawn, what it is called, the levers it is made of, and how it reads
   against the side you named. Changing it belongs to the Tactics room. */
/* ⚠ NOT .md-plan — that class is the small inline plan chip (a flex row, centred, its spans stacked)
   and wearing it collapsed this whole room into a narrow centred column. */
.mp-head{display:flex;align-items:center;gap:14px;padding:12px 14px 0}
.mp-head .pl-mini{width:104px;height:64px;flex:none}
.mp-head b{display:block;font:800 21px/1 var(--disp);text-transform:uppercase}
.mp-head i{display:block;margin-top:6px;font:500 12px/1.35 var(--body);font-style:normal;color:var(--ink3)}
.mp-lv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:14px 14px 0}
.mp-l{display:flex;flex-direction:column;gap:7px;padding:10px 11px;background:rgba(255,255,255,.045)}
.mp-l em{font:700 9px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.mp-l b{font:800 13px/1.1 var(--disp);text-transform:uppercase}
/* ⚠ .dd-sel carries min-width:230px — inside a 150px lever box that overflows and the boxes overlap */
.mp-l .dd,.mp-l .dd-sel{display:flex;width:100%;min-width:0}
.mp-l .dd-b{width:100%;min-width:0;justify-content:space-between;height:32px;padding:0 9px 0 11px;
  font:800 12.5px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.mp-l .dd-b span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-l .dd-m{min-width:100%}
.mp-fit{display:flex;flex-direction:column;gap:5px;padding:12px 14px 0}
.mp-fit span{padding:7px 10px;background:rgba(255,255,255,.035);font:500 12.5px/1.35 var(--body);color:var(--ink2);box-shadow:inset 2px 0 0 rgba(255,255,255,.18)}
.mp-fit span.up{box-shadow:inset 2px 0 0 var(--good,#5fb87a)}
.mp-fit span.dn{box-shadow:inset 2px 0 0 var(--bad,#d9655f)}
/* MATCH DAY OPENS ON THE MATCH — both clubs at full size in their own colours, where they sit, the form
   they carry, and the day. It is the page a broadcast opens on, so it carries no chrome of its own. */
/* THE OPEN IS FOUR THINGS, not two cards with their bottom halves empty: the match, the ground, the
   panel's read, and the four lines of the ground side by side. */
.mdw .md-g.one{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto minmax(0,1fr);grid-auto-rows:auto;overflow:hidden}
.mdw .md-g.one > .tile{min-height:0}
.mdw .md-g.one > .mfo{grid-column:1/-1;grid-row:1;min-height:clamp(150px,26vh,290px)}
.mdw .md-g.one > .md-ground{grid-column:1;grid-row:2}
.mdw .md-g.one > .md-read{grid-column:2;grid-row:2}
.mdw .md-g.one > .md-lines-t{grid-column:3;grid-row:2}
/* the read fills its card: the bar is the size of the call it is making */
.md-read .odb{flex:1 1 auto;justify-content:center;gap:14px;padding:14px 16px}
.md-read .odb-b{height:40px}
.md-read .odb-b b,.md-read .odb-b s{font-size:15px}
.md-read .odb-x span{font-size:26px}
/* line for line: four bars with room to breathe */
.md-lines-t .tug{flex:1 1 auto;margin-top:0;justify-content:center;gap:14px;padding:14px 16px}
.md-lines-t .tug-b{height:14px}
.md-lines-t .tug-r b{font-size:17px}
/* the plan and the one match-day call beside it, both in the window */
/* the plan takes the height its own content needs — a 1fr row of a 626px window squeezed it to nothing
   and the shape tile drew over the top of it */
/* THE PLAN IS THREE THINGS SIDE BY SIDE, not stacked: your plan, how they are built, and the tag. Stacked
   it was 582px of cards in a 273px window — a page scroll, which this game does not do. Across, each has
   the height of the room and scrolls inside itself if it must. */
.mdw .md-g.plan{grid-template-columns:minmax(0,1.1fr) minmax(0,.95fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);overflow:hidden}
.mdw .md-g.plan > .md-planroom{grid-column:1;grid-row:1}
.mdw .md-g.plan > .md-shape{grid-column:2;grid-row:1}
.mdw .md-g.plan > .md-danger{grid-column:3;grid-row:1}
/* the walk out is the moment, not a settings page: the two clubs fill the room and how you watch it is a
   strip under them */
.mdw .md-g.out{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-auto-rows:auto;overflow:hidden}
/* your side fills the room: the sheet down the left, the read beside it */
.mdw .md-g.you{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;grid-template-rows:minmax(0,1fr);overflow:hidden}
.mdw .md-g.you > .tile{min-height:0}
.mdw .md-g.out > .md-walk{min-height:0;align-content:center}
.mdw .md-g.out > .md-watchcard{min-height:0}
.mdw .md-g.plan > .tile{min-height:0;overflow-y:auto}
.mdw .md-g.plan .mp-lv{grid-template-columns:repeat(2,minmax(0,1fr))}
.mfo{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;padding:20px 26px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--h1) 55%,#0b0c0e) 0%,#0b0c0e 42%,#0b0c0e 58%,color-mix(in srgb,var(--a1) 55%,#0b0c0e) 100%)}
.mfo-s{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:16px;row-gap:5px;min-width:0}
/* ⚠ crest() writes width/height as an INLINE style, so the size here has to be !important or the
   logos never grow — which is exactly what happened. */
.mfo-s .crest{grid-row:1/3;width:clamp(90px,10.5vw,168px)!important;height:clamp(90px,10.5vw,168px)!important;filter:drop-shadow(0 10px 26px rgba(0,0,0,.75))}
.mfo-s b{align-self:end;font:800 clamp(22px,2.4vw,38px)/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;text-shadow:0 3px 18px rgba(0,0,0,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mfo-s i{display:flex;align-items:center;gap:9px;align-self:start;font:700 12px/1 var(--disp);font-style:normal;letter-spacing:.1em;color:var(--ink2)}
.mfo-s i .rk{padding:2px 6px;font-size:12px}
.mfo-s.a{grid-template-columns:minmax(0,1fr) auto;text-align:right;justify-items:end}
.mfo-s.a .crest{grid-column:2;grid-row:1/3}
.mfo-f{display:flex;gap:3px;grid-column:2}
.mfo-s.a .mfo-f{grid-column:1;justify-content:flex-end}
.mfo-f i{display:grid;place-items:center;width:21px;height:19px;font:800 11px/1 var(--disp);font-style:normal;background:rgba(255,255,255,.08);color:var(--ink2)}
.mfo-f i.w{background:rgba(95,184,122,.24);color:#8fe0ad}
.mfo-f i.l{background:rgba(217,101,95,.22);color:#f0968f}
.mfo-f u{font:600 11px/1 var(--body);text-decoration:none;color:var(--ink3)}
.mfo-m{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.mfo-m em{font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3)}
.mfo-m > b{font:800 30px/1 var(--disp);color:var(--ink3)}
.mfo-w{display:flex;flex-direction:column;align-items:center;gap:3px}
.mfo-w u{font:700 10.5px/1 var(--disp);text-decoration:none;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
/* the ground and its facts side by side — the oval gets a height worth drawing at, each fact the same box */
.md-gbody{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;padding:10px 14px 12px}
.mfo-cond{display:flex;flex-direction:column;justify-content:flex-start;gap:6px;min-width:0}
.mdw .md-g.one .md-osvg{max-height:100%;width:auto;max-width:100%}
/* the read fills its tile: the line-by-line takes the room under the panel's verdict */
.mdw .md-g.one .md-read .tug{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.mdw .md-g.one .md-read .tug-r{align-items:center}
/* THE GROUND IS THE PICTURE — a still of this stadium from outside, filling the card, with the facts
   about the place over it. The weather is in the light across it, not sticks of rain drawn on an ellipse. */
.md-ground{position:relative;overflow:hidden}
.md-shot{position:absolute;inset:0;overflow:hidden;background:#070b12}
.md-shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.05)}
.md-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,18,.42) 0%,rgba(7,11,18,0) 34%,rgba(7,11,18,0) 52%,rgba(7,11,18,.78) 100%)}
.md-shot.wx-rain::after,.md-shot.wx-wet::after{background:linear-gradient(180deg,rgba(12,22,38,.5),rgba(10,18,30,.1) 40%,rgba(7,11,18,.82))}
.md-shot.wx-overcast::after{background:linear-gradient(180deg,rgba(18,20,24,.5),rgba(7,11,18,.1) 40%,rgba(7,11,18,.8))}
.md-ground > .over{position:relative;z-index:2}
.md-ground > .tile-k.over{text-shadow:0 2px 12px rgba(0,0,0,.9)}
.md-ground > .mfo-cond.over{margin-top:auto;flex-direction:row;gap:8px;padding:12px 14px 14px}
.md-ground > .mfo-cond.over span{flex:1 1 0;background:rgba(7,11,18,.74);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.mdw .md-g.one .md-gr{min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mdw .md-g.one .md-note{flex:none}
/* ⚠ NOT flex:1. Stretched to fill the column these became three tall, near-empty rectangles with the
   words stranded at the bottom of each — equal in height and awful to look at. They take the height
   their words need, packed at the top, and the ground gets the room they are not using. */
.mfo-cond span{flex:0 0 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:11px 13px;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mfo-cond b{font:800 13.5px/1.15 var(--disp);text-transform:uppercase}
.mfo-cond i{font:700 9px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
@media (max-width:1240px){
  .mfo{gap:12px;padding:14px 16px}
  .mfo-s .crest{width:clamp(64px,8.5vw,104px)!important;height:clamp(64px,8.5vw,104px)!important}
  .mfo-s b{font-size:clamp(19px,2.1vw,26px)}
  .mfo-m > b{font-size:22px}
}
/* A SHORT WINDOW KEEPS THE POINT, NOT THE TRIMMINGS. At 626px high a tile has ~150px: the day card shows
   what needs you (not last week's picture as well), the match shows who and where (not the two ladder
   lines), the board shows the mandate and the record (not the streak — the form strip says it anyway).
   Given room, all of it comes back rather than leaving half a tile empty. */
@media (max-height:800px){
  .hm-g > .tile.big .dv{display:none}
  .hm-g > .tile.mday .mlad{display:none}
  .hm-g > .tile.hm-brd .brd-s{display:none}
  .hm-g > .tile.big .hm-evs{display:none}
}
@media (min-height:801px){
  .hm-g > .tile.mday .mlad{flex:1 1 auto;min-height:0;margin:10px 0 0;overflow-y:auto}
  .hm-g > .tile.hm-brd .brd-s{margin-top:10px}
  .hm-g > .tile.big .dv{margin-top:14px}
  .hm-g > .tile.big .jobs{flex:0 0 auto}
  .hm-g > .tile.big .hm-evs{flex:1 1 auto;min-height:0;overflow-y:auto;margin-top:12px}
}
/* FORM, AS ONE LINE — it was a tile the size of the match ("form can be so much smaller") */
.hm-fs{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(180deg,#1b1c20,#0d0e10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);text-align:left;color:var(--ink);transition:background .15s}
.hm-fs:hover{background:linear-gradient(180deg,#232429,#111214)}
.hm-fs em{flex:none;font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.fs-l{display:flex;gap:4px;min-width:0}
.fs-r,.fs-x{display:flex;align-items:center;gap:5px;padding:4px 7px;background:rgba(255,255,255,.05)}
.fs-r.W{box-shadow:inset 2px 0 0 var(--good,#5fb87a)}
.fs-r.L{box-shadow:inset 2px 0 0 var(--bad,#d9655f)}
.fs-r b,.fs-x b{font:800 12px/1 var(--disp)}
.fs-x i{font:600 10px/1 var(--body);font-style:normal;color:var(--ink3)}
.fs-st{padding:4px 8px;background:rgba(255,255,255,.05);font:700 10.5px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.fs-st.up{color:var(--good,#5fb87a);background:rgba(95,184,122,.12)}
.fs-st.dn{color:var(--bad,#d9655f);background:rgba(217,101,95,.12)}
.fs-fit{margin-left:auto;white-space:nowrap;font:500 11.5px/1 var(--body);color:var(--ink3)}
.fs-fit b{font-weight:700;color:var(--ink2)}
.fs-go{flex:none;font:700 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
/* the club's milestones, now a card in the Season room beside the run home */
.sn-col{display:flex;flex-direction:column;gap:10px;min-height:0}
/* the full ladder scrolls inside its card, so the room never grows past the window */
.sn-lad{max-height:min(46vh,430px);overflow-y:auto}
.sn-col > .card:first-child{flex:1 1 auto;min-height:0}
.ms-b{display:flex;flex-direction:column;padding:0 4px 10px}
.wkband{flex:none;padding:14px 16px 12px;background:linear-gradient(180deg,#191a1e,#0f1013);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 3px 0 var(--club,transparent)}
.wkband-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.wkband-h span{font:700 10.5px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--ink3)}
.wkband-h b{font:800 14px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.wkc-r{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.wkc{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:11px 12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  text-align:left;color:var(--ink);opacity:0;animation:ukUp .4s var(--d,0ms) cubic-bezier(.2,.8,.2,1) both;transition:background .15s,transform .12s,box-shadow .15s}
.wkc:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.wkc.past{opacity:.55}
.wkc.past:hover{opacity:.8}
.wkc.now{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 3px 0 var(--club,#e8e9eb)}
.wkc.game{grid-template-columns:auto auto minmax(0,1fr);background:linear-gradient(100deg,rgba(255,255,255,.07),rgba(255,255,255,.03))}
.wkc-d{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:34px}
.wkc-d em{font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.wkc-d b{font:800 20px/1 var(--disp)}
.wkc-n{font:700 8px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--club2,#e8bf7a)}
.wkc-t{font-style:normal;font-size:11px;color:#7fd6ae}
.wkc-x{display:flex;flex-direction:column;gap:4px;min-width:0}
.wkc-x b{font:800 13px/1.05 var(--disp);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkc-x i{font:500 11px/1.25 var(--body);font-style:normal;color:var(--ink3);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wkc-c{display:flex;align-items:center}
.wkline{position:relative;height:3px;margin-top:11px;background:rgba(255,255,255,.07)}
.wkline i{display:block;height:100%;width:var(--v);background:linear-gradient(90deg,var(--club,#e8e9eb),var(--club2,#fff))}
.wkline u{position:absolute;top:50%;left:var(--v);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
/* the board's tile: the mandate, the run you are on */
.brd-o{display:block;padding:16px 16px 0}
.brd-o em{display:block;font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.brd-o b{display:block;margin-top:7px;font:800 20px/1.1 var(--disp);text-transform:uppercase}
.brd-c{display:flex;align-items:center;gap:10px;padding:12px 16px 14px}
.brd-bar{flex:1;height:8px;background:rgba(255,255,255,.08)}
.brd-bar i{display:block;height:100%;width:var(--v);background:linear-gradient(90deg,var(--club,#8a8f97),var(--club2,#e8e9eb))}
.brd-c > b{font:800 20px/1 var(--disp)}
.brd-c > i{font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.brd-s{display:block;margin:auto 16px 14px;padding:9px 12px;background:rgba(255,255,255,.05);font:700 12px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.brd-s.up{background:rgba(79,191,139,.14);color:#8fe0bb}
.brd-s.dn{background:rgba(217,101,95,.14);color:#e8a19c}
/* what is coming up: milestones and this season's leaders */
.ms-h{display:block;padding:14px 16px 6px;font:700 10px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.ms-r{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 16px}
.ms-r .fc{width:30px;height:30px}
.ms-r span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ms-r b{font:800 13px/1.1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-r i{font:500 11px/1 var(--body);font-style:normal;color:var(--ink3)}
.ms-r u{font:800 19px/1 var(--disp);text-decoration:none;color:var(--club2,#e8bf7a)}
.ms-l{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px;margin:0 16px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06)}
.ms-l em{grid-column:1/-1;font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.ms-l b{font:800 14px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-l u{font:800 18px/1 var(--disp);text-decoration:none}
.hm-ms{padding-bottom:12px}
.hm-frm{padding-bottom:14px}
.hm-frm .ft-form{grid-template-columns:repeat(5,minmax(0,1fr))}
.hm-frm .ft-next{flex-direction:row;align-items:center;gap:8px;margin-top:10px}
.hm-frm .ft-n{flex:1}
.hm-frm .ft-next em{margin-right:2px}
.hm-frm .ft-fit{margin-top:10px}
.ms-r.lead u{color:var(--ink)}
.ms-r.lead i{letter-spacing:.14em;text-transform:uppercase;font-size:10px}
/* the day's own picture inside the day card (dev_home.js dayVisual) */
.dv{display:block;margin-top:18px;padding:16px 16px 14px;background:rgba(0,0,0,.05);box-shadow:inset 3px 0 0 var(--club,#0e0f11)}
.dv > em{display:block;margin-bottom:12px;font:700 10px/1 var(--disp);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:#6a6d73}
.dv-sc{display:flex;align-items:center;justify-content:center;gap:16px}
.dv-sc b{font:800 40px/1 var(--disp);color:#0e0f11}
.dv-sc i{font:700 11px/1.2 var(--disp);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#6a6d73;text-align:center;min-width:86px}
.dv.res.w .dv-sc i{color:#1f7a52}.dv.res.l .dv-sc i{color:#b3423b}
.dv-f{display:flex;justify-content:center;gap:4px;margin-top:14px}
.dv-f i{display:grid;place-items:center;width:26px;height:22px;font:800 12px/1 var(--disp);font-style:normal;background:rgba(0,0,0,.08);color:#4a4d53}
.dv-f i.w{background:rgba(31,122,82,.16);color:#1f7a52}
.dv-f i.l{background:rgba(179,66,59,.14);color:#b3423b}
.dv-p{display:flex;align-items:center;gap:14px}
.dv-p .pl-mini{width:96px;height:58px;flex:none;color:#0e0f11}
.dv-p .pl-mini .ov{fill:rgba(0,0,0,.04)}
.dv-p span{display:flex;flex-direction:column;gap:4px}
.dv-p b{font:800 20px/1 var(--disp);text-transform:uppercase;color:#0e0f11}
.dv-p i{font:500 12.5px/1.2 var(--body);font-style:normal;color:#6a6d73}
.dv-ls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
/* P3 (2026-09-22) — on the white day card a 5%-black wash is white on white: four boxes with numbers in
   them and no edges. Each line box now carries its own line colour, which is the one thing that tells
   you which line you are looking at, and it reads on either surface. */
.dv-l{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 9px;
  background:color-mix(in srgb,var(--lc,#8b8f96) 10%,transparent);
  box-shadow:inset 3px 0 0 var(--lc,#8b8f96),inset 0 0 0 1px color-mix(in srgb,var(--lc,#8b8f96) 22%,transparent)}
.tile.lit .dv-l{background:color-mix(in srgb,var(--lc,#8b8f96) 16%,#fff)}
.dv-o{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dv-o i{padding:4px 8px;background:rgba(179,66,59,.12);font:600 11.5px/1 var(--body);font-style:normal;color:#8d3630}
.dv-g{display:flex;align-items:center;gap:14px}
.dv-g > b{font:700 12px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:#6a6d73}
.dv-g span{display:flex;flex-direction:column;gap:4px;margin-left:6px}
.dv-g span b{font:800 22px/1 var(--disp);text-transform:uppercase;color:#0e0f11}
.dv-g span i{font:500 12.5px/1.2 var(--body);font-style:normal;color:#6a6d73}
.tile.lit .dv img.crest{filter:none}
/* the day's picture takes the room the empty middle used to (dev_home.js dayVisual) */
.hm-day .jobs{flex:0 0 auto}
.hm-day .dv{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.hm-day .dv.res .dv-sc b{font-size:46px}
/* the round as match cards (dev_league.js render.results): both clubs, their colours, the margin */
.rg-s{padding:10px 14px 14px}
.rg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rc{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:8px 10px;padding:14px 14px 12px;text-align:left;color:var(--ink);
  background:linear-gradient(100deg,color-mix(in srgb,var(--h1) 26%,#141519) 0%,#141519 42%,#141519 58%,color-mix(in srgb,var(--a1) 26%,#141519) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transition:box-shadow .15s,transform .12s}
.rc:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.rc.on{box-shadow:inset 0 0 0 2px #e8e9eb}
.rc.mine{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 14px 30px -20px #000}
.rc-t{display:flex;align-items:center;gap:10px;min-width:0}
.rc-t.a{justify-content:flex-end}
.rc-t b{font:800 14px/1.05 var(--disp);letter-spacing:0;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-t.lost{opacity:.6}
.rc-s{display:flex;align-items:baseline;gap:6px}
.rc-s b{font:800 26px/1 var(--disp)}
.rc-s i{font-style:normal;color:var(--ink3)}
.rc-f{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07)}
.rc-f em{font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.rc-f i{font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the inbox reads like mail, not a spreadsheet: a taller row, the desk's colour down its edge */
.ibx .trow{min-height:60px;padding:10px 14px;box-shadow:inset 3px 0 0 rgba(255,255,255,.12)}
.ibx .trow:has(.c-inj){box-shadow:inset 3px 0 0 #d9655f}
.ibx .trow:has(.c-con){box-shadow:inset 3px 0 0 #e8bf7a}
.ibx .trow:has(.c-trd){box-shadow:inset 3px 0 0 #8fb0e8}
.ibx .trow:has(.c-awd){box-shadow:inset 3px 0 0 #f2c35a}
.ibx .trow .t-n{font-size:14px}
.ibx .trow .t-n small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.35;margin-top:4px}
.ibx .trow.on{box-shadow:inset 3px 0 0 #0e0f11}
/* where you stand with the board, on a dial (dev_office.js gauge) */
.bgz{position:relative;display:flex;flex-direction:column;align-items:center;margin:6px 14px 2px;padding-bottom:6px}
.bgz svg{width:180px;height:auto}
.bgz-t{fill:none;stroke:rgba(255,255,255,.08);stroke-width:12;stroke-linecap:round}
.bgz-v{fill:none;stroke:var(--c,#e8e9eb);stroke-width:12;stroke-linecap:round;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 45%,transparent));
  animation:bgzIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes bgzIn{from{stroke-dasharray:0 176}}
.bgz-n{position:absolute;top:44px;font:800 40px/1 var(--disp);color:var(--c,#fff)}
.bgz em{margin-top:-6px;font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3)}
/* the shape of a footballer (dev_squad.js attrShape) */
.shape{display:flex;justify-content:center;padding:8px 0 2px}
.shape svg{width:100%;max-width:300px;height:auto}
.sh-r{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1}
.sh-f{fill:color-mix(in srgb,var(--c1,#8fb0e8) 34%,transparent);stroke:color-mix(in srgb,var(--c1,#8fb0e8) 62%,#e8edf5);stroke-width:2;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c1) 35%,transparent));animation:shIn .5s cubic-bezier(.2,.8,.2,1) both;transform-origin:118px 102px}
@keyframes shIn{from{transform:scale(.6);opacity:0}}
.sh-d{fill:#fff}
.sh-l{fill:var(--ink3);font:700 8.5px var(--disp);letter-spacing:.16em}
.sh-v{fill:var(--ink);font:800 12px var(--disp)}
/* every club wears its colour down the ladder */
.lrow{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--rc) 80%,transparent)}
.lrow:hover:not(.on){box-shadow:inset 3px 0 0 var(--rc),inset 0 0 0 1px rgba(255,255,255,.08)}
.lrow.on{box-shadow:inset 4px 0 0 var(--rc)}
/* draft night: the club on the clock, and a kid drawn as his range */
.dclock{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;box-shadow:inset 4px 0 0 var(--cc,transparent)}
.dclock > span{display:flex;flex-direction:column;gap:6px;min-width:0}
.dclock.on{background:linear-gradient(100deg,color-mix(in srgb,var(--cc) 40%,#e8e9eb),#e8e9eb 60%);animation:dclk 2.4s ease-in-out infinite}
@keyframes dclk{0%,100%{box-shadow:inset 4px 0 0 var(--cc),0 0 0 0 color-mix(in srgb,var(--cc) 45%,transparent)}50%{box-shadow:inset 4px 0 0 var(--cc),0 0 26px -6px color-mix(in srgb,var(--cc) 70%,transparent)}}
.dclock.on img.crest,.dclock.on .crest{filter:none}
.trow .potc{padding-right:6px}
.trow .potc.q6 .potr i{background:#f2c35a}.trow .potc.q5 .potr i{background:#4fbf8b}.trow .potc.q4 .potr i{background:#9ccb6a}
.trow .potc.q3 .potr i{background:#b9bcc4}.trow .potc.q2 .potr i{background:#e3955b}.trow .potc.q1 .potr i{background:#d9655f}
.trow .potc b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.dclock.on{animation:none}}
/* MATCH DAY AS A WALK-THROUGH (dev_match.js): the match, their side, your side, your plan, the walk out */
.mdw{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0}
.md-rail{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.md-rail button{display:flex;align-items:center;gap:10px;padding:11px 14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  color:var(--ink3);text-align:left;transition:background .15s,color .15s,box-shadow .15s}
.md-rail button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.md-rail button em{display:grid;place-items:center;width:22px;height:22px;font:800 11px/1 var(--disp);font-style:normal;background:rgba(255,255,255,.08);color:var(--ink2)}
.md-rail button b{font:800 12.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.md-rail button.past{color:var(--ink2)}
.md-rail button.past em{background:rgba(255,255,255,.16);color:#0e0f11}
.md-rail button.on{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 3px 0 var(--club,#e8e9eb)}
.md-rail button.on em{background:var(--club,#e8e9eb);color:#0e0f11}
.mdw .md-g{flex:1;min-height:0;display:grid;gap:10px;align-content:start;overflow-y:auto}
.md-g.one{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.md-g.them{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
.md-g.them .md-side{grid-row:1/3}
.md-g.you{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.md-g.plan{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.md-g.out{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.md-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.md-foot .btn{height:46px;padding:0 24px;font-size:15px}
.md-kick{display:flex;gap:8px}
.md-kick .btn:not(.dim){background:var(--club,#e8e9eb);color:#fff}
.md-kick .btn:not(.dim):hover{background:#fff;color:#0e0f11}
/* their side wears their colours */
.md-g.them .md-side{box-shadow:inset 0 3px 0 var(--t1,#e8e9eb)}
.md-g.them .md-play-t{box-shadow:inset 0 3px 0 var(--t1,#e8e9eb)}
.md-g.them .sh-s{background:linear-gradient(180deg,color-mix(in srgb,var(--t1) 24%,rgba(255,255,255,.05)),rgba(255,255,255,.03))}
.md-g.them .sh-s:hover{background:color-mix(in srgb,var(--t1) 38%,rgba(255,255,255,.06))}
/* your 23, with faces on the sheet */
/* A SLOT IS FOUR THINGS IN FOUR COLUMNS: the position, his face, his name, his rating. It was three
   columns for four children, so the face sat on top of the position code and the rating wrapped under
   (Lucas, 2026-09-21: "the player images are covering the position"). */
.sheet.mine .sh-s{display:grid;grid-template-columns:30px 30px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:left;padding:5px 10px}
.sheet.mine .sh-s em{font:700 9px/1 var(--disp);font-style:normal;letter-spacing:.1em;color:var(--ink3);text-align:center}
.sheet.mine .sh-s .fc{width:30px;height:30px}
.sheet.mine .sh-s b{font:800 13.5px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet.mine .sh-s u{font:800 14px/1 var(--disp);text-decoration:none;color:var(--ink2)}
.sheet.mine .fc{width:30px;height:30px}
.md-mine .md-lines{margin:10px 14px 4px}
.md-names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:8px 14px}
.md-nm{display:flex;align-items:center;gap:8px;padding:5px 8px;background:rgba(255,255,255,.04);color:var(--ink);text-align:left}
.md-nm b{flex:1;font:700 12.5px/1 var(--disp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-nm u{font:800 13px/1 var(--disp);text-decoration:none;color:var(--ink2)}
/* the twelve plans, on the day */
.md-plays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 14px 4px}
.md-plays .fw-t{padding:8px 8px 9px;gap:4px}
.md-plays .fw-t .pl-mini{max-height:76px}
.md-plays .fw-t b{font-size:11.5px}
/* the walk out */
.md-walk{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;padding:34px 30px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--h1) 55%,#0b0c0e) 0%,#0b0c0e 45%,#0b0c0e 55%,color-mix(in srgb,var(--a1) 55%,#0b0c0e) 100%)}
.mw-t{display:flex;align-items:center;gap:18px;min-width:0}
.mw-t.a{justify-content:flex-end}
.mw-t b{font:800 34px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 3px 18px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-v{font:700 15px/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--ink3)}
.mw-w{grid-column:1/-1;text-align:center;font:700 12px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.md-foot-note{display:block;padding:10px 16px 14px;font:500 12.5px/1.4 var(--body);color:var(--ink3)}
.md-form{display:flex;flex-direction:column}
/* the walk-through's own placement wins over the old one-page grid */
.mdw .md-g > .tile{grid-column:auto;grid-row:auto;min-height:0}
/* ⚠ THEIR SIDE IS LAID OUT FURTHER DOWN THIS FILE (Lucas, 2026-09-22): the 23 across the top, the danger
   men and how they play under it, faces on both sheets at every width. A three-across version lived here
   and fought it at the same specificity — one layout per step, and that step's is his. */
.mdw .md-mine{overflow-y:auto}
/* the sheet inside a scrolling tile takes the height its rows need — six 1fr rows of a zero-height box
   collapse on top of each other, which is what the flat list was hiding */
.mdw .md-mine .sheet{padding:6px 14px 10px;flex:none;grid-template-rows:repeat(6,minmax(42px,auto))}
.mdw .md-mine .sh-l{gap:5px}
.mdw .md-mine .sh-s{padding:5px 9px}
.mdw .md-planroom{overflow-y:auto}
.md-g.one .md-ground,.md-g.one .md-read{align-self:stretch}
.md-form .tug{margin-top:auto}
.mdw .md-g{grid-auto-rows:minmax(0,1fr)}
.md-g.out{grid-template-rows:minmax(0,1fr)}
/* ── WHERE YOU ARE (dev.js AREA_C) — five areas, five colours: on the area, on the room, on the page's tag.
   Lucas, 2026-09-20: "not enough colour or direction… its clear what a header is, its clear what sub navs there
   are". The colour never means anything else. ── */
.hub{position:relative}
.hub.on{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#fff;box-shadow:inset 0 -3px 0 var(--ac,#e8e9eb)}
.hub:not(.on):hover{box-shadow:inset 0 -3px 0 rgba(255,255,255,.18)}
.sub{gap:6px;padding:10px var(--pad-x) 0;align-items:center}
.sub button{padding:7px 14px 6px;font:700 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);background:rgba(255,255,255,.035);transition:background .15s,color .15s,box-shadow .15s}
.sub button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.sub button.on{color:#0e0f11;background:var(--area,#e8e9eb);box-shadow:none}
.sub button.on::after{display:none}
.sub button.back{background:transparent;color:var(--ink3);padding-left:0}
.sub button.back:hover{background:transparent;color:var(--ink)}
.sub .here{font:700 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);padding:7px 0 6px}
.sub .n{margin-left:7px;padding:1px 5px;background:var(--warn);color:#0e0f11;font:800 10px/1.3 var(--disp)}
.sub button.on .n{background:#0e0f11;color:var(--area,#fff)}
/* the page's own tag wears the area's colour, so a header always says which part of the club you are in */
.pg-h .tab.lt{background:var(--area,#e8e9eb);color:#0b0c0e}
.pg-h .tab.lt::before{background:#0b0c0e}
.pg-h h2{letter-spacing:.04em}
.pg-h{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
/* inside a room, "you are here" is the area's colour too — the card's tab strip and the column sets */
.seg button.on{background:transparent;color:#fff;box-shadow:inset 0 -3px 0 var(--area,#e8e9eb)}
.chipline .chip2.on{background:var(--area,#e8e9eb);color:#0b0c0e}
.chipline .chip2.on .n,.chipline .chip2.on u{color:#0b0c0e}
.mini-s.on,.dd.on{box-shadow:inset 0 0 0 1px var(--area,rgba(255,255,255,.3))}
/* the landing page's promise, carried into the form a stranger actually fills in */
.au-free{margin-top:10px;padding:10px 12px;background:rgba(232,191,122,.12);box-shadow:inset 2px 0 0 #e8bf7a;font:600 12.5px/1.35 var(--body);color:#f0d5a8}
.au-seg button{flex:1;text-align:center}
/* the way through the first week — always on screen, never louder than the call in front of you */
.fw-skip{margin-left:auto;margin-right:14px;padding:10px 14px;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font:700 11.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);transition:color .15s,box-shadow .15s}
.fw-skip:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
/* what this account is on, said once in the bar — never a pop-up */
.freeb{margin-right:10px;padding:5px 10px;background:rgba(232,191,122,.14);box-shadow:inset 0 0 0 1px rgba(232,191,122,.45);
  font:700 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#e8bf7a;transition:background .15s}
.freeb:hover{background:rgba(232,191,122,.26);color:#f6dcae}
/* the offer, at a moment the game is good (dev_account.js offerCard) */
.offer{position:relative;margin-bottom:10px;padding:16px 18px 14px;background:linear-gradient(120deg,rgba(232,191,122,.16),rgba(232,191,122,.05) 52%,transparent);
  box-shadow:inset 3px 0 0 #e8bf7a;animation:ukUp .4s cubic-bezier(.2,.8,.2,1) both}
.offer-k{display:block;font:700 10px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:#e8bf7a}
.offer b{display:block;margin:9px 0 6px;font:800 24px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase}
.offer p{margin:0;max-width:760px;font:500 13.5px/1.5 var(--body);color:var(--ink2)}
.offer-a{display:flex;gap:8px;margin-top:12px}
.offer-a .btn{height:36px;font-size:12.5px}
.offer-a .btn:not(.dim){background:#e8bf7a;color:#0b0c0e}
.offer-a .btn:not(.dim):hover{background:#f6dcae}
.card .offer{margin:14px}
/* the way across, on whichever side of the form you are on */
.au-alt{display:block;width:100%;margin-top:14px;padding:12px 10px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  font:600 12.5px/1.3 var(--body);color:var(--ink2);transition:background .15s,box-shadow .15s,color .15s}
.au-alt:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.au-alt u{text-decoration:none;color:#e8bf7a;font-weight:800;letter-spacing:.04em}
/* a result card at two-up: the crest may go before the name runs out of room */
@media (max-width:1500px){.rg{grid-template-columns:minmax(0,1fr)}}
.rc-s b{font-size:24px}
/* the match header at panel width — the club's name in full, smaller, rather than "HA…" */
.mh-sm{gap:10px;padding:14px 14px 12px}
.mh-sm .mh-n{font-size:15px;letter-spacing:.02em}
.mh-sm .mh-v.score{font-size:26px}
.mh-sm .mh-w{font-size:10.5px}
.ft-n b{font-size:12.5px;letter-spacing:0}
/* ⚠⚠ THE WINDOW IS NOT ALWAYS 1600×950. Windows display scaling turns a 1080p screen into ~1536×864 CSS
   pixels, and these rooms were laid out in fixed rows — so the foot of every tile was cropped (Lucas,
   2026-09-21: "look at all that cut off text"). Short or narrow: the rows take the height they need and the
   room scrolls, rather than the words being cut in half. */
@media (max-height:920px), (max-width:1500px){
  .mdw{overflow-y:auto;overflow-x:hidden}
  .mdw .md-g{grid-auto-rows:minmax(250px,auto)}
  .md-g.you,.md-g.out{grid-template-columns:minmax(0,1fr)}
  .md-g.them{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .mdw .md-g.them .md-side,.mdw .md-g.them .md-danger,.mdw .md-g.them .md-read{grid-column:auto;grid-row:auto}
  .pg-b{overflow-y:auto}
  .today-g{grid-template-rows:none;grid-auto-rows:minmax(228px,auto)}
}
/* THE BAR FITS THE WINDOW. On a 1122px-wide window the areas, the search and the account crowded past the
   right edge — and with the shell clipping, the account button simply was not there. Below 1340px the bar
   tightens instead of overflowing: shorter area buttons, a narrower search, a truncated save name. */
.top{gap:14px}
.hubs{min-width:0;flex-shrink:1;overflow:hidden}
.me{min-width:0}
.me-s{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1340px){
  :root{--pad-x:26px}
  /* three fixtures across a narrow tile cannot hold a long club name: they stack instead */
  .hm-frm .ft-next{flex-direction:column;align-items:stretch}
  .hm-frm .ft-n{flex:none}
  /* a stat's caption takes a second line rather than losing its last words */
  .cell i{white-space:normal;line-height:1.25;text-align:center}
  .top{gap:10px;padding-top:14px}
  .hub{padding:8px 11px 7px;font-size:13px;letter-spacing:.1em}
  .mnu{margin-right:8px;padding:7px 10px 6px 8px;font-size:11.5px;letter-spacing:.1em}
  .gs input{width:170px}
  .gs input:focus{width:230px}
  .me{gap:8px;letter-spacing:.1em}
  .me-s{max-width:150px}
  .cont{margin-left:6px;padding:8px 12px;letter-spacing:.1em}
  .freeb{margin-right:6px}
}
/* five across, an interchange slot is narrower than a sheet slot: its name is set a size down so it fits */
@media (max-width:1500px){
  .ts-l.bench .ts-s{gap:7px;padding-left:4px}
  .ts-l.bench .ts-s .fc{width:34px;height:34px}
  .ts-l.bench .ts-s{grid-template-columns:34px minmax(0,1fr) auto}
  .ts-l.bench .ts-w > b{font-size:13.5px;letter-spacing:0}
}
/* the interchange is five across; below 1240 it takes two rows rather than cut its names (four across
   leaves the fifth man wrapping into the label column, 104px wide — never do that) */
@media (max-width:1240px){
  .tsheet{grid-template-rows:repeat(7,minmax(52px,auto));overflow-y:auto}
  .ts-l.bench{grid-template-columns:104px repeat(3,minmax(0,1fr));grid-auto-rows:minmax(48px,auto)}
  .ts-l.bench > em{grid-row:span 2}
}
/* on a short window the band that names the match gives its room to the sheet under it */
@media (max-height:800px){
  .md-h{padding:10px 18px 9px}
  .md-h .mh-n{font-size:21px}
  .md-h .mh-t .crest{width:32px;height:32px}
  .md-h .mh-w{gap:14px;font-size:9.5px}
}
@media (max-width:1180px){
  .md-rail button{padding:9px 10px;gap:7px}
  .md-rail button b{font-size:10.5px;letter-spacing:.08em}
  .md-rail button em{width:18px;height:18px;font-size:10px}
  /* the week stays ONE row: three across cost 150px of a 626px window, and Home may not scroll */
  .wkc{gap:7px;padding:9px 8px}
  .wkc-x b{font-size:11px;letter-spacing:0;white-space:normal;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .wkc-x i{display:none}
  .wkc-d b{font-size:17px}
  .hub{padding:8px 8px 7px;font-size:12px}
  .gs input{width:130px}
  .me-s{max-width:110px}
}
/* a tile is never allowed to eat a word: its lists scroll inside it */
.tile .mlad,.tile .news3,.tile .jobs{overflow-y:auto}
/* long names still need their room: these grids fit themselves to the window instead of a fixed count */
.sf{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.cb{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.cb-n b{font-size:13px;letter-spacing:0}
.ce{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;overflow-wrap:break-word}
/* at laptop width a wide table keeps its columns and scrolls sideways — a name is never half a name */
@media (max-width:1460px){
  .pg-2 .scroll{overflow-x:auto}
  .pg-2 .scroll > .trow,.pg-2 .trow.hd{min-width:1040px}
  .fring{grid-template-columns:minmax(0,1fr);justify-items:center}
  .fring-l{width:100%}
  .st-t .rl-o{font-size:10.5px;letter-spacing:.06em;padding:0 6px}
}
/* a headline in the Home inbox tile gets a second line rather than losing its last word */
.news3 > span > span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
/* FULL TIME (dev_postmatch.js) — the room the siren leads into */
.pmw{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;overflow:hidden}
.pmh{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px 18px;padding:14px 22px 11px;
  background:linear-gradient(100deg,color-mix(in srgb,var(--h1) 48%,#0b0c0e) 0%,#0b0c0e 44%,#0b0c0e 56%,color-mix(in srgb,var(--a1) 48%,#0b0c0e) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.pmh-t{display:flex;align-items:center;gap:12px;min-width:0}
.pmh-t.a{justify-content:flex-end}
.pmh-t b{font:800 22px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 3px 16px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmh-s{display:flex;flex-direction:column;align-items:center;gap:4px}
.pmh-s b{font:800 40px/1 var(--disp)}
.pmh-s{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center}
.pmh-s i{font-style:normal;color:var(--ink3);font-size:20px}
.pmh-s em{flex-basis:100%;text-align:center;font:700 11px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.pmh-q{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pmh-q span{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:5px 8px;background:rgba(0,0,0,.35)}
.pmh-q em{font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.16em;color:var(--ink3)}
.pmh-q b{font:800 16px/1 var(--disp)}
.pmh-q i{font:600 14px/1 var(--body);font-style:normal;color:var(--ink3)}
.pmh-w{grid-column:1/-1;text-align:center;font:700 10.5px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.pm-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
.pm-rail button{justify-content:center}
.pm-body{flex:1;min-height:0;overflow-y:auto}
/* a team's box score is one card: it fills the room and scrolls inside, totals pinned under it */
.pm-body > .card{height:100%;min-height:0}
.pm-body > .card > .scroll{min-height:80px}
/* the press conference is a room of Full Time, not a trip out to the league results */
.pm-press{overflow-y:auto}
.pm-press .stack{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px;padding:0 14px 14px}
.pm-rail.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:10px;align-items:start}
.pm-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.pm-ts{display:flex;flex-direction:column;gap:8px;padding:12px}
.pm-tr{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:10px}
.pm-tr b{font:800 16px/1 var(--disp);text-align:center;color:var(--ink3)}
.pm-tr b.up{color:var(--ink)}
.pm-tr em{grid-column:1/-1;margin-top:-4px;text-align:center;font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.pm-bar{display:flex;height:8px;background:rgba(255,255,255,.06)}
.pm-bar i{display:block;height:100%;background:color-mix(in srgb,var(--h1,#e8e9eb) 72%,#fff)}
.pm-bar u{display:block;height:100%;background:color-mix(in srgb,var(--a1,#8b8f96) 72%,#fff)}
.pm-bog{display:flex;align-items:center;gap:12px;margin:4px 14px 14px;padding:12px 14px;background:linear-gradient(100deg,rgba(242,195,90,.16),transparent);box-shadow:inset 3px 0 0 #f2c35a}
.pm-bog span{display:flex;flex-direction:column;gap:3px}
.pm-bog em{font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#f2c35a}
.pm-bog b{font:800 19px/1 var(--disp);text-transform:uppercase}
.pm-bog i{font:500 12px/1 var(--body);font-style:normal;color:var(--ink3)}
.pm-note{margin:0;padding:10px 14px 0;font:500 12px/1.4 var(--body);color:var(--ink3)}
.pm-votes{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.pm-v{display:grid;grid-template-columns:30px 28px minmax(0,1fr);align-items:center;gap:9px;padding:4px 8px;background:rgba(255,255,255,.035)}
.pm-v .fc{width:28px;height:28px}
.pm-votes.tight .pm-v{padding:3px 8px}
.pm-v.mine{background:rgba(255,255,255,.1);box-shadow:inset 3px 0 0 var(--club,#e8e9eb)}
.pm-v > b{font:800 18px/1 var(--disp);text-align:center}
.pm-v span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-v em{font:800 13px/1.1 var(--disp);font-style:normal;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-v i{font:500 11px/1 var(--body);font-style:normal;color:var(--ink3)}
.pm-side{padding:9px 12px 3px}
.pm-sh{display:flex;align-items:center;gap:8px;font:800 13px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.pm-ls{display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:wrap}
.pm-ls > em{width:62px;font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.pm-l{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;background:rgba(255,255,255,.05)}
.pm-l .fc{width:24px;height:24px}
.pm-l em{font:700 12px/1 var(--disp);font-style:normal;text-transform:uppercase}
.pm-l b{font:800 15px/1 var(--disp)}
.pm-l i{font:600 9.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.pm-cost{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 14px 5px;padding:8px 10px;background:rgba(255,255,255,.04)}
.pm-cost.inj{box-shadow:inset 3px 0 0 #d9655f}
.pm-cost.rep{box-shadow:inset 3px 0 0 #e8bf7a}
.pm-cost b{font:800 13.5px/1.1 var(--disp);text-transform:uppercase}
.pm-cost i{font:500 11.5px/1 var(--body);font-style:normal;color:var(--ink3)}
.pm-cost u{font:700 12px/1 var(--disp);text-decoration:none;color:var(--ink2)}


/* Keep setup controls outside the scrolling stage at every viewport height. */
.fw{overflow:hidden}
.fw-h,.fw-f{flex-shrink:0}
.fw-stage{overflow-y:auto;overflow-x:hidden;display:block;overscroll-behavior:contain}
.fw-stage .fw-body{min-height:100%;height:auto}
.fw-f{position:relative;z-index:5;background:#101114;padding-bottom:8px;flex-wrap:wrap}
.fw-go{margin-left:auto}
@media(max-width:900px){.fw-h{flex-wrap:wrap}.fw-steps{margin-left:0;flex-wrap:wrap}.fw-body{grid-template-columns:1fr}.fw-f{gap:8px}.fw-skip{max-width:55%;white-space:normal}}
#main[data-room="board"]{--ink2:#d3d6dc;--ink3:#b6bbc4}
#main[data-room="board"] .ps:disabled{cursor:default}
#main[data-room="board"] .ps.off{opacity:1}
#main[data-room="board"] .ps small{line-height:1.4}
/* Both matchday sheets use the same slots and faces, including narrow screens. */
.mdw .md-g:is(.them,.you) .sheet .sh-s{grid-template-columns:30px 30px minmax(0,1fr) 28px;gap:9px;padding:5px 9px}
.mdw .md-g:is(.them,.you) .sheet .sh-s .fc{display:block;width:30px;height:30px}
.mdw .md-side{overflow-y:auto}
.mdw .md-side .sheet{padding:6px 14px 10px;flex:none;grid-template-rows:repeat(6,minmax(42px,auto))}
.mdw .md-side .sh-l{gap:5px}

.mdw .md-g.them{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-rows:auto;overflow-y:auto}
.mdw .md-g.them .md-side{grid-column:1/-1;grid-row:1}
.mdw .md-g.them .md-danger{grid-column:1;grid-row:2}
.mdw .md-g.them .md-play-t,.mdw .md-g.them .md-read{grid-column:2;grid-row:2}

@media(max-width:1000px){
  .fw-body.fw-tac{grid-template-columns:minmax(0,1fr)}
  .fw-tac .fw-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(130px,auto)}
  .fw-side{min-width:0}
}
@media(max-width:600px){.fw-tac .fw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Selection guidance stays readable; roles are explicitly opened without shifting the sheet. */
.ts-help{color:#e0e4eb;font-size:14px;line-height:1.7;margin:12px 16px}
.ts-help kbd{color:#fff;font:600 12px/1.4 var(--body);background:#363d49;border:1px solid #647084;border-radius:4px;padding:2px 5px;white-space:nowrap}
.ts-role-panel{position:fixed;z-index:100;right:24px;bottom:88px;width:min(540px,calc(100vw - 32px));max-height:60vh;overflow:auto;background:#202630;color:#f3f5f8;border:1px solid #778397;border-radius:10px;box-shadow:0 12px 40px #0009;padding:18px}
.ts-role-panel .ts-role{margin:0;padding:12px 0 0}
.ts-role-panel .ts-role em{color:#e0e4eb}
.ts-role-close{display:block;margin-left:auto;color:#f3f5f8;background:#363d49;padding:8px 12px;border-radius:4px}

/* Keep touch and trackpad scrolling within an open dropdown. */
.dd-m{overscroll-behavior:contain}