/* Trophora — shared styles. Floodlit club office at night. Single dark theme. */
:root{
  --bg:#0c1520; --panel:#132130; --panel2:#1a2c3e; --line:#26405a;
  --fg:#e9eff3; --muted:#8fa4b6; --accent:#f2b134; --accent-ink:#1d1400;
  --good:#4cc38a; --bad:#ef6461; --draw:#9fb0bf;
  --f-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 var(--f-body);overflow-x:hidden}
[hidden]{display:none!important}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1180px;margin:0 auto;padding-top:14px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:.01em;margin:0;text-wrap:balance}
h2{font-size:22px;text-transform:uppercase}
h3{font-size:17px;text-transform:uppercase;color:var(--muted);letter-spacing:.06em}
.num,td.n,th.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
td.n,th.n{text-align:right}
.muted{color:var(--muted)}
.sm{font-size:13px}
.good{color:var(--good)} .bad{color:var(--bad)}
.warn{color:var(--bad);font-weight:600}
.err{color:var(--bad);font-weight:600;font-size:14px}
.between{justify-content:space-between}

/* buttons + controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 16px;font-weight:600;line-height:1.2;min-height:40px;letter-spacing:.01em;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{border-color:color-mix(in srgb,var(--muted) 70%,var(--line));background:color-mix(in srgb,var(--panel2) 85%,var(--fg))}
.btn:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 14px color-mix(in srgb,var(--accent) 22%,transparent)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 90%,#fff);border-color:color-mix(in srgb,var(--accent) 90%,#fff)}
.btn.small{padding:5px 12px;font-size:13px;min-height:32px;border-radius:8px}
.btn.danger{border-color:color-mix(in srgb,var(--bad) 60%,var(--line));color:#ffc9c7}
.btn:disabled{opacity:.4;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;background:color-mix(in srgb,var(--bg) 55%,var(--panel));border:1px solid var(--line);border-radius:11px;max-width:100%}
.seg button{background:transparent;border:0;border-radius:8px;padding:7px 13px;font-weight:600;color:var(--muted);min-height:34px;transition:background-color .15s ease,color .15s ease}
.seg button:hover{color:var(--fg);background:color-mix(in srgb,var(--panel2) 70%,transparent)}
.seg button.on{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 6px color-mix(in srgb,var(--accent) 25%,transparent)}
.seg button:focus-visible{outline-offset:-3px}
input[type=text],input[type=number],input[type=search],select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:7px 10px;min-height:36px;min-width:0;max-width:100%}
input[type=color]{width:52px;height:36px;padding:2px;background:var(--panel2);border:1px solid var(--line);border-radius:5px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.chk{width:18px;height:18px;accent-color:var(--accent);margin:0}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld>span{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.fld.inline{flex-direction:row;align-items:center;gap:8px}
.ed-grid{display:grid;gap:10px 12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr))}
.ed-grid .span2{grid-column:span 2}
@media (max-width:420px){.ed-grid .span2{grid-column:1/-1}}
.colors{display:flex;gap:8px;align-items:center}

/* layout */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.lg{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:900px){.lg{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;min-width:0}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0}

