/* The new UI, running on the real engine. Design language from the weekly-loop mock-ups. */
:root{
  --ground:#060709;
  --ink:#f3f4f6; --ink2:rgba(243,244,246,.66); --ink3:rgba(243,244,246,.42); --ink4:rgba(243,244,246,.18); --ink5:rgba(243,244,246,.075); --ink6:rgba(243,244,246,.04);
  --good:#7fc7a6; --warn:#e8bf7a; --bad:#eb8f8a;
  --disp:'Saira Condensed','Arial Narrow',Arial,sans-serif; --body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1); --pad-x:44px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
button:focus-visible,input:focus-visible{outline:1px solid var(--ink3);outline-offset:3px}
img{max-width:100%;display:block}
.num,.trow,.cells{font-variant-numeric:tabular-nums}
.up{color:var(--good)}.down{color:var(--bad)}.warn{color:var(--warn)}
.c-inj{color:var(--bad)}.c-fit{color:var(--good)}.c-con{color:var(--warn)}.c-trd{color:#c3a6e8}.c-clb{color:var(--ink2)}

/* shell */
.app{position:relative;height:100%;display:flex;flex-direction:column;isolation:isolate}
.light{position:fixed;z-index:0;width:1100px;height:1100px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,currentColor,transparent);opacity:.16;color:#2f63d6;left:-420px;top:-460px}
.light.b{color:#d49a22;opacity:.1;left:auto;right:-460px;top:-380px}
.top{position:relative;z-index:3;display:flex;align-items:center;gap:22px;padding:18px var(--pad-x) 0}
.hubs{display:flex;gap:2px}
.hub{padding:9px 18px 8px;font:600 15px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:color .25s,background .25s}
.hub:hover{color:var(--ink2)}
.hub.on{background:#e8e9eb;color:#0e0f11}
.mnu{display:inline-flex;align-items:center;gap:8px;margin-right:14px;padding:8px 14px 7px 10px;border:1px solid var(--ink4);font:600 13px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);transition:color .2s,border-color .2s,background .2s}
.mnu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mnu:hover{color:var(--ink);border-color:var(--ink3);background:var(--ink6)}
.top-sp{flex:1}
.me{display:flex;align-items:center;gap:12px;font:600 12.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.me .crest{width:28px;height:28px}
.sub{position:relative;z-index:3;display:flex;gap:26px;padding:14px var(--pad-x) 0}
.sub button{position:relative;padding:4px 0;font:500 13px/1 var(--body);color:var(--ink3);transition:color .2s}
.sub button:hover{color:var(--ink2)}
.sub button.on{color:var(--ink)}
.sub button.on::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:#e8e9eb}
main{position:relative;z-index:2;flex:1;min-height:0;padding:16px var(--pad-x) 20px}

/* page furniture */
.pg-h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pg-h h2{margin:0;font:800 30px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.pg-h .by{margin-left:auto;color:var(--ink3);font-size:12.5px}
.tab{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 18px 0 10px;background:#2a2b2f;color:#cdd0d5;font:700 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.tab::before{content:"";flex:none;width:3px;height:12px;background:#e8e9eb}
.tab.lt{background:#e8e9eb;color:#0e0f11}
.tab.lt::before{background:#0e0f11}
.pg{height:100%;display:flex;flex-direction:column;min-height:0}
.pg-b{flex:1;min-height:0;display:grid;gap:10px}
.pg-2{grid-template-columns:minmax(0,1fr) 420px}
.card{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)}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 14px 10px}
.card-h .tab{height:21px;font-size:10.5px}
.card-h .by{margin-left:auto;color:var(--ink3);font-size:12px}
.scroll{overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--ink4) transparent}
.cells{display:flex;align-items:stretch}
.cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:11px 6px;border-left:1px solid rgba(255,255,255,.07);text-align:center}
.cell:first-child{border-left:0}
.cell b{font:800 24px/.9 var(--disp);white-space:nowrap}
.cell b small{font-size:.55em;color:var(--ink3);margin-left:3px}
.cell i{font:700 9.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cell.hi{background:#e8e9eb}
.cell.hi b,.cell.hi b small{color:#0e0f11}
.cell.hi i{color:#4a4d53}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 14px;border-top:1px solid rgba(255,255,255,.045);font-size:13.5px;color:var(--ink2)}
.kv b{font:700 15px/1 var(--disp);color:var(--ink);letter-spacing:.03em}
.note{padding:10px 14px;color:var(--ink3);font-size:12.5px}
.chipline{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.chip2{display:inline-flex;align-items:center;height:24px;padding:0 10px;background:rgba(255,255,255,.06);font:700 11px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);cursor:pointer}
.chip2.on{background:#e8e9eb;color:#0e0f11}
.bar{position:relative;display:block;width:100%;height:7px;background:rgba(255,255,255,.07)}
.bar i{position:absolute;left:0;top:0;bottom:0;width:var(--v);background:var(--ink2)}
.bar i.good{background:var(--good)}.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--bad)}
.pips{display:inline-flex;gap:3px}
.pips i{width:14px;height:6px;background:rgba(255,255,255,.14)}
.pips i.w{background:var(--good)}.pips i.l{background:var(--bad)}

/* rows */
.trow{display:grid;align-items:center;column-gap:12px;padding:6px 14px;border-top:1px solid rgba(255,255,255,.045);width:100%;text-align:left;color:var(--ink)}
.trow.hd{border-top:0;padding-bottom:8px;font:700 9.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.trow.on{background:#e8e9eb;color:#0e0f11}
.trow.on .t-n,.trow.on .t-s,.trow.on .t-b{color:#0e0f11}
.trow:hover:not(.hd):not(.on){background:rgba(255,255,255,.04)}
.t-n{font:700 16px/1.05 var(--disp);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-n small{display:block;margin-top:3px;font:500 11px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--ink3)}
.t-s{font-size:13px;color:var(--ink2)}
.t-b{font:800 19px/1 var(--disp)}
.r{text-align:right}
.fc{position:relative;display:block;flex:none;width:36px;height:36px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.fc img{position:absolute;left:-32%;top:-12%;width:165%;height:auto;max-width:none}
.fc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cc,#e8e9eb)}
.fc.none{display:grid;place-items:center;font:700 12px/1 var(--disp);color:var(--ink3)}

/* the player profile */
.who{display:grid;grid-template-columns:132px minmax(0,1fr);height:146px;background:linear-gradient(180deg,rgba(26,27,30,.9),rgba(12,13,15,.94));overflow:hidden}
.who .fc{width:132px;height:146px}
.who-t{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 16px;min-width:0}
.who-n{font:800 34px/.9 var(--disp);text-transform:uppercase}
.who-l{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.attr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;padding:10px 14px 12px}
.at{display:grid;grid-template-columns:104px minmax(40px,1fr) 34px;align-items:center;gap:10px;font-size:12.5px;color:var(--ink2)}
.at b{font:700 13px/1 var(--disp);text-align:right;color:var(--ink)}
.empty{padding:40px 14px;color:var(--ink3);text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:42px;padding:0 18px;background:#e8e9eb;color:#0e0f11;font:800 14px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.btn.dim{background:rgba(255,255,255,.07);color:var(--ink2)}
.err{color:var(--bad);font-size:13px;min-height:1.4em}
@media (max-width:1100px){.pg-2{grid-template-columns:minmax(0,1fr)}}


/* compact tables (Settings › On this device — /play's aflm_density) */
body.compact{font-size:14px}
body.compact .trow{padding-top:3px;padding-bottom:3px}
body.compact .trow .fc{width:28px;height:28px}
body.compact .t-n{font-size:14.5px}
body.compact .t-b{font-size:17px}
body.compact .kv{padding:6px 14px;font-size:13px}
body.compact .card-h{padding:9px 14px 7px}
body.compact .cell{padding:8px 6px}
body.compact .cell b{font-size:21px}
body.compact .pg-h{margin-bottom:8px}
body.compact .pg-h h2{font-size:26px}
.light{transition:color .8s var(--ease)}

/* a hairline of light around a real crest: navy and black logos (Carlton, Adelaide, Collingwood) otherwise
   sink into the near-black ground. Nothing on a light surface shows it. */
img.crest{filter:drop-shadow(0 0 .6px rgba(255,255,255,.55)) drop-shadow(0 0 5px rgba(255,255,255,.07))}
.trow.on img.crest,.cell.hi img.crest,.hub.on img.crest{filter:none}