/* WarEra UK — command centre theme
   Type scale: 10 11 12 13 14 16 18 20 for text, 22 26 34 44 64 for display numbers.
   Radii: --r-xs 4, --r-sm 8, --r 12, --r-lg 16, --r-pill. Surfaces: --s1..--s4. Shadows: --sh-1..--sh-3.
   Add new rules using these, not fresh values. */
:root{
  --bg:#060A0F; --bg2:#0A1017;
  --panel:rgba(16,23,32,.72); --panel-solid:#0F1620; --panel2:#141D29; --sunk:#070C12;
  --line:rgba(148,178,214,.09); --line2:rgba(148,178,214,.16);
  --ink:#E9EEF4; --ink2:#B7C3D1; --mut:#7D8A9A; --faint:#526072;
  --gold:#F2B84B; --gold-2:#FFD57A;
  --blue:#3E7BFA; --red:#E5484D;
  --gain:#2BD4A0; --give:#F2A93B; --dmg:#FF5C6C; --lvl:#8FA4FF;
  --war:#FF5C6C; --eco:#2BD4A0; --hybrid:#8C8CFF; --unspent:#6B7788;
  --bronze:#C58A5A; --silver:#B9C2CE; --goldt:#E6B94A; --platinum:#7FD1D6; --diamond:#79A8FF; --master:#E27BFF;
  --r:12px; --r-sm:8px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --ease:cubic-bezier(.2,.7,.2,1);
  --top-h:52px;
  /* surface tint scale: one ladder instead of eight near-identical rgba values */
  --s1:rgba(148,178,214,.035); --s2:rgba(148,178,214,.055); --s3:rgba(148,178,214,.08); --s4:rgba(148,178,214,.12);
  --r-xs:4px; --r-lg:16px; --r-pill:999px;
  --on-accent:#0B0F14;
  --sh-0:0 1px 0 rgba(255,255,255,.04) inset; --sh-1:0 2px 10px -4px rgba(0,0,0,.7);
  --sh-2:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --sh-3:0 30px 64px -20px rgba(0,0,0,.92)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}body{
  margin:0; min-height:100vh; color:var(--ink); background:var(--bg);
  font:14px/1.5 Saira,"Segoe UI",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 600px at -10% -10%, rgba(62,123,250,.13), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(229,72,77,.09), transparent 60%),
    linear-gradient(var(--bg),var(--bg2));
  background-attachment:fixed}body::before{ /* fine tactical grid */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--s1) 1px,transparent 1px),
                   linear-gradient(90deg,var(--s1) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 20%, #000 20%, transparent 75%)}a{color:inherit}button, input, select{font:inherit; color:inherit}.n{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em}.h{font-family:"Chakra Petch",Saira,sans-serif}[hidden]{display:none!important}/* ---------- top bar ---------- */
.top{
  position:sticky; top:0; z-index:40; height:var(--top-h);
  display:flex; align-items:center; gap:14px; padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
  background:#070b11; backdrop-filter:none; -webkit-backdrate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line)}.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none;
  font-family:"Chakra Petch",sans-serif; font-weight:600; font-size:18px; letter-spacing:.04em; text-transform:uppercase}.brand b{color:var(--gold); font-weight:700}.flag{width:28px; height:16px; border-radius:var(--r-xs); flex:none; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.14); display:block}.flag svg{display:block; width:100%; height:100%}.gsearch{position:relative; flex:1; max-width:460px; margin-left:auto}.gsearch svg{position:absolute; left:12px; top:50%; width:17px; height:17px; transform:translateY(-50%);
  fill:none; stroke:var(--mut); stroke-width:2; stroke-linecap:round}.gsearch input{height:34px; width:100%; height:40px; padding:0 14px 0 38px; border-radius:var(--r-sm);
  background:var(--s2); border:1px solid var(--line2); outline:none; transition:.2s var(--ease)}.gsearch input::placeholder{color:var(--faint)}.gsearch input:focus{border-color:rgba(242,184,75,.55); background:var(--s3); box-shadow:0 0 0 4px rgba(242,184,75,.1)}.gresults{position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:62vh; overflow:auto;
  background:var(--panel-solid); border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--sh-3); padding:6px}.gresults a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); text-decoration:none}.gresults a:hover, .gresults a.on{background:var(--s3)}.gresults .meta{margin-left:auto; color:var(--mut); font-size:12px}.status{flex:none; display:flex; align-items:center; gap:10px; height:40px; padding:0 12px 0 10px; border-radius:var(--r-sm);
  background:var(--s2); border:1px solid var(--line2); cursor:pointer; text-align:left}.status:hover{border-color:rgba(148,178,214,.3)}.dot{width:9px; height:9px; border-radius:50%; background:var(--faint); flex:none; position:relative}.dot.live{background:var(--gain); box-shadow:0 0 12px rgba(43,212,160,.8)}.dot.live::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--gain); opacity:0;
  animation:ping 2.2s var(--ease) infinite}.dot.warn{background:var(--give); box-shadow:0 0 10px rgba(242,169,59,.7)}.dot.bad{background:var(--dmg); box-shadow:0 0 10px rgba(255,92,108,.7)}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}.st-text{display:flex; flex-direction:column; line-height:1.15}#statusMain{font-size:12px; font-weight:600}.st-sub{font-size:11px; color:var(--mut); font-family:"IBM Plex Mono",monospace}.status-pop{position:absolute; right:14px; top:calc(var(--top-h) - 4px); width:320px; z-index:60;
  background:var(--panel-solid); border:1px solid var(--line2); border-radius:var(--r); padding:14px 16px;
  box-shadow:var(--sh-3)}.status-pop h4{margin:0 0 10px; font:600 12px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}.jobrow{display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; align-items:center; padding:9px 0; border-top:1px solid var(--line)}.jobrow:first-of-type{border-top:0}.jobrow .jn{font-weight:600}.jobrow .jd{grid-column:2/4; color:var(--mut); font-size:12px}/* ---------- tabs ---------- */
.tabs{position:sticky; top:var(--top-h); z-index:30; display:flex; gap:2px; padding:6px max(10px,env(safe-area-inset-left));
  overflow-x:auto; scrollbar-width:none; background:#070b11; border-bottom:1px solid var(--line);
  border-bottom:1px solid var(--line)}.tabs::-webkit-scrollbar{display:none}.tabs{mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent); -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}.tabs.at-end{mask-image:none; -webkit-mask-image:none}.tabs a{flex:none; padding:6px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--mut);
  font:600 12px "Chakra Petch",sans-serif; letter-spacing:.04em; text-transform:uppercase; transition:.18s var(--ease); white-space:nowrap}.tabs a:hover{color:var(--ink); background:var(--s2)}.tabs a.on{color:#111; background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 6px 20px -8px rgba(242,184,75,.7)}/* ---------- app / layout ---------- */
.app{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:22px max(18px,env(safe-area-inset-left)) 40px; outline:none}.page-h{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:6px 0 20px}.page-h h1{margin:0; font:600 clamp(26px,4.2vw,40px)/1.05 "Chakra Petch",sans-serif; letter-spacing:.01em; text-transform:uppercase}.page-h h1 em{font-style:normal; color:var(--gold)}.page-h p{margin:4px 0 0; color:var(--mut); max-width:62ch}.page-h .right{margin-left:auto}.grid{display:grid; gap:14px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:16px 18px; min-width:0}.card h3{margin:0 0 12px; display:flex; align-items:center; gap:8px;
  font:600 12px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2)}.card h3 .more{margin-left:auto; font-size:11px; letter-spacing:.06em; color:var(--gold); text-decoration:none}.card h3 .more:hover{text-decoration:underline}.sec{margin-top:26px}/* KPI tiles */
.kpi{position:relative; overflow:hidden}.kpi .k{font:600 11px "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}.kpi .v{font:600 clamp(22px,3.4vw,32px)/1.1 "IBM Plex Mono",monospace; margin-top:6px; letter-spacing:-.02em}.kpi .s{font-size:12px; color:var(--mut); margin-top:2px}.kpi::after{content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle,var(--glow,rgba(242,184,75,.18)),transparent 70%)}.kpi.gold .v{color:var(--gold)}.kpi.gain .v{color:var(--gain)}.kpi.give .v{color:var(--give)}.kpi.dmg .v{color:var(--dmg)}.kpi.gain{--glow:rgba(43,212,160,.18)}.kpi.give{--glow:rgba(242,169,59,.18)}.kpi.dmg{--glow:rgba(255,92,108,.18)}/* buttons & chips */
.btn{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:var(--r-sm); cursor:pointer; text-decoration:none;
  background:var(--s3); border:1px solid var(--line2); font-weight:600; font-size:13px; transition:.18s var(--ease); white-space:nowrap}.btn:hover{border-color:rgba(148,178,214,.35); background:var(--s4)}.btn.primary{color:#111; border-color:transparent; background:linear-gradient(180deg,var(--gold-2),var(--gold))}.btn.primary:hover{filter:brightness(1.06)}.btn:focus-visible, .tabs a:focus-visible, .chip:focus-visible, a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}.chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--line2); background:transparent; font-size:12px; font-weight:600; color:var(--ink2); transition:.15s}.chip:hover{border-color:rgba(148,178,214,.35)}.chip[aria-pressed="true"]{background:rgba(242,184,75,.14); border-color:rgba(242,184,75,.55); color:var(--gold-2)}.build{display:inline-flex; align-items:center; gap:5px; padding:1px 8px 1px 6px; border-radius:var(--r-pill); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; border:1px solid currentColor; line-height:18px}.build::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}.b-war{color:var(--war)}.b-eco{color:var(--eco)}.b-hybrid{color:var(--hybrid)}.tier{display:inline-block; padding:0 7px; border-radius:var(--r-xs); font:700 10px "Chakra Petch",sans-serif; letter-spacing:.08em;
  text-transform:uppercase; line-height:18px; color:var(--on-accent)}.t-bronze{background:var(--bronze)}.t-silver{background:var(--silver)}.t-gold{background:var(--goldt)}.t-platinum{background:var(--platinum)}.t-diamond{background:var(--diamond)}.t-master{background:var(--master)}.up{color:var(--gain)}.down{color:var(--dmg)}.flat{color:var(--mut)}.prem{color:var(--gold); font-size:12px}/* avatars */
.av{width:34px; height:34px; border-radius:var(--r-sm); object-fit:cover; flex:none; background:var(--panel2); border:1px solid var(--line2)}.avx{display:inline-grid; place-items:center; font:700 14px "Chakra Petch",sans-serif; color:hsl(var(--h) 70% 82%);
  background:linear-gradient(145deg,hsl(var(--h) 45% 30%),hsl(var(--h) 50% 18%)); border-color:hsl(var(--h) 40% 38%)}.avx.sm{font-size:12px}.avx.lg{font-size:44px}.av.lg{width:92px; height:92px; border-radius:var(--r-lg); border-width:2px}.av.sm{width:30px; height:30px; border-radius:var(--r-sm)}.who{display:flex; align-items:center; gap:10px; min-width:0}.who .nm{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.who .sub{display:block; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}/* ranked bar lists */
.bars{display:flex; flex-direction:column; gap:6px}.bar-row{position:relative; display:grid; align-items:center; gap:10px;
  min-height:58px; padding:8px 14px 14px 10px; border-radius:var(--r-sm); text-decoration:none; overflow:hidden;
  background:var(--s1); border:1px solid var(--s2); transition:background .15s, border-color .15s}.bar-row:hover{background:var(--s3); border-color:rgba(148,178,214,.14)}.bar-row::before{content:""; position:absolute; left:14px; right:14px; bottom:7px; height:4px; border-radius:var(--r-pill); background:var(--s3)}.bar-row .fill{position:absolute; left:14px; bottom:7px; height:4px; border-radius:var(--r-pill);
  width:calc((100% - 28px) * var(--p, 0)); background:linear-gradient(90deg, color-mix(in srgb, var(--c,var(--gold)) 55%, transparent), var(--c,var(--gold)));
  box-shadow:0 0 10px color-mix(in srgb, var(--c,var(--gold)) 45%, transparent); transform-origin:left; animation:grow .9s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}.bar-row > *:not(.fill){position:relative}.bar-row .rk{font:600 12px "IBM Plex Mono",monospace; color:var(--faint); text-align:center}.bar-row .rk.p1, .bar-row .rk.p2, .bar-row .rk.p3{width:26px; height:26px; line-height:26px; border-radius:var(--r-sm); justify-self:center; color:var(--on-accent)}.bar-row .rk.p1{background:linear-gradient(180deg,#FFE08A,#E6A93A)}.bar-row .rk.p2{background:linear-gradient(180deg,#EEF2F7,#AEB8C5)}.bar-row .rk.p3{background:linear-gradient(180deg,#E8B488,#B27447)}.bar-row .who .nm{}.bar-row .who .sub{min-height:17px}.bar-row .val{font:600 14px "IBM Plex Mono",monospace; text-align:right}/* ---------- players database ---------- */
.dbbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}.field{display:flex; flex-direction:column; gap:5px}.field label{font:600 10px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}.inp{height:38px; padding:0 12px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line2); outline:none; min-width:0}.inp:focus{border-color:rgba(242,184,75,.55); box-shadow:0 0 0 3px rgba(242,184,75,.1)}select.inp{padding-right:30px; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size:5px 5px; background-repeat:no-repeat}select.inp option{background:#0F1620}.filters{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; align-items:end}.filters > .field{min-width:0}.range .inp{min-width:0}.range{display:flex; gap:6px}.range .inp{width:100%}.chips{display:flex; gap:6px; flex-wrap:wrap}.count{color:var(--mut); font-size:13px}.count b{color:var(--ink); font-family:"IBM Plex Mono",monospace}.tablewrap{overflow:auto; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); max-height:calc(100vh - 150px)}table.db{border-collapse:separate; border-spacing:0; width:100%; min-width:980px; font-size:13px}table.db th.c-mu, table.db td.c-mu{text-align:left}table.db td.c-mu a{color:var(--ink2)}table.db th.c-build, table.db td.c-build{text-align:left}table.db th{position:sticky; top:0; z-index:2; background:#0D141C; text-align:right; white-space:nowrap; padding:11px 12px;
  font:600 11px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mut);
  border-bottom:1px solid var(--line2); cursor:pointer; user-select:none}table.db th:hover{color:var(--ink)}table.db th.on{color:var(--gold)}table.db th .ar{opacity:.8; margin-left:4px}table.db th:first-child, table.db td:first-child{text-align:left; position:sticky; left:0; z-index:1}table.db th:first-child{z-index:3}table.db td{padding:8px 12px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}table.db td:first-child{background:#0C1219}table.db tr:hover td{background:var(--s2)}table.db tr:hover td:first-child{background:#111923}table.db tbody tr{cursor:pointer}table.db td.num{font-family:"IBM Plex Mono",monospace}.cmpbox{width:16px; height:16px; accent-color:var(--gold); cursor:pointer; vertical-align:middle; margin-right:8px}.cards-m{display:none}.pcard{display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; padding:12px 14px; text-decoration:none;
  border-bottom:1px solid var(--line)}.pcard .stats{grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:6px}.pcard .stats div{background:var(--s2); border-radius:var(--r-sm); padding:6px 8px}.pcard .stats span{display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}.pcard .stats b{font:600 13px "IBM Plex Mono",monospace}.cmpfab{position:fixed; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:10px; padding:8px 8px 8px 16px; border-radius:var(--r);
  background:var(--panel-solid); border:1px solid rgba(242,184,75,.4); box-shadow:var(--sh-3)}/* ---------- profile ---------- */
.hero{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; padding:22px; position:relative; overflow:hidden}.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 200px at 0% 0%, rgba(242,184,75,.1), transparent 70%); pointer-events:none}.hero h1, .pro h1{margin:0; font:600 clamp(26px,4vw,38px)/1.05 "Chakra Petch",sans-serif; letter-spacing:.01em; word-break:break-word}.hero .line, .pro .line{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:8px; color:var(--mut); font-size:13px}.hero .desc, .pro .desc{margin-top:8px; color:var(--ink2); font-style:italic}.lvlring{--p:0; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:conic-gradient(var(--gold) calc(var(--p)*1%), var(--s4) 0)}.lvlring div{width:76px; height:76px; border-radius:50%; background:var(--panel-solid); display:grid; place-items:center; text-align:center}.lvlring b{font:700 26px/1 "Chakra Petch",sans-serif}.lvlring span{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}.subtabs{display:flex; gap:4px; padding:4px; border-radius:var(--r); background:var(--s2); border:1px solid var(--line); width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:thin; scroll-behavior:smooth; scroll-padding:12px}.subtabs.scrolls{mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}.subtabs.scrolls.at-end{mask-image:none; -webkit-mask-image:none}.subtabs::-webkit-scrollbar{height:6px}.subtabs::-webkit-scrollbar-thumb{background:rgba(148,178,214,.25); border-radius:var(--r-pill)}.subtabs::-webkit-scrollbar-track{background:transparent}.subtabs button{border:0; background:transparent; padding:6px 12px; border-radius:var(--r-sm); cursor:pointer; color:var(--mut);
  font:600 12px "Chakra Petch",sans-serif; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}.subtabs button[aria-pressed="true"]{background:rgba(242,184,75,.15); color:var(--gold-2)}.statrow{display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:13px}.statrow:first-child{border-top:0}.statrow .l{color:var(--ink2)}.statrow .gr{color:var(--mut); font-size:12px}.skill{display:grid; grid-template-columns:130px 1fr 44px; gap:10px; align-items:center; padding:5px 0; font-size:13px}.skill .track{height:8px; border-radius:var(--r-pill); background:var(--s3); overflow:hidden}.skill .track i{display:block; height:100%; border-radius:var(--r-pill); background:var(--c); box-shadow:0 0 10px var(--c); transform-origin:left; animation:grow .8s var(--ease) both}.skill .v{text-align:right; font-family:"IBM Plex Mono",monospace}/* ---------- charts ---------- */
.chart{position:relative; width:100%}.chart svg{display:block; width:100%; height:auto; overflow:visible}.chart .axis text{fill:var(--faint); font:11px "IBM Plex Mono",monospace}.chart .grid line{stroke:var(--s3)}.chart .hit{fill:transparent}.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink2); margin-bottom:8px}.legend i{display:inline-block; width:10px; height:10px; border-radius:var(--r-xs); margin-right:6px; vertical-align:-1px}.tip{position:fixed; z-index:90; pointer-events:none; background:#0B1119; border:1px solid var(--line2); border-radius:var(--r-sm);
  padding:8px 10px; font-size:12px; box-shadow:var(--sh-2); min-width:120px}.tip .t{color:var(--mut); font-size:11px; margin-bottom:4px; font-family:"IBM Plex Mono",monospace}.tip .r{display:flex; align-items:center; gap:8px; justify-content:space-between}.tip .r i{width:8px; height:8px; border-radius:var(--r-xs); display:inline-block; margin-right:6px}.tip .r b{font-family:"IBM Plex Mono",monospace; font-weight:600}/* ---------- compare ---------- */
.vs{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch}.vsmark{align-self:center; font:700 22px "Chakra Petch",sans-serif; color:var(--gold); text-shadow:0 0 20px rgba(242,184,75,.6)}.picker{position:relative}.picker .gresults{top:calc(100% + 4px)}.duel{display:grid; grid-template-columns:1fr 150px 1fr; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:13px}.duel:first-child{border-top:0}.duel .lab{text-align:center; font:600 11px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}.duel .side{display:flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace}.duel .side.a{flex-direction:row-reverse; text-align:right}.duel .track{flex:1; height:8px; border-radius:var(--r-pill); background:var(--s3); overflow:hidden; display:flex}.duel .side.a .track{justify-content:flex-end}.duel .track i{height:100%; border-radius:var(--r-pill); background:var(--c); transition:width .8s var(--ease)}.duel .win{color:var(--ink); font-weight:600}.duel .lose{color:var(--mut)}/* ---------- week ---------- */
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}.gave{font-size:11px; color:var(--mut); margin-left:6px; font-family:"IBM Plex Mono",monospace}.gave.zero{color:var(--give); font-weight:600}.zerogave{color:var(--give); font-weight:600}.empty{padding:40px 10px; text-align:center; color:var(--mut)}.foot{position:relative; z-index:1; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; max-width:1280px; margin:0 auto;
  padding:18px max(18px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)); color:var(--faint); font-size:12px; border-top:1px solid var(--line)}.foot a{color:var(--mut)}