/* header + tabs */
.top{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-block:6px 12px}
.top-id{min-width:0;flex:1 1 200px}
.top h1{font-size:28px;text-transform:uppercase;line-height:1;overflow-wrap:anywhere}
.top .meta{color:var(--muted);font-size:14px;margin-top:4px}
.top .meta b{color:var(--fg);font-family:var(--f-mono);font-weight:500}
.top-kpis{display:flex;gap:18px;margin:0}
.top-kpis div{display:flex;flex-direction:column}
.top-kpis dt{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.top-kpis dd{margin:0;font:700 18px var(--f-mono)}
.top-kpis dd.neg{color:var(--bad)}
/* main navigation: 6 sections + sub-page pills (phone: bottom tab bar) */
.mainnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;padding:4px;margin-top:2px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.mainnav .mn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 10px;background:transparent;border:0;border-radius:10px;color:var(--muted);
  font:600 15px var(--f-display);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.mainnav .mn svg{width:20px;height:20px;flex:none}
.mainnav .mn:hover{color:var(--fg);background:var(--panel2)}
.mainnav .mn.on{color:var(--accent-ink);background:var(--accent);box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 25%,transparent)}
.mainnav .mn:focus-visible{outline-offset:2px}
.mainnav .nb{position:absolute;top:5px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font:700 11px/18px var(--f-mono);letter-spacing:0}
.subnav{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 2px}
.subnav button{position:relative;background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 15px;min-height:36px;color:var(--muted);font:600 14px var(--f-body);white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.subnav button:hover{color:var(--fg);border-color:var(--muted)}
.subnav button.on{color:var(--fg);background:var(--panel2);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.subnav .sb-dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--bad)}
.subnav-title{padding:14px 0 0}.subnav-title h2{font-size:15px;letter-spacing:.08em;color:var(--muted)}
@media (max-width:860px){ .mainnav .mn{font-size:13px;gap:6px;padding:8px 6px} .mainnav .mn svg{width:18px;height:18px} }
@media (max-width:720px){
  .mainnav{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;border-radius:16px 16px 0 0;border-width:1px 0 0;gap:0;
    padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));
    background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -6px 24px rgba(0,0,0,.35)}
  .mainnav .mn{flex-direction:column;gap:3px;min-height:52px;padding:6px 2px;font:600 10.5px var(--f-body);letter-spacing:.02em;text-transform:none}
  .mainnav .mn svg{width:22px;height:22px}
  .mainnav .mn.on{background:transparent;color:var(--accent);box-shadow:none}
  .mainnav .mn.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
  .mainnav .nb{top:3px;right:calc(50% - 22px)}
  .wrap{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
  .subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-top:10px;
    mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .subnav::-webkit-scrollbar{display:none}
  /* long option rows (countries, sub-sections) scroll sideways instead of stacking */
  .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){ .mainnav .mn,.subnav button,.btn,.seg button{transition:none} }
.tabs{position:relative;display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;border-bottom:1px solid var(--line);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tabs button{flex:none;background:none;border:0;border-bottom:2px solid transparent;padding:9px 11px;font:600 15px var(--f-display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--fg);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline-offset:-3px}
main{padding-top:18px;outline:none}

/* crest, dots, chips */
.crest{width:46px;height:54px;flex:none;clip-path:polygon(0 0,100% 0,100% 64%,50% 100%,0 64%);display:grid;place-items:start center;padding-top:12px;font:700 14px var(--f-display);letter-spacing:.04em}
.dot{display:inline-block;width:12px;height:12px;border-radius:2px;flex:none;border:1px solid rgba(255,255,255,.25);vertical-align:middle}
.clubcell{display:inline-flex;align-items:center;gap:8px;min-width:0}
.chip-tag{display:inline-block;padding:1px 6px;border-radius:3px;font:700 10.5px/16px var(--f-mono);text-transform:uppercase;letter-spacing:.04em;background:var(--panel2);border:1px solid var(--line);color:var(--muted);white-space:nowrap;vertical-align:middle}
.chip-tag.bad{background:color-mix(in srgb,var(--bad) 20%,transparent);border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:#ffc9c7}
.chip-tag.good{background:color-mix(in srgb,var(--good) 18%,transparent);border-color:color-mix(in srgb,var(--good) 50%,transparent);color:#c3f1da}
.chip-tag.warn{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:#ffe2a6}
.tag-result{color:#ffe2a6;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.tag-transfer{color:#bcd9ff;border-color:#3d6a9e}
.tag-squad{color:#c3f1da;border-color:#2f7a57}
.tag-league{color:#e7d0ff;border-color:#6a4b8e}
.pos{display:inline-block;width:30px;text-align:center;border-radius:3px;font:700 11px/18px var(--f-mono)}
.pos-GK{background:#e8c25a;color:#231a00}.pos-DF{background:#4f8fd6;color:#04121f}.pos-MF{background:#4cc38a;color:#03170d}.pos-FW{background:#ef6461;color:#200404}
.ovr{font:700 14px var(--f-mono)}
.fit{display:inline-block;width:46px;height:6px;background:var(--panel2);border-radius:3px;vertical-align:middle;overflow:hidden}
.fit i{display:block;height:100%}
.form{display:flex;gap:3px;flex-wrap:wrap}
.form span{width:18px;height:18px;border-radius:3px;font:700 11px/18px var(--f-mono);text-align:center;color:#0c1520}
.form em{font-size:12px;font-style:normal}
.f-W{background:var(--good)}.f-D{background:var(--draw)}.f-L{background:var(--bad)}
.meter{display:block;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden;width:100%;max-width:140px}
.meter i{display:block;height:100%;background:var(--accent)}
.kpi{font:700 52px/1 var(--f-display);font-variant-numeric:tabular-nums}
.kpi small{font-size:.4em;color:var(--muted);font-family:var(--f-body);font-weight:600;margin-left:6px}
.stars{color:var(--accent);letter-spacing:2px;font-size:12px}
.star{background:none;border:0;padding:2px 4px;font-size:16px;line-height:1;color:var(--muted)}
.star[aria-pressed=true]{color:var(--accent)}

/* tables */
.tbl{position:relative;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:6px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);white-space:nowrap;vertical-align:middle}
tr.me td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
tr.out td{opacity:.62}
tr.champ td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.zone-top td:first-child{box-shadow:inset 3px 0 0 var(--good)}
tr.zone-bot td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
td .row{flex-wrap:nowrap;gap:4px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* office */
.fixture{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;text-align:center;padding:4px 0 6px}
.fixture .side{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.fixture .nm{font:700 20px var(--f-display);text-transform:uppercase;line-height:1.05;overflow-wrap:anywhere}
.fixture .vs{font:700 13px/1.4 var(--f-mono);color:var(--muted)}
.news{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.news li{border-left:2px solid var(--line);padding-left:10px}
.news .wk{font-family:var(--f-mono);color:var(--muted);font-size:12px;margin-right:6px}
.offer{border:1px solid var(--line);border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:8px}
.plist{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:14px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.ftscore{font:700 34px var(--f-display);text-transform:uppercase;text-align:center;line-height:1.1}
.ftscore .num{color:var(--accent)}
.res-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:14px}
.res-cols h4{margin:0 0 4px;font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.res-cols ul,.mini-list{list-style:none;margin:0;padding:0}

/* tactics board */
.board{position:relative;width:100%;max-width:520px;aspect-ratio:68/80;background:repeating-linear-gradient(180deg,#2a6c41 0 10%,#2f7748 10% 20%);border:2px solid rgba(255,255,255,.75);border-radius:4px;margin-inline:auto;overflow:hidden}
.board:before{content:"";position:absolute;left:22%;right:22%;top:-2px;height:17%;border:2px solid rgba(255,255,255,.6);border-top:0}
.board:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:0;border-top:2px dashed rgba(255,255,255,.35)}
.chip{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;width:84px;text-align:center}
.chip .c{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--f-mono);border:2px solid}
.chip .l{font:600 12px/1.1 var(--f-body);background:rgba(8,16,24,.78);padding:1px 5px;border-radius:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .l.off{color:#ffb3ad}
@media (max-width:480px){.chip{width:64px}.chip .l{font-size:11px}.chip .c{width:26px;height:26px;font-size:11px}}

/* fixtures + cup */
.rounds{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.rd{border:1px solid var(--line);border-radius:6px;padding:10px;min-width:0}
.rd.cur{border-color:var(--accent)}
.rd-h{font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.rd.cur .rd-h{color:var(--accent)}
.fx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;font-size:13px;padding:2px 0}
.fx>span:first-child{text-align:right}
.fx>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx.me{color:var(--accent);font-weight:600}
.fx .w{font-weight:700;color:var(--fg)}
.fx.me .w{color:var(--accent)}
.fx .lose{color:var(--muted)}
.fx-sub{font-size:11.5px;color:var(--muted);text-align:center;margin:-1px 0 3px}

/* club picker */
.hero{padding-block:28px 18px}
.hero h1{font-size:clamp(40px,11vw,72px);text-transform:uppercase;line-height:.95}
.hero h1 span{color:var(--accent)}
.hero p{max-width:60ch;color:var(--muted);margin:12px 0 0}
.pick{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pick button{display:flex;gap:12px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;min-width:0}
.pick button:hover{border-color:var(--accent)}
.pick-txt{display:flex;flex-direction:column;min-width:0}
.pick .nm{font:700 18px var(--f-display);text-transform:uppercase;line-height:1.1;overflow-wrap:anywhere}
.pick-sec{margin-top:18px}
.pe-row{display:grid;grid-template-columns:auto minmax(0,1fr) 80px auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
@media (max-width:560px){.pe-row{grid-template-columns:auto minmax(0,1fr) 72px}.pe-row .colors{grid-column:2/-1}}

/* ---------- nationality, player links, toggles, roles ---------- */
.nat{display:inline-block;font:700 10px/15px var(--f-mono);padding:0 4px;border-radius:3px;background:var(--panel2);border:1px solid var(--line);color:var(--fg);letter-spacing:.03em;vertical-align:middle;white-space:nowrap}
.natcell{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.plink{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.plink:hover{color:var(--accent);text-decoration-color:currentColor}
.switch{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;font-weight:600;min-height:32px}
.switch span{position:relative;flex:none;width:38px;height:22px;border-radius:11px;background:var(--panel2);border:1px solid var(--line)}
.switch span:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:left .15s}
.switch[aria-checked=true] span{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked=true] span:after{left:19px;background:var(--accent-ink)}
.tog-row{display:flex;flex-direction:column}
.roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.roles li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.roles select{margin-left:auto;min-height:32px;padding:4px 8px;font-size:13px}
.chip .r{font:600 9.5px/1.3 var(--f-body);background:rgba(8,16,24,.7);padding:0 4px;border-radius:3px;color:#ffe2a6;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- playing cards ---------- */
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cardcell{display:flex;flex-direction:column;gap:6px;min-width:0}
.cc-act{gap:6px;justify-content:space-between}
.tcard{--tc1:#2b3e52;--tc2:#d9e2ea;position:relative;display:flex;flex-direction:column;gap:5px;width:100%;min-width:0;margin-inline:auto;
  padding:12px 10px 8px;border-radius:12px 12px 16px 16px;border:2px solid var(--t-edge);color:var(--ink);
  background:linear-gradient(160deg,var(--t-a),var(--t-b) 46%,var(--t-c));box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.28);overflow:hidden;text-align:left}
.tcard:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.26) 46%,transparent 60%);pointer-events:none}
.tcard:after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--tc1) 0 62%,var(--tc2) 62%)}
.tcard>*{position:relative}
.tc-bronze{--t-a:#b87a48;--t-b:#ecc095;--t-c:#a56d3e;--t-edge:#6e4422;--ink:#1f1206}
.tc-silver{--t-a:#9aa4ad;--t-b:#f0f3f6;--t-c:#8a959e;--t-edge:#5f6971;--ink:#121820}
.tc-gold{--t-a:#c39a35;--t-b:#f8e08f;--t-c:#b58a26;--t-edge:#7a5408;--ink:#1d1400}
.tc-elite{--t-a:#1b0f38;--t-b:#40287a;--t-c:#0d2a4a;--t-edge:var(--accent);--ink:#f7f1e3}
.tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.tc-rate{display:flex;flex-direction:column;line-height:1;min-width:0}
.tc-rate b.num{font:700 36px/.9 var(--f-display);font-variant-numeric:tabular-nums}
.tc-lbl{font:700 12px/1.2 var(--f-display);letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere}
.tc-badges{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.tcard .nat{background:rgba(0,0,0,.72);color:#fff;border-color:transparent}
.tc-crest{width:24px;height:28px;clip-path:polygon(0 0,100% 0,100% 64%,50% 100%,0 64%);display:grid;place-items:start center;padding-top:6px;font:700 8px var(--f-display);letter-spacing:.02em}
.tc-art{height:58px;display:grid;place-items:end center;margin-top:-6px}
.tc-sil{position:relative;width:58px;height:56px}
.tc-sil:before{content:"";position:absolute;left:50%;top:2px;width:24px;height:26px;margin-left:-12px;border-radius:50% 50% 46% 46%;background:rgba(0,0,0,.34)}
.tc-sil:after{content:"";position:absolute;left:3px;right:3px;bottom:0;height:24px;border-radius:26px 26px 4px 4px;background:var(--tc1);border-top:4px solid var(--tc2);box-shadow:inset 0 -6px 10px rgba(0,0,0,.2)}
.tc-mono{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--tc1);border:3px solid var(--tc2);font:700 22px var(--f-display);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.tc-name{margin:0;padding:4px 0;font:700 16px/1.1 var(--f-display);text-transform:uppercase;text-align:center;letter-spacing:.02em;border-block:1px solid rgba(0,0,0,.28);overflow-wrap:anywhere}
.tc-elite .tc-name{border-color:rgba(255,255,255,.25)}
.tc-namebtn{background:none;border:0;padding:0;margin:0;width:100%;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;text-align:center;cursor:pointer}
.tc-namebtn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.tc-brand{text-align:center;font-size:11.5px;font-weight:600;margin-top:-2px}
.tc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0}
.tc-stats div{display:flex;flex-direction:column;align-items:center;padding:2px 0 3px;border-radius:4px;background:rgba(255,255,255,.4)}
.tc-elite .tc-stats div{background:rgba(255,255,255,.1)}
.tc-stats dt{font:700 9.5px/1.2 var(--f-body);letter-spacing:.05em}
.tc-stats dd{margin:0;font:700 15px/1.1 var(--f-mono)}
.tc-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.tc-tags li{font:700 9.5px/15px var(--f-mono);text-transform:uppercase;padding:0 5px;border-radius:3px;background:rgba(0,0,0,.66);color:#fff}
.tc-tags li.bad{background:#a3221f}.tc-tags li.good{background:#14653d}
.tc-foot{margin:auto 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:11px;font-weight:600;line-height:1.25}
.tc-tier{font:700 9.5px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;flex:none}
.tc-s{max-width:210px}
.tc-m{max-width:240px}
.tc-m .tc-rate b.num{font-size:40px}.tc-m .tc-name{font-size:18px}
.tc-l{max-width:280px;padding:14px 12px 10px}
.tc-l .tc-rate b.num{font-size:48px}.tc-l .tc-lbl{font-size:14px}.tc-l .tc-name{font-size:21px}.tc-l .tc-art{height:72px}
.tc-l .tc-sil{transform:scale(1.2);transform-origin:bottom center}.tc-l .tc-stats dd{font-size:17px}.tc-l .tc-stats dt{font-size:10.5px}
.tc-click{cursor:pointer;transition:transform .15s ease}
.tc-click:hover{transform:translateY(-2px)}
.tc-click:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.profile{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:560px){.profile{grid-template-columns:minmax(0,1fr)}.profile .tcard{max-width:240px}}

/* ---------- conditions, dates, card collection, QR ---------- */
.cond{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 10px}
.wx{flex:none;color:#cfe1f2}
.wx-clear,.wx-heat{color:var(--accent)}.wx-heat{color:#ff9a3c}
.wx-rain,.wx-heavyrain{color:#7fb6ea}.wx-snow{color:#e9f3ff}.wx-fog,.wx-wind,.wx-cloudy{color:#b5c3d0}
.rd-d{float:right;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.kpis{display:flex;flex-wrap:wrap;gap:12px 22px}
.kpis>div{display:flex;flex-direction:column}
.kpi-s{font:700 26px/1.1 var(--f-display)}
.tier-bronze{color:#f0c79c;border-color:#a56d3e}.tier-silver{color:#e6ebef;border-color:#8a959e}.tier-gold{color:#f8e08f;border-color:#b58a26}.tier-elite{color:#d9c8ff;border-color:var(--accent)}
.cards.one{grid-template-columns:minmax(0,220px);justify-content:center}
.codebox{width:100%;font:12px/1.4 var(--f-mono);word-break:break-all;resize:vertical}
.qr{display:flex;justify-content:center}
.qr svg{display:block;width:100%;max-width:260px;height:auto;background:#fff;border-radius:6px}
.filebtn{display:inline-flex;align-items:center;cursor:pointer}
.filebtn:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- v5: world picker, competitions, tactics boards ---------- */
.wrapseg{flex-wrap:wrap}
.pick-txt .sm{line-height:1.3}
tr.zone-cl td:first-child{box-shadow:inset 3px 0 0 #5aa9e6}
tr.zone-el td:first-child{box-shadow:inset 3px 0 0 #2fb3a6}
.grp-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
table.gt caption{text-align:left;font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:4px 0}
table.gt td,table.gt th{padding:4px 6px}
details>summary{cursor:pointer;font-weight:600;padding:4px 0}
details.tac-g{border-top:1px solid var(--line);padding-top:8px}
details.tac-g>summary{font:700 16px var(--f-display);text-transform:uppercase;letter-spacing:.05em;color:var(--fg);list-style-position:inside}
details.tac-g[open]>summary{margin-bottom:8px}
.tac-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.tac-l{font-size:13px;font-weight:600}
.tac-item .seg button{padding:6px 10px;font-size:13px;min-height:32px}
.boards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.bd{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.bd figcaption,.viz figcaption{font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.boards .chip{width:66px}.boards .chip .c{width:24px;height:24px;font-size:10.5px}.boards .chip .l{font-size:10.5px}
.viz{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.viz svg{width:100%;max-width:380px;height:auto;display:block}
.vz-t{font:600 4px var(--f-body);fill:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.03em}
.vz-tab{width:auto;font-size:13px}.vz-tab th{text-transform:none;letter-spacing:0;font-size:13px;color:var(--fg)}
.roles-t select{min-height:32px;padding:4px 6px;font-size:13px;max-width:170px}

/* ---------- v6: manager career ---------- */
.rep-meter{display:inline-block;vertical-align:middle;width:140px;margin-left:8px}
.jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.job{border:1px solid var(--line);border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.job.row{flex-direction:row;align-items:center}
.offer-job{border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
.iv-head{display:flex;gap:12px;align-items:center}
.iv-head h2{font-size:22px}
.iv-q{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.iv-q legend{font:700 18px/1.25 var(--f-display);margin-bottom:8px;padding:0}
.iv-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);cursor:pointer}
.iv-opt:hover{border-color:var(--muted)}
.iv-opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
.iv-opt input{margin-top:3px;accent-color:var(--accent)}

/* modal + toast */
.modal{position:fixed;inset:0;background:rgba(4,9,14,.72);display:grid;place-items:center;z-index:50;padding:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;max-width:460px;width:100%;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.modal .box:has(.wide){max-width:640px}
.modal .box h2{font-size:24px}
.modal .box>.row:last-child{position:sticky;bottom:-20px;background:var(--panel);padding-block:8px 0}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);border-radius:6px;padding:9px 14px;z-index:60;font-weight:600;max-width:calc(100% - 32px);animation:toast-in .2s ease-out}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

@media (max-width:640px){
  .top h1{font-size:22px}
  .top-kpis dd{font-size:16px}
  .tabs button{padding:8px 9px;font-size:14px}
  .fixture .nm{font-size:16px}
  .kpi{font-size:42px}
  .card{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* sortable table headers */
th .thsort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border-radius:5px;padding:2px 4px;margin:-2px -4px}
th .thsort:hover{color:var(--fg)}
th .thsort:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
th[aria-sort=ascending] .thsort,th[aria-sort=descending] .thsort{color:var(--accent)}
th .tharr{font-size:9px;min-width:9px}
th.n .thsort{flex-direction:row-reverse}

/* new-game ladder toggle */
.ladder-tog{gap:8px;align-items:flex-start;font-size:14px;line-height:1.4}
.ladder-tog input{margin-top:2px;flex:none}

/* ---------- Road to Pro (pro.js) ---------- */
.pro-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){ .pro-grid{grid-template-columns:minmax(0,1fr)} }
.pro-h{font:600 13px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0}
.pro-plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pro-slot{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel2) 45%,transparent)}
.pro-slot .ps-h{font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.05em;color:var(--fg)}
.pro-slot .ps-h em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.pro-slot select{width:100%;min-height:34px;font-size:13px}
.pro-slot .ps-fixed{font-size:13px;color:var(--accent)}
.pro-dark{font-style:normal;font-size:10px;padding:1px 5px;border-radius:5px;background:#000;color:#cfd6df;margin-left:4px;text-transform:none;letter-spacing:0}
.pro-wx{display:inline-block;width:16px;text-align:center}
.pro-need{display:grid;grid-template-columns:96px 1fr 30px;gap:8px;align-items:center;font-size:13px}
.pro-need .meter{height:8px}
.pro-person{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.pro-person:last-child{border-bottom:0}
.pro-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.pro-dec{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent) inset}
.pro-dec h3{margin:0}
.pro-score{font-size:15px}
.pro-res{font-weight:600;padding:8px 12px;border-radius:10px}
.pro-res.ok{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.pro-res.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.pro-mq{font-size:17px;line-height:1.4}
.pro-opts{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.pro-opt{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.pro-opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pro-opt em{grid-column:2;font-style:normal;font-size:12px;color:var(--muted)}
.pro-map{width:100%;height:auto;display:block;border-radius:14px}
.pro-pin{cursor:pointer}
.pro-pin .pp-bg{fill:var(--panel);stroke:var(--line);stroke-width:1.5}
.pro-pin .pp-ic{fill:none;stroke:var(--fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pro-pin text{font:600 9.5px var(--f-body);fill:#e9edf2;paint-order:stroke;stroke:#0b1118;stroke-width:3px}
.pro-pin:hover .pp-bg,.pro-pin:focus .pp-bg{stroke:var(--accent)}
.pro-pin.on .pp-bg{fill:var(--accent);stroke:var(--accent)}
.pro-pin.on .pp-ic{stroke:var(--accent-ink)}
.pro-pin:focus{outline:none}
.pro-pin:focus-visible .pp-bg{stroke-width:3}
.pro-av{display:block;border-radius:22px;flex:none}
.pro-hd-av .pro-av{border-radius:14px}
.pro-me-mini .row{gap:12px;align-items:center}
.pro-create{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
@media (max-width:620px){ .pro-create{grid-template-columns:1fr} }
.pro-spark{width:100%;height:60px}
.pro-spark polyline{stroke:var(--accent);stroke-width:2}
.pro-spark circle{fill:var(--accent)}
.pro-spark .ps-7{stroke:var(--muted);stroke-dasharray:3 4}
.pro-trial{padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);gap:10px}
.pro-diary p{margin:0;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.pro-diary .pd-big{font-weight:600}
.pro-diary .pd-bad{color:color-mix(in srgb,var(--bad) 75%,var(--fg))}
.sm-meter{display:inline-block;width:70px;height:6px;vertical-align:middle}
.row.wrap{flex-wrap:wrap}
.pro-msgs{display:flex;flex-direction:column;gap:8px}
.pro-msg{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 40%,transparent)}
.pro-msg p{margin:4px 0}
.pro-msg.unread{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.pro-msg.unread b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}
.pro-cal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pro-cal li{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);align-items:baseline}
.pro-cal .pc-trial b{color:var(--accent)}
.pro-cal .pc-meet b{color:var(--good)}
@media (max-width:520px){ .pro-cal li{grid-template-columns:1fr} }
.seg .nb{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;line-height:18px;text-align:center;margin-left:4px}
/* automatic links in text */
.alink{display:inline;text-decoration-style:dotted;text-decoration-thickness:1px}
.alink:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}
.pro-odds{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.pro-odds li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:10px}
/* new-game mode switch */
.mode-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:560px;margin:10px 0}
.mode-seg button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;text-align:left;min-height:56px}
.mode-seg button b{font:700 15px var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.mode-seg button span{font-size:12px;opacity:.85;font-weight:500}
@media (max-width:720px){ .mode-seg{display:grid!important;overflow:visible!important} .mode-seg button{white-space:normal!important} }
.pro-fans{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fan{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--panel2)}
.fan-awesome,.fan-excellent{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.fan-poor,.fan-stupid{background:color-mix(in srgb,var(--bad) 16%,transparent);color:color-mix(in srgb,var(--bad) 80%,var(--fg))}
.fan-clown{background:#e53935;color:#fff}
.pro-map{max-width:820px;margin:0 auto}
.scn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.scn{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 40%,transparent)}
.scn p{margin:0;flex:1}
.scn .btn{align-self:flex-start}
.rp-cv{width:100%;height:auto;border-radius:10px;display:block;background:#2f6b3a}

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}