/* ---------- responsive ---------- */
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){:root{--top-h:46px}.top{}.brand span:last-child{display:none}.status .st-text #statusMain{display:none}.status{}.status-pop{left:10px; right:10px; width:auto}.g2, .g3, .two{grid-template-columns:minmax(0,1fr)}.hero{grid-template-columns:auto 1fr; padding:16px; align-items:start}.hero > div:nth-child(2){grid-column:2; grid-row:1 / span 2}.hero .lvlring, .pro .lvlring{grid-column:1; grid-row:2; justify-self:center; width:72px; height:72px}.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filters > .field[style*="span 2"]{grid-column:1 / -1}.hero .lvlring div, .pro .lvlring div{width:60px; height:60px}.hero .lvlring b, .pro .lvlring b{font-size:20px}.av.lg{width:68px; height:68px; border-radius:var(--r)}.tablewrap.hide-m{display:none}.cards-m{display:block; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); overflow:hidden}.vs{grid-template-columns:minmax(0,1fr)}.vsmark{justify-self:center}.duel{grid-template-columns:1fr 90px 1fr; font-size:12px}.skill{grid-template-columns:100px 1fr 40px}.app{padding-top:16px}}
@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation:none!important; transition:none!important}}/* donations split + notes */
.note-s{margin:12px 2px 0; font-size:12px; color:var(--faint); line-height:1.5; max-width:90ch}.donsplit{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:10px}.ds{border-radius:var(--r-sm); padding:9px 10px; background:var(--s2); border:1px solid var(--line); min-width:0}.ds .k{display:block; font:600 10px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}.ds b{display:block; font-size:18px; margin-top:2px}.ds .s{display:block; font-size:11px; color:var(--mut)}.ds-uk b{color:var(--give)}.ds-mu b{color:var(--hybrid)}.ds-other b{color:var(--ink2)}.ds-all{border-color:rgba(242,184,75,.3)}.ds-all b{color:var(--gold)}.dest{display:inline-block; padding:0 7px; border-radius:var(--r-xs); font:700 10px "Chakra Petch",sans-serif; letter-spacing:.06em; text-transform:uppercase; line-height:17px}.d-uk{background:rgba(242,169,59,.16); color:var(--give)}.d-mu{background:rgba(140,140,255,.16); color:var(--hybrid)}.d-other{background:var(--s4); color:var(--ink2)}
@media (max-width:760px){.donsplit{grid-template-columns:repeat(2,minmax(0,1fr))}}/* long lists: first 30 rows, then "Show all" */
.clip:not(.open) .bar-row:nth-child(n+31){display:none}.clip .showall{display:block; width:100%; margin-top:10px; justify-content:center; text-align:center}/* active filter pills */
.activef{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}.fpill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); cursor:pointer; font:500 12px Saira,sans-serif;
  color:var(--gold-2); background:rgba(242,184,75,.1); border:1px solid rgba(242,184,75,.3)}.fpill:hover{background:rgba(242,184,75,.2)}.fpill span{opacity:.7; font-size:14px; line-height:1}.linkbtn{background:none; border:0; padding:0; cursor:pointer; color:var(--gold); font:inherit; text-decoration:underline; text-underline-offset:3px}.activef .linkbtn{margin-left:auto; font-size:13px}/* skills table */
table.sktable{min-width:0; table-layout:auto}table.sktable td:first-child{max-width:210px}table.sktable th{padding:11px 6px}table.sktable td{padding:6px}table.sktable th:first-child, table.sktable td:first-child{padding-left:12px}table.sktable th.hw{color:color-mix(in srgb, var(--war) 75%, var(--mut))}table.sktable th.he{color:color-mix(in srgb, var(--eco) 75%, var(--mut))}table.sktable th.on{color:var(--gold)}table.sktable td.skc{text-align:center; font:600 13px "IBM Plex Mono",monospace; min-width:40px}table.sktable td.skc.w{background:color-mix(in srgb, var(--war) calc(var(--a) * 55%), transparent)}table.sktable td.skc.e{background:color-mix(in srgb, var(--eco) calc(var(--a) * 55%), transparent)}table.sktable tbody tr{cursor:pointer}table.sktable tbody tr:hover td{filter:brightness(1.25)}.mulink{color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--line2)}.mulink:hover{color:var(--gold)}.lvpip{display:inline-block; min-width:24px; padding:1px 6px; border-radius:var(--r-sm); text-align:center; font:600 12px "IBM Plex Mono",monospace;
  color:var(--on-accent); background:rgba(242,184,75,var(--a))}table.db.co{min-width:820px}table.sktable th[data-k="mu"]{text-align:left}/* companies tab */
.chip.tiny{padding:1px 6px; font-size:10px}.ico{font-size:1.05em}.pick{display:flex; flex-direction:column; gap:4px}.pickrow{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 58px; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-sm);
  background:transparent; border:1px solid transparent; color:var(--ink); font:500 13px Saira,sans-serif; cursor:pointer; text-align:left}.pickrow:hover{background:var(--s2)}.pickrow.on{background:rgba(242,184,75,.1); border-color:rgba(242,184,75,.35)}.pickrow .pl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.pickrow .pt{height:6px; border-radius:var(--r-pill); background:var(--s3); overflow:hidden}.pickrow .pt i{display:block; height:100%; border-radius:var(--r-pill); background:var(--c)}.pickrow .pv{text-align:right; font:600 13px "IBM Plex Mono",monospace; color:var(--mut)}.cobar{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; gap:10px}.colist{display:flex; flex-direction:column; gap:6px}.corow{display:grid; grid-template-columns:minmax(0,2fr) auto 70px 80px 90px; align-items:center; gap:14px; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--s1); border:1px solid var(--s3)}.co-main{min-width:0}.co-main b{font-size:14px}.co-main .sub{display:block; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.co-lv{display:flex; gap:10px; font-size:11px; color:var(--mut); white-space:nowrap}.co-n{display:flex; flex-direction:column; align-items:flex-end; line-height:1.2}.co-n > span{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}.co-n b{font:600 14px "IBM Plex Mono",monospace}details.owner{border-radius:var(--r); background:var(--panel); border:1px solid var(--line)}details.owner[open]{border-color:rgba(242,184,75,.3)}details.owner summary{list-style:none; display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(0,2fr) 44px 64px 60px 70px 16px; align-items:center; gap:14px; padding:10px 14px; cursor:pointer}details.owner summary::-webkit-details-marker{display:none}details.owner summary:hover{background:var(--s1)}details.owner .chev{color:var(--faint); transition:transform .2s}details.owner[open] .chev{transform:rotate(180deg)}.mix{display:flex; flex-wrap:wrap; gap:4px; min-width:0}.mixchip{padding:2px 8px; border-radius:var(--r-pill); font-size:12px; background:var(--s2); border:1px solid var(--line); white-space:nowrap}.mixchip b{color:var(--gold-2); font-weight:600}.ownerbody{padding:4px 14px 14px; display:flex; flex-direction:column; gap:6px}.ownerbody .btn{align-self:flex-start}
@media (max-width:760px){.cobar{grid-template-columns:repeat(2,minmax(0,1fr))}.cobar #cq{grid-column:1 / -1}.corow{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 10px; padding:10px 12px}.corow .co-main, .corow .co-lv{grid-column:1 / -1}.corow .co-n{align-items:flex-start}details.owner summary{grid-template-columns:repeat(4,minmax(0,1fr)) 16px; gap:8px 10px; padding:10px 12px}details.owner summary .who{grid-column:1 / 5}details.owner summary .mix{grid-column:1 / -1; grid-row:2}details.owner summary .chev{grid-column:5; grid-row:1}details.owner summary .co-n{align-items:flex-start; grid-row:3}.ownerbody{padding:4px 10px 12px}table.sktable td:first-child .av{display:none}}table.cotable th.tl, table.cotable td.tl{text-align:left}.skcards details.skcard{border-bottom:1px solid var(--line)}.skcards details.skcard:last-child{border-bottom:0}.skcard summary{list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; padding:12px; cursor:pointer}.skcard summary::-webkit-details-marker{display:none}.skcard[open]{background:rgba(242,184,75,.04)}.skpts{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15}.skpts b{font:600 16px "IBM Plex Mono",monospace}.skpts span{font-size:11px; color:var(--mut)}.skpts em{font-style:normal; color:var(--gold)}.split{grid-column:1 / -1; display:flex; height:6px; border-radius:var(--r-pill); overflow:hidden; background:var(--s3); gap:2px}.split i{display:block; min-width:0}.split .w{background:var(--war)}.split .e{background:var(--eco)}.split .n{background:transparent}.toptags{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:5px}.sktag{padding:2px 8px; border-radius:var(--r-pill); font:600 11px "IBM Plex Mono",monospace; border:1px solid}.sktag.w{color:color-mix(in srgb, var(--war) 80%, white); border-color:color-mix(in srgb, var(--war) 45%, transparent); background:color-mix(in srgb, var(--war) 12%, transparent)}.sktag.e{color:color-mix(in srgb, var(--eco) 80%, white); border-color:color-mix(in srgb, var(--eco) 45%, transparent); background:color-mix(in srgb, var(--eco) 12%, transparent)}.sktag.on{box-shadow:0 0 0 1px var(--gold)}.skgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:0 12px 12px}.skgrid .skc{display:flex; flex-direction:column; align-items:center; padding:6px 2px; border-radius:var(--r-sm); border:1px solid var(--line)}.skgrid .skc span{font-size:10px; color:var(--mut)}.skgrid .skc b{font:600 14px "IBM Plex Mono",monospace}.skgrid .skc.w{background:color-mix(in srgb, var(--war) calc(var(--a) * 55%), transparent)}.skgrid .skc.e{background:color-mix(in srgb, var(--eco) calc(var(--a) * 55%), transparent)}
@media (max-width:760px){#sq, #smu, #ssort{max-width:none!important; flex:1 1 140px}}/* redraws triggered by new data or rotation: no replayed animations */
.quiet .bar-row .fill, .quiet .skill .track i, .quiet .pickrow .pt i{animation:none!important}
@media (max-width:760px){/* glow shadows on hundreds of animating bars are what make phones stutter */
  .bar-row .fill, .skill .track i{box-shadow:none}.bar-row:nth-child(n+16) .fill{animation:none}}/* copy link */
.page-h .right{display:flex; gap:8px; flex-wrap:wrap; align-items:center}.copylink.done{color:var(--gain); border-color:color-mix(in srgb, var(--gain) 45%, transparent)}/* ================= battles ================= */
:root{--uk:var(--gold); --foe:var(--dmg)}.res{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:58px; padding:4px 9px; border-radius:var(--r-sm); font:700 11px "Chakra Petch",sans-serif; letter-spacing:.12em;
  color:var(--mut); background:var(--s3); border:1px solid var(--line)}.res.won{color:var(--on-accent); background:linear-gradient(180deg,#5EF0C0,#22B886); border-color:transparent}.res.lost{color:#fff; background:linear-gradient(180deg,#FF7A86,#D63A4B); border-color:transparent}.res.live{color:#fff; background:rgba(255,92,108,.18); border-color:rgba(255,92,108,.6)}.res.live i{width:7px; height:7px; border-radius:50%; background:var(--foe); box-shadow:0 0 0 0 rgba(255,92,108,.7); animation:livepulse 1.4s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(255,92,108,.7)}70%{box-shadow:0 0 0 9px rgba(255,92,108,0)}100%{box-shadow:0 0 0 0 rgba(255,92,108,0)}}/* tug of war */
.tug{position:relative; display:flex; height:14px; border-radius:var(--r-pill); overflow:hidden; background:#0A0F15; border:1px solid var(--s4); margin-top:16px}.tug.sm{height:8px; margin:0}.tug-l{background:linear-gradient(90deg,#8A5A10,var(--uk)); box-shadow:inset 0 0 12px rgba(255,220,140,.35); transition:width .8s var(--ease)}.tug-r{background:linear-gradient(90deg,var(--foe),#7A1F2A); box-shadow:inset 0 0 12px rgba(255,140,150,.3); transition:width .8s var(--ease)}.tug-l.foe{background:linear-gradient(90deg,#7A1F2A,var(--foe))}.tug-r.uk{background:linear-gradient(90deg,var(--uk),#8A5A10)}.tug-mark{transition:left .8s var(--ease); position:absolute; top:-3px; bottom:-3px; width:3px; margin-left:-1.5px; background:#fff; border-radius:var(--r-xs); box-shadow:0 0 10px #fff, 0 0 20px rgba(255,255,255,.6)}.tug-n{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font:600 13px "IBM Plex Mono",monospace}.tug-n b:first-child{color:var(--uk)}.tug-n b:last-child{color:var(--foe)}.tug-n span{color:var(--faint); font-size:11px}/* live war cards */
.warcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:14px}.warcard{position:relative; display:block; padding:18px 20px; border-radius:var(--r-lg); text-decoration:none; color:var(--ink); overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%, rgba(242,184,75,.16), transparent 50%), radial-gradient(120% 140% at 100% 100%, rgba(255,92,108,.18), transparent 50%), #0B1118;
  border:1px solid rgba(255,92,108,.35); box-shadow:0 0 0 1px rgba(255,92,108,.08), 0 20px 50px -20px rgba(255,92,108,.35); transition:transform .2s, box-shadow .2s}.warcard:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,92,108,.25), 0 26px 60px -20px rgba(255,92,108,.5)}.warcard::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 10px); pointer-events:none}.wc-top{display:flex; gap:12px; align-items:center; font-size:12px; color:var(--mut)}.wc-age{margin-left:auto}.wc-vs{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:14px}.wc-side{display:flex; flex-direction:column; gap:3px}.wc-side.right{align-items:flex-end; text-align:right}.wc-flag{font-size:44px; line-height:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}.wc-side b{font:700 18px "Chakra Petch",sans-serif; letter-spacing:.02em}.wc-side > span:not(.wc-flag){font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.1em}.wc-side.uk b{color:var(--uk)}.wc-side.foe b{color:var(--foe)}.wc-score{display:flex; flex-direction:column; align-items:center}.wc-score div{display:flex; align-items:baseline; font:700 34px "Chakra Petch",sans-serif; white-space:nowrap}.wc-score b{padding:0 4px}.wc-score i{font-style:normal; color:var(--faint)}.wc-score span{font:500 11px Saira,sans-serif; color:var(--faint); letter-spacing:.08em; text-transform:uppercase}.pips{display:flex; gap:4px; margin-top:4px}.pips i{width:18px; height:5px; border-radius:var(--r-xs); background:rgba(148,178,214,.15)}.pips.uk i.on{background:var(--uk); box-shadow:0 0 8px var(--uk)}.pips.foe i.on{background:var(--foe); box-shadow:0 0 8px var(--foe)}.wc-foot{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; font-size:13px; color:var(--mut)}.wc-foot b{color:var(--ink)}.wc-open{margin-left:auto; color:var(--gold)}.calm-card{display:flex; gap:14px; align-items:center}.calm-ico{font-size:26px}.calm-card p{margin:2px 0 0; color:var(--mut); font-size:13px}/* battle history rows */
.bfilters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}.bfilters .inp{max-width:220px}.blist{display:flex; flex-direction:column; gap:6px}.brow{position:relative; display:grid; grid-template-columns:66px minmax(0,1fr) 56px 88px 120px; align-items:center; gap:12px; padding:10px 14px 10px 12px;
  border-radius:var(--r); text-decoration:none; color:var(--ink); background:var(--s1); border:1px solid var(--s3); overflow:hidden; transition:background .15s}.brow::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:rgba(148,178,214,.2)}.brow.is-won::before{background:var(--gain)}.brow.is-lost::before{background:var(--foe)}.brow.is-live::before{background:var(--foe); box-shadow:0 0 12px var(--foe)}.brow:hover{background:var(--s3)}.b-vs{min-width:0}.b-names{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px}.b-names i{color:var(--faint); font-style:normal; font-size:12px; margin:0 3px}.b-vs .sub{display:block; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.b-score{font:700 18px "Chakra Petch",sans-serif; text-align:center}.b-dmg, .b-top{display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; min-width:0}.b-dmg span, .b-top span{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}.b-dmg b{font:600 14px "IBM Plex Mono",monospace; color:var(--foe)}.b-top b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}.brow.mini{grid-template-columns:66px minmax(0,1fr) 88px 80px}.opps{display:flex; flex-direction:column; gap:4px}.opp{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 52px; gap:10px; align-items:center; padding:7px 10px; border-radius:var(--r-sm); border:1px solid transparent; background:none; color:var(--ink); cursor:pointer; font:500 13px Saira,sans-serif; text-align:left}.opp:hover{background:var(--s2)}.opp.on{background:rgba(242,184,75,.1); border-color:rgba(242,184,75,.35)}.opp-n{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.opp-bar{display:flex; height:6px; border-radius:var(--r-pill); overflow:hidden; background:var(--s3)}.opp-bar .w{background:var(--gain)}.opp-bar .l{background:var(--foe)}.opp-r{text-align:right; font:600 12px "IBM Plex Mono",monospace; color:var(--faint)}/* battle detail hero */
.battlehero{position:relative; padding:20px 26px 22px; border-radius:var(--r-lg); overflow:hidden; background:#0A0F15; border:1px solid var(--s4)}.battlehero.live{border-color:rgba(255,92,108,.45); box-shadow:0 0 60px -20px rgba(255,92,108,.45)}.bh-bg{position:absolute; top:-40%; bottom:-40%; width:60%; filter:blur(60px); opacity:.35; pointer-events:none}.bh-bg.l{left:-15%}.bh-bg.r{right:-15%}.bh-bg.uk{background:radial-gradient(circle, var(--uk), transparent 65%)}.bh-bg.foe{background:radial-gradient(circle, var(--foe), transparent 65%)}.battlehero > *:not(.bh-bg){position:relative}.bh-top{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; color:var(--mut); font-size:13px}
.bh-top .btn{flex:none}.bh-vs{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin-top:18px}.bh-side{display:flex; flex-direction:column; gap:2px}.bh-side.right{align-items:flex-end; text-align:right}.bh-flag{font-size:64px; line-height:1; filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}.bh-side h2{margin:6px 0 0; font:700 clamp(20px,3vw,32px) "Chakra Petch",sans-serif; text-transform:uppercase; letter-spacing:.03em}.bh-side.uk h2{color:var(--uk); text-shadow:0 0 24px rgba(242,184,75,.35)}.bh-side.foe h2{color:var(--foe); text-shadow:0 0 24px rgba(255,92,108,.35)}.bh-role{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}.bh-dmg{font:700 22px "IBM Plex Mono",monospace; margin-top:6px}.bh-score{display:flex; flex-direction:column; align-items:center}.bh-score div{font:700 clamp(44px,7vw,72px) "Chakra Petch",sans-serif; line-height:1; text-shadow:0 0 30px rgba(255,255,255,.15)}.bh-score i{font-style:normal; color:var(--faint); margin:0 6px}.bh-score span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}.rounds{display:flex; flex-direction:column; gap:10px}.rnd{display:grid; grid-template-columns:70px minmax(0,1fr) 150px 90px; gap:12px; align-items:center; font-size:13px}.rnd-n{color:var(--mut); font:600 12px "Chakra Petch",sans-serif; letter-spacing:.08em; text-transform:uppercase}.rnd-v{font:500 12px "IBM Plex Mono",monospace; color:var(--mut); text-align:center}.rnd-w{text-align:right; font-weight:600}/* podium + damage lists */
.side-card.uk{border-top:2px solid var(--uk)}.side-card.foe{border-top:2px solid var(--foe)}.podium{display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:8px; margin:6px 0 14px}.pod{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px 10px; border-radius:var(--r); text-decoration:none; color:var(--ink);
  background:linear-gradient(180deg, var(--s3), var(--s1)); border:1px solid var(--line); text-align:center; min-width:0}.pod .av{width:44px; height:44px; border-radius:var(--r)}.pod.p1 .av{width:58px; height:58px; border-radius:var(--r-lg)}.pod b{font-size:13px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.pod span:not(.av){font:600 13px "IBM Plex Mono",monospace; color:var(--mut)}.pod i{position:absolute; top:-9px; width:22px; height:22px; line-height:22px; border-radius:var(--r-sm); font:700 12px "Chakra Petch",sans-serif; font-style:normal; color:var(--on-accent)}.pod.p1{padding-top:18px; border-color:rgba(255,224,138,.45); box-shadow:0 10px 30px -14px rgba(255,210,110,.6)}.pod.p1 i{background:linear-gradient(180deg,#FFE08A,#E6A93A)}.pod.p2 i{background:linear-gradient(180deg,#EEF2F7,#AEB8C5)}.pod.p3 i{background:linear-gradient(180deg,#E8B488,#B27447)}.pod.is-uk{background:linear-gradient(180deg, rgba(242,184,75,.16), rgba(242,184,75,.03))}.dmglist{display:flex; flex-direction:column; gap:3px; max-height:420px; overflow:auto; padding-right:4px}.dmgrow{flex:none; position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font-size:13px; overflow:hidden}.dmgrow::before{content:""; position:absolute; left:0; top:0; bottom:0; width:calc(var(--p) * 100%); background:var(--s2); border-radius:var(--r-sm)}.dmgrow > *{position:relative}.dmgrow:hover{background:var(--s2)}.dmgrow .rk{color:var(--faint); font:600 12px "IBM Plex Mono",monospace; text-align:center}.dmgrow .nm{display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.dmgrow .v{font:600 13px "IBM Plex Mono",monospace}.dmgrow.is-uk::before{background:rgba(242,184,75,.16)}.dmgrow.is-uk .nm{color:var(--gold-2); font-weight:600}.ukchip{padding:0 5px; border-radius:var(--r-xs); font:700 10px "Chakra Petch",sans-serif; letter-spacing:.08em; color:var(--on-accent); background:var(--uk)}
@media (max-width:760px){.warcards{grid-template-columns:minmax(0,1fr)}.wc-flag{font-size:26px}.wc-side b{font-size:14px}.wc-score{font-size:26px}.brow{grid-template-columns:58px minmax(0,1fr) 44px; gap:8px 10px}.brow .b-dmg, .brow .b-top{grid-row:2; align-items:flex-start}.brow .b-dmg{grid-column:2}.brow .b-top{grid-column:3 / 4; align-items:flex-end}.brow.mini{grid-template-columns:58px minmax(0,1fr) 70px}.brow.mini .b-top{grid-column:3; grid-row:1}.bh-flag{font-size:44px}.bh-vs{gap:8px}.bh-dmg{font-size:16px}.rnd{grid-template-columns:60px minmax(0,1fr) 64px}.rnd-v{display:none}.bfilters .inp{max-width:none; flex:1 1 100%}.res.live i{animation:none}}/* page loading: thin bar under the header, current page dims until the new one is in */
.loading 
60%{width:70%}100%{width:92%}}.app{}.tour{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-sm); font:600 11px Saira,sans-serif; color:#FFE08A; background:rgba(242,184,75,.12); border:1px solid rgba(242,184,75,.35); white-space:nowrap}.flag-img{display:inline-block; width:1.35em; height:1em; border-radius:var(--r-xs); object-fit:cover; vertical-align:-.12em; background:#1A2430; box-shadow:0 1px 3px rgba(0,0,0,.5)}.wc-flag .flag-img, .bh-flag .flag-img{width:1.4em; height:1.05em; border-radius:.12em; vertical-align:middle}.flag-img.none{background:repeating-linear-gradient(45deg,#1A2430 0 4px,#243040 4px 8px)}/* live round strip */
.lround{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; gap:12px; align-items:center; margin-top:14px; padding:10px 14px; border-radius:var(--r); background:rgba(255,92,108,.08); border:1px solid rgba(255,92,108,.25)}.lround-h{font:700 12px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); white-space:nowrap}.lround-h em{color:var(--foe); font-style:normal}.lr-pts{display:flex; align-items:baseline; gap:6px}.lr-pts b{font:700 22px "Chakra Petch",sans-serif; color:var(--mut)}.lr-pts b.lead{color:#fff; text-shadow:0 0 14px rgba(255,255,255,.4)}.lr-pts i{font:500 10px Saira,sans-serif; color:var(--faint); text-transform:uppercase; letter-spacing:.1em}.lr-d{display:flex; gap:8px; align-items:baseline; font:600 12px "IBM Plex Mono",monospace}.lr-d span{font:500 10px Saira,sans-serif; color:var(--faint)}
@media (max-width:760px){.lround{grid-template-columns:1fr auto; gap:8px 12px}.lround .tug{grid-column:1 / -1}.lround .count{grid-column:1 / -1}}/* live feel */
.bump{color:#fff!important; text-shadow:0 0 16px rgba(255,255,255,.6); transition:color .3s}.tug.live .tug-l, .tug.live .tug-r{position:relative; overflow:hidden}.tug.live .tug-l::after, .tug.live .tug-r::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); transform:translateX(-100%); animation:sweep 2.4s linear infinite}
@keyframes sweep{to{transform:translateX(100%)}}.hits{display:flex; flex-direction:column; gap:4px}.hit{display:flex; gap:8px; align-items:baseline; font-size:12px; color:var(--mut); padding:5px 10px; border-radius:var(--r-sm); background:var(--s1); border-left:3px solid var(--foe)}.hit.attacker{border-left-color:var(--uk)}.hit b{color:var(--ink)}.hit b.ukname{color:var(--gold-2)}.hit i{font-style:normal; color:var(--faint)}.hit.crit b{color:#FFE08A}.hit.miss{opacity:.55}.hit-t{font:500 11px "IBM Plex Mono",monospace; color:var(--faint); min-width:56px}.warcard .hits .hit{padding:3px 8px; font-size:12px}
@media (prefers-reduced-motion:reduce){.tug.live .tug-l::after, .tug.live .tug-r::after{animation:none}}.hits:empty::before{content:"Waiting for hits…"; color:var(--mut); font-size:13px}.hit.enter{animation:hitin .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes hitin{0%{opacity:0; transform:translateY(-14px) scaleY(.6); max-height:0; padding-top:0; padding-bottom:0; margin-bottom:-4px; background:rgba(255,255,255,.14)}60%{opacity:1; max-height:40px; padding-top:5px; padding-bottom:5px; margin-bottom:0}100%{opacity:1; transform:none; max-height:40px; background:var(--s1)}}.hit.leave{animation:hitout .4s ease-in both; overflow:hidden}
@keyframes hitout{to{opacity:0; transform:translateX(12px); max-height:0; padding-top:0; padding-bottom:0; margin-bottom:-4px}}.hit{max-height:40px; overflow:hidden; transform-origin:top; will-change:transform}/* WarEra item art */
/* rarity tiles, coloured like the game's inventory squares */
.itile{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--r-xs); vertical-align:middle; flex:none;
  border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 0 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5)}.itile img{width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}.itile.sm{width:18px; height:18px; border-radius:var(--r-xs); margin-right:4px; vertical-align:-4px}.r-common{background:linear-gradient(160deg,#4a5057,#2b3036)}.r-uncommon{background:linear-gradient(160deg,#3f7a3c,#244a22)}.r-rare{background:linear-gradient(160deg,#2c4a86,#1a2c55)}.r-epic{background:linear-gradient(160deg,#5b3a8e,#34205a)}.r-legendary{background:linear-gradient(160deg,#b8862a,#6e4f12); border-color:rgba(255,220,140,.4)}.r-mythic{background:linear-gradient(160deg,#9e2431,#4a0f16); border-color:rgba(255,140,150,.4)}.pickrow .itile{width:22px; height:22px; margin-right:4px}.mixchip .itile{width:18px; height:18px; border-radius:var(--r-xs); margin-right:3px; vertical-align:-4px}.co-main .itile{width:20px; height:20px; vertical-align:-5px; margin-right:2px}/* live panels keep a fixed footprint while rows slide in and out, so nothing around them jumps */
.warcard .hits{height:110px; overflow:hidden; margin-top:12px}#hitsfeed .hits{min-height:386px}.lround{min-height:50px}.lround .count{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.warcard .wc-nums{min-height:104px}.hit.enter{animation-fill-mode:both}/* government */
.gov-hero{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:center}.gov-pres{display:flex; gap:18px; align-items:center}.gov-pres h2{margin:2px 0 8px; font:700 26px "Chakra Petch",sans-serif; text-transform:uppercase; letter-spacing:.02em}.gov-pres .role{font:600 11px Saira,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}.gov-pres .line{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-size:13px; color:var(--mut)}.gov-pres .line b{color:var(--ink)}.gov-pres .sub{margin-top:8px; font-size:13px; color:var(--mut)}.gov-pres .sub b{color:var(--gold-2)}.gov-next{display:grid; gap:10px}.nxt{display:flex; flex-direction:column; padding:12px 16px; border-radius:var(--r); background:var(--s2); border:1px solid var(--line)}.nxt span{font:600 10px Saira,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}.nxt b{font:700 26px "IBM Plex Mono",monospace; color:var(--gold-2)}.nxt i{font-style:normal; font-size:12px; color:var(--faint)}.gov-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}.gov-p{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:14px 10px 12px; border-radius:var(--r); text-decoration:none; color:var(--ink);
  background:var(--s1); border:1px solid var(--s3); border-top:3px solid var(--pc,#55627a); transition:.15s}.gov-p:hover{background:var(--s3); transform:translateY(-2px)}.gov-p .av{width:56px; height:56px; border-radius:var(--r)}.gov-p .role{font:600 10px Saira,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}.gov-p .nm{font-weight:600; font-size:14px}.gov-p .sub{font-size:12px; color:var(--pc,var(--mut))}.gov-p.empty{color:var(--faint)}.gov-grid.congress .gov-p .av{width:46px; height:46px; border-radius:var(--r)}.seatbar{display:flex; gap:2px; height:12px; border-radius:var(--r-pill); overflow:hidden; margin:14px 0 10px}.parties{display:flex; flex-direction:column; gap:10px}.party{padding:12px 14px; border-radius:var(--r); background:var(--s1); border:1px solid var(--s3); border-left:4px solid var(--pc,#55627a)}.party-h{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center}.party-h .av{width:44px; height:44px; border-radius:var(--r)}.party-h b{display:block; font:700 14px "Chakra Petch",sans-serif}.party-h .sub{display:block; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.party-n{text-align:right}.party-n b{display:block; font:700 20px "IBM Plex Mono",monospace; color:var(--pc,var(--gold))}.party-n span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}.party-bar{height:6px; border-radius:var(--r-pill); background:var(--s3); overflow:hidden; margin:10px 0 8px}.party-bar i{display:block; height:100%; background:var(--pc,#55627a); border-radius:var(--r-pill)}.ethics{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px}.eth{display:grid; grid-template-columns:62px 1fr 62px; gap:6px; align-items:center; font-size:10px; color:var(--faint)}.eth span:last-child{text-align:right}.eth-t{position:relative; height:4px; border-radius:var(--r-pill); background:var(--s4)}.eth-t i{position:absolute; top:-3px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--pc,#fff); box-shadow:0 0 6px var(--pc,#fff)}.party .desc{margin-top:8px; font-size:12px; color:var(--mut); font-style:italic}.elections{display:flex; flex-direction:column; gap:6px}.election{border-radius:var(--r-sm); border:1px solid var(--line); background:var(--s1)}.election summary{list-style:none; display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:10px; align-items:center; padding:10px 12px; cursor:pointer}.election summary::-webkit-details-marker{display:none}.etype{padding:2px 8px; border-radius:var(--r-sm); font:700 10px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--on-accent); background:var(--gold)}.etype.congress{background:var(--blue,#8FA4FF)}.edate{font:600 12px "IBM Plex Mono",monospace}.evotes{font-size:12px; color:var(--mut); text-align:right}.cands{display:flex; flex-direction:column; gap:4px; padding:0 12px 12px}.cand{position:relative; display:grid; grid-template-columns:26px minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:5px 8px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font-size:13px; overflow:hidden}.cand .av{width:26px; height:26px; border-radius:var(--r-sm)}.cand .cn{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.cand .cp{font-size:11px}.cand .cv{font:600 12px "IBM Plex Mono",monospace}.cand i{position:absolute; left:0; bottom:0; height:3px; opacity:.7}.cand.won{background:rgba(242,184,75,.08)}.cand.won .cn{color:var(--gold-2); font-weight:600}
@media (max-width:760px){.gov-hero{grid-template-columns:minmax(0,1fr)}.gov-pres{flex-direction:column; text-align:center}.gov-pres .line{justify-content:center}.ethics{grid-template-columns:minmax(0,1fr)}}/* overview: war + government strip */
.warstrip{display:flex; flex-direction:column; gap:8px; padding:12px}.ws-live, .ws-gov{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:10px 14px; border-radius:var(--r); text-decoration:none; color:var(--ink); background:var(--s1); border:1px solid var(--line)}.ws-live{border-color:rgba(255,92,108,.4); background:linear-gradient(90deg,rgba(255,92,108,.12),var(--s1))}.ws-live.calm{border-color:var(--line); background:var(--s1)}.ws-vs{flex:1 1 260px; min-width:0; font-size:14px}.ws-vs i{color:var(--faint); font-style:normal; font-size:12px; margin:0 3px}.ws-gov b{color:var(--gold-2)}.ws-cd{font:600 12px "IBM Plex Mono",monospace; color:var(--mut)}.ws-gov > span:nth-child(2){flex:1 1 200px}.warstrip .more{color:var(--gold); font-size:13px; margin-left:auto}.chip.gov{color:var(--on-accent); background:var(--gold); border-color:transparent; font-weight:700}
@media (max-width:760px){.tabs a{padding:8px 11px; font-size:12px}}.mrow{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:var(--r-sm); background:var(--s1); border:1px solid var(--s3); margin-bottom:6px}.mrow .mk{font:700 10px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}.mrow b{display:block; font-size:13px}.mrow .sub{display:block; font-size:12px; color:var(--mut)}.mrow .mst{font:700 14px "Chakra Petch",sans-serif}.mrow.ok .mst{color:#5EF0C0}.mrow.todo .mst{color:#FFE08A}.mrow .mst.cd{font:600 11px "IBM Plex Mono",monospace; color:var(--mut); white-space:nowrap}.xpleft{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; margin-top:8px; font-size:12px; color:var(--mut)}.xpleft .bar{height:6px; border-radius:var(--r-pill); background:var(--s4); overflow:hidden}.xpleft .bar i{display:block; height:100%; background:var(--gold); border-radius:var(--r-pill)}.recs{display:flex; flex-direction:column; gap:6px}.rec{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; padding:10px 12px; border-radius:var(--r-sm); background:var(--s1); border:1px solid var(--s3)}.rec .tag{padding:2px 7px; border-radius:var(--r-sm); font:700 10px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; margin-top:2px}.rec.urgent .tag{background:rgba(255,92,108,.2); color:#ff9aa4}.rec.suggested .tag{background:rgba(242,184,75,.18); color:#FFE08A}.rec.info .tag{background:var(--s4); color:var(--mut)}.rec b{display:block; font-size:13px}.rec span:last-child{display:block; font-size:12px; color:var(--mut); margin-top:2px}.co-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}.co-tile{padding:12px; border-radius:var(--r); background:var(--s1); border:1px solid var(--s4)}.co-tile.bad{border-color:rgba(255,92,108,.4)}.co-tile.slot{display:flex; flex-direction:column; justify-content:center; gap:6px; border-style:dashed; color:var(--mut); font-size:13px}.co-tile.slot b{color:var(--ink)}.co-top{display:flex; gap:10px; align-items:center}.co-top .itile{width:40px; height:40px; border-radius:var(--r-sm)}.co-top b{display:block; font-size:14px}.co-top .sub{display:block; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.co-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:10px 0}.co-stats span{display:flex; flex-direction:column}.co-stats i{font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}.co-stats b{font:600 13px "IBM Plex Mono",monospace}.co-stats em{font-style:normal; color:var(--gold)}.co-advice{font-size:12px; color:var(--mut); padding-top:8px; border-top:1px solid var(--line)}.co-tile.bad .co-advice{color:#ff9aa4}.sk-rows{display:flex; flex-direction:column; gap:8px}.sk-row{padding:10px 12px; border-radius:var(--r-sm); background:var(--s1); border:1px solid var(--s3)}.sk-h{display:flex; justify-content:space-between; align-items:baseline}.sk-h b{font:700 13px "Chakra Petch",sans-serif}.sk-state{font:600 11px Saira,sans-serif; letter-spacing:.1em; text-transform:uppercase}.sk-row.ok .sk-state{color:#5EF0C0}.sk-row.todo .sk-state{color:#FFE08A}.sk-row.over .sk-state{color:#ff9aa4}.sk-bar{position:relative; height:8px; border-radius:var(--r-pill); background:var(--s4); margin:8px 0 6px; overflow:visible}.sk-bar .have{position:absolute; left:0; top:0; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,#8A5A10,var(--gold))}.sk-row.over .sk-bar .have{background:linear-gradient(90deg,#7A1F2A,var(--foe,#FF5C6C))}.sk-bar .need{position:absolute; top:-4px; width:3px; height:16px; margin-left:-1px; background:#fff; border-radius:var(--r-xs); box-shadow:0 0 6px #fff}.sk-n{display:flex; justify-content:space-between; font:500 12px "IBM Plex Mono",monospace; color:var(--mut)}.sk-n b{color:var(--ink)}.sk-what{font-size:12px; color:var(--faint); margin-top:4px}.weapons{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px}.wtile{display:inline-flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; color:var(--mut)}.wtile .itile{width:38px; height:38px; border-radius:var(--r-sm)}
@media (max-width:760px){.co-stats{grid-template-columns:repeat(2,1fr)}.mrow{grid-template-columns:52px minmax(0,1fr) auto}}
.shot{position:relative; margin:0; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); background:#0f141b}.shot img{display:block; width:100%; height:auto}.pin{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--on-accent); font:800 12px "Chakra Petch",sans-serif; font-style:normal; box-shadow:0 0 0 3px rgba(11,15,20,.7), 0 2px 8px rgba(0,0,0,.5); flex:none}.shot .pin{position:absolute; transform:translate(-50%,-50%); animation:pinpulse 2.2s ease-in-out infinite}
@keyframes pinpulse{0%, 100%{box-shadow:0 0 0 3px rgba(11,15,20,.7),0 0 0 0 rgba(242,184,75,.6)}50%{box-shadow:0 0 0 3px rgba(11,15,20,.7),0 0 0 10px rgba(242,184,75,0)}}.how-steps.plain{list-style:decimal; padding-left:20px; gap:6px}.how-steps.plain li{display:list-item; color:var(--mut)}.how.small{margin-top:0}
@media (max-width:760px){}.shots{display:flex; flex-direction:column; gap:10px}.how-body.wide{grid-template-columns:minmax(0,1fr)}.how-body.wide .how-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 16px}.how-body.wide .shot{background:#151b23; padding:6px}.how-body.wide .shot img{max-width:720px; margin:0 auto}.mu-pick{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:8px; margin-top:10px}.mu-p{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s1)}.mu-p > div{flex:1; min-width:0}.mu-p .sub{display:block; font-size:12px; color:var(--mut)}.mu-p em{color:var(--gain); font-style:normal; font-weight:600}.mu-p.nb{border-color:rgba(43,212,160,.45); background:linear-gradient(90deg,rgba(43,212,160,.12),var(--s1))}.btn.sm{padding:6px 10px; font-size:12px}
@media (max-width:760px){.mu-p{flex-wrap:wrap}.mu-p > div{flex-basis:100%}}.pl-mode.on{border-color:var(--gold); background:linear-gradient(90deg,rgba(242,184,75,.16),var(--s1))}.pl-big .sub{color:var(--mut); font-size:13px}.pl-kpis b.good, .pl-cost .good{color:var(--gain)}.pl-sk .k{color:var(--mut)}.pl-sk .v em{font-size:11px; color:var(--faint); font-style:normal}.pl-sk .dots{display:flex; gap:3px}.pl-sk .dots i{width:14px; height:10px; border-radius:var(--r-xs); background:var(--s4)}.pl-sk .dots i.on{background:var(--gold)}.pl-sk .dots i.add{background:var(--gain); animation:pinpulse 2.2s ease-in-out infinite}.pl-sk .dots i.cut{background:var(--dmg); opacity:.6}.pl-tile.chg{border-color:rgba(43,212,160,.5)}.pl-tile .sub{font:500 11px "IBM Plex Mono",monospace; color:var(--mut)}.itile.lg{width:56px; height:56px}.itile.lg img{width:44px; height:44px}
@media (max-width:760px){.pl-sk .dots i{width:10px}}.pl-sk .dots i.eco{background:#5CC8FF; opacity:.8}.pl-sk.eco .k{color:var(--faint)}.pl-sk .v em{margin-left:6px}
/* allied battles + player sort control */
.sortctl{display:inline-flex; gap:6px; align-items:center}.sortctl .inp{padding:6px 10px; font-size:13px}.sortctl .btn{padding:6px 10px}.allylist{display:flex; flex-direction:column; gap:8px; margin-top:10px}.ally{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--s1); flex-wrap:wrap}.ally.noorder{border-color:rgba(242,184,75,.45)}.ally.ordered{opacity:.85}.a-vs{flex:1 1 300px; min-width:0}.a-vs .sub{display:block; font-size:12px; color:var(--mut); margin-top:2px}.a-vs i{color:var(--faint); font-style:normal; font-size:12px; margin:0 4px}.a-order{font:700 12px "IBM Plex Mono",monospace; padding:4px 9px; border-radius:var(--r-pill); background:rgba(242,184,75,.14); color:var(--gold-2)}.a-order.ok{background:rgba(43,212,160,.14); color:var(--gain)}.a-order.bad{background:rgba(255,92,108,.16); color:#ff9aa4}.a-links{display:flex; gap:6px}.a-links .btn{padding:6px 10px; font-size:12px}
@media (max-width:760px){.ally{gap:8px}.a-links{width:100%}.a-links .btn{flex:1; text-align:center}}.t0{--tc:var(--gold)}.t2{--tc:var(--lvl)}.cr-who .sub{display:block; font-size:12px; color:var(--mut)}.cr-rule.up b{color:var(--gain)}.cr-rule.down b{color:#ff9aa4}.a-mus b{color:var(--ink)}.a-mus b.bad{color:#ff9aa4}/* weekly benchmarks */
.q-bands{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px}.q-band{display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; border-radius:var(--r); border:1px solid var(--line); background:var(--s1)}.q-band b{font:700 14px "Chakra Petch",sans-serif; color:var(--gold-2); margin-bottom:2px}.q-t{font:600 13px "IBM Plex Mono",monospace; padding:3px 9px; border-radius:var(--r-pill)}.q-t.war{background:rgba(255,92,108,.12); color:#ff9aa4}.q-t.eco{background:rgba(43,212,160,.12); color:var(--gain)}.q-band em{font-size:11px; color:var(--mut); font-style:normal; margin-top:4px}.q-list{display:flex; flex-direction:column; gap:4px; margin-top:10px}.q-row{display:grid; grid-template-columns:40px minmax(0,1.2fr) minmax(0,1.6fr) 118px; gap:12px; align-items:center; padding:9px 12px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); border-left:4px solid var(--line)}.q-row:hover{background:var(--s3)}.q-row.met, .q-row.pace{border-left-color:var(--gain)}.q-row.close{border-left-color:var(--gold)}.q-row.short{border-left-color:var(--dmg)}.q-who{min-width:0}.q-who .sub{display:block; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.q-prog{display:flex; flex-direction:column; gap:4px; min-width:0}.q-nums b{font:700 14px "Chakra Petch",sans-serif}.q-nums i{font-style:normal; font-size:12px; color:var(--mut)}.q-bar{position:relative; display:block; height:7px; border-radius:var(--r-xs); background:var(--s4); overflow:hidden}.q-bar i{display:block; height:100%; background:var(--gold); border-radius:var(--r-xs)}.q-bar u{position:absolute; top:0; bottom:0; width:2px; background:rgba(233,238,244,.7)}.q-row.met .q-bar i, .q-row.pace .q-bar i{background:var(--gain)}.q-row.short .q-bar i{background:var(--dmg)}.q-st{font:700 12px "IBM Plex Mono",monospace; white-space:nowrap; text-align:right}.q-row.met .q-st, .q-row.pace .q-st{color:var(--gain)}.q-row.short .q-st{color:#ff9aa4}.q-row.close .q-st{color:var(--gold-2)}
@media (max-width:760px){.q-row{ row-gap:6px}.q-prog{grid-column:1/4}}/* politics: clickable president with a soft aura, party cards as links, party member list */
.aura{position:relative; display:inline-block; border-radius:var(--r-lg); padding:3px; background:linear-gradient(120deg,#9a7020,var(--gold) 30%,#fff3c4 50%,var(--gold) 70%,#9a7020); background-size:220% 220%; animation:foil 6s ease-in-out infinite, glow 3s ease-in-out infinite}.aura .av, .aura img{position:relative; display:block; border-radius:var(--r); border:2px solid var(--on-accent)}.aura .shine{position:absolute; inset:3px; border-radius:var(--r); overflow:hidden; pointer-events:none}.aura .shine::before{content:""; position:absolute; top:-60%; left:-70%; width:55%; height:220%; transform:rotate(25deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65) 50%,rgba(255,255,255,0)); animation:sweep 5s ease-in-out infinite}
@keyframes foil{0%, 100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes glow{0%, 100%{box-shadow:0 0 10px 2px rgba(242,184,75,.35), 0 0 28px 6px rgba(242,184,75,.18)}50%{box-shadow:0 0 16px 4px rgba(255,214,120,.6), 0 0 44px 12px rgba(242,184,75,.32)}}
@keyframes sweep{0%{left:-70%}30%{left:140%}100%{left:140%}}
@media (prefers-reduced-motion:reduce){.aura, .aura .shine::before{animation:none}}a.plain{color:inherit; text-decoration:none}a.plain:hover{color:var(--gold-2)}a.party{display:block; text-decoration:none; color:inherit; cursor:pointer}a.party:hover{background:var(--s2)}.party-more{margin-top:8px; font-size:12px; color:var(--gold)}.pmembers{display:flex; flex-direction:column; gap:4px}.pm{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink)}.pm:hover{background:var(--s3)}.pm-who{flex:1; min-width:0}.pm-who b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.pm-who .sub{display:block; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.pm-role{font:700 11px "Chakra Petch",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--on-accent); background:var(--gold); border-radius:var(--r-pill); padding:3px 9px; white-space:nowrap}
@media (prefers-reduced-motion:reduce){.aura::after{animation:none}}/* cabinet: office colours like the game (silver VP, red defence, gold economy, blue foreign) */
.gov-p.office{background:linear-gradient(180deg,color-mix(in srgb,var(--oc) 14%,transparent),transparent 70%); border-color:color-mix(in srgb,var(--oc) 45%,var(--line))}.gov-p.office .role{color:var(--oc)}.oframe{position:relative; display:inline-block; border-radius:var(--r); padding:2px; background:linear-gradient(120deg,color-mix(in srgb,var(--oc) 55%,#000),var(--oc) 45%,#fff 52%,var(--oc) 60%,color-mix(in srgb,var(--oc) 55%,#000)); background-size:220% 220%; animation:foil 6s ease-in-out infinite, oglow 3s ease-in-out infinite}.oframe .av{display:block; border-radius:var(--r-sm); border:2px solid var(--on-accent)}.oframe .shine{position:absolute; inset:2px; border-radius:var(--r-sm); overflow:hidden; pointer-events:none}.oframe .shine::before{content:""; position:absolute; top:-60%; left:-70%; width:55%; height:220%; transform:rotate(25deg); background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0)); animation:sweep 6s ease-in-out infinite}
@keyframes oglow{0%, 100%{box-shadow:0 0 8px 1px color-mix(in srgb,var(--oc) 40%,transparent)}50%{box-shadow:0 0 16px 4px color-mix(in srgb,var(--oc) 65%,transparent)}}
@media (prefers-reduced-motion:reduce){.oframe, .oframe .shine::before{animation:none}}/* titles: current #1 on a board */
.ttl{margin-left:4px; font-size:12px; cursor:help}.ttlchip{border-color:rgba(242,184,75,.5); color:var(--gold-2)}.q-wk{display:inline-flex; align-items:center; gap:8px; font:600 11px Saira,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}.q-wk .inp{min-width:220px; text-transform:none; letter-spacing:0; font-size:14px; font-weight:600}/* first-paint skeleton */
.skel{display:flex; flex-direction:column; gap:14px; padding:6px 0}.skel i{display:block; border-radius:var(--r); background:linear-gradient(90deg,var(--s2),var(--s4),var(--s2)); background-size:200% 100%; animation:skel 1.2s linear infinite}.skel .h{height:44px; width:40%}.skel .row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}.skel .row i{height:92px}.skel .b{height:180px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}#qkind .chip.k-war[aria-pressed="true"]{background:rgba(255,92,108,.14); border-color:rgba(255,92,108,.55); color:#ff9aa4}#qkind .chip.k-eco[aria-pressed="true"]{background:rgba(43,212,160,.14); border-color:rgba(43,212,160,.55); color:var(--gain)}
/* mobile polish */
@media (max-width:760px){.card h3{flex-wrap:wrap}.card h3 > span[style*="margin-left:auto"]{margin-left:0 !important; flex-basis:100%; max-width:100%}.card h3 .subtabs{max-width:100%}.b-names{white-space:normal; line-height:1.3}.b-top b{white-space:normal; text-align:right}.brow .sub{white-space:normal}.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}.grid.g4 .kpi .v{font-size:26px}.grid.g4 .kpi{padding:14px}}/* diplomacy */
.dip-k{font:600 11px "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}.me-card .flag-img{width:44px; height:30px; border-radius:var(--r-xs)}.al-card{border-color:rgba(242,184,75,.35); background:linear-gradient(180deg,rgba(242,184,75,.08),var(--panel) 40%)}.al-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap}.al-crest{width:96px; height:96px; border-radius:var(--r-lg); overflow:hidden; flex:none; display:grid; place-items:center; font-size:44px; background:rgba(242,184,75,.12); box-shadow:0 0 0 1px rgba(242,184,75,.35), 0 14px 40px -16px #000}.al-crest img{width:100%; height:100%; object-fit:cover}.al-title b{display:block; font:700 26px/1 "Chakra Petch",sans-serif; color:var(--gold-2); letter-spacing:.04em; margin-top:4px}.al-stats{display:flex; gap:22px; flex-wrap:wrap; margin-left:auto}.al-stats > div{display:flex; flex-direction:column; gap:3px}.al-stats span{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}.al-stats b{font:600 18px "IBM Plex Mono",monospace}.al-leader a{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink)}.al-leader b{font:600 14px "Chakra Petch",sans-serif}.al-ranks{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:16px}.al-rank{padding:10px 12px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:2px 8px}.al-rank span{grid-column:1 / 3; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}.al-rank b{font:600 18px "IBM Plex Mono",monospace}.al-rank em{font-style:normal; font:600 12px "IBM Plex Mono",monospace; align-self:end; color:var(--mut)}.al-rank.diamond em{color:#9fdcff}.al-rank.platinum em{color:#c9d6ff}.al-rank.gold em{color:var(--gold-2)}.al-rank.silver em{color:#cfd6de}.al-rank.bronze em{color:#d9a066}.al-members{display:flex; flex-direction:column; gap:4px}.al-m{display:grid; grid-template-columns:34px minmax(0,1fr) repeat(4,auto); align-items:center; gap:12px; padding:7px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font-size:13px}.al-m:hover{background:var(--s3)}.al-m .flag-img{width:30px; height:20px; border-radius:var(--r-xs)}.al-m b{font-weight:600}.al-m span{font:500 12px "IBM Plex Mono",monospace; white-space:nowrap}.al-m .mut{color:var(--mut)}.al-m i{font-style:normal; font-size:10px; padding:1px 6px; border-radius:var(--r-pill); background:rgba(255,92,108,.2); color:#ffb3ba}.al-m.al-me{background:rgba(242,184,75,.1); box-shadow:inset 3px 0 0 var(--gold)}.al-m.susp{opacity:.45}.dip-secs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px}.dip-sec.s-war h3{color:#ff9aa4}.dip-sec.s-pact h3{color:#9fdcff}.dip-sec.s-ally h3{color:var(--gain)}.dip-sec.s-nap h3{color:#c9d6ff}.dt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px}.dt{display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 10px; align-items:center; padding:9px 11px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line)}.dt .flag-img{width:36px; height:24px; border-radius:var(--r-xs); display:block; grid-row:1 / 3; align-self:start; margin-top:2px}.dt-b{min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap}.dt-b b{font-size:14px}.dt-t{display:inline-flex; gap:4px}.dt-t i{font:600 10px "IBM Plex Mono",monospace; font-style:normal; padding:2px 6px; border-radius:var(--r-pill); background:var(--s4); color:var(--mut)}.dt-t i.member{background:rgba(242,184,75,.22); color:var(--gold-2)}.dt-t i.pact{background:rgba(92,200,255,.2); color:#9fdcff}.dt-t i.sworn{background:rgba(255,92,108,.3); color:#ffb3ba}.dt-t i.odd{background:rgba(242,169,59,.22); color:#ffd58a}.dt-f{grid-column:2; display:flex; flex-wrap:wrap; gap:3px 10px; font:500 11px "IBM Plex Mono",monospace; color:var(--mut)}.dt-f i{font-style:normal; color:var(--faint)}.dt-left{flex-basis:100%}.dt-bar{display:block; height:3px; margin-top:4px; border-radius:var(--r-xs); background:rgba(148,178,214,.15); overflow:hidden}.dt-bar i{display:block; height:100%; background:#9fdcff}.dt.war{border-color:rgba(255,92,108,.35)}.dt.pact{border-color:rgba(92,200,255,.35)}.dt.friend{border-color:rgba(43,212,160,.3)}.dt.nap{border-color:rgba(201,214,255,.25)}.dt-none{padding:6px 2px; color:var(--faint); font-size:13px}
@media (max-width:900px){.dip-secs{grid-template-columns:minmax(0,1fr)}.al-stats{margin-left:0; gap:14px}.al-title b{font-size:22px}.al-m{grid-template-columns:30px minmax(0,1fr) auto auto; row-gap:2px}.al-m span:nth-of-type(n+3){grid-column:2 / -1}}/* profile: live combat + account */
.buffline{padding:8px 12px; border-radius:var(--r-sm); font-size:13px; margin-bottom:10px}.buffline.good{background:rgba(43,212,160,.12); color:var(--gain)}.buffline.bad{background:rgba(255,92,108,.12); color:#ff9aa4}.cstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}.cstat{padding:9px 11px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px}.cstat span{display:flex; align-items:center; gap:5px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}.cstat b{font:600 20px "IBM Plex Mono",monospace}.cstat em{font-style:normal; font-size:11px; color:var(--faint); line-height:1.3}.hits{margin-top:12px; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}.hitrow{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:6px; padding:7px 12px; align-items:center; font-size:13px; border-top:1px solid var(--line)}.hitrow:first-child{border-top:0}.hitrow b{font:600 14px "IBM Plex Mono",monospace; color:var(--foe)}.hitrow.hd{background:var(--s2)}.hitrow.hd b{font:600 10px "Chakra Petch",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}.hitrow.hd span{font:600 11px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2)}.cbars{display:flex; flex-direction:column; gap:6px; margin-top:10px}.cbar{display:grid; grid-template-columns:64px minmax(0,1fr) auto auto; gap:10px; align-items:center; font-size:12px}.cbar span:first-child{color:var(--mut)}.cbar .track{display:block; height:8px; border-radius:var(--r-xs); background:var(--s4); overflow:hidden}.cbar .track i{display:block; height:100%; border-radius:var(--r-xs)}.cbar b{font:600 12px "IBM Plex Mono",monospace}.cbar em{font-style:normal; font-size:11px; color:var(--faint)}.wsplit{margin-bottom:12px}.wbar{display:flex; height:14px; border-radius:var(--r-pill); overflow:hidden; gap:2px}.wbar i{display:block; min-width:3px}.wlegend{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:12px; color:var(--mut)}.wlegend i{display:inline-block; width:9px; height:9px; border-radius:var(--r-xs); margin-right:5px}.wlegend b{color:var(--ink)}.wlegend em{font-style:normal; color:var(--faint); font-size:11px}.cases{margin:10px 0}.cases .k{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-bottom:6px}.crow{display:flex; flex-wrap:wrap; gap:6px}.ctile{display:inline-flex; flex-direction:column; align-items:center; min-width:58px; padding:5px 8px; border-radius:var(--r-sm); border:1px solid transparent}.ctile b{font:600 14px "IBM Plex Mono",monospace}.ctile i{font-style:normal; font-size:10px; text-transform:uppercase; letter-spacing:.06em; opacity:.85}.acct{margin-top:6px}
@media (max-width:760px){.hitrow{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); padding:7px 8px; font-size:12px}.hitrow b{font-size:12px}}.lo{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px 22px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line); text-align:center; min-width:0}.lo .lo-ico{width:44px; height:44px}.lo.empty .lo-ico{display:grid; place-items:center; color:var(--faint); font-size:20px}.lo-l{font:600 10px "Chakra Petch",sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}.lo-s{font-size:11px; color:var(--ink2); line-height:1.25}.lo-d{position:absolute; left:8px; right:8px; bottom:8px; height:4px; border-radius:var(--r-xs); background:rgba(148,178,214,.15); overflow:hidden}.lo-d i{display:block; height:100%}.lo-dn{position:absolute; right:7px; bottom:12px; font:600 10px "IBM Plex Mono",monospace; color:var(--faint)}
@media (max-width:760px){}/* profile: game-style skills panel */
.gs-group{margin-top:10px}.gs-gt{font:600 11px "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:8px}.gs{padding:6px 0 10px}.gs-h{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}.gs-ico{font-size:14px}.gs-h b{font:700 16px "IBM Plex Mono",monospace; color:var(--sc)}.gs-n{font-weight:600; font-size:14px}.gs-x{font-size:11px; color:var(--faint); margin-left:2px}.gs-w{font-size:12px; color:var(--mut); margin:1px 0 6px 21px; line-height:1.3}.gs-pips{display:flex; align-items:center; gap:3px; margin-left:21px; flex-wrap:wrap}.gs-pips i{width:22px; height:22px; border-radius:var(--r-xs); background:#161c25; border:1px solid rgba(148,178,214,.14); display:grid; place-items:center; font-size:11px; font-style:normal; box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}.gs-pips i.on{background:color-mix(in srgb, var(--sc) 38%, #0d141c); border-color:color-mix(in srgb, var(--sc) 70%, transparent); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.gs-lv{font:600 10px "IBM Plex Mono",monospace; color:var(--faint); margin-left:6px}
@media (max-width:760px){.gs-pips i{width:18px; height:18px; font-size:10px}}/* profile layout */
.pjump{ backdrop-filter:blur(10px); width:max-content; max-width:100%}.pjump a{ white-space:nowrap}.pjump a:hover{}.psec{margin-top:16px}.gs-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px}.gs-cols .gs-group{margin-top:6px}.combat-cols{}.combat-cols .hits{margin-top:0}
@media (max-width:900px){.gs-cols, .combat-cols{grid-template-columns:minmax(0,1fr)}.pjump{top:calc(var(--top-h) + 42px)}}
@media (max-width:760px){.cstats{grid-template-columns:repeat(2,minmax(0,1fr))}.pjump{width:100%; mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}.pjump a{padding:6px 9px; font-size:11px}}/* market */
.mkt th:first-child, .mkt td:first-child{text-align:left}.mkt td.num{white-space:nowrap}.mkt tr.on td{background:rgba(242,184,75,.08)}.mk-item{}.mk-item b{}.mkt .ghead td{padding:10px 12px 4px; font:600 11px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); border-bottom:0}.pc{font:600 12px "IBM Plex Mono",monospace; padding:2px 7px; border-radius:var(--r-pill)}.pc.up{color:var(--gain); background:rgba(43,212,160,.12)}.pc.down{color:#ff9aa4; background:rgba(255,92,108,.12)}.pc.flat{color:var(--faint); background:var(--s3)}.spark{display:block; margin-left:auto}.mk-detail h3 .itile{width:28px; height:28px}.ob{border:1px solid var(--line); border-radius:var(--r-sm); padding:10px}.ob-h{display:flex; justify-content:space-between; font:600 11px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-bottom:6px}.ob-row{position:relative; display:grid; grid-template-columns:70px minmax(0,1fr) 60px 70px; gap:8px; align-items:center; padding:3px 6px; font:500 12px "IBM Plex Mono",monospace}.ob-row i{display:block; height:12px; border-radius:var(--r-xs)}.ob-row b{text-align:right}.ob-row em{font-style:normal; text-align:right; color:var(--faint); font-size:11px}.mkt .mut{color:var(--mut)}
@media (max-width:760px){.ob-row{}.ob-row em{display:none}}.mk-tile{width:32px; height:32px; border-radius:var(--r-sm)}.mk-big{width:40px; height:40px; border-radius:var(--r-sm)}.mk-v{font-size:20px !important; display:flex; align-items:center; gap:6px; flex-wrap:wrap}.mk-r{font:600 10px "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.06em; padding:2px 7px; border-radius:var(--r-pill); margin-left:8px; color:#fff; vertical-align:middle; border:0}.mk-item{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}.mk-item > span{display:flex; flex-direction:column; min-width:0}.mk-item b{font-weight:600; font-size:13px}.mk-item i{font-style:normal; font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px}.mk-p{font:600 14px "IBM Plex Mono",monospace}.mv-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}.mv{display:grid; grid-template-columns:32px minmax(0,1fr) 62px 60px; gap:10px; align-items:center; padding:6px 4px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink)}.mv:hover{background:var(--s3)}.mv-n{min-width:0}.mv-n b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.mv-n i{font-style:normal; font:500 11px "IBM Plex Mono",monospace; color:var(--mut)}.recipe{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; margin-bottom:12px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line); font-size:13px}.recipe .cin-t{margin:0 8px 0 0}.rc{display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:var(--r-sm); background:var(--s3)}.rc i{font-style:normal; color:var(--faint); font-size:11px; margin-left:3px}.rc.out{background:rgba(242,184,75,.14)}.rc-m{color:var(--mut)}.rc-m b{color:var(--gold-2); font-family:"IBM Plex Mono",monospace}.rc-u{flex-basis:100%; font-size:12px; color:var(--mut)}.rc-u a{color:var(--gold)}.walks{display:flex; flex-direction:column; gap:4px; margin-bottom:10px}.walk{display:grid; grid-template-columns:70px 1fr 1fr; gap:8px; font:500 12px "IBM Plex Mono",monospace; padding:4px 6px; border-radius:var(--r-sm); background:var(--s2)}.walk span{color:var(--mut)}.walk b{font-weight:600}.walk b:nth-child(2){color:#ff9aa4}.walk b:nth-child(3){color:var(--gain)}.mk-card{display:grid; grid-template-columns:32px minmax(0,1fr) 70px auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink)}.mk-cn{min-width:0}.mk-cn b{display:block; font-size:13px}.mk-cn i{font-style:normal; font-size:11px; color:var(--faint)}.mk-cp{display:flex; flex-direction:column; align-items:flex-end; gap:2px}.mk-cp b{font:600 14px "IBM Plex Mono",monospace}
@media (max-width:760px){.mv-cols{grid-template-columns:minmax(0,1fr)}.walk{}.mk-item i{max-width:140px}}.mk-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:900px){.mk-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.walk{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr); font-size:10px; gap:4px}.walk b{white-space:normal}.ob-row{grid-template-columns:52px minmax(0,1fr) 44px}}.rc-u b{color:var(--gold-2)}
@media (max-width:760px){}/* diplomacy: country panel + search */
.dt{text-decoration:none; color:var(--ink); transition:.15s}a.dt:hover{border-color:var(--gold); background:rgba(242,184,75,.06)}.cfind label{display:block; font:600 11px Saira,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:8px}.cfind .inp{font-size:16px; padding:12px 14px}.gr-row{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink)}.gr-row:hover{background:var(--s3)}.gr-row .flag-img{width:22px; height:15px; border-radius:var(--r-xs)}.gr-row .meta{margin-left:auto; color:var(--mut); font-size:12px}.cpanel{border-color:rgba(242,184,75,.35)}.cp-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap}.cp-head .flag-img{width:56px; height:38px; border-radius:var(--r-sm)}.cp-head h2{margin:0 0 4px; font:700 22px "Chakra Petch",sans-serif}.dt-t i.ally{background:rgba(43,212,160,.18); color:var(--gain)}.dt-t i.nap{background:rgba(201,214,255,.18); color:#c9d6ff}.dt-t i.war{background:rgba(255,92,108,.25); color:#ffb3ba}.dt-t i.none{background:var(--s4); color:var(--mut)}.cp-facts{display:grid; gap:8px; margin:14px 0 10px}.cp-facts > div{padding:9px 11px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px}.cp-facts span{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}.cp-facts b{font:600 14px "Chakra Petch",sans-serif; display:flex; align-items:center; gap:6px}.cp-facts em{font-style:normal; font-size:11px; color:var(--faint)}.cp-lists{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:12px}.chip.cc{text-decoration:none; color:var(--ink)}.chip.cc .flag-img{width:18px; height:12px; border-radius:var(--r-xs)}.chip.cc .gr{color:var(--faint); font-size:11px; margin-left:4px}.rg-list{display:flex; flex-direction:column; gap:3px; margin-top:6px}.rg{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr) 90px 80px; gap:8px; align-items:center; padding:6px 10px; border-radius:var(--r-sm); font-size:12px; background:var(--s1)}.rg.occ{background:rgba(242,169,59,.07)}.rg.hot{box-shadow:inset 3px 0 0 var(--foe)}.rg-n b{font-weight:600}.rg-n i{font-style:normal; color:var(--faint); font-size:11px}.rg .itile{margin-right:2px}.rg i{font-style:normal; color:var(--faint); font-size:11px}.rg-res{position:relative; height:8px; border-radius:var(--r-xs); background:var(--s4); overflow:hidden; display:block}.rg-res i{display:block; height:100%; background:var(--dmg)}.rg-res em{position:absolute; right:3px; top:-1px; font:600 10px "IBM Plex Mono",monospace; color:#fff; line-height:10px}.rg .mut a{color:var(--foe); text-decoration:none}
@media (max-width:760px){.rg{grid-template-columns:minmax(0,1fr) auto; row-gap:3px}.rg > span:nth-child(3), .rg > span:nth-child(5){display:none}.cp-head h2{font-size:20px}}.cp-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.cpanel .al-ranks{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.cpanel .al-ranks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.cpanel .al-ranks{grid-template-columns:repeat(2,minmax(0,1fr))}}/* countries + head to head */
.world .flag-img{width:26px; height:17px; border-radius:var(--r-xs)}.world td.on{color:var(--gold-2); font-weight:600}.world tr.on td{background:rgba(242,184,75,.08)}.world .mk-item span{display:flex; align-items:center; gap:6px}.wrel{font:600 10px "IBM Plex Mono",monospace; padding:2px 6px; border-radius:var(--r-pill); font-style:normal; background:var(--s4); color:var(--mut)}.wrel.rel-war{background:rgba(255,92,108,.25); color:#ffb3ba}.wrel.rel-pact{background:rgba(92,200,255,.2); color:#9fdcff}.wrel.rel-ally{background:rgba(43,212,160,.18); color:var(--gain)}.wrel.rel-member{background:rgba(242,184,75,.22); color:var(--gold-2)}.wrel.rel-me{background:var(--gold); color:var(--on-accent)}.h2h-head{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:12px}.h2h-c{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}.h2h-c.r{flex-direction:row-reverse; text-align:right}.h2h-c .flag-img{width:44px; height:30px; border-radius:var(--r-xs)}.h2h-c b{font:700 20px "Chakra Petch",sans-serif}.h2h-c em{font-style:normal; font:600 11px "IBM Plex Mono",monospace; color:var(--mut); margin-left:6px}.h2h-vs{font:700 13px "Chakra Petch",sans-serif; color:var(--faint); letter-spacing:.1em}.h2h-rows{display:flex; flex-direction:column; gap:4px}.h2h-row{display:grid; grid-template-columns:80px minmax(0,1fr) 190px minmax(0,1fr) 80px; gap:8px; align-items:center; padding:5px 8px; border-radius:var(--r-sm); font-size:12px}.h2h-row:nth-child(odd){background:var(--s1)}.h2h-row .va, .h2h-row .vb{font:600 13px "IBM Plex Mono",monospace}.h2h-row .va{text-align:right}.h2h-row .lbl{text-align:center; color:var(--mut)}.h2h-row .lbl i{display:block; font-style:normal; font-size:10px; color:var(--faint)}.h2h-row .bar{height:10px; border-radius:var(--r-xs); background:var(--s4); overflow:hidden; display:block; position:relative}.h2h-row .bar i{display:block; height:100%; background:rgba(148,178,214,.35); border-radius:var(--r-xs)}.h2h-row .bar.l i{margin-left:auto}.h2h-row.a .va{color:var(--gain)}.h2h-row.a .bar.l i{background:var(--gain)}.h2h-row.b .vb{color:var(--gain)}.h2h-row.b .bar.r i{background:var(--gain)}.h2h-shared{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; font-size:12px; color:var(--mut)}.h2h-shared a{color:var(--gold)}.h2h-pick{margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}.h2h-pick label{font-size:12px; color:var(--mut)}.h2h-pick .picker{flex:1; min-width:200px; max-width:320px}
@media (max-width:760px){.h2h-row{ font-size:11px; gap:4px}.h2h-row .va, .h2h-row .vb{font-size:11px}.h2h-c b{}.h2h-c .flag-img{width:32px; height:22px}}.cp-rank{font:600 13px "IBM Plex Mono",monospace; color:var(--mut); vertical-align:middle; margin-left:6px}.gov-grid.sm{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}.gov-p.sm{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line); text-decoration:none; color:var(--ink); flex-direction:row; text-align:left}.gov-p.sm .role{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); display:block}.gov-p.sm .nm{font-weight:600; font-size:13px; display:block}.gov-p.sm > span{display:flex; flex-direction:column}.gov-p.sm.empty{opacity:.5}.evlist{display:flex; flex-direction:column; gap:2px; max-height:420px; overflow:auto}.evl{display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; padding:6px 8px; border-radius:var(--r-sm); font-size:12px; line-height:1.4}.evl:nth-child(odd){background:var(--s1)}.evt{font:500 11px "IBM Plex Mono",monospace; color:var(--faint); padding-top:2px}.evl a{color:var(--gold); text-decoration:none}#wrel .chip{height:26px; padding:0 9px; font-size:11px}
@media (max-width:760px){.evl{grid-template-columns:56px minmax(0,1fr)}}/* countries on phones */
.wcard{display:grid; grid-template-columns:28px 30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink)}.wcard .flag-img{width:30px; height:20px; border-radius:var(--r-xs)}.wc-n{font:500 11px "IBM Plex Mono",monospace}.wc-b{min-width:0}.wc-b b{display:flex; align-items:center; gap:6px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.wc-b i{display:block; font-style:normal; font-size:11px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.wc-v{text-align:right}.wc-v b{display:block; font:600 14px "IBM Plex Mono",monospace; color:var(--gold-2)}.wc-v i{font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
@media (max-width:760px){.h2h-row{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"lbl lbl" "va vb" "bl br"; row-gap:3px; padding:8px 10px}.h2h-row .lbl{grid-area:lbl; text-align:left; font-weight:600; color:var(--ink2)}.h2h-row .lbl i{display:inline; margin-left:6px; font-weight:500}.h2h-row .va{grid-area:va; text-align:left; font-size:14px}.h2h-row .vb{grid-area:vb; text-align:right; font-size:14px}.h2h-row .bar.l{grid-area:bl}.h2h-row .bar.r{grid-area:br}.h2h-row .bar.l i{margin-left:0}.h2h-head{grid-template-columns:1fr auto 1fr}.h2h-c b{font-size:14px}.h2h-c em{display:block; margin:0}.card h3 > .n{flex-basis:100%; margin-left:0 !important; margin-top:6px}.cp-head .n{flex-basis:100%; margin-left:0 !important}}.cp-head .dt-t i, .dt-t i{white-space:nowrap}.q-row .av.sm, .q-row .avx.sm{width:36px; height:36px}.q-st{min-width:0; overflow:hidden; text-overflow:ellipsis}
@media (max-width:760px){.q-row{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"av who st" "av prog prog"}.q-row .q-who .sub{white-space:normal; overflow:visible; line-height:1.35; text-overflow:clip}.q-row{align-items:start}.q-row > .av{margin-top:2px}.q-row > .av{grid-area:av}.q-row .q-who{grid-area:who}.q-row .q-prog{grid-area:prog}.q-row .q-st{grid-area:st; overflow:visible; min-width:max-content; align-self:center}}/* v0.26 map layer */
.locc{white-space:nowrap}.locc.abroad{color:#ffd58a}.locc .flag-img{width:18px; height:12px; border-radius:var(--r-xs); vertical-align:-1px; margin-right:4px}.abroad-tag{font-style:normal; font:600 10px "IBM Plex Mono",monospace; padding:1px 6px; border-radius:var(--r-pill); background:rgba(242,169,59,.22); color:#ffd58a; margin-left:4px}.trip .cin-t{margin:0 0 4px}.trip .flag-img{width:18px; height:12px; border-radius:var(--r-xs); vertical-align:-1px}.reach-k{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}.reach-k > div{padding:9px 11px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line); display:flex; flex-direction:column}.reach-k b{font:700 22px "IBM Plex Mono",monospace; color:var(--gold-2)}.reach-k span{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut)}.reach-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}.rc-p{display:grid; grid-template-columns:28px minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:5px 6px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font-size:13px}.rc-p:hover{background:var(--s3)}.rc-p b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.rc-p i{font-style:normal; font:500 11px "IBM Plex Mono",monospace; color:var(--mut)}.rc-p em{font-style:normal; font:600 11px "IBM Plex Mono",monospace; color:var(--foe)}.card.focus{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); border-color:rgba(242,184,75,.5); background:linear-gradient(90deg,rgba(242,184,75,.14),var(--panel))}.card.focus .res{background:var(--gold); color:var(--on-accent)}
@media (max-width:760px){.reach-k{grid-template-columns:repeat(2,minmax(0,1fr))}.reach-cols{grid-template-columns:minmax(0,1fr)}.reach-k b{font-size:18px}}.trip .count{display:block; margin-top:4px}.ver{font:600 10px "IBM Plex Mono",monospace; letter-spacing:.04em; color:var(--mut); padding:2px 7px; border-radius:var(--r-pill); border:1px solid var(--line2); background:var(--s2); text-transform:none; align-self:center}
@media (max-width:760px){.ver{display:none}}/* market fills: live tape */
.tape-card h3{flex-wrap:wrap}.tape-sub{font:400 12px "Inter",sans-serif; color:var(--mut); letter-spacing:0; text-transform:none; margin-left:2px}.tape-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:16px; align-items:stretch}.tape-col{display:flex; flex-direction:column; position:relative; min-height:560px}.tape-h, .tp{display:grid; grid-template-columns:34px 30px minmax(0,1fr) 120px 68px 118px; gap:8px; align-items:center; padding:6px 10px}.tape-h{font:600 10px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); background:var(--s2); border-radius:var(--r-sm) var(--r-sm) 0 0}.tape-h b{text-align:right; font:inherit; color:var(--mut)}.tape-wrap{flex:1; position:relative; min-height:480px}.tape{position:absolute; inset:0; overflow:hidden; border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-sm) var(--r-sm); background:linear-gradient(180deg,var(--s1),transparent 60px)}.tp{position:relative; border-top:1px solid var(--line); font-size:13px; color:var(--ink); overflow:hidden}.tp:first-child{border-top:0}.tp.in{max-height:0; opacity:0; padding-top:0; padding-bottom:0; transform:translateY(-8px); transition:max-height .35s ease, opacity .4s ease, transform .4s ease, padding .35s ease, background 1.6s ease; background:rgba(43,212,160,.22)}.tp.in.show{max-height:60px; opacity:1; padding-top:6px; padding-bottom:6px; transform:none; background:transparent}.tp.uk.in.show{background:rgba(242,184,75,.06)}.tp .tp-t0{font:500 11px "IBM Plex Mono",monospace; color:var(--faint); font-style:normal; white-space:nowrap}.tp .tp-i{display:flex}.tp-n{min-width:0}.tp-n b{display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}.tp-n b a{color:inherit; text-decoration:none}.tp-n b a:hover{color:var(--gold-2)}.tp-n em{display:block; font-style:normal; font-size:11px; color:var(--mut)}.tp-n em.q{font-family:"IBM Plex Mono",monospace}.tp-n em a{color:var(--gold-2); text-decoration:none}.tp-n em.buy{color:#2bd4a0}.tp-n em.sell{color:#ff5c6c}.tp b.tp-q{font:500 12px "IBM Plex Mono",monospace; text-align:right; white-space:nowrap; color:var(--mut)}.tp b.tp-d{text-align:right}.tp b.tp-d .pc{font-size:10px; padding:1px 6px}.tp b.tp-m{position:relative; text-align:right; font:600 13px "IBM Plex Mono",monospace; color:var(--gold-2); white-space:nowrap; height:22px; display:flex; align-items:center; justify-content:flex-end; border-radius:var(--r-xs); overflow:hidden}.tp b.tp-m i{position:absolute; right:0; top:0; bottom:0; background:linear-gradient(90deg,rgba(242,184,75,.02),rgba(242,184,75,.22)); border-right:2px solid rgba(242,184,75,.5)}.tp b.tp-m span{position:relative; padding:0 6px}.tp.gear .tp-n b a{color:#c9b6ff}.tp.uk{background:rgba(242,184,75,.06)}.tp.uk .tp-t0{color:var(--gold-2)}.tp.whale .tp-m{color:#fff}.tp.whale .tp-m i{background:linear-gradient(90deg,rgba(255,92,108,.05),rgba(255,92,108,.35)); border-right-color:#ff5c6c}u.wh{text-decoration:none; font:600 10px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#ff8a96; border:1px solid rgba(255,92,108,.5); border-radius:var(--r-xs); padding:1px 4px}.flow-card{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; background:var(--s1)}.flow-k{display:flex; flex-wrap:wrap; gap:6px 14px; margin:4px 0 10px; font-size:12px; color:var(--mut)}.flow-k b{font:600 14px "IBM Plex Mono",monospace; color:var(--ink); margin-right:3px}.flow{display:flex; flex-direction:column; gap:2px}.fl{display:grid; grid-template-columns:26px minmax(0,1fr) 68px 30px; grid-template-areas:"i n m p" "i b b b"; gap:0 8px; align-items:center; padding:5px 6px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink)}.fl:hover{background:var(--s3)}.fl-i{grid-area:i}.fl-n{grid-area:n; min-width:0}.fl-n b{display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.fl-n i{font-style:normal; font-size:10px; color:var(--faint)}.fl-b{grid-area:b; height:4px; background:var(--s4); border-radius:var(--r-xs); margin-top:4px; overflow:hidden}.fl-b i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),#ffd27a); border-radius:var(--r-xs)}.fl-m{grid-area:m; text-align:right; font:600 12px "IBM Plex Mono",monospace; color:var(--gold-2)}.fl-p{grid-area:p; text-align:right; font:500 11px "IBM Plex Mono",monospace; color:var(--faint); font-style:normal}.whales{display:flex; flex-direction:column; gap:4px}.whl{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; align-items:center; padding:5px 6px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); border:1px solid rgba(255,92,108,.18); background:rgba(255,92,108,.04)}.whl span{min-width:0}.whl span b{display:block; font-size:12px}.whl span i{font-style:normal; font-size:10px; color:var(--faint)}.whl-m{font:600 13px "IBM Plex Mono",monospace; color:#ff8a96}.tape.small{position:static; height:auto; max-height:170px; overflow-y:auto; border-radius:var(--r-sm); border-top:1px solid var(--line)}.tps{display:grid; grid-template-columns:64px minmax(0,1fr) auto 84px; gap:8px; align-items:center; padding:5px 10px; border-top:1px solid var(--line); font-size:12px}.tps:first-child{border-top:0}.tps i{font:500 11px "IBM Plex Mono",monospace; color:var(--faint); font-style:normal}.tps em{font-style:normal; font-size:11px; color:var(--gold-2)}.tps b.m{text-align:right; font:600 12px "IBM Plex Mono",monospace; color:var(--gold-2)}.tps.uk{background:rgba(242,184,75,.05)}.live-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#2bd4a0; margin-left:2px; box-shadow:0 0 0 0 rgba(43,212,160,.6); animation:livep 2s infinite} @keyframes livep{0%{box-shadow:0 0 0 0 rgba(43,212,160,.6)}70%{box-shadow:0 0 0 7px rgba(43,212,160,0)}100%{box-shadow:0 0 0 0 rgba(43,212,160,0)}}.chip.sm{height:26px; padding:0 9px; font-size:12px}
@media (max-width:1000px){.tape-grid{grid-template-columns:minmax(0,1fr)}.tape-col{min-height:0}.tape-wrap{flex:none; height:440px; min-height:0}}
@media (max-width:760px){.tape-h, .tp{grid-template-columns:26px 24px minmax(0,1fr) 54px 76px; gap:5px; padding:6px 6px}.tape-h b:nth-of-type(1), .tp b.tp-q, .tp u.wh{display:none}.tp{font-size:12px}.tp-n em{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px}.tp .tp-t0{font-size:10px}.tp b.tp-d .pc{font-size:10px; padding:1px 4px}.tape-wrap{height:420px}.tape-n{width:100%; margin-top:6px}.tape-sub{display:none}.tp b.tp-m{font-size:12px}.tps{grid-template-columns:52px minmax(0,1fr) auto 74px}}.tape-col{--catc:transparent}.tp{border-left:3px solid var(--catc)}.tp.cat-construction{--catc:rgba(92,200,255,.55)}.tp.cat-ammo{--catc:rgba(255,160,64,.6)}.tp.cat-food{--catc:rgba(43,212,160,.6)}.tp.cat-buffscases{--catc:rgba(242,184,75,.6)}.tp.cat-gear{--catc:rgba(201,182,255,.6)}.tp.cat-other{--catc:rgba(148,178,214,.3)}.tape-hold{position:absolute; left:50%; bottom:10px; transform:translateX(-50%) translateY(6px); opacity:0; pointer-events:none; transition:.25s; font:600 10px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2); background:rgba(11,14,20,.92); border:1px solid rgba(242,184,75,.4); border-radius:var(--r-pill); padding:4px 10px}.tape-col.hold .tape-hold{opacity:1; transform:translateX(-50%)}.pulse{margin:2px 0 12px}.pulse-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11px; color:var(--mut); margin-bottom:6px}.pulse-h b{font:600 12px "IBM Plex Mono",monospace; color:var(--ink); white-space:nowrap}.pulse-h b.up{color:#2bd4a0}.pulse-h b.down{color:#ff5c6c}.pulse svg{display:block; width:100%; height:56px}.pulse-f{display:flex; justify-content:space-between; font:500 10px "IBM Plex Mono",monospace; color:var(--faint); margin-top:3px}.pulse-f i{font-style:normal}.hot{display:flex; flex-direction:column; gap:4px}.hot a{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; align-items:center; padding:5px 6px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); border:1px solid rgba(255,160,64,.3); background:linear-gradient(90deg,rgba(255,160,64,.1),transparent)}.hot a span{min-width:0}.hot a span b{display:block; font-size:12px}.hot a span i{font-style:normal; font-size:10px; color:var(--faint)}.hot b.x{font:700 14px "IBM Plex Mono",monospace; color:#ffa040}.tape:not(.small)::after{content:''; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(180deg,transparent,var(--panel)); pointer-events:none}.tape-card, .tape-card *{overflow-anchor:none}.flow-t{font:600 14px "Inter",sans-serif; margin:0 0 6px}.cin-s{font:400 11px "Inter",sans-serif; letter-spacing:0; text-transform:none; color:var(--faint); margin-left:6px; font-style:normal}.flow-k .ukk b{color:var(--gold-2)}.fl-note{margin:10px 0 0; font-size:12px; color:var(--mut); line-height:1.5}.fl-note b{color:var(--ink); font-family:"IBM Plex Mono",monospace}.whl.uk{border-color:rgba(242,184,75,.35); background:rgba(242,184,75,.05)}.whl span b em{font-style:normal; font-size:10px; color:var(--gold-2); margin-left:4px}/* location card (profile) */
.av.xs{width:20px; height:20px; border-radius:50%; border-width:1px; font-size:10px}.tag{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-pill); border:1px solid var(--line); font-size:11px; white-space:nowrap}.loc h3 .n a{color:var(--gold-2); text-decoration:none}.loc-grid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:10px}.loc-here{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--s1)}.loc-here .flag-img{width:56px; height:38px; border-radius:var(--r-sm); box-shadow:0 2px 10px rgba(0,0,0,.4)}.loc-here.home{border-color:rgba(43,212,160,.35); background:linear-gradient(135deg,rgba(43,212,160,.1),transparent)}.loc-here.abroad{border-color:rgba(255,213,138,.4); background:linear-gradient(135deg,rgba(242,184,75,.12),transparent)}.loc-here b{display:block; font:600 20px "Chakra Petch",sans-serif; line-height:1.1}.loc-here i{display:block; font-style:normal; font-size:12px; color:var(--mut); margin-top:3px}.loc-here .lb{color:#ff8a96; text-decoration:none}.loc-k{padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--s1)}.loc-k b{display:block; font:600 22px "IBM Plex Mono",monospace; margin:4px 0 2px}.loc-k b i{font:500 12px "Inter",sans-serif; color:var(--mut)}.loc-k em{display:block; font-style:normal; font-size:11px; color:var(--mut); line-height:1.4}.loc-who{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}.loc-who .who{display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 3px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--s2); color:var(--ink); text-decoration:none; font-size:12px; max-width:180px}.loc-who .who span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.loc-who .who:hover{border-color:rgba(242,184,75,.5)}.loc-who .who.more{padding:3px 10px; color:var(--gold-2)}.loc-who .who .av{width:22px; height:22px}.loc-b{margin-top:14px}.loc-b > .cin-t{display:block; margin-bottom:6px}.loc-b > .count{display:block}.loc-bl{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; margin-top:6px}.loc-bl a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:9px 12px; border-radius:var(--r-sm); border:1px solid rgba(255,92,108,.3); background:rgba(255,92,108,.05); text-decoration:none; color:var(--ink); font-size:13px}.loc-bl a b{font:600 12px "IBM Plex Mono",monospace; color:var(--gold-2); text-align:right}.loc-bl a b.ok{color:#2bd4a0}.loc-bl a i{grid-column:1/-1; font-style:normal; font-size:11px; color:var(--mut)}
@media (max-width:900px){.loc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.loc-here{grid-column:1/-1}}/* locations tab */
.lbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}.lbar #lq{flex:1 1 220px; min-width:0}.lbar #lmu{flex:0 1 220px; min-width:0}.lseg{display:flex; gap:6px}.lhead{display:flex; justify-content:space-between; padding:6px 14px; font:600 10px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); border-bottom:1px solid var(--line)}.lh-c{padding-right:26px}.lsec{padding:14px 14px 6px; font:600 11px "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2)}.lrow{border-bottom:1px solid var(--line)}.lrow:last-child{border-bottom:0}.lr-h{all:unset; box-sizing:border-box; width:100%; display:grid; grid-template-columns:28px minmax(0,1fr) minmax(60px,180px) 44px 14px; gap:12px; align-items:center; padding:11px 14px; cursor:pointer}.lr-h:hover{background:var(--s2)}.lr-h:focus-visible{outline:2px solid var(--gold-2); outline-offset:-2px}.lr-h .flag-img{width:28px; height:19px; border-radius:var(--r-xs)}.lr-n{min-width:0}.lr-n b{display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.lr-n i{display:block; font-style:normal; font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}.lr-bar{height:6px; border-radius:var(--r-xs); background:var(--s4); overflow:hidden}.lr-bar i{display:block; height:100%; border-radius:var(--r-xs); background:var(--gold)}.lr-bar i.ab{background:#5CC8FF}.lr-c{font:700 18px "IBM Plex Mono",monospace; text-align:right}.lr-x{color:var(--faint); font-size:18px; transition:transform .15s}.lrow.open .lr-x{transform:rotate(90deg)}.lrow.open{background:var(--s1)}.lr-who{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 14px 54px}.who em{font-style:normal; font:500 10px "IBM Plex Mono",monospace; color:var(--faint)}.who.hit{border-color:var(--gold-2); background:rgba(242,184,75,.12)}
@media (max-width:760px){.lbar #lq, .lbar #lmu{flex:1 1 100%}.lseg{width:100%}.lseg .chip{flex:1; justify-content:center}.lr-h{grid-template-columns:24px minmax(0,1fr) 36px 12px; gap:10px; padding:11px 10px}.lr-bar{display:none}.lr-who{padding:0 10px 12px 44px}.lhead{padding:6px 10px}.lh-c{padding-right:22px}}
@media (max-width:760px){#lk{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px}#lk .kpi{padding:10px 10px}#lk .kpi .k{font-size:10px; letter-spacing:.08em}#lk .kpi .v{font-size:22px}#lk .kpi .s{font-size:10px; line-height:1.3}#lk .kpi::after, #lk .kpi::before{display:none}}
/* keyboard focus: one visible ring for every interactive element */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--gold-2); outline-offset:2px; border-radius:var(--r-xs)}
.card:focus-within{border-color:var(--line2)}
/* loading: one centred ring, held height, no page jump */
.ring{display:block; width:38px; height:38px; border-radius:var(--r-pill);
  background:conic-gradient(from 0deg, transparent 0 25%, var(--gold) 92%, var(--gold-2));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation:ringspin .8s linear infinite}
@keyframes ringspin{to{transform:rotate(1turn)}}
.loading{display:flex; flex-direction:column; align-items:center; gap:14px; padding:96px 0; color:var(--mut); font:600 12px "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase}
.spin{position:fixed; inset:var(--top-h) 0 0 0; z-index:80; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s var(--ease), visibility .18s}
.spin::before{content:""; position:absolute; width:260px; height:260px; border-radius:var(--r-pill); background:radial-gradient(circle, rgba(6,10,15,.92) 30%, rgba(6,10,15,0) 70%)}
.spin i{position:relative; display:block; width:52px; height:52px; border-radius:var(--r-pill);
  background:conic-gradient(from 0deg, transparent 0 25%, var(--gold) 92%, var(--gold-2));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation:ringspin .75s linear infinite}
html.busy .spin{opacity:1; visibility:visible}
html.busy .app{opacity:.25; filter:saturate(.6); transition:opacity .18s var(--ease)}
.app{transition:opacity .2s var(--ease)}
@media (prefers-reduced-motion:reduce){ .ring,.spin i{animation-duration:2.4s} .app,.spin{transition:none} }
/* overview: briefing + movers + one tabbed board */
.ov-top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px}
.brief h3 .n{margin-left:auto; color:var(--faint); text-transform:none; letter-spacing:0; font:400 12px "Inter",sans-serif}
.bf{display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 12px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink); border:1px solid transparent; border-left:3px solid var(--line2); background:var(--s1); margin-bottom:6px; font-size:13px; line-height:1.45}
.bf:last-of-type{margin-bottom:0}
.bf:hover{background:var(--s2); border-color:var(--line2); border-left-color:currentColor}
.bf-i{display:grid; place-items:center; width:30px; height:30px; border-radius:var(--r-sm); background:var(--s2); font-size:14px}
.bf-t b{color:#fff; font-weight:600}
.bf-v{font:600 13px "IBM Plex Mono",monospace; white-space:nowrap; color:var(--mut)}
.bf.war{border-left-color:var(--dmg)} .bf.war .bf-v{color:var(--dmg)}
.bf.calm{border-left-color:var(--mut)}
.bf.dmg{border-left-color:var(--dmg)} .bf.dmg .bf-v{color:var(--dmg)}
.bf.gold{border-left-color:var(--gold)} .bf.gold .bf-v{color:var(--gold-2)}
.bf.gain{border-left-color:var(--gain)} .bf.gain .bf-v{color:var(--gain)}
.bf.give{border-left-color:var(--give)} .bf.give .bf-v{color:var(--give)}
.bf.mut{border-left-color:var(--faint)}
.bf-note{margin-top:10px; font-size:12.5px; color:var(--mut)} .bf-note a{color:var(--gold-2); text-decoration:none} .bf-note b{color:var(--ink)}
.mv-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}

@media (max-width:1000px){ .ov-top{grid-template-columns:minmax(0,1fr)} .mv-two{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){ .bf{grid-template-columns:26px minmax(0,1fr); gap:10px; font-size:12.5px} .bf-v{grid-column:2; justify-self:start; margin-top:2px} }
/* "this is me" */
.me{display:flex; align-items:center; gap:9px; height:38px; padding:0 12px 0 8px; border-radius:var(--r-pill); cursor:pointer;
  background:var(--s1); border:1px solid var(--line); color:var(--ink); font:inherit; text-align:left; max-width:210px}
.me:hover{border-color:var(--line2); background:var(--s2)}
.me .av{width:24px; height:24px}
.me-q{display:grid; place-items:center; width:24px; height:24px; border-radius:var(--r-pill); background:var(--s3); color:var(--mut); font:700 13px "IBM Plex Mono",monospace}
.me-t{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.me-t b{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.me-t i{font-style:normal; font-size:10.5px; color:var(--mut); white-space:nowrap}
.me.unset .me-t{font-size:12px; color:var(--mut)}
.me.set{border-color:rgba(242,184,75,.45); background:rgba(242,184,75,.08)}
.btn.me-on{border-color:rgba(43,212,160,.5); color:var(--gain)}
.bf.mine{border-left-color:var(--gold-2); background:rgba(242,184,75,.1)}
.bf.mine .bf-i{background:transparent} .bf.mine .av{width:24px; height:24px}
.pcard.mine,.q-row.mine{outline:1px solid rgba(242,184,75,.55); outline-offset:-1px; background:rgba(242,184,75,.07)}
.q-row.mine::before{content:"YOU"; position:absolute; left:-1px; top:-1px; font:700 8.5px "Chakra Petch",sans-serif; letter-spacing:.1em; background:var(--gold); color:var(--on-accent); padding:2px 5px; border-radius:var(--r-xs) 0 var(--r-xs) 0}
.q-row{position:relative}
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:120; max-width:min(92vw,420px);
  background:var(--panel-solid); border:1px solid var(--line2); box-shadow:var(--sh-3); border-radius:var(--r-pill);
  padding:11px 18px; font-size:13px; color:var(--ink); opacity:0; pointer-events:none; transition:.22s var(--ease)}
.toast.on{opacity:1; transform:translate(-50%,0)}
@media (max-width:900px){ .me .me-t{display:none} .me{max-width:none; padding:0 8px} }
/* profile: rank pills */
.rankpills{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 2px}
.rp{display:flex; align-items:baseline; gap:7px; padding:6px 11px; border-radius:var(--r-pill); text-decoration:none;
  border:1px solid var(--line); background:var(--s1); color:var(--ink)}
.rp:hover{border-color:var(--line2); background:var(--s2)}
.rp b{font:700 15px "IBM Plex Mono",monospace; color:var(--gold-2)}
.rp span{font-size:11.5px; color:var(--mut)}
.rp i{font-style:normal; font:600 12px "IBM Plex Mono",monospace; color:var(--ink2)}
.rp.rp-top{border-color:rgba(242,184,75,.55); background:rgba(242,184,75,.1)}
.rp.rp-top b{color:var(--gold)}
.gear-off{margin:0 0 14px; padding:11px 13px; border-radius:var(--r-sm); border:1px dashed var(--line2);
  background:var(--s1); color:var(--mut); font-size:12.5px; line-height:1.5}
@media (max-width:760px){ .rankpills{gap:6px} .rp{padding:5px 9px} .rp b{font-size:14px} }
/* profile: one identity block, then evenly spaced sections */
.pro{padding:0; overflow:hidden}
.pro-top{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start; padding:22px 24px 18px; position:relative}
.pro-top::before{content:""; position:absolute; inset:0; background:radial-gradient(620px 220px at 0% 0%, rgba(242,184,75,.1), transparent 70%); pointer-events:none}
.pro-face{position:relative; display:grid; place-items:center; gap:10px}
.pro-face .av{width:104px; height:104px}
.pro-id{min-width:0; display:flex; flex-direction:column; gap:10px}
.pro-id h1{margin:0; font:600 clamp(24px,3.4vw,34px)/1.05 "Chakra Petch",sans-serif; word-break:break-word}
.pro-id .line{margin:0; flex-wrap:wrap; row-gap:6px}
.pro-id .chips{margin:0}
.pro-id .desc{margin:0}
.pro-id .rankpills{margin:0}
.pro-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); background:var(--s1)}
.pstat{padding:14px 18px; border-left:1px solid var(--line); position:relative}
.pstat:first-child{border-left:0}
.pstat .k{font:600 10.5px "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.pstat .v{font:600 26px "Chakra Petch",sans-serif; line-height:1.15; margin:3px 0 2px}
.pstat .s{font-size:11.5px; color:var(--mut)}
.pstat.gold .v{color:var(--gold-2)} .pstat.dmg .v{color:var(--dmg)} .pstat.give .v{color:var(--give)}
/* sticky section nav */
.pjump{ display:flex; gap:4px; overflow-x:auto; padding:8px 6px; margin:14px 0 16px;
  background:#080d13; border:1px solid var(--line); border-radius:var(--r-pill); scrollbar-width:none}
.pjump::-webkit-scrollbar{display:none}
.pjump a{flex:0 0 auto; padding:7px 14px; border-radius:var(--r-pill); text-decoration:none; color:var(--mut); font:600 12.5px "Chakra Petch",sans-serif; letter-spacing:.06em; text-transform:uppercase; transition:.15s var(--ease)}
.pjump a:hover{color:var(--ink); background:var(--s2)}
.pjump a.on{}
.psec{scroll-margin-top:120px}
.psec + .psec{}
@media (max-width:860px){
  .pro-top{grid-template-columns:minmax(0,1fr); gap:14px; padding:18px 16px 16px; text-align:center}
  .pro-face{flex-direction:row; justify-self:center}
  .pro-face .av{width:88px; height:88px}
  .pro-id{align-items:center}
  .pro-id .line,.pro-id .chips,.pro-id .rankpills{justify-content:center}
  .pro-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstat{border-left:0; border-top:1px solid var(--line)}
  .pstat:nth-child(2n){border-left:1px solid var(--line)}
  .pstat .v{font-size:22px}
  .pjump{margin:12px 0 14px}
}
/* guide mode, progress and tips */
.gnote{display:none; margin:0 0 12px; padding:11px 13px; border-radius:var(--r-sm); border-left:3px solid var(--lvl);
  background:rgba(143,164,255,.08); color:var(--ink2); font-size:12.5px; line-height:1.55}
html.guide .gnote{display:block}
.gtoggle{margin-left:auto; height:28px; padding:0 12px; font-size:12px}
.gtoggle[aria-pressed="true"]{background:rgba(143,164,255,.16); border-color:rgba(143,164,255,.6); color:#c9d6ff}
.gtoggle[aria-pressed="true"]::before{content:"✓ "}
.pg-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px}
.pg-t{padding:11px 13px; border-radius:var(--r-sm); background:var(--s1); border:1px solid var(--line)}
.pg-t span{display:block; font:600 10px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.pg-t b{display:block; font:600 22px "Chakra Petch",sans-serif; line-height:1.2; margin:2px 0}
.pg-t b em{font-style:normal; font-size:13px; color:var(--mut)}
.pg-t i{font-style:normal; font-size:11px; color:var(--faint)}
.pg-rows{display:flex; flex-direction:column; gap:6px}
.pg-r{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:10px 13px; border-radius:var(--r-sm); background:var(--s1); border:1px solid var(--line)}
.pg-r span{font-size:12.5px; color:var(--ink2)}
.pg-r b{font:600 14px "IBM Plex Mono",monospace; color:var(--gold-2); text-align:right; white-space:nowrap}
.pg-r i{grid-column:1/-1; font-style:normal; font-size:11.5px; color:var(--mut)}
.wks{display:flex; flex-direction:column; gap:6px}
.wk{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; padding:11px 12px; border-radius:var(--r-sm);
  background:var(--s1); border:1px solid transparent; border-left:3px solid var(--line2); color:var(--ink); text-decoration:none; font-size:12.5px; line-height:1.5}
a.wk:hover{background:var(--s2); border-color:var(--line2)}
.wk-i{display:grid; place-items:center; width:28px; height:28px; border-radius:var(--r-sm); background:var(--s2); font-size:14px}
.wk b{color:#fff}
.wk.war{border-left-color:var(--dmg)} .wk.gain{border-left-color:var(--gain)} .wk.gold{border-left-color:var(--gold)} .wk.mut{border-left-color:var(--faint)}
.psec.solo{grid-template-columns:1fr !important}
@media (max-width:860px){ .pg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .pg-t b{font-size:20px} }
/* combat: equipment strip, then stats beside the damage table, then the bars */
.gearbar{border:1px solid var(--line); border-radius:var(--r); background:var(--s1); padding:12px; margin-bottom:14px}
.gb-head{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; margin-bottom:10px}
.gb-n{font-size:12.5px; color:var(--mut)} .gb-n b{font:600 15px "Chakra Petch",sans-serif; color:var(--ink)}
.gb-t{display:flex; flex-wrap:wrap; gap:4px 12px; margin-left:auto; font-size:11.5px; color:var(--mut)}
.gb-t b{font:600 12.5px "IBM Plex Mono",monospace; color:var(--gold-2)}
.gb-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
.gt{display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; border-radius:var(--r-sm);
  background:var(--panel-solid); border:1px solid var(--line); text-align:center; transition:.15s var(--ease)}
.gt:hover{border-color:var(--line2); transform:translateY(-1px)}
.gt-box{position:relative; width:54px; height:54px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--sunk); border:1px solid var(--line2)}
.gt-ico{width:38px; height:38px}
.gt-box i{font-style:normal; font-size:18px; color:var(--faint); opacity:.45}
.gt-t{position:absolute; top:2px; right:3px; font:700 9px "Chakra Petch",sans-serif; color:var(--gold-2); background:rgba(6,10,15,.8); border-radius:var(--r-xs); padding:0 3px}
.gt-d{position:absolute; left:5px; right:5px; bottom:4px; height:3px; border-radius:var(--r-pill); background:rgba(0,0,0,.6); overflow:hidden}
.gt-d::after{content:""; display:block; height:100%; width:calc(var(--d) * 1%); background:var(--gain)}
.gt-d.mid::after{background:var(--gold)} .gt-d.low::after{background:var(--dmg)}
.gt-l{font:600 9.5px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.gt-s{font-size:11px; color:var(--ink2); line-height:1.3} .gt-s b{color:var(--gold-2); font-family:"IBM Plex Mono",monospace}
.gt.gt-empty{opacity:.5; border-style:dashed} .gt.gt-empty .gt-s{color:var(--faint)}
.gt.r-uncommon .gt-box{border-color:rgba(43,212,160,.5)} .gt.r-rare .gt-box{border-color:rgba(92,200,255,.55)}
.gt.r-epic .gt-box{border-color:rgba(199,125,255,.55)} .gt.r-legendary .gt-box{border-color:rgba(242,184,75,.65)}
.gt.r-mythic .gt-box{border-color:rgba(255,92,108,.7)}
.combat-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:16px; align-items:start}
.cc-stats .cstats{margin:0}
@media (max-width:1100px){ .gb-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){ .combat-cols{grid-template-columns:minmax(0,1fr)} .gb-t{margin-left:0; width:100%} }
@media (max-width:560px){ .gb-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px} .gt-box{width:46px; height:46px} .gt-ico{width:32px; height:32px} }
@media (max-width:560px){ .rankpills{width:100%; flex-direction:column; gap:6px} .rp{width:100%; justify-content:space-between; padding:8px 12px} .rp span{margin-right:auto; margin-left:8px} }
/* damage table: the game's own ammo icons as column headers */
.hitrow.hd b.am{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center}
.hitrow.hd b.am span{font:600 9.5px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--mut)}
.am-ico{width:30px; height:30px}
.am-non{display:grid; place-items:center; width:30px; height:30px; border-radius:var(--r-xs); border:1px dashed var(--line2); color:var(--faint); font-size:12px}
@media (max-width:560px){ .am-ico,.am-non{width:24px; height:24px} .hitrow.hd b.am span{font-size:8.5px; letter-spacing:.06em} }
.cs-i{font-style:normal; font-size:12px; line-height:1; filter:saturate(.9)}
/* ---- polish pass: motion, depth and rarity ---- */
.card.reveal{animation:rise .45s var(--ease) var(--rd,0ms) backwards}
@keyframes rise{from{opacity:0; transform:translateY(12px)}}
.card{transition:border-color .2s var(--ease), box-shadow .3s var(--ease)}
.app .card:hover{border-color:var(--line2)}
/* the identity block gets a slow sheen so the page opens with something alive */
.pro-top::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(110deg, transparent 30%, rgba(242,184,75,.10) 45%, transparent 60%);
  background-size:280% 100%; animation:sheen 9s ease-in-out 3}
@keyframes sheen{0%,70%{background-position:130% 0}100%{background-position:-30% 0}}
/* level ring sweeps to its value */
@property --p{syntax:"<number>"; inherits:false; initial-value:0}
.lvlring{animation:ringfill 1.1s var(--ease) backwards}
@keyframes ringfill{from{--p:0}}
/* rank pills: the top three earn a shimmer */
.rp.rp-top{position:relative; overflow:hidden}
.rp.rp-top::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 40%, rgba(255,213,122,.28) 50%, transparent 60%);
  background-size:300% 100%; animation:sheen 6s ease-in-out 3}
/* gear: rarity glow on hover, a slow shine on the best pieces */
.gt{position:relative; overflow:hidden}
.gt:hover{box-shadow:var(--sh-1)}
.gt.r-epic:hover .gt-box{box-shadow:0 0 14px -2px rgba(199,125,255,.55)}
.gt.r-legendary:hover .gt-box{box-shadow:0 0 14px -2px rgba(242,184,75,.6)}
.gt.r-mythic:hover .gt-box{box-shadow:0 0 16px -2px rgba(255,92,108,.65)}
.gt.r-legendary::after,.gt.r-mythic::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%);
  background-size:300% 100%; animation:sheen 7s ease-in-out 3}
/* damage table: a heat bar behind every figure */
.hitrow b{position:relative; z-index:1}
.hitrow:not(.hd) b::before{ top:-4px; bottom:-4px;
  min-width:3px}
/* bars and meters fill smoothly rather than snapping */
.cbar .track i,.sp-bar i,.fl-b i,.lr-bar i{transition:width .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .card.reveal,.lvlring{animation:none}
  .pro-top::after,.rp.rp-top::after,.gt.r-legendary::after,.gt.r-mythic::after{animation:none}
  .lvlring.spin{transition:none}
}
/* profile section tabs */
.psec[hidden]{display:none !important}
.psec + .psec{margin-top:0}
.pjump{position:sticky; top:var(--top-h); z-index:40}
.pjump a.on{background:var(--gold); color:var(--on-accent)}
.gt-s i{display:block; font-style:normal; line-height:1.35}
.pj-sp{flex:1 1 auto; min-width:8px}
.pjump .gtoggle{flex:0 0 auto; margin:0 2px 0 0; height:30px}
.psec.swap{animation:swapin .16s var(--ease)}
@keyframes swapin{from{opacity:0; transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){ .psec.swap{animation:none} }
/* sub-tabs that pair two related pages under one nav entry */
.subnav{display:flex; gap:6px; margin:0 0 14px; flex-wrap:wrap}
.subnav a{padding:7px 14px; border-radius:var(--r-pill); text-decoration:none; border:1px solid var(--line); background:var(--s1);
  color:var(--mut); font:600 12px "Chakra Petch",sans-serif; letter-spacing:.06em; text-transform:uppercase}
.subnav a:hover{border-color:var(--line2); color:var(--ink)}
.subnav a.on{background:var(--gold); border-color:var(--gold); color:var(--on-accent)}
.kpi .kr-e{font:500 13px "Inter",sans-serif; font-style:normal; color:var(--mut); margin-left:4px}
.kpi .kc-a{color:var(--gain); font-weight:600}
/* overview: the state of the nation row */
.nation{align-items:stretch}
.nat{display:flex; flex-direction:column}
.nat h3 .n{margin-left:auto; color:var(--mut); font:500 11.5px "Inter",sans-serif; letter-spacing:0; text-transform:none}
.nat-r{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 10px; padding:8px 0; border-top:1px solid var(--line)}
.nat-r:first-of-type{border-top:0}
.nat-r span{font-size:12.5px; color:var(--mut)}
.nat-r b{font:600 14px "Chakra Petch",sans-serif; text-align:right; white-space:nowrap}
.nat-r i{grid-column:1/-1; font-style:normal; font-size:11.5px; color:var(--faint)}
.nat-cs{display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 6px}
.nat-c{display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 4px; border-radius:var(--r-pill); font-size:11.5px;
  text-decoration:none; border:1px solid var(--line); background:var(--s1); color:var(--ink)}
.nat-c .flag-img{width:16px; height:11px; border-radius:2px}
.nat-c.nat-war{border-color:rgba(255,92,108,.4); background:rgba(255,92,108,.07)}
.nat-c.nat-ally{border-color:rgba(43,212,160,.35); background:rgba(43,212,160,.06)}
.nat-c:hover{border-color:var(--line2)}
.nat-none{font-size:12px; color:var(--faint)}
.nat-e{margin:2px 0 8px; font-size:12px; color:var(--mut)} .nat-e b{color:var(--dmg)}
.nat-go{margin-top:auto; padding-top:10px; font-size:12px; color:var(--gold-2); text-decoration:none}
.nat-go:hover{text-decoration:underline}
@media (max-width:900px){ .nation{grid-template-columns:minmax(0,1fr)} }
.h-i{font-style:normal; line-height:1}
.kpi .k{display:flex; align-items:center}
.nat-r b .nat-i{}
/* nation panels: readable icons, no dead space */
.h-i{font-size:15px; margin-right:8px; opacity:1}
.nat h3{align-items:center}
.nat-r b .nat-i{width:26px; height:26px; vertical-align:-7px; margin-right:5px}
.nat-en,.nat-sp{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:9px 0; border-top:1px solid var(--line)}
.nat-el{font-size:12.5px; color:var(--mut)}
.nat-ev{font:600 14px "Chakra Petch",sans-serif; text-align:right; display:flex; align-items:center; gap:6px; justify-content:flex-end}
.nat-ev .flag-img{width:20px; height:14px; border-radius:2px}
.nat-en i{grid-column:1/-1; font-style:normal; font-size:11.5px; color:var(--faint); line-height:1.5}
.nat-regs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin:8px 0 4px}
.nat-rg{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--s1); color:var(--ink); text-decoration:none; font-size:12px}
.nat-rg b{font:600 12.5px "IBM Plex Mono",monospace; color:var(--gold-2)}
.nat-rg:hover{border-color:var(--line2)}
.nat-rg.hot{border-color:rgba(255,92,108,.5); background:rgba(255,92,108,.07)}
@media (max-width:560px){ .nat-regs{grid-template-columns:minmax(0,1fr)} }
.nat-mvs{display:flex; flex-direction:column; gap:3px; margin:6px 0 4px}
.nat-mv{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; align-items:center; padding:5px 8px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink); font-size:12.5px; background:var(--s1); border:1px solid transparent}
.nat-mv:hover{border-color:var(--line2); background:var(--s2)}
.nat-mv b{font:600 12.5px "IBM Plex Mono",monospace}
.nat-mv b.up{color:var(--gain)} .nat-mv b.down{color:var(--dmg)}
.nat-i2{width:24px; height:24px}
.nat-rg .nat-i2{margin-right:2px}
/* where the UK stands */
.stand-t td.num i{display:block; font-style:normal; font-size:10.5px; color:var(--faint); font-family:"IBM Plex Mono",monospace}
.stand-t td.num{text-align:right; font:600 14px "IBM Plex Mono",monospace}
.stand-t td.num.mine{color:var(--gold-2); background:rgba(242,184,75,.06)}
.stand-t th.num{text-align:right}
.stand-t td:first-child{color:var(--ink2); font-size:13px}
.stand-g{margin-top:14px}
.st-b{padding:13px 15px; border-radius:var(--r); border:1px solid var(--line); background:var(--s1); border-left:3px solid var(--line2)}
.st-b p{margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--ink2)} .st-b b{color:#fff}
.st-h{font:600 10.5px "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.st-b.good{border-left-color:var(--gain)} .st-b.hard{border-left-color:var(--dmg)} .st-b.gap{border-left-color:var(--gold)}
.st-c{display:inline-flex; align-items:center; gap:6px}
@media (max-width:900px){ .stand-g{grid-template-columns:minmax(0,1fr)} }
/* the standing page */
.stand-teaser{display:flex; flex-direction:column; gap:6px; padding:16px 18px; text-decoration:none; color:var(--ink);
  border:1px solid rgba(242,184,75,.32); background:linear-gradient(120deg,rgba(242,184,75,.10),transparent 60%)}
.stand-teaser:hover{border-color:rgba(242,184,75,.6)}
.stt-l{display:flex; align-items:center; font:600 15px "Chakra Petch",sans-serif; letter-spacing:.06em; text-transform:uppercase}
.stt-t{font-size:13px; color:var(--ink2); line-height:1.55}
.stt-go{font-size:12.5px; color:var(--gold-2)}
.sbars{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.sbar{display:grid; grid-template-columns:120px minmax(0,1fr) 48px; gap:10px; align-items:center}
.sbar b{text-align:right; font:600 13px "IBM Plex Mono",monospace}
.sb{display:block; height:10px; border-radius:var(--r-pill); background:var(--s3); overflow:hidden}
.sb i{display:block; height:100%; border-radius:var(--r-pill); background:var(--mut)}
.sb i.war{background:var(--war)} .sb i.eco{background:var(--eco)} .sb i.hybrid{background:var(--hybrid)} .sb i.unspent{background:var(--unspent)}
.st-facts{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.st-facts div{display:flex; justify-content:space-between; gap:12px; padding:8px 11px; border-radius:var(--r-sm); background:var(--s1); border:1px solid var(--line)}
.st-facts span{font-size:12.5px; color:var(--mut)} .st-facts b{font:600 13px "IBM Plex Mono",monospace; color:var(--gold-2); text-align:right}
/* explanation blocks and sources on the standing page */
.ex p{margin:0 0 10px; font-size:13.5px; line-height:1.65; color:var(--ink2)} .ex p:last-child{margin-bottom:0} .ex b{color:#fff}
.quote{margin:0 0 12px; padding:13px 16px; border-left:3px solid var(--gold); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(242,184,75,.07); font-size:13.5px; line-height:1.65; color:var(--ink)}
.quote cite{display:block; margin-top:8px; font-style:normal; font-size:11.5px}
.quote cite a,.src{color:var(--gold-2); text-decoration:none}
.src{font-size:11.5px; margin-left:4px; white-space:nowrap}
.quote cite a:hover,.src:hover{text-decoration:underline}
.bonus-t td:first-child{font-weight:600}
.bonus-t td.num{text-align:right; font:600 13.5px "IBM Plex Mono",monospace; white-space:nowrap}
.bonus-t td.num.up{color:var(--gain)} .bonus-t td.num.down{color:var(--dmg)}
.bonus-t td:last-child{color:var(--ink2); font-size:12.5px; line-height:1.5}
.srcs{display:flex; flex-direction:column; gap:6px}
.srcs a{padding:9px 12px; border-radius:var(--r-sm); background:var(--s1); border:1px solid var(--line);
  color:var(--ink2); text-decoration:none; font-size:12.5px}
.srcs a:hover{border-color:var(--line2); color:var(--ink)}
.srcs a::before{content:"\2197"; color:var(--gold-2); margin-right:8px}
/* the UK path */
.path-g{margin-top:4px}
.pth{padding:15px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--s1); border-top:3px solid var(--line2)}
.pth b{display:block; font:600 34px "Chakra Petch",sans-serif; line-height:1.05}
.pth span{display:block; margin:2px 0 7px; font:600 11px "Chakra Petch",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut)}
.pth i{font-style:normal; font-size:12.5px; line-height:1.55; color:var(--ink2)}
.pth.pth-build{border-top-color:var(--eco)} .pth.pth-build b{color:var(--eco)}
.pth.pth-ready{border-top-color:var(--gold)} .pth.pth-ready b{color:var(--gold-2)} .pth.pth-ready{background:rgba(242,184,75,.06)}
.pth.pth-fight{border-top-color:var(--war)} .pth.pth-fight b{color:var(--war)}
.bonus-t .sb{width:100%; min-width:70px}
/* mobile legibility: nothing below 11.5px on a phone, and tables stop forcing a desktop width */
@media (max-width:760px){
  table.db{min-width:0}
  table.db th{font-size:11px; white-space:normal}
  table.db td{ white-space:normal}
  table.db td.num, table.db th.num{white-space:nowrap}
  /* give tables the width the card padding was eating */
  .card{padding:14px 12px}
  .tablewrap{}
  table.db{font-size:11.5px}
  table.db th{padding:7px 5px} table.db td{padding:7px 5px}
  .bonus-t td:first-child{font-size:11.5px; line-height:1.35}
  /* the country comparison only keeps us and the two who fight us most */
  .stand-t th:nth-child(n+4), .stand-t td:nth-child(n+4){display:none}
  /* the multipliers table drops its long explanation column, it repeats the text above */
  .bonus-t th:last-child:not(:nth-child(-n+3)), .bonus-t td:last-child:not(:nth-child(-n+3)){display:none}
  .tablewrap{max-height:none}
  .gt-t, .q-row.mine::before {font-size:11px}
  .abroad-tag, .al-m i, .av.xs, .b-dmg span, .b-top span, .chip.tiny, .co-n > span, .co-stats i, .co-table.prod .hd, .cp-facts span, .cstat span, .ctile i, .dest, .ds .k, .dt-t i, .eth, .etype, .field label, .fl-n i, .gov-p .role, .gov-p.sm .role, .gs-lv, .gt-l, .h2h-row .lbl i, .hitrow.hd b, .hitrow.hd b.am span, .hot a span i, .lhead, .lo-dn, .lo-l, .lr-d span, .lr-pts i, .lvlring span, .mk-r, .mrow .mk, .nxt span, .party-n span, .pcard .stats span, .pg-t span, .pulse-f, .reach-k span, .rec .tag, .rg-res em, .skgrid .skc span, .tape-h, .tape-hold, .tier, .tp b.tp-d .pc, .ukchip, .ver, .wc-v i, .whl span b em, .whl span i, .who em, .wrel, u.wh {font-size:11.5px}
  #wrel .chip, .al-rank span, .al-stats span, .bh-role, .bh-score span, .build, .cand .cp, .card h3 .more, .cases .k, .cbar em, .cfind label, .chart .axis text, .chip.cc .gr, .cin-s, .co-lv, .co-table.prod span i, .cp-facts em, .cstat em, .dip-k, .ds .s, .dt-f, .duel .lab, .evt, .fl-p, .gave, .gov-pres .role, .gs-gt, .gs-pips i, .gs-x, .gt-s, .h2h-c em, .hit-t, .hitrow.hd span, .kpi .k, .lo-s, .loc-bl a i, .loc-k em, .lsec, .me-t i, .mk-cn i, .mk-item i, .mkt .ghead td, .mrow .mst.cd, .mv-n i, .ob-h, .ob-row em, .pg-t i, .pl-sk .v em, .pl-tile .sub, .pm-role, .pstat .k, .pth span, .pulse-h, .q-band em, .q-wk, .rc i, .rc-p em, .rc-p i, .res, .rg i, .rg-n i, .sk-state, .skpts span, .sktag, .st-h, .st-sub, .stand-t td.num i, .tag, .tip .t, .tour, .tp .tp-t0, .tp-n em, .tps em, .tps i, .tug-n span, .wc-b i, .wc-n, .wc-score span, .wc-side > span:not(.wc-flag), .wlegend em, .wtile, table.db th{font-size:12px}
}
@media (max-width:760px){
  table.db.stackable, table.db.stackable tbody, table.db.stackable tr, table.db.stackable td{display:block; width:auto}
  table.db.stackable thead{display:none}
  table.db.stackable tr{padding:10px 12px; border-top:1px solid var(--line)}
  table.db.stackable tr:first-child{border-top:0}
  table.db.stackable td{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:3px 0; border:0; text-align:right}
  table.db.stackable td::before{content:attr(data-l); color:var(--mut); font:600 10.5px "Chakra Petch",sans-serif; letter-spacing:.08em; text-transform:uppercase; text-align:left; flex:0 1 auto}
  table.db.stackable td:first-child{font-size:13px; font-weight:600; justify-content:flex-start; padding-bottom:6px; text-align:left}
  table.db.stackable td:first-child::before{display:none}
  .tablewrap:has(table.stackable){overflow:visible; max-height:none}
}
@media (max-width:760px){
  .stand-t th .flag-img{width:16px; height:11px}
  .stand-t th{font-size:10.5px; letter-spacing:0}
  .stand-t td:first-child{font-size:11px; padding-right:4px}
  .stand-t td.num{font-size:12px} .stand-t td.num i{font-size:9.5px}
}
/* ---- phones: the header must fit, and nothing may slide sideways ---- */
html{overflow-x:clip}
body{overflow-x:clip; max-width:100%}
@media (max-width:760px){
  :root{--top-h:46px}
  .top{gap:8px; padding:0 10px}
  /* on phones the brand is the flag alone: the words were eating the search bar */
  .brand{gap:0; min-width:0; flex:none}
  .brand .flag{width:30px; height:17px}
  .brand .ver, .brand > span:not(.flag){display:none}
  .gsearch{flex:1 1 auto; min-width:0; max-width:none; margin-left:0}
  .gsearch input{min-width:0; height:36px; font-size:14px; padding:0 10px 0 34px}
  .gsearch svg{left:10px; width:16px; height:16px}
  /* the results drop out of the bar and use the full screen width, so you can read a name */
  .top .gresults{position:fixed; left:8px; right:8px; top:calc(var(--top-h) + 6px); max-height:68vh; padding:5px}
  .top .gresults a{gap:11px; padding:10px; font-size:15px}
  .top .gresults .av{width:34px; height:34px; flex:none}
  .top .gresults .meta{font-size:12.5px; white-space:nowrap}
  .status{padding:0 8px; gap:6px; height:32px}
  .status .st-text{display:none}
  .me{max-width:46px; padding:0 5px}
  .me .me-t{display:none}
  #tabs{padding-left:10px; padding-right:10px}
  .app{padding-left:10px; padding-right:10px}
  .tablewrap{margin-left:0; margin-right:0}
}
/* the Discord card on the standing page */
.dsc{border-color:rgba(88,101,242,.35); background:linear-gradient(180deg,rgba(88,101,242,.09),transparent 60%)}
.dsc-l{margin:10px 0 0; padding-left:18px; display:grid; gap:9px}
.dsc-l li{line-height:1.6}
.dsc .btn.primary{margin-top:14px; display:inline-block}
/* avatars you can actually recognise in a ranked list */
.bar-row .who .av, .bar-row .who .avx{width:40px; height:40px; border-radius:var(--r-sm)}
.bar-row .who .avx{font-size:15px}
.bar-row{grid-template-columns:34px minmax(0,1fr) auto}
.bar-row .who .nm{font-size:14.5px}
.dmgrow .av, .dmgrow .avx{width:26px; height:26px}
/* leaderboard switcher: one scrollable track instead of wrapping loose pills */
.lbhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.lbhead .more{margin-left:auto}
.lbseg{display:flex; gap:3px; padding:4px; border-radius:var(--r-pill); background:var(--s1);
  border:1px solid var(--line); overflow-x:auto; scrollbar-width:none; max-width:100%}
.lbseg::-webkit-scrollbar{display:none}
.lbseg button{flex:none; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px;
  border:0; border-radius:var(--r-pill); background:transparent; cursor:pointer; white-space:nowrap;
  font:600 12.5px "Inter",sans-serif; color:var(--mut); transition:.15s var(--ease)}
.lbseg button i{font-style:normal; font-size:14px; line-height:1}
.lbseg button:hover{color:var(--ink); background:var(--s3)}
.lbseg button[aria-pressed="true"]{color:var(--on-accent); background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 2px 10px -4px rgba(242,184,75,.8)}
@media (max-width:760px){
  .lbseg{border-radius:var(--r); width:100%}
  .lbhead{margin-bottom:10px}
  .bar-row .who .av, .bar-row .who .avx{width:36px; height:36px}
}
/* the level ring: the third line of text was being clipped by the circle,
   so the percentile now sits under the ring instead of inside it */
.lvlwrap{display:flex; flex-direction:column; align-items:center; gap:7px; flex:none}
.lvlwrap .lvlring div{gap:0}
.lvlwrap .lvlring span{line-height:1.1}
.lvlwrap .lvlring b{line-height:1}
.lvltop{font-style:normal; font:600 11.5px "Chakra Petch",sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-2); white-space:nowrap}
@media (max-width:760px){
  .hero .lvlwrap, .pro .lvlwrap{grid-column:1; grid-row:2; justify-self:center}
  .hero .lvlwrap .lvlring, .pro .lvlwrap .lvlring{width:76px; height:76px}
  .hero .lvlwrap .lvlring div, .pro .lvlwrap .lvlring div{width:64px; height:64px}
}
/* damage-per-hit table: the header cells centre their icon while the numbers were
   right-aligned, so no column lined up. Centre both, and make the heat a full-cell
   tint rather than a right-anchored bar with a ragged left edge. */
.hitrow b{text-align:center}
.hitrow:not(.hd) b{position:relative; z-index:1; padding:3px 0; border-radius:var(--r-xs)}
.hitrow:not(.hd) b::before{content:""; position:absolute; z-index:-1; inset:0; right:0; width:auto;
  border-radius:var(--r-xs); background:rgba(255,92,108,.16);
  opacity:calc(var(--heat,0) / 100); transition:opacity .4s var(--ease)}

/* unknown address */
.nf{text-align:center; padding:38px 22px 32px}
.nf-c{font:700 64px/1 "Chakra Petch",sans-serif; color:var(--gold); opacity:.22; letter-spacing:.04em}
.nf h1{margin:8px 0 10px; font:600 26px "Chakra Petch",sans-serif}
.nf p{max-width:560px; margin:0 auto; color:var(--ink2); line-height:1.6}
.nf code{font:500 13px "IBM Plex Mono",monospace; color:var(--gold-2); background:var(--s2);
  padding:2px 7px; border-radius:var(--r-xs); word-break:break-all}
.nf-l{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:20px auto 14px; max-width:620px}
.nf .count{margin-top:6px}
@media (max-width:760px){ .nf{padding:28px 14px 24px} .nf-c{font-size:52px} .nf h1{font-size:21px} }

/* the allied-battle rows are clickable: say so */
.ally[data-open]{cursor:pointer}
.ally[data-open]:hover{border-color:rgba(242,184,75,.55); background:var(--s2)}
.ally[data-open]:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* Weapon art is dark and sparse (the rifle averages 60/255, the knife covers 19% of its
   canvas), so at 18px it read as a blank square. Keep the rarity colour of the tile and
   lift the artwork off it instead, rather than painting over the rarity. */
.hit .itile{width:24px; height:24px}
.hit .itile img{width:94%; height:94%;
  filter:brightness(1.75) contrast(1.06) drop-shadow(0 1px 2px rgba(0,0,0,.75))}
.hit i{display:inline-flex; align-items:center; gap:6px; font-style:normal; vertical-align:middle}

/* relation tags never shrink; on a long country name the tag drops underneath instead
   (in the "United Kingdom" row the UK tag was being squeezed and its label cut) */
.wrel{flex-shrink:0}
.wc-b b{flex-wrap:wrap; row-gap:3px}

/* the battle header's three actions travel together: one tidy row on a phone
   instead of Share dropping onto a line of its own */
.bh-acts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:760px){
  .bh-acts{margin-left:0; flex:1 1 100%; flex-wrap:nowrap}
  .bh-acts .btn{flex:1 1 0; min-width:0; justify-content:center; padding:0 6px; font-size:12px; white-space:nowrap}
  .bh-long{display:none}
}

.mv .pc{justify-self:end}

/* Hit rows must never be squashed: the live battle card's feed is a fixed-height column, and
   once the weapon icons grew to 24px four rows no longer fitted, so flexbox shrank each to
   24px and cut the text and icons in half. Rows keep their height, centre their contents,
   and the compact card sizes its feed for exactly four of them. */
.hits .hit{flex-shrink:0; align-items:center}
.warcard .hits{height:122px}
.warcard .hits .hit{height:27px; padding:0 8px}
.warcard .hits .hit .itile{width:21px; height:21px}

/* which side started a fill: a buyer taking a listing, or a seller filling a buy order */
.tside{display:inline-block; margin-right:6px; padding:0 5px; border-radius:var(--r-xs);
  font:700 9.5px "Chakra Petch",sans-serif; letter-spacing:.08em; text-transform:uppercase; vertical-align:1px}
.tside.buy{color:#2bd4a0; background:rgba(43,212,160,.12)}
.tside.sell{color:#ff8a96; background:rgba(255,92,108,.12)}

/* whales & momentum */
.fw-pick{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.fw-lead{margin:2px 0 14px; color:var(--ink2); font-size:14px; line-height:1.55}
.fw-cols{gap:22px}
.fw-row{display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 4px;
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink)}
.fw-row:hover{background:var(--s3)}
.fw-n{min-width:0}
.fw-n b{display:block; font-size:13.5px}
.fw-n i{display:block; font-style:normal; font-size:11.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fw-sides{display:grid; gap:3px; width:190px}
.fw-sides > span{display:grid; grid-template-columns:48px 1fr 38px; gap:6px; align-items:center}
.fw-sides em{font-style:normal; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.fw-sides b{font:600 12px "IBM Plex Mono",monospace; text-align:right}
.fw-bar{display:block; height:6px; border-radius:var(--r-pill); background:var(--s4); overflow:hidden}
.fw-bar i{display:block; height:100%; border-radius:var(--r-pill)}
.fw-bar.b i{background:#2bd4a0} .fw-bar.s i{background:#ff5c6c}
.fw-x{text-align:right; line-height:1.15}
.fw-x b{display:block; font:700 15px "IBM Plex Mono",monospace}
.fw-x em{font-style:normal; font-size:11px; color:var(--mut)}
.fw-x.up b{color:#2bd4a0} .fw-x.down b{color:#ff8a96}
.fw-t td a{color:var(--ink); text-decoration:none} .fw-t td a:hover{color:var(--gold-2)}
.fw-t tr.on td{background:rgba(242,184,75,.06)}
.fw-foot{margin-top:12px; line-height:1.55}
.fw-foot a{color:var(--gold-2)}
@media (max-width:760px){
  .fw-sides{width:128px}
  .fw-sides > span{grid-template-columns:40px 1fr 32px; gap:4px}
  .fw-sides em{font-size:9.5px}
  .fw-pick{margin-left:0; flex-basis:100%; margin-top:8px}
}

/* whales & momentum, polish */
.fw-sub{margin:-2px 0 14px; color:var(--mut); font-size:13px}
.fw-lead{display:none}
.fw-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px}
.fw-k{padding:11px 13px; border-radius:var(--r); background:var(--s1); border:1px solid var(--line); border-top:2px solid var(--line2); min-width:0}
.fw-k.gold{border-top-color:var(--gold)} .fw-k.up{border-top-color:#2bd4a0}
.fw-k span{display:block; font:600 10.5px "Chakra Petch",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}
.fw-k b{display:flex; align-items:center; gap:6px; margin:5px 0 2px; font:700 19px "Chakra Petch",sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fw-k.gold b{color:var(--gold-2)} .fw-k.up b{color:#2bd4a0}
.fw-k i{display:block; font-style:normal; font-size:12px; color:var(--mut); line-height:1.4}
.fw-alerts{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; padding:10px 12px;
  border-radius:var(--r); background:rgba(242,184,75,.06); border:1px solid rgba(242,184,75,.22)}
.fw-alerts .cin-t{flex-basis:100%; margin:0 0 2px; color:var(--gold-2)}
.fw-alert{display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 5px; border-radius:var(--r-pill);
  background:var(--s2); border:1px solid var(--line); font-size:12.5px}
.fw-alert.buying b{color:#2bd4a0} .fw-alert.selling b{color:#ff8a96}
.fw-alert a{color:var(--ink); text-decoration:none; font-weight:600} .fw-alert a:hover{color:var(--gold-2)}
.fw-legend{margin-left:8px; font:500 11px "Inter",sans-serif; letter-spacing:0; text-transform:none; color:var(--faint)}
.fw-legend u{display:inline-block; width:2px; height:10px; margin-right:4px; vertical-align:-1px; background:rgba(255,255,255,.75)}
.fw-bar{position:relative}
.fw-bar u{position:absolute; top:-2px; bottom:-2px; width:2px; margin-left:-1px; background:rgba(255,255,255,.75); border-radius:1px}
.fw-sides > span em, .fw-sides > span b{transition:color .2s}
.fw-sides > span.hi b{color:var(--gold-2)}
.fw-tag{color:var(--gold-2); font-weight:600}
.fw-row.fw-m{grid-template-columns:32px minmax(0,1fr) 34px auto}
.fw-mini{display:flex; align-items:flex-end; gap:3px; height:22px}
.fw-mini i{display:block; width:8px; border-radius:2px 2px 0 0; background:var(--s4)}
.fw-mini i:last-child{background:var(--gold)}
.fw-x b{padding:1px 7px; border-radius:var(--r-pill); background:var(--s3); display:inline-block}
.fw-x.up b{background:rgba(43,212,160,.12)} .fw-x.down b{background:rgba(255,92,108,.12)}
.fw-x em{display:block; margin-top:2px}
.fw-uk{margin-top:18px; padding:12px; border-radius:var(--r); background:var(--s1); border:1px solid var(--line)}
.fw-ukl{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.fw-uc{display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--s2); border:1px solid var(--line); font-size:12.5px}
.fw-uc a{color:var(--ink); text-decoration:none; font-weight:600}
.fw-uc b{font:600 12px "IBM Plex Mono",monospace; color:var(--gold-2)}
.fw-uc.fw-mine{border-color:rgba(242,184,75,.6); background:rgba(242,184,75,.1)}
.fw-note{margin:16px 0 0; color:var(--mut); font-size:13px}
.fw-t td.up{color:#2bd4a0} .fw-t td.down{color:#ff8a96}
.fw-credit{margin:10px 0 0; padding:9px 12px; border-radius:var(--r-sm); background:var(--s1); border:1px solid var(--line);
  font-size:13px; color:var(--ink2)}
.fw-credit a{color:var(--gold-2); font-weight:600}
@media (max-width:980px){ .fw-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .fw-k b{font-size:16px}
  .fw-row.fw-m{grid-template-columns:30px minmax(0,1fr) 30px auto; gap:8px}
  .fw-alert{font-size:12px}
}

.fw-grind{display:flex; gap:12px; margin-top:18px; padding:12px 14px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line)}
.fw-gi{font-size:22px; line-height:1}
.fw-grind > div{min-width:0}
.fw-grind p{margin:4px 0 0; font-size:13px; line-height:1.55; color:var(--ink2)}
.fw-gtop{margin-top:8px; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--mut)}
.fw-gtop a{color:var(--ink); text-decoration:none} .fw-gtop a:hover{color:var(--gold-2)}
.fw-gtop em{font-style:normal; color:var(--mut); margin-left:4px}

/* status panel: WarEra switched API keys off */
.st-keys{margin:4px 0 10px; padding:9px 11px; border-radius:var(--r-sm); background:rgba(242,184,75,.1); border:1px solid rgba(242,184,75,.35)}
.st-keys b{display:block; color:var(--gold-2); font-size:13px}
.st-keys span{display:block; margin-top:3px; font-size:12px; line-height:1.5; color:var(--ink2)}
.st-paused{color:var(--gold-2)}

/* best to produce: one grid, everything left-aligned, columns that start in the same place */
.co-table.prod{--ct-cols:minmax(0,1.5fr) 82px 100px minmax(0,1.6fr); max-width:820px}
.co-table.prod .hd,
.co-table.prod a{display:grid; grid-template-columns:var(--ct-cols); gap:14px; align-items:center; padding:9px 14px}
.co-table.prod .hd{font:600 10px "Chakra Petch",sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mut); background:var(--s2); border-radius:var(--r-sm) var(--r-sm) 0 0}
.co-table.prod .hd span{display:block; text-align:left}
.co-table.prod a{border-top:1px solid var(--line); text-decoration:none; color:var(--ink); font-size:13px}
.co-table.prod a:hover{background:var(--s2)}
.co-table.prod a.cur{background:rgba(242,184,75,.07)}
.co-table.prod .ct-item{display:flex; align-items:center; gap:10px; min-width:0}
.co-table.prod .ct-n{display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0}
.co-table.prod .ct-n b{flex:0 0 auto; font-weight:600; font-size:13.5px; white-space:nowrap}
.co-table.prod .ct-n i{flex:0 1 auto; min-width:0; font-style:normal; font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.co-table.prod .ct-pp{font:600 14px "IBM Plex Mono",monospace; color:var(--gold-2)}
.co-table.prod .ct-bonus{display:flex; align-items:center; gap:6px}
.co-table.prod .ct-bonus b{font:500 12.5px "IBM Plex Mono",monospace; color:var(--ink2)}
.co-table.prod .ct-bonus em{font-style:normal; font-size:11px; opacity:.8}
.co-table.prod .ct-wh{display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px; color:var(--ink2)}
.co-table.prod .ct-wh > span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.co-table.prod .ct-wh .flag-img{flex:0 0 auto; width:18px; height:12px; border-radius:var(--r-xs)}
@media (max-width:760px){
  .co-table.prod{--ct-cols:minmax(0,1fr) 64px 84px; max-width:none}
  .co-table.prod .hd span:last-child, .co-table.prod .ct-wh{display:none}
  .co-table.prod .hd, .co-table.prod a{gap:10px; padding:8px 12px}
  
}

/* market: both cards share a height and the movers rows spread to fill it, so neither leaves a hole */
.mk-two > .card{display:flex; flex-direction:column}
.mk-two .mv-cols{flex:1; align-items:stretch}
.mk-two .mv-cols > div{display:flex; flex-direction:column}
.mk-two .mv-cols > div .cin-t{flex:0 0 auto}
.mk-two .mv{flex:1 1 auto; min-height:44px}
@media (max-width:760px){ .mk-two .mv{flex:0 0 auto} }

/* player cashflow */
.cf-top{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:20px; align-items:stretch}
.cf-head{display:grid; gap:8px; align-content:start}
.cf-k{display:grid; gap:1px; padding:9px 11px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line)}
.cf-k span{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}
.cf-k b{font:700 19px "IBM Plex Mono",monospace}
.cf-k b.up{color:#2bd4a0} .cf-k b.down{color:#ff8a96}
.cf-k i{font-style:normal; font-size:11px; color:var(--faint)}
.cf-chart{position:relative; display:flex; align-items:flex-end; justify-content:center; gap:14px;
  min-height:190px; padding:22px 12px 20px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line)}
.cf-legend{position:absolute; top:8px; right:12px; display:flex; align-items:center; gap:6px;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}
.cf-legend em{width:9px; height:9px; border-radius:2px; margin-left:6px}
.cf-day{flex:1 1 0; min-width:0; max-width:76px; display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative}
.cf-cols{display:flex; align-items:flex-end; gap:3px; height:100%}
.cf-cols i{flex:1; border-radius:3px 3px 0 0; min-height:3px}
i.cf-in, em.cf-in{background:#2bd4a0} i.cf-out, em.cf-out{background:#ff5c6c}
.cf-dl{position:absolute; bottom:-16px; left:0; right:0; text-align:center; font-size:10px; color:var(--faint); white-space:nowrap}
.cf-split{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:22px}
.cf-line{display:grid; grid-template-columns:minmax(0,1fr) 90px 68px; gap:10px; align-items:center; padding:5px 0; font-size:13px}
.cf-ll{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cf-lb{display:block; height:7px; border-radius:var(--r-pill); background:var(--s4); overflow:hidden}
.cf-lb i{display:block; height:100%; border-radius:var(--r-pill)}
.cf-line b{text-align:right; font:600 12.5px "IBM Plex Mono",monospace}
.cf-line.mut{color:var(--faint)}
@media (max-width:760px){
  .cf-top{grid-template-columns:minmax(0,1fr)}
  /* minmax(0,1fr), not 1fr: a plain 1fr will not shrink below its text, so a long line like
     "2,954 in · 3,211 out" pushed the right-hand tiles off a phone screen */
  .cf-head{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-k{min-width:0}
  .cf-k i{overflow-wrap:anywhere}
  .cf-chart{min-height:150px}
  .cf-line{grid-template-columns:minmax(0,1fr) 56px 60px}
}

/* account + donations cards, tidied to match the cashflow panel */
.ac-wealth{display:grid; gap:10px; padding:11px 12px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line)}
.ac-total{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.ac-total span{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}
.ac-total b{font:700 22px "IBM Plex Mono",monospace; color:var(--gold-2)}
.ac-wealth .wsplit{margin:0}
.ac-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; margin-top:12px}
.ac-t{display:grid; gap:1px; padding:8px 10px; border-radius:var(--r-sm); background:var(--s2); border:1px solid var(--line); min-width:0}
.ac-t span{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ac-t b{font:600 15px "IBM Plex Mono",monospace; white-space:nowrap}
.ac-t i{font-style:normal; font-size:10.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dn-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:0 22px;
  max-height:240px; overflow:auto; margin-top:6px; padding-right:4px; align-content:start}
.dn-row{display:grid; grid-template-columns:78px 116px auto; justify-content:start; gap:14px; align-items:center; min-width:0;
  padding:6px 0; border-top:1px solid var(--line); font-size:12.5px}
.dn-list > .dn-row:nth-child(-n+2){border-top:0}
.dn-d{color:var(--ink2); white-space:nowrap}
.dn-d em{font-style:normal; color:var(--faint); margin-left:5px; font-size:11px}
.dn-w{min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden}
.dn-v{text-align:left; font:600 12.5px "IBM Plex Mono",monospace; color:var(--give)}
@media (max-width:620px){ .dn-row{grid-template-columns:66px 104px auto; gap:10px} .dn-d em{display:none} }

/* case blocks: the case's own icon in the heading, wooden cases list what they paid out */
.cases .k{display:flex; align-items:center; gap:7px}
.crow.wrow{gap:6px; flex-wrap:wrap}
.ac-wt{display:inline-flex; align-items:center; gap:6px; padding:5px 9px 5px 6px; border-radius:var(--r-sm);
  background:var(--s2); border:1px solid var(--line)}
.ac-wt b{font:600 12.5px "IBM Plex Mono",monospace}
/* the recent-gifts list keeps its own quiet scrollbar instead of the browser's */
.dn-list{scrollbar-width:thin; scrollbar-color:var(--s4) transparent}
.dn-list::-webkit-scrollbar{width:8px}
.dn-list::-webkit-scrollbar-track{background:transparent}
.dn-list::-webkit-scrollbar-thumb{background:var(--s4); border-radius:var(--r-pill); border:2px solid transparent; background-clip:content-box}
.dn-list::-webkit-scrollbar-thumb:hover{background:var(--line); background-clip:content-box}

/* economy tab: the account tiles take up the slack so neither card ends in a hole */
#economy > .card{display:flex; flex-direction:column}
#economy .ac-grid{flex:0 1 auto; grid-auto-rows:minmax(64px,86px); align-content:start}
#economy .ac-foot{margin-top:auto; padding-top:12px}
/* the case icon in a heading reads as an icon, not a stamp */
.cases .k .itile{width:30px; height:30px; flex:0 0 30px; border-radius:var(--r-sm)}
.cases .k .itile img{width:100%; height:100%; object-fit:contain}
.ac-wt .itile{width:24px; height:24px; flex:0 0 24px}
.cases .k{font-size:11px; letter-spacing:.08em}

/* bar day labels: the full date on a wide screen, just the day number when space is tight */
.cf-dl em{font-style:normal}
.cf-dday{display:none}
@media (max-width:760px){ .cf-dfull{display:none} .cf-dday{display:inline} }

/* unit member checks */
.mck{display:flex; flex-direction:column; gap:8px; margin:0 0 12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--s1); transition:border-color .2s, background .2s}
.mck.on{border-color:rgba(255,92,108,.35); background:linear-gradient(180deg,rgba(255,92,108,.07),var(--s1))}
.mck.busy{opacity:.7}
.mck-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.mck-k{font:600 11px Saira,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-right:4px}
.mck .chip span{font-size:13px}
.mck-c{font:700 11px "IBM Plex Mono",monospace; min-width:18px; padding:0 5px; border-radius:999px; background:rgba(255,92,108,.22); color:#ffb3ba; text-align:center}
.mck-c:empty{display:none} .mck-c.zero{background:rgba(43,212,160,.16); color:#7fe8c5}
.mck-only{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2); cursor:pointer}
.mck-n{font:600 12px "IBM Plex Mono",monospace; color:var(--mut)} .mck.on .mck-n{color:#ff9aa4}
.mck #mckcopy{margin-left:auto}
.mck-note{margin:0; font-size:11.5px; line-height:1.45; color:var(--faint)}
.mck-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px}
.mck-tag{font:600 11px Saira,sans-serif; line-height:1.35; text-align:left; padding:2px 8px; border-radius:7px; color:#ffb3ba; background:rgba(255,92,108,.14); border:1px solid rgba(255,92,108,.4); cursor:pointer; transition:background .15s}
.mck-tag:hover,.mck-tag.on{background:rgba(255,92,108,.28); color:#fff}
.mck-why{display:block; margin-top:6px; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.45; color:var(--ink2); background:rgba(255,92,108,.08); border-left:3px solid rgba(255,92,108,.6); white-space:normal}
.bars.mck-on .bar-row:not(.mck-hit){opacity:.45} .bars.mck-on .bar-row:not(.mck-hit):hover{opacity:1}
.bar-row.mck-hit{border-color:rgba(255,92,108,.35)}
.mck-btns{display:contents}
@media (max-width:760px){
  .mck{padding:10px 11px}
  .mck-k{flex-basis:100%}
  .mck-btns{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%}
  .mck-btns .chip{height:auto; min-height:34px; padding:5px 8px; font-size:11.5px; line-height:1.2; justify-content:flex-start; white-space:normal; text-align:left}
  .mck-btns .chip .mck-c{margin-left:auto}
  .mck #mckcopy{margin-left:auto}
}

/* weekly awards */
.aw-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:16px}
.aw-when{font-size:13px; color:var(--mut)}
.aw-copy{margin-left:auto}
.aw-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.aw-card{display:grid; gap:10px; align-content:start; padding:13px 14px; border-radius:var(--r-sm);
  background:var(--s2); border:1px solid var(--line); min-width:0}
.aw-top{display:flex; align-items:center; gap:10px; min-width:0}
.aw-emoji{font-size:24px; line-height:1}
.aw-t{min-width:0}
.aw-t b{display:block; font-size:14px; letter-spacing:.02em}
.aw-t i{display:block; font-style:normal; font-size:11.5px; color:var(--mut)}
.aw-win{display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border-radius:var(--r-sm);
  background:rgba(242,184,75,.08); border:1px solid rgba(242,184,75,.28); text-decoration:none; color:var(--ink)}
.aw-win:hover{border-color:var(--gold-2)}
.aw-win .av{width:34px; height:34px; flex:0 0 34px}
.aw-wn{min-width:0}
.aw-wn b{display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.aw-wn i{display:block; font-style:normal; font:600 12.5px "IBM Plex Mono",monospace; color:var(--gold-2)}
.aw-rest{display:grid; gap:2px}
.aw-rest a{display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:8px; align-items:center; padding:3px 4px;
  font-size:12.5px; color:var(--ink2); text-decoration:none; border-radius:var(--r-xs)}
.aw-rest a:hover{background:var(--s3)}
.aw-rest em{font-style:normal; color:var(--faint); font-size:11px}
.aw-rest a{overflow:hidden}
.aw-rest span{font:500 12px "IBM Plex Mono",monospace; color:var(--mut)}
@media (max-width:620px){
  .aw-grid{grid-template-columns:minmax(0,1fr)}
  .aw-copy{margin-left:0; width:100%}
}

/* awards, round two: medals, streaks, your own placing */
.aw-medal{font-size:18px; line-height:1}
.aw-rest em{font-size:13px}
.aw-again{margin-left:auto; flex:0 0 auto; padding:2px 8px; border-radius:var(--r-pill); font-size:11px; font-weight:600;
  background:rgba(255,120,60,.14); color:#ff9a6b; border:1px solid rgba(255,120,60,.35)}
.aw-me{font-size:12px; color:var(--ink2); padding-top:8px; border-top:1px dashed var(--line)}
.aw-me b{color:var(--gold-2)}
.aw-me-off{color:var(--faint)}
.aw-rest a.aw-you{background:rgba(242,184,75,.1); color:var(--ink)}
.aw-card.aw-mine{border-color:var(--gold-2); box-shadow:0 0 0 1px rgba(242,184,75,.35)}
.aw-card.aw-ouch .aw-win{background:rgba(255,92,108,.08); border-color:rgba(255,92,108,.3)}
.aw-card.aw-ouch .aw-wn i{color:#ff8a96}
.aw-hint{margin:0 0 14px; font-size:13px; color:var(--mut)}

/* places 4 and 5 centred under the medals */
.aw-rest em{text-align:center}