/* ================================================================================================
   CONQUER THE WORLD . war room design system v3  "Obsidian & Brass"
   A dark strategy table: obsidian glass floating over a brass dot-matrix world, lit from above.
   Fonts: Cinzel (titles, like the logo art) . Barlow (text) . Barlow Condensed (map-style labels, numerals)
   ================================================================================================ */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --bg:#04080f;--bg2:#070d18;--panel:#0b1626;--panel2:#101e33;
  --glass:rgba(13,24,42,.66);--glass-hi:rgba(20,35,58,.78);
  --line:rgba(170,195,230,.10);--line2:rgba(170,195,230,.19);--line3:rgba(170,195,230,.34);
  --txt:#f6f0de;--txt2:#d5dce8;--mut:#8da2ba;--faint:#5f7792;
  --gold:#f0be4d;--gold-hi:#ffe193;--gold-lo:#b98228;--on-gold:#2a1b05;
  --ok:#5fd47e;--bad:#f2695b;--warn:#f4a640;--info:#6fa9f2;
  --t1:#5b9cf0;--t2:#e8708f;--t3:#58c47a;--t4:#f2a24c;--t5:#3fc5b5;--t6:#a487f2;--t7:#e3c14c;--t8:#dc7550;
  --r1:9px;--r2:13px;--r3:20px;
  --ease:cubic-bezier(.22,.8,.25,1);--ease-io:cubic-bezier(.65,0,.35,1);--spring:cubic-bezier(.34,1.32,.5,1);--out-expo:cubic-bezier(.16,1,.3,1);
  --fd:Cinzel,"Trajan Pro 3","Palatino Linotype",Georgia,serif;
  --fb:Barlow,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fl:"Barlow Condensed",Barlow,"Arial Narrow",system-ui,sans-serif;
  --fn:"Barlow Condensed",Barlow,"Arial Narrow",system-ui,sans-serif;
  --rail:268px;
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -22px rgba(0,0,0,.85),0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-hi:0 1px 0 rgba(255,255,255,.07) inset,0 30px 60px -24px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--gold) 14%,transparent);
  --glow:0 0 28px -4px color-mix(in srgb,var(--gold) 55%,transparent);
  color-scheme:dark;
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--txt);font:400 15.5px/1.55 var(--fb);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--gold) 38%,transparent);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#223650;border-radius:9px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--gold) 45%,#223650);background-clip:content-box;border:3px solid transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:7px}
.skip{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--gold);color:var(--on-gold);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
h1,h2,h3,h4,p{margin:0}
.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
[hidden]{display:none!important}

/* ---------- type ---------- */
h1{font:600 clamp(28px,3.5vw,42px)/1.06 var(--fd);letter-spacing:.04em;text-transform:uppercase;margin-top:7px;text-wrap:balance}
h2{font:700 13px var(--fl);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
h3{font:600 18px/1.2 var(--fd);letter-spacing:.045em;text-transform:uppercase}
.kick{display:inline-flex;align-items:center;gap:10px;font:700 12.5px var(--fl);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.kick::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.lede{color:var(--mut);margin-top:10px;max-width:62ch;font-size:16px}
.mut{color:var(--mut)}.faint{color:var(--faint)}.small{font-size:13px}.nowrap{white-space:nowrap}.right{text-align:right}.center{text-align:center}
.gt{background:linear-gradient(180deg,var(--gold-hi) 8%,var(--gold) 52%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.disp{font-family:var(--fd);letter-spacing:.045em;text-transform:uppercase}
.num{font-variant-numeric:lining-nums tabular-nums}
.stack{display:flex;flex-direction:column;gap:22px}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.grow{flex:1;min-width:0}
.mt{margin-top:22px}.mt-s{margin-top:12px}.mb{margin-bottom:20px}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lab,.lbl{font:700 12px var(--fl);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.mut a,.lede a{color:var(--gold)}
/* ---------- the dot-matrix world (generated at build time, used as a mask everywhere) ---------- */
:root{--map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 433.3'%3E%3Cpath d='M342.3 3.0h23.8M383.9 3.0h77.4M520.8 3.0h11.9M663.7 3.0h11.9M291.7 8.1h17.9M321.4 8.1h0.0M339.3 8.1h11.9M398.8 8.1h65.5M601.2 8.1h6.0M660.7 8.1h41.7M750.0 8.1h6.0M270.8 13.3h35.7M318.5 13.3h6.0M336.3 13.3h23.8M401.8 13.3h53.6M598.2 13.3h0.0M628.0 13.3h107.2M758.9 13.3h17.9M190.5 18.4h113.1M315.5 18.4h11.9M339.3 18.4h6.0M357.1 18.4h11.9M404.8 18.4h47.6M535.7 18.4h29.8M619.0 18.4h220.2M151.8 23.6h11.9M181.5 23.6h154.8M360.1 23.6h17.9M395.8 23.6h35.7M526.8 23.6h321.4M178.6 28.8h154.8M351.2 28.8h17.9M398.8 28.8h17.9M458.3 28.8h11.9M523.8 28.8h333.3M163.7 33.9h142.9M342.3 33.9h6.0M401.8 33.9h6.0M514.9 33.9h17.9M544.6 33.9h315.5M160.7 39.1h23.8M202.4 39.1h95.2M339.3 39.1h11.9M511.9 39.1h23.8M547.6 39.1h273.8M839.3 39.1h6.0M163.7 44.2h6.0M217.3 44.2h83.3M336.3 44.2h29.8M491.1 44.2h0.0M526.8 44.2h6.0M556.5 44.2h238.1M836.3 44.2h6.0M154.8 49.4h0.0M214.3 49.4h95.2M333.3 49.4h29.8M488.1 49.4h6.0M517.9 49.4h0.0M529.8 49.4h0.0M547.6 49.4h250.0M839.3 49.4h11.9M205.4 54.5h0.0M217.3 54.5h95.2M324.4 54.5h47.6M485.1 54.5h0.0M497.0 54.5h0.0M520.8 54.5h285.7M848.2 54.5h6.0M214.3 59.7h101.2M327.4 59.7h41.7M482.1 59.7h0.0M494.0 59.7h6.0M511.9 59.7h309.5M851.2 59.7h0.0M211.3 64.8h148.8M372.0 64.8h0.0M491.1 64.8h327.4M214.3 70.0h131.0M363.1 70.0h11.9M494.0 70.0h327.4M211.3 75.1h136.9M372.0 75.1h0.0M497.0 75.1h327.4M836.3 75.1h0.0M208.3 80.3h142.9M500.0 80.3h65.5M583.3 80.3h29.8M625.0 80.3h196.4M205.4 85.5h125.0M479.2 85.5h6.0M497.0 85.5h17.9M526.8 85.5h0.0M538.7 85.5h29.8M598.2 85.5h11.9M628.0 85.5h196.4M842.3 85.5h6.0M202.4 90.6h125.0M482.1 90.6h23.8M529.8 90.6h6.0M547.6 90.6h17.9M583.3 90.6h0.0M601.2 90.6h11.9M631.0 90.6h184.5M845.2 90.6h0.0M199.4 95.8h119.1M479.2 95.8h17.9M520.8 95.8h0.0M538.7 95.8h0.0M550.6 95.8h6.0M568.5 95.8h53.6M633.9 95.8h178.6M848.2 95.8h0.0M196.4 100.9h113.1M482.1 100.9h17.9M541.7 100.9h0.0M553.6 100.9h0.0M565.5 100.9h53.6M636.9 100.9h154.8M809.5 100.9h6.0M851.2 100.9h0.0M193.5 106.1h113.1M479.2 106.1h11.9M514.9 106.1h0.0M556.5 106.1h0.0M568.5 106.1h53.6M633.9 106.1h166.7M818.5 106.1h0.0M848.2 106.1h0.0M196.4 111.2h107.2M488.1 111.2h0.0M500.0 111.2h23.8M583.3 111.2h0.0M595.2 111.2h208.3M821.4 111.2h0.0M839.3 111.2h11.9M199.4 116.4h101.2M485.1 116.4h41.7M592.3 116.4h214.3M836.3 116.4h11.9M202.4 121.5h89.3M476.2 121.5h59.5M553.6 121.5h6.0M589.3 121.5h220.2M833.3 121.5h6.0M199.4 126.7h0.0M211.3 126.7h77.4M479.2 126.7h333.3M202.4 131.8h59.5M285.7 131.8h0.0M476.2 131.8h339.3M199.4 137.0h47.6M288.7 137.0h0.0M467.3 137.0h160.7M639.9 137.0h172.6M202.4 142.2h0.0M214.3 142.2h23.8M285.7 142.2h0.0M464.3 142.2h166.7M642.9 142.2h172.6M205.4 147.3h0.0M217.3 147.3h23.8M461.3 147.3h172.6M645.8 147.3h0.0M663.7 147.3h0.0M675.6 147.3h136.9M220.2 152.5h17.9M458.3 152.5h131.0M607.1 152.5h47.6M684.5 152.5h125.0M821.4 152.5h0.0M217.3 157.6h17.9M276.8 157.6h11.9M455.4 157.6h202.4M687.5 157.6h113.1M220.2 162.8h17.9M261.9 162.8h0.0M291.7 162.8h6.0M458.3 162.8h136.9M607.1 162.8h47.6M690.5 162.8h41.7M750.0 162.8h35.7M797.6 162.8h0.0M217.3 167.9h17.9M258.9 167.9h0.0M306.5 167.9h6.0M461.3 167.9h136.9M610.1 167.9h41.7M699.4 167.9h29.8M753.0 167.9h29.8M794.6 167.9h0.0M220.2 173.1h41.7M458.3 173.1h142.9M613.1 173.1h35.7M702.4 173.1h23.8M756.0 173.1h29.8M827.4 173.1h0.0M229.2 178.2h29.8M455.4 178.2h148.8M616.1 178.2h23.8M705.4 178.2h17.9M758.9 178.2h29.8M830.4 178.2h0.0M250.0 183.4h17.9M458.3 183.4h148.8M619.0 183.4h17.9M702.4 183.4h11.9M767.9 183.4h29.8M253.0 188.5h17.9M455.4 188.5h172.6M705.4 188.5h11.9M770.8 188.5h23.8M830.4 188.5h6.0M261.9 193.7h6.0M458.3 193.7h160.7M708.3 193.7h11.9M773.8 193.7h23.8M264.9 198.9h0.0M294.6 198.9h17.9M461.3 198.9h154.8M628.0 198.9h11.9M711.3 198.9h6.0M788.7 198.9h6.0M836.3 198.9h6.0M267.9 204.0h0.0M291.7 204.0h35.7M464.3 204.0h172.6M714.3 204.0h0.0M773.8 204.0h0.0M791.7 204.0h0.0M839.3 204.0h0.0M270.8 209.2h59.5M467.3 209.2h166.7M723.2 209.2h0.0M776.8 209.2h0.0M842.3 209.2h6.0M285.7 214.3h53.6M470.2 214.3h166.7M726.2 214.3h0.0M779.8 214.3h0.0M845.2 214.3h0.0M288.7 219.5h59.5M473.2 219.5h23.8M514.9 219.5h119.1M782.7 219.5h0.0M824.4 219.5h0.0M285.7 224.6h71.4M523.8 224.6h107.2M767.9 224.6h17.9M815.5 224.6h11.9M282.7 229.8h71.4M526.8 229.8h101.2M770.8 229.8h17.9M812.5 229.8h11.9M279.8 234.9h77.4M529.8 234.9h89.3M773.8 234.9h11.9M803.6 234.9h23.8M857.1 234.9h0.0M276.8 240.1h83.3M526.8 240.1h89.3M776.8 240.1h6.0M806.5 240.1h17.9M279.8 245.3h89.3M529.8 245.3h83.3M779.8 245.3h6.0M809.5 245.3h11.9M833.3 245.3h6.0M869.0 245.3h0.0M276.8 250.4h107.2M532.7 250.4h77.4M782.7 250.4h6.0M806.5 250.4h11.9M830.4 250.4h6.0M872.0 250.4h17.9M279.8 255.6h113.1M535.7 255.6h71.4M785.7 255.6h6.0M833.3 255.6h6.0M875.0 255.6h23.8M922.6 255.6h0.0M276.8 260.7h125.0M532.7 260.7h71.4M794.6 260.7h0.0M883.9 260.7h17.9M913.7 260.7h6.0M279.8 265.9h119.1M535.7 265.9h71.4M797.6 265.9h11.9M886.9 265.9h17.9M282.7 271.0h119.1M538.7 271.0h65.5M806.5 271.0h6.0M883.9 271.0h11.9M907.7 271.0h0.0M285.7 276.2h113.1M535.7 276.2h71.4M845.2 276.2h0.0M910.7 276.2h0.0M288.7 281.3h107.2M538.7 281.3h71.4M291.7 286.5h101.2M535.7 286.5h71.4M863.1 286.5h11.9M892.9 286.5h0.0M294.6 291.6h95.2M538.7 291.6h71.4M633.9 291.6h0.0M848.2 291.6h0.0M860.1 291.6h11.9M889.9 291.6h0.0M297.6 296.8h95.2M535.7 296.8h71.4M631.0 296.8h6.0M845.2 296.8h23.8M886.9 296.8h6.0M306.5 302.0h83.3M532.7 302.0h71.4M622.0 302.0h11.9M836.3 302.0h35.7M883.9 302.0h11.9M309.5 307.1h83.3M535.7 307.1h59.5M619.0 307.1h11.9M833.3 307.1h59.5M982.1 307.1h0.0M312.5 312.3h77.4M538.7 312.3h53.6M622.0 312.3h6.0M830.4 312.3h65.5M315.5 317.4h71.4M535.7 317.4h53.6M619.0 317.4h6.0M815.5 317.4h83.3M312.5 322.6h71.4M538.7 322.6h53.6M616.1 322.6h11.9M806.5 322.6h95.2M315.5 327.7h59.5M541.7 327.7h47.6M619.0 327.7h6.0M803.6 327.7h95.2M312.5 332.9h59.5M538.7 332.9h47.6M622.0 332.9h0.0M806.5 332.9h95.2M315.5 338.0h53.6M541.7 338.0h41.7M803.6 338.0h95.2M318.5 343.2h53.6M544.6 343.2h35.7M800.6 343.2h101.2M315.5 348.3h53.6M547.6 348.3h29.8M803.6 348.3h95.2M318.5 353.5h47.6M550.6 353.5h23.8M800.6 353.5h89.3M321.4 358.7h41.7M547.6 358.7h23.8M797.6 358.7h23.8M845.2 358.7h41.7M318.5 363.8h41.7M550.6 363.8h0.0M794.6 363.8h6.0M848.2 363.8h35.7M321.4 369.0h29.8M851.2 369.0h23.8M940.5 369.0h0.0M318.5 374.1h35.7M854.2 374.1h17.9M937.5 374.1h0.0M321.4 379.3h29.8M863.1 379.3h0.0M934.5 379.3h6.0M324.4 384.4h17.9M931.5 384.4h0.0M321.4 389.6h17.9M857.1 389.6h0.0M916.7 389.6h6.0M324.4 394.7h17.9M907.7 394.7h6.0M327.4 399.9h11.9M898.8 399.9h6.0M324.4 405.0h17.9M327.4 410.2h17.9M330.4 415.4h11.9M333.3 420.5h11.9M342.3 425.7h6.0' fill='none' stroke='%23000' stroke-width='3.3' stroke-linecap='round' stroke-dasharray='0 5.952'/%3E%3C/svg%3E")}

/* ---------- page backdrop: lit from above, a brass world far below the glass ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;
  background:radial-gradient(1300px 760px at 80% -14%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 62%),
             radial-gradient(1000px 700px at -8% 106%,rgba(64,112,205,.13),transparent 60%),
             linear-gradient(180deg,#060c17 0%,#04080f 55%,#03060c 100%)}
.bg::before{content:"";position:absolute;inset:0;background:var(--bgimg,none) center/cover no-repeat;opacity:.055;filter:blur(2.5px) saturate(.55)}
.bg-glow{position:absolute;border-radius:50%;will-change:transform;opacity:.9}
.bg-glow.g1{width:min(980px,90vw);aspect-ratio:1;right:-18%;top:-34%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 15%,transparent),transparent);animation:drift-a 38s ease-in-out infinite alternate}
.bg-glow.g2{width:min(900px,86vw);aspect-ratio:1;left:-24%;bottom:-38%;background:radial-gradient(closest-side,rgba(70,120,215,.20),transparent);animation:drift-b 46s ease-in-out infinite alternate}
.bg-glow.g3{width:min(760px,80vw);aspect-ratio:1;left:30%;top:22%;background:radial-gradient(closest-side,rgba(120,90,200,.10),transparent);animation:drift-c 55s ease-in-out infinite alternate}
.bg-world{position:absolute;left:50%;top:7vh;width:max(1200px,112vw);transform:translateX(-50%);opacity:.46;
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.18) 8%,rgba(0,0,0,.5) 44%,#000 76%);mask-image:linear-gradient(100deg,rgba(0,0,0,.18) 8%,rgba(0,0,0,.5) 44%,#000 76%)}
.bg-world .wm-dots{opacity:.9}
.bg-grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg-vig{position:absolute;inset:0;background:radial-gradient(ellipse 85% 70% at 50% 36%,transparent 35%,rgba(2,5,10,.78) 100%)}

/* ---------- world-map component: dots + route arcs + pings (used in the backdrop, hero, sign-in) ---------- */
.wm{position:relative;aspect-ratio:1000/433.3;width:100%;pointer-events:none}
.wm-dots{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:var(--map) center/100% 100% no-repeat;mask:var(--map) center/100% 100% no-repeat;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold-hi) 62%,transparent),color-mix(in srgb,var(--gold) 26%,transparent) 70%,color-mix(in srgb,var(--gold-lo) 20%,transparent))}
.wm-band{position:absolute;top:0;bottom:0;left:0;width:26%;background:linear-gradient(100deg,transparent,color-mix(in srgb,#fff 70%,var(--gold-hi)) 50%,transparent);transform:translateX(-130%);animation:wm-scan 12s linear infinite;animation-delay:var(--sd,2s);will-change:transform}
.wm-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc-base{fill:none;stroke:color-mix(in srgb,var(--gold) 38%,transparent);stroke-width:.9;stroke-dasharray:1.5 4}
.arc-run{fill:none;stroke:var(--gold-hi);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:2.4 97.6;stroke-dashoffset:2.4;animation:arc-run 6s linear infinite;animation-delay:var(--d,0s);opacity:.95}
.ping{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 30%,transparent),0 0 14px 1px var(--gold)}
.ping::after,.ping::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--gold);opacity:0;animation:ping-ring 3.6s var(--ease) infinite;animation-delay:var(--d,0s)}
.ping::before{animation-delay:calc(var(--d,0s) + 1.2s)}
.ping.hq{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:#fff}

/* HUD corner marks */
.hud{position:absolute;width:15px;height:15px;border:1.5px solid color-mix(in srgb,var(--gold) 60%,transparent);pointer-events:none;z-index:2;opacity:.85}
.hud.tl{left:12px;top:12px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.hud.tr{right:12px;top:12px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.hud.bl{left:12px;bottom:12px;border-right:0;border-top:0;border-bottom-left-radius:6px}
.hud.br{right:12px;bottom:12px;border-left:0;border-top:0;border-bottom-right-radius:6px}

/* ---------- cinematic intro (shown once per browser session, never for reduced motion) ---------- */
.splash{position:fixed;inset:0;z-index:1500;display:none;place-items:center;overflow:hidden;
  background:radial-gradient(900px 520px at 50% 46%,color-mix(in srgb,var(--gold) 11%,transparent),transparent 70%),#03070d;
  transition:opacity .75s var(--ease),transform 1s var(--ease),visibility 0s linear .75s}
html.boot .splash,html.boot-out .splash{display:grid}
html.boot-out .splash{opacity:0;visibility:hidden;transform:scale(1.06);pointer-events:none}
.splash .wm{position:absolute;left:50%;top:50%;width:max(980px,104vw);transform:translate(-50%,-50%);opacity:.55;animation:boot-map 2.2s var(--ease) both}
.boot-core{position:relative;display:grid;justify-items:center;gap:20px;text-align:center;padding:24px}
.boot-emblem{position:relative;width:116px;height:116px;display:grid;place-items:center;animation:boot-pop .9s var(--out-expo) both}
.boot-emblem::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,var(--gold) 92%,var(--gold-hi) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));animation:spin 1.7s linear infinite}
.boot-emblem::after{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 34%,transparent),transparent);z-index:-1}
.boot-emblem img{width:78px;height:78px;border-radius:24px;border:2px solid var(--gold);object-fit:cover}
.boot-name{font:700 clamp(20px,4.6vw,38px)/1 var(--fd);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:boot-name 1.1s var(--out-expo) .25s both}
.boot-tag{font:600 12px var(--fl);letter-spacing:.55em;padding-left:.55em;text-transform:uppercase;color:var(--mut);animation:boot-name 1s var(--out-expo) .5s both}
.boot-bar{width:min(260px,62vw);height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px;animation:fade .5s ease .4s both}
.boot-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transform-origin:left;animation:boot-bar 1.1s var(--ease-io) .35s both;box-shadow:0 0 12px var(--gold)}
html.has-boot{--boot:1.3s}

/* ---------- page-change progress line + scroll progress ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:1200;pointer-events:none;opacity:0;transition:opacity .25s}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,transparent,var(--gold) 40%,var(--gold-hi));box-shadow:0 0 14px var(--gold)}
html.leaving .progress{opacity:1}
html.leaving .progress i{animation:prog 5s var(--out-expo) forwards}
@supports (animation-timeline:scroll()){
  .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transform-origin:left;transform:scaleX(0);animation:scroll-line linear both;animation-timeline:scroll(root block)}
}
/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh;min-height:100dvh}
.col{flex:1;min-width:0;display:flex;flex-direction:column}
.main{flex:1;width:100%;max-width:1360px;margin:0 auto;padding:30px clamp(16px,3vw,48px) 80px;outline:0}
.foot{padding:20px clamp(16px,3vw,48px) 28px;color:var(--faint);font-size:12.5px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(3,6,12,.5))}
.foot span:first-child{font:600 12px var(--fl);letter-spacing:.2em;text-transform:uppercase}

/* ---------- sidebar ---------- */
.rail{position:sticky;top:0;height:100vh;height:100dvh;width:var(--rail);flex:none;display:flex;flex-direction:column;gap:18px;padding:22px 14px 16px;z-index:40;overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(180deg,rgba(8,15,27,.90),rgba(4,8,15,.95));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset -1px 0 0 var(--line)}
.rail::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 55%,transparent),transparent 28%,transparent 72%,color-mix(in srgb,var(--gold) 22%,transparent));pointer-events:none}
.rail::before{content:"";position:absolute;left:-40%;top:-12%;width:180%;height:260px;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 13%,transparent),transparent);pointer-events:none}
.rail-brand{position:relative;display:flex;align-items:center;gap:14px;padding:2px 6px 18px;border-bottom:1px solid var(--line)}
.emblem{position:relative;width:56px;height:56px;flex:none;display:grid;place-items:center}
.emblem::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 40%,color-mix(in srgb,var(--gold) 80%,transparent) 85%,var(--gold-hi));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));animation:spin 9s linear infinite;opacity:.85}
.emblem::after{content:"";position:absolute;inset:-9px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 26%,transparent),transparent);z-index:-1;animation:breathe 5s ease-in-out infinite}
.rail-logo{width:42px;height:42px;border-radius:14px;border:2px solid var(--gold);object-fit:cover;flex:none;transition:transform .6s var(--spring)}
.rail-brand:hover .rail-logo{transform:rotate(-6deg) scale(1.08)}
.rail-name{text-wrap:balance;font:700 16px/1.12 var(--fd);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rail-tag{font:600 11px var(--fl);letter-spacing:.36em;text-transform:uppercase;color:var(--mut);margin-top:5px}
.rail .rail-x{margin-left:auto;display:none}
.nav{position:relative;display:flex;flex-direction:column;gap:3px}
.nav-ind{position:absolute;left:0;right:0;top:0;height:44px;border-radius:13px;pointer-events:none;opacity:0;transform:translate3d(0,var(--y,0px),0);
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 21%,transparent),color-mix(in srgb,var(--gold) 3%,transparent) 96%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent),0 10px 24px -14px color-mix(in srgb,var(--gold) 60%,transparent);
  transition:transform .6s var(--out-expo),height .45s var(--ease),opacity .4s}
.nav-ind.on{opacity:1}
.nav-ind::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 5px 5px 0;background:linear-gradient(180deg,var(--gold-hi),var(--gold));box-shadow:0 0 18px var(--gold)}
.nav a{position:relative;z-index:1;display:flex;align-items:center;gap:13px;height:44px;padding:0 13px;border-radius:13px;color:var(--mut);font-weight:500;letter-spacing:.01em;
  transition:background .25s var(--ease),color .25s var(--ease),transform .3s var(--ease)}
.nav a .i{width:19px;height:19px;opacity:.75;transition:transform .4s var(--spring),opacity .25s,color .25s}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.nav a:hover .i{transform:scale(1.14) rotate(-4deg);opacity:1}
.nav a:active{transform:scale(.985)}
.nav a[aria-current=page]{color:var(--gold-hi);font-weight:600}
.nav a[aria-current=page] .i{opacity:1;color:var(--gold)}
html:not(.nav-ready) .nav a[aria-current=page]{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 18%,transparent),color-mix(in srgb,var(--gold) 3%,transparent) 92%)}
html.nav-ready .nav a[aria-current=page]:hover{background:none}
.nav .n{margin-left:auto;min-width:24px;height:22px;padding:0 8px;border-radius:99px;display:grid;place-items:center;font:700 12.5px var(--fl);letter-spacing:.04em;background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-hi);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 24%,transparent)}
.nav-label{font:700 11px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--faint);padding:10px 13px 4px}
.rail-picker{padding:0 4px}
.rail-picker select{height:40px;font-size:14px}
html.js .rail-picker .btn{display:none}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:11px}
.who{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--line)}
.who-name{font-weight:700;line-height:1.15}
.who-role{font:700 11px var(--fl);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.who-role.admin{color:var(--gold)}
.rail-links{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mut);padding:0 4px}
.rail-links a,.rail-links .link-btn{transition:color .2s}
.rail-links a:hover{color:var(--gold-hi)}
.ver{font:600 11px var(--fl);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-align:center}
.scrim{position:fixed;inset:0;background:rgba(2,5,10,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);z-index:35}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px clamp(16px,3vw,48px);min-height:62px;
  background:linear-gradient(180deg,rgba(4,8,15,.86),rgba(4,8,15,.62));-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--line)}
.crumb{display:flex;align-items:center;gap:11px;font:600 13px var(--fl);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumb b{color:var(--txt);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.crumb-sep{width:5px;height:5px;transform:rotate(45deg);background:var(--gold);opacity:.8;flex:none}
.sp{flex:1}
.live{display:inline-flex;align-items:center;gap:9px;font:700 12px var(--fl);letter-spacing:.17em;text-transform:uppercase;color:var(--mut);padding:0 13px;height:31px;border-radius:99px;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:border-color .3s,color .3s}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(95,212,126,.6);animation:ping 2.2s infinite}
.live[data-state=on]{border-color:rgba(95,212,126,.22)}
.live[data-state=paused] i{background:var(--warn);animation:none}
.live[data-state=off] i{background:var(--bad);animation:none}
.live[data-sync] i{animation:ping .9s infinite}
.cmdk-btn{gap:10px;color:var(--mut)}
kbd{font:600 11.5px var(--fl);letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid var(--line2);border-bottom-width:2px;color:var(--txt2)}
.tabbar{display:none}

/* ---------- page headings ---------- */
.page-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.page-head::after{content:"";position:absolute;left:0;bottom:-1px;width:min(220px,40%);height:1px;background:linear-gradient(90deg,var(--gold),transparent);box-shadow:0 0 14px var(--gold)}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.sec-head{display:flex;align-items:center;gap:14px;margin:0 2px 16px;min-height:28px}
.sec-head h2{display:flex;align-items:center;gap:12px;color:var(--txt2)}
.sec-head h2::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 10px var(--gold);flex:none}
.sec-head>:last-child:not(h2){margin-left:auto}
.sec-head a{font:700 12.5px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);transition:color .2s,letter-spacing .3s var(--ease)}
.sec-head a:hover{color:var(--gold-hi);letter-spacing:.22em}
.sec-head h2+.chip{margin-left:auto}

.page-head .lede{text-shadow:0 0 16px rgba(3,7,14,.95),0 0 4px rgba(3,7,14,.75)}
/* ---------- obsidian glass cards ---------- */
.card{position:relative;isolation:isolate;border-radius:var(--r3);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(22,38,63,.72),rgba(10,19,34,.82));box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;left:16px;right:16px;top:-1px;height:1px;z-index:1;pointer-events:none;opacity:.75;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3) 30%,color-mix(in srgb,var(--gold) 55%,transparent) 70%,transparent)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--gold) 10%,transparent),transparent 64%)}
.card.lit::after{opacity:1}
.pad{padding:22px 24px}
.pad-s{padding:14px 16px}
.hover{transition:transform .45s var(--ease),border-color .35s var(--ease),box-shadow .45s var(--ease)}
.hover:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 44%,transparent);box-shadow:var(--shadow-hi)}
.callout{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 10%,transparent),color-mix(in srgb,var(--gold) 3%,transparent));border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);color:var(--txt2);font-size:14px}
.callout .i{color:var(--gold);margin-top:2px}
.callout.bad{background:rgba(242,105,91,.08);border-color:rgba(242,105,91,.35)}.callout.bad .i{color:var(--bad)}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:46px 22px;color:var(--mut)}
.empty .i{width:60px;height:60px;padding:16px;border-radius:50%;color:var(--gold);background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 20%,transparent),transparent);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);animation:float 5s ease-in-out infinite}
.empty b{font:600 19px var(--fd);letter-spacing:.05em;text-transform:uppercase;color:var(--txt)}
.card.empty{border-style:dashed;border-color:var(--line2);background:linear-gradient(180deg,rgba(18,31,52,.45),rgba(10,19,34,.5))}

/* ---------- chips ---------- */
.chip{--cc:var(--mut);display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 11px;border-radius:99px;font:700 12px var(--fl);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  color:var(--cc);border:1px solid color-mix(in srgb,var(--cc) 40%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 17%,transparent),color-mix(in srgb,var(--cc) 8%,transparent))}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{--cc:var(--ok)}.chip.bad{--cc:var(--bad)}.chip.gold{--cc:var(--gold)}.chip.info{--cc:var(--info)}.chip.warn{--cc:var(--warn)}.chip.vio{--cc:var(--t6)}
.chip.ok .dot{animation:ping 2s infinite}
.chip.info{transition:transform .25s var(--ease),background .25s}
.chips{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:41px;padding:0 18px;border-radius:13px;border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));color:var(--txt);font:600 14.5px var(--fb);letter-spacing:.01em;cursor:pointer;white-space:nowrap;user-select:none;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 6px 14px -8px rgba(0,0,0,.7);
  transition:transform .3s var(--ease),border-color .25s,background .3s,box-shadow .35s,color .25s}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-150%) skewX(-18deg);transition:transform .75s var(--ease);pointer-events:none}
.btn:hover::before{transform:translateX(280%) skewX(-18deg)}
.btn:hover{border-color:color-mix(in srgb,var(--gold) 72%,transparent);color:var(--gold-hi);transform:translateY(-1px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 15%,transparent),color-mix(in srgb,var(--gold) 4%,transparent));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 14px 26px -12px rgba(0,0,0,.85),0 0 24px -8px color-mix(in srgb,var(--gold) 55%,transparent)}
.btn:active{transform:translateY(0) scale(.965);transition-duration:.08s}
.btn .i{width:17px;height:17px;transition:transform .35s var(--spring)}
.btn:hover .i{transform:scale(1.12)}
.btn.pri{border:0;color:var(--on-gold);font-weight:800;letter-spacing:.02em;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 50%,var(--gold-lo));
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--gold) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.18)}
.btn.pri:hover{color:var(--on-gold);transform:translateY(-2px);background:linear-gradient(180deg,#fff3cf,var(--gold-hi) 50%,var(--gold));
  box-shadow:0 20px 36px -10px color-mix(in srgb,var(--gold) 95%,transparent),0 0 30px -4px color-mix(in srgb,var(--gold) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.15)}
.btn.pri:active{transform:translateY(0) scale(.97)}
.btn.danger{color:var(--bad);border-color:rgba(242,105,91,.4)}
.btn.danger:hover{color:#ffb4ab;border-color:var(--bad);background:linear-gradient(180deg,rgba(242,105,91,.2),rgba(242,105,91,.06));box-shadow:0 14px 26px -12px rgba(0,0,0,.85),0 0 24px -8px rgba(242,105,91,.6)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.sm{height:33px;padding:0 13px;font-size:13.5px;border-radius:11px}
.btn.block{width:100%}
.btn[disabled],.btn.busy{opacity:.5;pointer-events:none}
.btn.busy{opacity:.85}
.btn.busy::after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .65s linear infinite}
.btn.busy>*{opacity:0}
.btn.fill-bad{border:0;color:#2a0905;font-weight:800;background:linear-gradient(180deg,#ffa598,var(--bad) 55%,#c4453a);box-shadow:0 12px 26px -10px rgba(242,105,91,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.fill-bad:hover{color:#2a0905;border:0;background:linear-gradient(180deg,#ffbdb3,#f57b6e 55%,#d24f43);box-shadow:0 18px 34px -10px rgba(242,105,91,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.icon-btn{display:inline-grid;place-items:center;width:41px;height:41px;border-radius:13px;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));cursor:pointer;color:var(--txt2);
  transition:transform .3s var(--ease),border-color .25s,color .25s,background .25s,box-shadow .3s}
.icon-btn:hover{border-color:color-mix(in srgb,var(--gold) 72%,transparent);color:var(--gold-hi);background:color-mix(in srgb,var(--gold) 12%,transparent);transform:translateY(-1px);box-shadow:0 0 22px -8px color-mix(in srgb,var(--gold) 60%,transparent)}
.icon-btn:active{transform:scale(.92);transition-duration:.08s}
.icon-btn .i{width:19px;height:19px;transition:transform .35s var(--spring)}
.icon-btn:hover .i{transform:scale(1.1)}
.icon-btn.sm{width:31px;height:31px;border-radius:10px}
.icon-btn.sm .i{width:15px;height:15px}
.icon-btn.danger:hover{border-color:var(--bad);color:var(--bad);background:rgba(242,105,91,.14);box-shadow:0 0 22px -8px rgba(242,105,91,.7)}
.link-btn{background:none;border:0;padding:0;color:inherit;cursor:pointer;font:inherit;transition:color .2s}
.link-btn:hover{color:var(--gold-hi)}
.inl{display:inline}
form.inl{display:inline-block}
.page-actions .btn{height:41px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>label,.field>.lbl{transition:color .25s}
.field:focus-within>label,.field:focus-within>.lbl{color:var(--gold-hi)}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{width:100%;min-height:43px;padding:9px 14px;border-radius:12px;border:1px solid var(--line2);color:var(--txt);caret-color:var(--gold);
  background:linear-gradient(180deg,rgba(2,6,12,.74),rgba(6,12,22,.56));box-shadow:inset 0 2px 7px rgba(0,0,0,.4);transition:border-color .25s,box-shadow .35s,background .25s}
textarea{resize:vertical;line-height:1.45}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a85a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(2,6,12,.74),rgba(6,12,22,.56));background-repeat:no-repeat;background-position:right 14px center,0 0;cursor:pointer}
select option{background:#0c1829;color:var(--txt)}
input:hover,select:hover,textarea:hover{border-color:var(--line3)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);background-color:rgba(2,6,12,.9);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.4),0 0 0 4px color-mix(in srgb,var(--gold) 15%,transparent),0 0 28px -6px color-mix(in srgb,var(--gold) 50%,transparent)}
input:disabled,select:disabled,textarea:disabled{opacity:.5}
::placeholder{color:#546d88}
input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px;flex:none}
.hint{font-size:12.5px;color:var(--faint);line-height:1.45}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px;align-items:start}
.fstack{display:flex;flex-direction:column;gap:15px}
.fgroup{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.fgroup>.field{flex:1;min-width:150px}
.switch{display:inline-flex;align-items:center;gap:13px;cursor:pointer;font-size:14.5px;color:var(--txt2)}
.switch input{appearance:none;-webkit-appearance:none;width:46px;height:27px;border-radius:99px;background:#16273f;border:1px solid var(--line2);position:relative;cursor:pointer;flex:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.45);transition:background .3s,border-color .3s,box-shadow .3s}
.switch input::after{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:linear-gradient(180deg,#b6c6d8,#8499b0);box-shadow:0 2px 5px rgba(0,0,0,.5);transition:transform .4s var(--spring),background .3s}
.switch input:checked{background:color-mix(in srgb,var(--gold) 28%,#16273f);border-color:var(--gold);box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 0 20px -6px var(--gold)}
.switch input:checked::after{transform:translateX(19px);background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.pw{position:relative}.pw input{padding-right:50px!important}
.pw .icon-btn{position:absolute;right:5px;top:5px;width:33px;height:33px;border:0;background:transparent;box-shadow:none}
.pw .i-off{display:none}
.pw [aria-pressed=true] .i-on{display:none}
.pw [aria-pressed=true] .i-off{display:inline-flex}
.meter{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:inherit;background:var(--bad);transition:width .45s var(--ease),background .35s}
.hint .meter{margin:3px 0 4px}
.pwr{display:inline-block}
.pwr>summary{list-style:none;cursor:pointer}
.pwr>summary::-webkit-details-marker{display:none}
.pwr[open]{flex-basis:100%}
.pwr[open]>summary{margin-bottom:6px}

/* ---------- avatars, bars ---------- */
.av{--s:36px;width:var(--s);height:var(--s);border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;flex:none;font:700 calc(var(--s)*.42)/1 var(--fb);color:#08121f;
  background:linear-gradient(145deg,color-mix(in srgb,var(--c,var(--t1)) 100%,#fff 14%),var(--c,var(--t1)));box-shadow:0 0 0 2px rgba(255,255,255,.1),0 4px 10px -3px rgba(0,0,0,.6)}
img.av{background:linear-gradient(100deg,#13223a 30%,#20385a 50%,#13223a 70%) 0 0/240% 100%;animation:shimmer 1.3s linear infinite}
img.av.ld{animation:none;background:#13223a}
.av-s{--s:26px}.av-l{--s:48px}
.bar{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);overflow:hidden;min-width:60px}
.bar>i{position:relative;display:block;height:100%;width:var(--w,0);border-radius:inherit;background:linear-gradient(90deg,var(--gold-lo),var(--gold) 60%,var(--gold-hi));transform-origin:left;animation:grow 1.2s var(--out-expo) .2s both;box-shadow:0 0 14px -2px color-mix(in srgb,var(--gold) 70%,transparent)}
.bar>i::after{content:"";position:absolute;top:0;bottom:0;right:0;width:26px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6));border-radius:inherit;opacity:.85}
.bar.thick{height:13px}
.bar.thick::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(3,7,13,.55) calc(10% - 1px) 10%);pointer-events:none}

/* ---------- skeletons + tooltip ---------- */
.sk{position:relative;overflow:hidden;border-radius:8px;background:rgba(255,255,255,.05)}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);transform:translateX(-100%);animation:sweep 1.4s linear infinite}
.tip{position:fixed;left:0;top:0;z-index:1300;max-width:min(280px,calc(100vw - 24px));padding:7px 12px;border-radius:10px;pointer-events:none;opacity:0;font:600 12.5px/1.35 var(--fb);letter-spacing:.01em;color:var(--txt);
  background:rgba(12,22,38,.94);border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line2));box-shadow:0 14px 34px -10px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transform:translate3d(var(--tx,0px),calc(var(--ty,0px) + 4px),0) scale(.96);transition:opacity .16s,transform .2s var(--ease)}
.tip.on{opacity:1;transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(1)}
/* ================= grids ================= */
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:26px;align-items:start}
.grid-ev{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:26px;align-items:start}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px}

/* ================= command center hero ================= */
.hero{position:relative;overflow:hidden;display:flex;gap:30px;justify-content:space-between;align-items:stretch;flex-wrap:wrap;padding:40px 42px;min-height:350px;border-color:color-mix(in srgb,var(--gold) 26%,var(--line));
  background:radial-gradient(900px 430px at 90% -10%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 65%),
             linear-gradient(112deg,rgba(3,7,14,.985) 0%,rgba(4,9,18,.955) 52%,rgba(5,11,22,.925) 100%),var(--bgimg,none) center 30%/cover}
.hero .wm{position:absolute;right:-3%;top:50%;width:min(100%,1010px);transform:translateY(-50%);opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.hero::after{z-index:0}
.hero-t{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;position:relative;z-index:2}
.hero h1{font-size:clamp(31px,4.7vw,58px);line-height:1.02;margin-top:10px;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.hero .lede{font-size:16.5px;color:var(--txt2);opacity:.82;max-width:52ch}
.hero .acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}
.nextup{position:relative;z-index:2;flex:0 1 340px;display:flex;flex-direction:column;gap:8px;justify-content:center;padding:22px 26px;border-radius:22px;
  background:linear-gradient(180deg,rgba(9,17,31,.8),rgba(5,10,19,.86));border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line2));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 34px 64px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08),0 0 60px -26px color-mix(in srgb,var(--gold) 60%,transparent)}
.nu-lab{display:flex;align-items:center;gap:10px;font:700 12px var(--fl);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.nu-lab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);animation:ping-gold 2.2s infinite}
.nu-name{font:600 19px/1.2 var(--fd);letter-spacing:.045em;text-transform:uppercase}
.nu-time{font:700 clamp(42px,5.2vw,58px)/1.02 var(--fn);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.025em;color:#fff3cf;text-shadow:0 0 36px color-mix(in srgb,var(--gold) 55%,transparent),0 2px 0 rgba(0,0,0,.3)}
.nu-sub{font-size:13px;color:var(--mut)}
.nu-bar{margin-top:6px}

/* roll digits (the countdown) */
.rc{position:relative;display:inline-block}
.rc.flip{animation:roll-in .45s var(--out-expo) both}
.rc.flip::before{content:attr(data-o);position:absolute;left:0;top:0;animation:roll-out .45s var(--ease) both;pointer-events:none}

/* ================= kpis ================= */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:18px}
.kpi{--kc:var(--gold);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab lab" "val ico" "sub ico";column-gap:14px;align-items:center;align-content:start;padding:20px 22px 22px;overflow:hidden;
  background:linear-gradient(90deg,var(--kc),transparent 72%) left bottom/100% 2px no-repeat,
             radial-gradient(240px 130px at 100% 0%,color-mix(in srgb,var(--kc) 13%,transparent),transparent 72%),
             linear-gradient(180deg,rgba(22,38,63,.72),rgba(10,19,34,.82))}
.kpi .ico{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--kc);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--kc) 24%,transparent),color-mix(in srgb,var(--kc) 5%,transparent))}
.kpi .ico::before{--p:var(--pv,0);content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--kc) calc(var(--p)*1%),color-mix(in srgb,var(--kc) 17%,transparent) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));animation:ring-in 1.8s var(--out-expo) .3s both}
.kpi .ico .i{width:23px;height:23px;transition:transform .5s var(--spring)}
.kpi:hover .ico .i{transform:scale(1.18) rotate(-6deg)}
.kpi>div:not(.ico){display:contents}
.kpi .lab{display:block;grid-area:lab;margin-bottom:5px}
.kpi .val{grid-area:val}
.kpi .sub{grid-area:sub;align-self:start}
.kpi .ico{grid-area:ico}
.kpi .val{font:700 clamp(38px,3.6vw,48px)/1 var(--fn);font-variant-numeric:lining-nums tabular-nums;color:var(--txt);letter-spacing:.01em;margin-top:3px}
.kpi .val small{font:600 17px var(--fb);color:var(--faint);margin-left:6px}
.kpi .sub{font-size:12.5px;color:var(--faint);margin-top:2px}

/* ================= campaign cards ================= */
.camp{--ev:var(--gold);display:flex;flex-direction:column;gap:16px;padding:24px 24px 20px;overflow:hidden;
  background:linear-gradient(90deg,var(--ev),color-mix(in srgb,var(--ev) 0%,transparent) 82%) top/100% 3px no-repeat,
             radial-gradient(280px 170px at 0% 0%,color-mix(in srgb,var(--ev) 15%,transparent),transparent 72%),
             linear-gradient(180deg,rgba(22,38,63,.72),rgba(10,19,34,.82))}
.camp-top{display:flex;flex-direction:column;gap:10px}
.camp-name{font:600 20px/1.15 var(--fd);letter-spacing:.045em;text-transform:uppercase;overflow-wrap:anywhere}
.camp-name a{transition:color .25s}
.camp-name a:hover{color:var(--gold-hi)}
.camp-name a::after{content:"";position:absolute;inset:0;z-index:1}
.camp-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto;position:relative;z-index:2}
.camp-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--mut)}
.camp-meta b{font:700 32px/1 var(--fn);color:var(--txt);font-variant-numeric:lining-nums tabular-nums}
.camp-meta .push{margin-left:auto;font:700 13px var(--fl);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.mosaic{display:grid;grid-template-columns:repeat(auto-fill,16px);gap:5px;align-content:start;min-height:21px}
.mosaic .t{width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.04);border:1px dashed rgba(150,180,215,.26);transition:transform .3s var(--spring),box-shadow .3s}
.mosaic .t.on{background:linear-gradient(145deg,color-mix(in srgb,var(--c) 100%,#fff 20%),var(--c));border:0;box-shadow:0 0 12px -2px var(--c),inset 0 1px 0 rgba(255,255,255,.4)}
.mosaic .t:hover{transform:scale(1.4);position:relative;z-index:2}

/* ================= a campaign ================= */
.ev-head{--ev:var(--gold);position:relative;overflow:hidden;padding:32px 34px;
  background:linear-gradient(180deg,var(--ev),transparent 92%) left/5px 100% no-repeat,
             radial-gradient(720px 320px at 100% 0%,color-mix(in srgb,var(--ev) 18%,transparent),transparent 70%),
             linear-gradient(100deg,rgba(4,8,16,.97),rgba(7,14,26,.8)),var(--ban,none) center/cover}
.ev-head .wm{position:absolute;right:-4%;top:-8%;width:62%;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60%);mask-image:linear-gradient(90deg,transparent 0,#000 60%)}
.ev-head .wm-dots{background:linear-gradient(180deg,color-mix(in srgb,var(--ev) 70%,#fff 20%),color-mix(in srgb,var(--ev) 28%,transparent))}
.ev-top{position:relative;z-index:2;display:flex;gap:22px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.ev-head .bar,.ev-head .ev-info{position:relative;z-index:2}
.ev-stats{display:flex;gap:11px;flex-wrap:wrap}
.stat{position:relative;min-width:96px;padding:13px 18px 11px;border-radius:16px;background:linear-gradient(180deg,rgba(9,17,31,.72),rgba(5,10,19,.66));border:1px solid var(--line2);text-align:center;overflow:hidden}
.stat::before{content:"";position:absolute;left:18%;right:18%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--ev,var(--gold)),transparent)}
.stat b{display:block;font:700 clamp(25px,6vw,34px)/1.1 var(--fn);font-variant-numeric:lining-nums tabular-nums}
.stat>span{font:700 11.5px var(--fl);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.stat.clock{min-width:158px}
.stat.clock b{color:var(--gold-hi);text-shadow:0 0 22px color-mix(in srgb,var(--gold) 50%,transparent)}
.ev-info{margin-top:18px;padding:14px 17px;border-radius:15px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--txt2);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:13px}
.tile{--c:transparent;position:relative;display:flex;align-items:center;gap:13px;padding:13px 15px 13px 21px;min-height:78px;border-radius:17px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));transition:transform .4s var(--ease),border-color .3s,box-shadow .4s,background .3s}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);box-shadow:0 0 16px var(--c)}
.tile.taken{border-color:color-mix(in srgb,var(--c) 42%,transparent);background:radial-gradient(200px 100px at 0% 50%,color-mix(in srgb,var(--c) 24%,transparent),transparent 78%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.tile.free{border-style:dashed;border-color:rgba(150,180,215,.27);background:transparent}
.tile.free::before{background:rgba(150,180,215,.25);box-shadow:none}
.tile:hover{transform:translateY(-3px);border-color:var(--line3);box-shadow:0 18px 32px -18px rgba(0,0,0,.85),0 0 28px -12px var(--c)}
.tile.free:hover{border-color:color-mix(in srgb,var(--gold) 50%,transparent);box-shadow:0 18px 32px -18px rgba(0,0,0,.85),0 0 28px -14px var(--gold)}
.tile-flag{font-size:25px;line-height:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;background:radial-gradient(closest-side,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--line2)}
.tile-body{min-width:0;flex:1}
.tile-country{font:600 15px/1.2 var(--fd);letter-spacing:.045em;text-transform:uppercase;overflow-wrap:anywhere}
.tile-owner{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:14px;min-width:0}
.tile-owner b{font-weight:600;min-width:0}
.tile-owner small{color:var(--faint);font-size:12.5px;min-width:0}
.tile.free .tile-owner{color:var(--faint);font:italic 500 13.5px var(--fb);letter-spacing:.02em}
.tile-act{flex:none}
.wl{display:flex;flex-direction:column}
.wl-i{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line)}
.wl-i:first-child{border-top:0}
.wl-n{font:700 22px var(--fn);color:var(--gold);opacity:.7;width:24px;text-align:center}

/* ================= accordion controls ================= */
.acc{border-top:1px solid var(--line)}
.acc:first-of-type{border-top:0}
.acc>summary{display:flex;align-items:center;gap:13px;padding:16px 6px;cursor:pointer;list-style:none;font-weight:600;color:var(--txt2);border-radius:10px;transition:color .25s}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary .i{width:19px;height:19px;color:var(--gold);transition:transform .45s var(--spring)}
.acc>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(-45deg);transition:transform .45s var(--ease),border-color .25s}
.acc[open]>summary::after{transform:rotate(45deg);border-color:var(--gold)}
.acc>summary:hover{color:var(--gold-hi)}
.acc>summary:hover .i{transform:scale(1.18) rotate(-6deg)}
.acc[open]>summary{color:var(--gold-hi)}
.acc-b{padding:6px 10px 22px;display:flex;flex-direction:column;gap:15px}
@supports selector(::details-content){
  details.acc::details-content{height:0;overflow:clip;opacity:0;transition:height .55s var(--ease),opacity .4s var(--ease),content-visibility .55s allow-discrete}
  details.acc[open]::details-content{height:auto;opacity:1}
}
@supports not selector(::details-content){.acc[open]>.acc-b{animation:rise .4s var(--ease) both}}
.quick{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.danger-zone{border:1px solid rgba(242,105,91,.32);border-radius:15px;padding:15px;background:repeating-linear-gradient(135deg,rgba(242,105,91,.07) 0 10px,rgba(242,105,91,.03) 10px 20px)}

/* ================= hall of conquerors ================= */
.tabs{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:15px;background:rgba(255,255,255,.04);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab-ind{position:absolute;left:0;top:4px;bottom:4px;width:var(--w,0px);border-radius:11px;transform:translate3d(var(--x,0px),0,0);pointer-events:none;opacity:0;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));box-shadow:0 8px 22px -8px var(--gold),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .55s var(--out-expo),width .55s var(--out-expo),opacity .3s}
.tabs.ready .tab-ind{opacity:1}
.tabs a,.tabs button{position:relative;z-index:1;padding:9px 18px;border-radius:11px;font:600 14.5px var(--fb);color:var(--mut);background:none;border:0;cursor:pointer;white-space:nowrap;transition:color .3s,background .3s}
.tabs a:hover,.tabs button:hover{color:var(--txt)}
.tabs [aria-current=true],.tabs [aria-selected=true]{color:var(--on-gold);font-weight:800;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo))}
.tabs.ready [aria-current=true],.tabs.ready [aria-selected=true]{background:none}
.tabs.ready a:hover,.tabs.ready button:hover{color:var(--txt)}
.tabs.ready [aria-current=true]:hover,.tabs.ready [aria-selected=true]:hover{color:var(--on-gold)}
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.search{position:relative;flex:1;max-width:350px;min-width:200px}
.search .i{position:absolute;left:14px;top:50%;margin-top:-9px;width:18px;height:18px;color:var(--faint);pointer-events:none;transition:color .25s}
.search:focus-within .i{color:var(--gold)}
.search input{padding-left:43px!important}

.podium{--gap:clamp(8px,2vw,26px);position:relative;display:grid;grid-template-columns:1fr 1.22fr 1fr;gap:var(--gap);align-items:end;padding:50px clamp(10px,3vw,44px) 0;overflow:hidden;min-height:400px;
  background:radial-gradient(680px 340px at 50% 0%,color-mix(in srgb,var(--gold) 17%,transparent),transparent 70%),linear-gradient(180deg,rgba(22,38,63,.62),rgba(7,13,25,.92))}
.podium .hud{display:block}
.pod{--m:#f5c542;--h:170px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.pod.p1{order:2;--m:#f7cd57;--h:178px}.pod.p2{order:1;--m:#cdd7e3;--h:130px}.pod.p3{order:3;--m:#dc8a4f;--h:98px}
.pod.p1::before{content:"";position:absolute;left:50%;bottom:0;width:150%;height:calc(100% + 60px);transform:translateX(-50%);z-index:0;pointer-events:none;
  background:linear-gradient(0deg,color-mix(in srgb,var(--m) 24%,transparent),transparent 80%);clip-path:polygon(36% 100%,64% 100%,100% 0,0 0);animation:beam 6s ease-in-out infinite}
.pod>*{position:relative;z-index:1}
.pod-av{position:relative;margin:8px 0 14px}
.pod-av .av{--s:84px;box-shadow:0 0 0 3px var(--m),0 0 0 8px color-mix(in srgb,var(--m) 20%,transparent),0 20px 40px -10px color-mix(in srgb,var(--m) 80%,transparent)}
.pod.p1 .pod-av .av{--s:108px}
.pod.p1 .pod-av::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 50%,var(--m));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));animation:spin 7s linear infinite}
.crown{position:absolute;left:50%;top:-32px;width:40px;height:40px;margin-left:-20px;color:var(--m);filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--m) 70%,transparent));animation:bob 3.6s ease-in-out infinite;z-index:2}
.pod-name{font:700 clamp(14px,2vw,20px)/1.15 var(--fb);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-rbx{font-size:12.5px;color:var(--faint);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-w{font:700 clamp(32px,4.8vw,46px)/1.05 var(--fn);color:var(--m);margin-top:7px;font-variant-numeric:lining-nums tabular-nums;text-shadow:0 0 28px color-mix(in srgb,var(--m) 55%,transparent)}
.pod-w small{font:700 12px var(--fl);letter-spacing:.2em;color:var(--mut);text-transform:uppercase;margin-left:5px;text-shadow:none}
.plinth{position:relative;overflow:hidden;width:100%;height:var(--h);margin-top:14px;border-radius:18px 18px 0 0;display:flex;justify-content:center;padding-top:16px;font:700 clamp(40px,5.8vw,66px)/1 var(--fn);color:var(--m);text-shadow:0 0 30px color-mix(in srgb,var(--m) 65%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--m) 36%,transparent),color-mix(in srgb,var(--m) 5%,transparent) 90%);border:1px solid color-mix(in srgb,var(--m) 55%,transparent);border-bottom:0;transform-origin:bottom;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 -26px 50px -26px color-mix(in srgb,var(--m) 60%,transparent)}
.plinth::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.2) 50%,transparent 64%);transform:translateX(-130%);animation:shine 6s ease-in-out 2s infinite}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:620px}
.tbl th{padding:16px 18px;text-align:left;font:700 12px var(--fl);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));white-space:nowrap;border-bottom:1px solid var(--line2)}
.tbl td{padding:13px 18px;border-top:1px solid var(--line);vertical-align:middle;transition:background .3s,box-shadow .4s var(--ease)}
.tbl tbody tr:first-child td{border-top:0}
.tbl tbody tr{transition:background .35s}
.tbl tbody tr:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 8%,transparent),transparent 80%)}
.tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 0 var(--gold)}
.tbl .rk{position:relative;isolation:isolate;font:700 24px var(--fn);width:64px;color:var(--mut);text-align:center;font-variant-numeric:lining-nums tabular-nums}
.tbl .rk.m1,.tbl .rk.m2,.tbl .rk.m3{--m:#f7cd57;color:var(--m);text-shadow:0 0 18px color-mix(in srgb,var(--m) 55%,transparent)}
.tbl .rk.m2{--m:#cdd7e3}.tbl .rk.m3{--m:#dc8a4f}
.tbl .rk.m1::before,.tbl .rk.m2::before,.tbl .rk.m3::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--m) 24%,transparent),transparent);border:1px solid color-mix(in srgb,var(--m) 55%,transparent)}
.tbl .w{font:700 28px var(--fn);font-variant-numeric:lining-nums tabular-nums}
.tbl .acts{display:flex;gap:6px;justify-content:flex-end}
.tier{--cc:var(--mut);display:inline-flex;align-items:center;gap:8px;font:700 12.5px var(--fl);letter-spacing:.14em;text-transform:uppercase;color:var(--cc)}
.tier::before{content:"";width:9px;height:9px;transform:rotate(45deg);background:var(--cc);box-shadow:0 0 12px var(--cc)}
.rate{display:flex;align-items:center;gap:10px;min-width:130px}.rate .bar{flex:1}.rate span{font-variant-numeric:lining-nums tabular-nums;color:var(--txt2);font-size:14px;min-width:38px;text-align:right}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:10px}
.themes button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:13px;border:1px solid var(--line2);background:rgba(255,255,255,.03);cursor:pointer;font-weight:600;transition:transform .3s var(--ease),border-color .25s,background .25s,box-shadow .3s}
.themes button:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.8)}
.themes button[aria-pressed=true]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 11%,transparent);box-shadow:0 0 22px -8px var(--gold)}
.themes i{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 4px 12px -4px var(--a)}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.ptabs button{padding:9px 15px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mut);font-weight:600;cursor:pointer;transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease)}
.ptabs button:hover{color:var(--txt);border-color:var(--line3);transform:translateY(-1px)}
.ptabs button[aria-selected=true]{background:color-mix(in srgb,var(--gold) 15%,transparent);border-color:color-mix(in srgb,var(--gold) 60%,transparent);color:var(--gold-hi);box-shadow:0 0 22px -10px var(--gold)}
html:not(.js) .ptabs{display:none}
.panel+.panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
html.js .panel[hidden]{display:none}
html.js .panel+.panel{margin-top:0;padding-top:0;border-top:0}
html.js .panel:not([hidden]){animation:rise .5s var(--ease) both}
.podium.n1{grid-template-columns:minmax(0,300px);justify-content:center}
.podium.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:660px;margin-inline:auto}
.podium.n2 .pod.p1{order:1}.podium.n2 .pod.p2{order:2}

/* ================= mini lists + war log ================= */
.mini{display:flex;flex-direction:column;gap:2px}
.mini-i{display:flex;align-items:center;gap:13px;padding:10px 12px;margin:0 -12px;border-radius:14px;transition:background .3s,transform .4s var(--ease)}
a.mini-i:hover{background:rgba(255,255,255,.05);transform:translateX(4px)}
.mini-i .rk{font:700 22px var(--fn);width:24px;color:var(--faint);text-align:center}
.mini-i .rk.m1{color:#f7cd57;text-shadow:0 0 16px rgba(247,205,87,.55)}.mini-i .rk.m2{color:#cdd7e3}.mini-i .rk.m3{color:#dc8a4f}
.mini-i:has(.rk.m1) .av{box-shadow:0 0 0 2px #f7cd57,0 0 18px -2px rgba(247,205,87,.6)}
.mini-i:has(.rk.m2) .av{box-shadow:0 0 0 2px #cdd7e3}
.mini-i:has(.rk.m3) .av{box-shadow:0 0 0 2px #dc8a4f}
.mini-i .nm{font-weight:600;line-height:1.2}.mini-i .sb{font-size:12.5px;color:var(--faint)}
.mini-i .vl{margin-left:auto;font:700 28px var(--fn);font-variant-numeric:lining-nums tabular-nums}
.log-day{position:sticky;top:74px;z-index:4;display:inline-flex;align-items:center;gap:10px;margin:20px 0 6px;padding:6px 15px;border-radius:99px;font:700 12px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  background:rgba(9,17,31,.9);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.log-day:first-child{margin-top:0}
.log-i{position:relative;display:flex;gap:15px;padding:11px 10px;margin:0 -10px;border-radius:15px;align-items:flex-start;transition:background .3s}
.log-i:hover{background:rgba(255,255,255,.035)}
.log-i::before{content:"";position:absolute;left:27px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--line2),var(--line2));z-index:0}
.log-day+.log-i::before{top:26px}
.log-i:last-child::before,.log-i:has(+ .log-day)::before{bottom:auto;height:26px}
.log-day+.log-i:last-child::before,.log-day+.log-i:has(+ .log-day)::before{display:none}
.log-ico{position:relative;z-index:1;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--lc,var(--gold));
  background:linear-gradient(180deg,color-mix(in srgb,var(--lc,var(--gold)) 20%,#0d1a2d),color-mix(in srgb,var(--lc,var(--gold)) 8%,#0a1424));box-shadow:0 0 0 1px color-mix(in srgb,var(--lc,var(--gold)) 32%,transparent),0 0 22px -8px var(--lc,var(--gold))}
.log-ico .i{width:17px;height:17px}
.log-txt{min-width:0;overflow-wrap:anywhere;line-height:1.42;padding-top:1px}
.log-txt b{font-weight:700}
.log-time{font-size:12.5px;color:var(--faint);margin-top:2px}

/* ================= sign in, public board, errors ================= */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.auth-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:clamp(28px,5vw,76px);overflow:hidden;border-right:1px solid var(--line);
  background:radial-gradient(800px 520px at 15% 0%,color-mix(in srgb,var(--gold) 13%,transparent),transparent 65%),linear-gradient(180deg,rgba(4,8,16,.62),rgba(4,8,16,.985) 74%),var(--bgimg,none) center/cover}
.auth-hero .wm{position:absolute;left:-6%;top:4%;width:114%;z-index:-1}
.auth-hero h1{font-size:clamp(38px,5.6vw,72px);line-height:1}
.auth-hero .lede{font-size:17.5px;color:var(--txt2)}
.auth-logo{width:84px;height:84px;border-radius:25px;border:2px solid var(--gold);box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 10%,transparent),0 22px 48px -12px color-mix(in srgb,var(--gold) 55%,transparent)}
.auth-points{display:flex;flex-direction:column;gap:12px;margin-top:10px;color:var(--txt2);font-size:15.5px}
.auth-points div{display:flex;gap:13px;align-items:center}
.auth-points .i{color:var(--gold);width:34px;height:34px;padding:8px;border-radius:11px;background:color-mix(in srgb,var(--gold) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 28%,transparent)}
.auth-side{position:relative;display:grid;place-items:center;padding:28px clamp(16px,4vw,56px)}
.auth-card{width:100%;max-width:440px;padding:36px 34px 30px;border-color:color-mix(in srgb,var(--gold) 24%,var(--line));box-shadow:var(--shadow),0 40px 90px -30px rgba(0,0,0,.9),0 0 80px -40px var(--gold)}
.auth-card h2{font:600 26px var(--fd);letter-spacing:.045em;text-transform:uppercase;color:var(--txt);margin-bottom:6px}
.auth-card .brand-s{display:none}
.pub{max-width:1000px;margin:0 auto;padding:clamp(20px,4vw,52px) clamp(16px,3vw,32px) 64px}
.pub-head{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.pub-head img{width:74px;height:74px;border-radius:22px;border:2px solid var(--gold);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 10%,transparent),0 16px 36px -10px color-mix(in srgb,var(--gold) 55%,transparent)}
.pub-foot{margin-top:30px;display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;color:var(--faint);font-size:13.5px;align-items:center}
.err-page{position:relative;min-height:100vh;display:grid;place-items:center;padding:24px}
.err-page .card{max-width:500px;text-align:center;padding:40px 32px;display:flex;flex-direction:column;gap:14px;align-items:center;border-color:color-mix(in srgb,var(--gold) 22%,var(--line))}
.err-code{font:700 96px/1 var(--fn);background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--gold) 45%,transparent))}
.err-page .btn{margin-top:6px}
.who-c{display:flex;align-items:center;gap:12px;min-width:0}
.who-c b{display:block;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.who-c .sub{display:block;font-size:12.5px;color:var(--faint)}
.nm-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.tbl td .chip{vertical-align:middle}

/* ---- extras ---- */
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 70%)}
.tile.lit::after{opacity:1}
.pub-map{position:absolute;right:-3%;top:-70px;width:78%;opacity:.4;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.hero-map{}
.boot-map{}

/* ---- my account: the profile card is a centred dossier instead of a half-empty box ---- */
.card.acct-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:36px}
.acct-card .who-c{flex-direction:column;gap:18px}
.acct-card .av{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent),0 0 0 5px color-mix(in srgb,var(--gold) 50%,transparent),0 20px 44px -12px color-mix(in srgb,var(--gold) 50%,transparent)}
.acct-card p{max-width:36ch}
/* ================================================================================================
   WORLD MAP . the 3D map page (canvas + glass panels floating on top of it)
   ================================================================================================ */
body.page-map .shell,body.page-map .col,body.page-map .rail{height:100vh;height:100dvh;min-height:0}
.page-map .foot{display:none}
.page-map .main-map{padding:0;max-width:none;margin:0;width:100%;position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg)}

.mx{--mxp:linear-gradient(180deg,rgba(18,33,57,.84),rgba(7,14,26,.9));--lt-w:132px;position:absolute;inset:0;overflow:hidden;background:var(--bg);isolation:isolate}
.mx::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%,transparent 58%,rgba(2,5,10,.6)),linear-gradient(180deg,rgba(4,8,15,.62),transparent 96px),linear-gradient(0deg,rgba(4,8,15,.5),transparent 80px)}
.mx-stage{position:absolute;inset:0;z-index:0}
/* game look: the sea is bright, so the dark frame around the picture is lighter and the panels sit on a blue map */
.mx.mx-game{background:#163ea7}
.mx.mx-game::before{background:radial-gradient(125% 100% at 50% 44%,transparent 62%,rgba(3,12,40,.42)),linear-gradient(180deg,rgba(3,10,34,.5),transparent 84px),linear-gradient(0deg,rgba(3,10,34,.4),transparent 70px)}
.mx-leg i.mx-pin{border-radius:50%;background:#f6e2b0;box-shadow:0 0 0 2px rgba(246,226,176,.28),0 0 8px #f0be4d}
.mx-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.mx-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* labels drawn over the 3D scene */
.mx-l{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;transition:opacity .18s}
.mx-n{font:600 11px/1 var(--fl);letter-spacing:.15em;text-transform:uppercase;color:rgba(224,233,246,.72);text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.95)}
.mx-n.mx-f{font:600 15px/1 var(--fd);letter-spacing:.1em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 20px rgba(240,190,77,.4)}
.mx-p{display:flex;align-items:center;gap:7px;height:26px;padding:0 12px 0 9px;border-radius:99px;background:rgba(6,12,22,.88);border:1px solid var(--pc,var(--gold));
  box-shadow:0 8px 20px -8px rgba(0,0,0,.95),0 0 16px -5px var(--pc,var(--gold));font:700 13px/1 var(--fb);letter-spacing:.01em;color:var(--txt);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.mx-p .mx-d{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 9px var(--pc,var(--gold))}
.mx-p b{font-weight:700}
.mx-p span{font:600 11px/1 var(--fl);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.mx-p.mx-c span{display:none}

/* glass panels */
.mx-bar,.mx-left,.mx-ctl,.mx-card,.mx-lt,.mx-tip{z-index:3}
.mx-lt,.mx-seg,.mx-sel,.mx-chip,.mx-list,.mx-leg,.mx-ctl,.mx-card,.mx-tip{background:var(--mxp);border:1px solid var(--line2);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px) saturate(1.45);backdrop-filter:blur(16px) saturate(1.45)}

/* ---------- top bar ---------- */
.mx-bar{position:absolute;top:12px;left:calc(12px + var(--lt-w) + 8px);right:12px;height:40px;display:flex;align-items:center;gap:8px;pointer-events:none}
.mx-bar>*{pointer-events:auto;flex:none}
.mx-seg{display:inline-flex;height:40px;padding:3px;gap:2px;border-radius:14px}
.mx-seg button{height:32px;padding:0 15px;border:0;border-radius:11px;background:none;color:var(--mut);font:700 12.5px var(--fl);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .25s,background .25s,box-shadow .25s}
.mx-seg button:hover{color:var(--txt)}
.mx-seg button[aria-checked=true]{color:var(--gold-hi);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 24%,transparent),color-mix(in srgb,var(--gold) 7%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent),0 0 20px -8px var(--gold)}
.mx-sel{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 3px 0 13px;border-radius:14px}
.mx-sel>span{font:700 11px var(--fl);letter-spacing:.17em;text-transform:uppercase;color:var(--faint)}
.mx .mx-sel select{width:auto;min-height:34px;height:34px;padding:0 32px 0 8px;border:0;border-radius:11px;background-color:transparent;box-shadow:none;font-size:14px;font-weight:600;max-width:210px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a85a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center}
.mx .mx-sel select:hover{background-color:rgba(255,255,255,.05)}
.mx .mx-sel select:focus{background-color:rgba(255,255,255,.06);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 40%,transparent)}
.mx-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:14px;color:var(--mut);font:700 12.5px var(--fl);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .25s,border-color .25s,box-shadow .25s}
.mx-chip .i{width:16px;height:16px}
.mx-chip:hover{color:var(--txt);border-color:var(--line3)}
.mx-chip[aria-pressed=true]{color:var(--gold-hi);border-color:color-mix(in srgb,var(--gold) 36%,transparent);box-shadow:var(--shadow),0 0 22px -9px var(--gold)}
.mx-bar .mx-post{margin-left:auto;height:40px;border-radius:14px;padding:0 17px;background:var(--mxp);-webkit-backdrop-filter:blur(16px) saturate(1.45);backdrop-filter:blur(16px) saturate(1.45);box-shadow:var(--shadow)}
.mx-lt{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:var(--lt-w);height:40px;padding:0;border-radius:14px;color:var(--txt2);font:700 12.5px var(--fl);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .25s,border-color .25s}
.mx-lt:hover,.mx-lt[aria-expanded=true]{color:var(--gold-hi);border-color:color-mix(in srgb,var(--gold) 36%,transparent)}
.mx-lt .i{width:17px;height:17px}

/* ---------- country list ---------- */
.mx-left{position:absolute;left:12px;top:62px;bottom:12px;width:300px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;pointer-events:none}
.mx-left>*{pointer-events:auto}
.mx-list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:var(--r3);overflow:hidden;
  transition:opacity .3s var(--ease),transform .45s var(--out-expo),display .45s allow-discrete}
.mx-list.shut{display:none;opacity:0;transform:translateX(-18px)}
@starting-style{.mx-list{opacity:0;transform:translateX(-18px)}}
.mx-lh{padding:12px 12px 8px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.mx-search{position:relative;display:flex;align-items:center}
.mx-search .i{position:absolute;left:13px;width:16px;height:16px;color:var(--faint);pointer-events:none}
.mx .mx-search input[type=search]{min-height:40px;height:40px;padding:0 12px 0 38px;border-radius:12px;font-size:14.5px}
.mx-tabs{display:flex;gap:4px}
.mx-tabs button{flex:1;height:30px;border:0;border-radius:9px;background:none;color:var(--mut);font:700 11.5px var(--fl);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .25s,background .25s;white-space:nowrap}
.mx-tabs button b{color:var(--faint);font-weight:700;margin-left:3px}
.mx-tabs button:hover{color:var(--txt)}
.mx-tabs button[aria-selected=true]{color:var(--gold-hi);background:color-mix(in srgb,var(--gold) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 24%,transparent)}
.mx-tabs button[aria-selected=true] b{color:var(--gold)}
.mx-ul{list-style:none;margin:0;padding:6px;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
.mx-li{position:relative;display:flex;align-items:center;gap:11px;width:100%;height:42px;padding:0 10px;border:0;border-radius:11px;background:none;color:var(--txt2);text-align:left;cursor:pointer;transition:background .2s,color .2s}
.mx-li:hover{background:rgba(255,255,255,.055);color:var(--txt)}
.mx-li[aria-current]{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 20%,transparent),color-mix(in srgb,var(--gold) 4%,transparent));color:var(--gold-hi)}
.mx-li[aria-current]::before{content:"";position:absolute;left:-6px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.mx-li img{width:22px;height:16px;flex:none;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.mx-ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:14.5px}
.mx-lo{display:inline-flex;align-items:center;gap:6px;max-width:44%;font:700 12px var(--fl);letter-spacing:.07em;color:var(--pc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.mx-lo i{width:7px;height:7px;border-radius:50%;background:var(--pc);box-shadow:0 0 8px var(--pc);flex:none}
.mx-lf{font:600 11px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);flex:none}
.mx-none{padding:26px 12px;text-align:center;color:var(--mut);font-size:14px}
.mx-off{padding:10px 14px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut);display:flex;flex-direction:column;gap:3px}
.mx-off b{font:700 11px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--warn)}

/* ---------- legend ---------- */
.mx-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 14px;border-radius:14px;font:600 11.5px var(--fl);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.mx-leg>span{display:inline-flex;align-items:center;gap:7px}
.mx-leg i{width:11px;height:11px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.mx-grad{display:block!important;width:100%;height:8px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mx-gl{display:flex!important;width:100%;justify-content:space-between;font-size:10.5px;color:var(--faint)}
.mx-gl em{font-style:normal}

/* ---------- zoom controls ---------- */
.mx-ctl{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;border-radius:16px;padding:4px;gap:2px;transition:right .5s var(--out-expo)}
.mx.mx-open .mx-ctl{right:calc(12px + 400px + 12px)}
.mx-ctl button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:var(--txt2);cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.mx-ctl button:hover{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold-hi)}
.mx-ctl button:active{transform:scale(.9)}
.mx-ctl .i{width:18px;height:18px}

/* ---------- hover tooltip ---------- */
.mx-tip{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;padding:7px 13px 7px 9px;border-radius:12px;pointer-events:none;white-space:nowrap;will-change:transform;transform:translate3d(-999px,0,0)}
.mx-tip img{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.mx-tip b{display:block;font:700 13.5px/1.15 var(--fb)}
.mx-tip small{display:block;font:700 10.5px var(--fl);letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.mx-tip .mx-tc{display:flex;align-items:center;gap:5px;margin-top:3px;color:var(--txt2);text-transform:none;letter-spacing:.02em;font:600 12px var(--fb)}
.mx-tip .mx-tc .i{width:12px;height:12px;color:var(--gold)}

/* ---------- details card ---------- */
.mx-card{position:absolute;right:12px;top:62px;bottom:12px;width:400px;display:flex;flex-direction:column;border-radius:var(--r3);overflow:hidden;outline:0;
  transform:translateX(calc(100% + 28px));opacity:0;visibility:hidden;transition:transform .55s var(--out-expo),opacity .3s var(--ease),visibility 0s .55s}
.mx-card.open{transform:none;opacity:1;visibility:visible;transition:transform .55s var(--out-expo),opacity .3s var(--ease),visibility 0s}
.mx-ch{position:relative;display:flex;align-items:center;gap:14px;padding:16px 14px 15px 16px;border-bottom:1px solid var(--line);overflow:hidden;flex:none}
.mx-ch::before{content:"";position:absolute;inset:-20px;background:var(--flg) center/cover no-repeat;opacity:.3;filter:blur(20px) saturate(1.5);-webkit-mask-image:linear-gradient(180deg,#000,transparent 95%);mask-image:linear-gradient(180deg,#000,transparent 95%)}
.mx-ch::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--gold),transparent 70%);box-shadow:0 0 12px var(--gold)}
.mx-ch>*{position:relative}
.mx-ch .icon-btn.sm{width:36px;height:36px;border-radius:11px}
.mx-flag{width:54px;height:39px;border-radius:7px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 10px 22px -8px rgba(0,0,0,.9)}
.mx-ct{flex:1;min-width:0}
.mx-kick{font:700 11.5px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.mx-name{font:600 clamp(18px,2.1vw,22px)/1.1 var(--fd);letter-spacing:.05em;text-transform:uppercase;color:var(--txt);margin-top:4px;text-wrap:balance;overflow-wrap:anywhere}
.mx-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 6px;display:flex;flex-direction:column;gap:18px}
.mx-body>*{flex:none}
.mx-cf{flex:none;display:flex;align-items:center;gap:9px;padding:12px 16px;border-top:1px solid var(--line);background:rgba(2,5,10,.35);font-size:12.5px}
.mx-cf>.faint{flex:1;min-width:0;line-height:1.3}
.mx-cf .sp{flex:1}
.mx-cf .btn{flex:none}

.mx-owner{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:15px;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 17%,transparent),color-mix(in srgb,var(--pc) 5%,transparent));border:1px solid color-mix(in srgb,var(--pc) 40%,transparent);box-shadow:0 0 28px -12px var(--pc)}
.mx-av{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;font:700 16px var(--fl);letter-spacing:.06em;color:#06101a;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 62%,#fff),var(--pc))}
.mx-owner>div{flex:1;min-width:0}
.mx-owner b{display:block;font-size:16px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-owner small{display:block;color:var(--mut);font-size:12.5px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-free{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:15px;border:1px dashed var(--line3);background:rgba(255,255,255,.025)}
.mx-free>i{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 0 rgba(95,212,126,.6);animation:ping 2.2s infinite}
.mx-free b{display:block;font-size:15px}
.mx-free small{display:block;color:var(--mut);font-size:12.5px;line-height:1.35}
.mx-rel{width:100%}
.mx-assign{display:grid;gap:10px;padding:14px;border-radius:15px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.mx-assign label{display:flex;flex-direction:column;gap:5px;min-width:0}
.mx-assign label>span,.mx-in>span{font:700 11px var(--fl);letter-spacing:.17em;text-transform:uppercase;color:var(--mut)}
.mx-assign .btn{width:100%;height:40px}

.mx-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-radius:15px;overflow:hidden;background:var(--line);border:1px solid var(--line)}
.mx-fc{background:rgba(9,17,31,.82);padding:10px 13px;min-width:0}
.mx-fc span{display:block;font:700 10.5px var(--fl);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.mx-fc b{display:block;font-size:15px;font-weight:600;margin-top:2px;overflow-wrap:anywhere;line-height:1.25}
.mx-fc em{font-style:normal;font-weight:500;font-size:13px}
.mx-sec{display:flex;flex-direction:column;gap:11px}
.mx-sec h3{display:flex;align-items:center;gap:10px;font:700 11.5px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.mx-sec h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.mx-sec h3 small{font:600 10.5px var(--fl);letter-spacing:.14em;color:var(--faint)}

/* radar + bars */
.mx-pw{display:grid;gap:12px;justify-items:center}
.mx-radar{width:min(100%,212px);height:auto;overflow:visible}
.mx-rg{fill:none;stroke:var(--line2);stroke-width:1}
.mx-rg:nth-child(4){stroke:var(--line3)}
.mx-ax{stroke:var(--line);stroke-width:1}
.mx-rv{fill:color-mix(in srgb,var(--gold) 24%,transparent);stroke:var(--gold);stroke-width:1.8;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(240,190,77,.55));transition:all .2s}
.mx-dt{fill:var(--gold-hi);filter:drop-shadow(0 0 4px var(--gold))}
.mx-al{fill:var(--mut);font:700 11px var(--fl);letter-spacing:.16em}
.mx-bars{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:11px 18px}
.mx-br{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:5px 8px}
.mx-br span{font:600 11.5px var(--fl);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.mx-br b{font:700 16px/1 var(--fl);letter-spacing:.03em;color:var(--txt)}
.mx-br i{grid-column:1/-1;position:relative;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.mx-br i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));box-shadow:0 0 10px var(--gold);transform-origin:left;animation:mxgrow .9s var(--out-expo) both}
@keyframes mxgrow{from{transform:scaleX(0)}}
.mx-forces{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mx-forces>div{padding:10px 8px 9px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid var(--line);text-align:center;min-width:0}
.mx-forces span{display:block;font:700 10px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mx-forces b{display:block;margin-top:3px;font:700 23px/1 var(--fl);letter-spacing:.02em;color:var(--txt);font-variant-numeric:lining-nums tabular-nums}
.mx-forces .nuke{border-color:rgba(242,105,91,.36);background:linear-gradient(180deg,rgba(242,105,91,.14),rgba(242,105,91,.04))}
.mx-forces .nuke b{color:#ffb4ab}
.mx-cities{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.mx-cities li{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.045);border:1px solid var(--line);font:600 12.5px var(--fb);color:var(--txt2);min-width:0;max-width:100%;overflow-wrap:anywhere}
.mx-cities li.cap{color:var(--gold-hi);border-color:color-mix(in srgb,var(--gold) 38%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.mx-cities li .i{width:12px;height:12px}
.mx-cities li.more{background:none;border-style:dashed;color:var(--faint)}
.mx-cr{margin:2px 0 0;font:500 11px/1.45 var(--fb);color:var(--faint)}
.mx-cr a,.mx-credit a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:2px}
.mx-cr a:hover,.mx-credit a:hover{color:var(--txt2)}
.mx-left>.mx-credit{pointer-events:none}
.mx-credit a{pointer-events:auto}
.mx-credit{padding:0 4px 2px;font:500 10.5px/1.4 var(--fb);color:rgba(214,226,243,.6);text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.9)}
.mx:not(.mx-game) .mx-credit{display:none}
.mx-note{padding:2px 0 2px 14px;border-left:2px solid var(--gold);color:var(--txt2);font-size:14px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}

/* ---------- stats editor ---------- */
.mx-edit{flex:1;min-height:0;display:flex;flex-direction:column}
.mx-hint{font-size:12.5px;line-height:1.45;color:var(--mut);padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--info) 9%,transparent);border:1px solid color-mix(in srgb,var(--info) 22%,transparent)}
.mx-g2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mx-in{display:flex;flex-direction:column;gap:5px;min-width:0}
.mx .mx-in input[name],.mx .mx-in select[name]{min-height:38px;height:38px;padding:0 11px;border-radius:10px;font-size:14.5px}
.mx .mx-in select[name]{padding-right:34px}
.mx .mx-in textarea[name]{min-height:76px;height:auto;padding:9px 11px;border-radius:10px;font-size:14.5px}
.mx-pw-e{gap:8px}
.mx-pw-e .mx-radar{width:min(100%,196px)}
.mx-rsl{width:100%;display:flex;flex-direction:column;gap:2px}
.mx-rs{display:grid;grid-template-columns:92px 1fr 32px;align-items:center;gap:10px;min-height:32px}
.mx-rs>span{font:700 11.5px var(--fl);letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.mx-rs output{font:700 16px var(--fl);text-align:right;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.mx .mx-rs input[type=range][name]{--v:50%;-webkit-appearance:none;appearance:none;width:100%;min-height:0;height:24px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
.mx .mx-rs input[type=range][name]:focus{background:transparent;box-shadow:none}
.mx-rs input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--gold-lo),var(--gold) var(--v),rgba(255,255,255,.11) var(--v))}
.mx-rs input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.11)}
.mx-rs input[type=range]::-moz-range-progress{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--gold-lo),var(--gold))}
.mx-rs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6.5px;border-radius:50%;border:0;background:radial-gradient(circle at 34% 30%,var(--gold-hi),var(--gold) 58%,var(--gold-lo));box-shadow:0 0 0 4px rgba(240,190,77,.16),0 3px 9px rgba(0,0,0,.7);transition:box-shadow .2s,transform .2s var(--spring)}
.mx-rs input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:0;background:radial-gradient(circle at 34% 30%,var(--gold-hi),var(--gold) 58%,var(--gold-lo));box-shadow:0 0 0 4px rgba(240,190,77,.16),0 3px 9px rgba(0,0,0,.7)}
.mx-rs input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(240,190,77,.22),0 3px 9px rgba(0,0,0,.7)}
.mx-rs input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}

/* ---------- post to Discord ---------- */
dialog.dlg.mx-dlg{max-width:560px}
.mx-prev{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:13px;border:1px solid var(--line2);background:#06101c;box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
.mx-dlg .mx-in input[name],.mx-dlg .mx-in select[name]{min-height:43px;height:43px;padding:0 14px}
.mx-dlg .mx-in select[name]{padding-right:40px}

/* ---------- fallbacks ---------- */
.mx-err,.mx-nojs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));z-index:4;text-align:center}
.mx-err b,.mx-nojs b{display:block;font:600 18px var(--fd);letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.mx.mx-flat .mx-ctl,.mx.mx-flat .mx-bar .mx-chip{display:none}
.mx.mx-flat .mx-err{top:96px;transform:translateX(-50%)}
.mx.mx-noev .mx-tabs button[data-f=taken],.mx.mx-noev .mx-tabs button[data-f=free]{display:none}

@media(prefers-reduced-motion:reduce){
  .mx *,.mx *::before,.mx *::after{animation:none!important}
  .mx-card,.mx-list,.mx-ctl,.mx-seg button{transition-duration:.01ms!important}
}

/* ---------- smaller screens ---------- */
/* the top bar sits right of the site menu (268px) and the Countries button, so it has about (screen width - 432px) to live in: it needs 1300px when everything
   has its caption; so drop the buttons' words first (they keep a tooltip), then the small captions, then tighten the layer buttons, and below 1200px let it slide sideways */
@media(max-width:1759px){
  .mx-chip>span{display:none}
  .mx-chip{width:40px;padding:0;justify-content:center}
}
@media(max-width:1560px){
  .mx-bar .mx-post>span{display:none}
  .mx-bar .mx-post{width:40px;padding:0}
}
@media(max-width:1480px){
  .mx-evsel>span{display:none}
  .mx-evsel{padding-left:4px}
}
@media(max-width:1380px){
  .mx-sel>span{display:none}
  .mx-sel{padding-left:4px}
}
@media(max-width:1320px){
  .mx-seg button{padding:0 9px;font-size:11.5px;letter-spacing:.1em}
  .mx .mx-sel select{max-width:120px}
}
@media(min-width:901px) and (max-width:1200px){    /* the site menu still takes 268px here, so the bar can slide sideways when it doesn't all fit */
  .mx-bar{right:0;padding-right:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;pointer-events:auto}
  .mx-bar::-webkit-scrollbar{display:none}
}
@media(max-width:820px){
  .mx-credit{display:none}
  .page-map .tabbar{display:none}
  .page-map .main-map{padding:0}
  .mx{--lt-w:42px}
  .mx-lt>span{display:none}
  .mx-bar{right:0;padding-right:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;pointer-events:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .mx-bar::-webkit-scrollbar{display:none}
  .mx-bar .mx-post{margin-left:0}
  .mx-left{left:12px;right:12px;width:auto;top:62px}
  .mx.mx-lopen .mx-ctl{display:none}
  .mx-ctl{top:62px;bottom:auto;right:12px;transition:none}
  .mx.mx-open .mx-ctl{right:12px}
  .mx.mx-open .mx-leg{display:none}
  .mx-leg{padding:8px 12px;gap:5px 12px;font-size:10.5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:calc(100% - 64px)}
  .mx-leg::-webkit-scrollbar{display:none}
  .mx-leg>span{flex:none}
  .mx-grad,.mx-gl{min-width:200px}
  .mx.mx-lopen .mx-leg{max-width:none}
  .mx-card{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:min(56dvh,460px);border-radius:22px 22px 18px 18px;transform:translateY(calc(100% + 24px))}
  .mx-card::before{content:"";position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:3px;background:var(--line3);z-index:2}
  .mx-ch{padding-top:22px}
  .mx-body{padding:14px 14px 4px}
  .mx-name{font-size:19px}
  .mx-radar{width:min(100%,220px)}
  .mx-g2{grid-template-columns:1fr 1fr}
  dialog.dlg.mx-dlg .dlg-b{padding:22px 18px 18px}
}
@media(max-width:400px){
  .mx-seg button{padding:0 9px;font-size:11.5px;letter-spacing:.1em}
  .mx-bars{gap:10px 12px}
  .mx-forces b{font-size:20px}
  .mx-g2{gap:9px}
}
@media(max-height:560px) and (max-width:820px){
  .mx-card{max-height:calc(100dvh - 120px)}
}
/* ================================================================================================
   v4 . the public site: top bar, home page, sub-page heads, how it works, seasons, players
   ================================================================================================ */
body.pubsite{min-height:100dvh;display:flex;flex-direction:column}

/* ---------- top bar ---------- */
.pn{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;padding:10px clamp(14px,3vw,32px);padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(4,8,15,.9),rgba(4,8,15,.66));-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.pn-brand{display:flex;align-items:center;gap:11px;min-width:0;flex:none}
.pn-emblem{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--gold);overflow:hidden;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 10%,transparent)}
.pn-emblem img{width:100%;height:100%;object-fit:cover;display:block}
.pn-name{font:600 15px var(--fd);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.pn-links{display:flex;gap:2px;margin-left:12px;min-width:0}
.pn-links a{position:relative;padding:9px 13px;border-radius:10px;font:700 13px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);white-space:nowrap;transition:color .25s,background .25s}
.pn-links a:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.pn-links a[aria-current=page]{color:var(--gold-hi)}
.pn-links a[aria-current=page]::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}
.pn-end{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.pn-me .av{margin-right:-2px}
.btn.gold{border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--gold-hi);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 16%,transparent),color-mix(in srgb,var(--gold) 4%,transparent))}
.btn.lg{height:50px;padding:0 26px;font-size:16px;border-radius:15px}
.pn-more{display:none;margin-left:auto;position:relative}
.pn-more>summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);cursor:pointer;color:var(--txt2)}
.pn-more>summary::-webkit-details-marker{display:none}
.pn-more[open]>summary{color:var(--gold-hi);border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.pn-sheet{position:absolute;right:0;top:calc(100% + 10px);width:min(320px,calc(100vw - 28px));display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:18px;border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(16,30,52,.97),rgba(8,16,29,.98));box-shadow:var(--shadow-hi)}
.pn-sheet>a{padding:13px 14px;border-radius:11px;font:700 14px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--txt2)}
.pn-sheet>a:hover,.pn-sheet>a[aria-current=page]{background:rgba(255,255,255,.05);color:var(--gold-hi)}
.pn-sheet-end{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.pn-sheet-end .btn{width:100%}
@media (max-width:900px){
  .pn-links,.pn-end{display:none}
  .pn-more{display:block}
  .pn-name{max-width:56vw}
}

/* ---------- page frame ---------- */
.pv{width:min(1180px,100%);margin:0 auto;padding:clamp(16px,3vw,30px) clamp(16px,3vw,32px) 56px;display:flex;flex-direction:column;gap:clamp(22px,3.4vw,38px);flex:1;min-width:0}
.pv>*{min-width:0}
.pv-note{max-width:640px;margin:8vh auto 0;width:100%}
.pv-note h1{font-size:clamp(26px,4vw,38px)}
.pv-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,2.4vw,28px);align-items:start}
.pv-col{display:flex;flex-direction:column;min-width:0}
.pv-col .podium{margin-top:0}
.pv-sec{display:flex;flex-direction:column}
.pv>[data-live]{display:flex;flex-direction:column;gap:inherit;min-width:0}
.pv>[data-live]>*{min-width:0}
@media (max-width:900px){.pv-grid{grid-template-columns:minmax(0,1fr)}}
.mt-xs{margin-top:6px}

/* ---------- footer ---------- */
.pfoot{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(3,7,13,.7));padding:26px clamp(16px,3vw,32px) calc(26px + env(safe-area-inset-bottom,0px))}
.pfoot-in{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:1fr auto auto;gap:14px 34px;align-items:center}
.pfoot-brand{font:600 14px var(--fd);letter-spacing:.08em;text-transform:uppercase}
.pfoot-brand span{display:block;font:700 11px var(--fl);letter-spacing:.24em;color:var(--faint);margin-top:3px}
.pfoot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.pfoot-links a{font:700 12.5px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);transition:color .2s}
.pfoot-links a:hover{color:var(--gold-hi)}
.pfoot-credit{font-size:13.5px;color:var(--mut);text-align:right}
.pfoot-credit b{color:var(--gold);font-weight:700;letter-spacing:.03em}
@media (max-width:760px){.pfoot-in{grid-template-columns:1fr}.pfoot-credit{text-align:left}}

/* ---------- home hero ---------- */
.hx{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r3);border:1px solid var(--line2);padding:clamp(30px,6vw,76px) clamp(20px,4vw,54px) clamp(22px,3.4vw,36px);
  background:linear-gradient(135deg,rgba(14,26,46,.84),rgba(6,12,22,.74));box-shadow:var(--shadow-hi)}
.hx::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 12% 0%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%),radial-gradient(50% 70% at 100% 100%,rgba(88,150,240,.14),transparent 70%)}
.hx-map{position:absolute;right:-8%;top:-10%;width:92%;opacity:.5;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);mask-image:linear-gradient(90deg,transparent 0,#000 46%)}
.hx-in{max-width:680px}
.hx-title{font-size:clamp(36px,6.2vw,72px);line-height:1;margin-top:14px;letter-spacing:.035em}
.hx-sub{margin-top:16px;font-size:clamp(16px,2vw,20px);line-height:1.5;color:var(--txt2);max-width:44ch;text-shadow:0 0 18px rgba(3,7,14,.9)}
.hx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:12px;margin-top:clamp(28px,4.4vw,48px)}
.hxs{padding:15px 17px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hxs b{display:block;font:700 clamp(28px,3.6vw,40px)/1 var(--fn);color:var(--gold-hi);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.hxs span{display:block;margin-top:5px;font:700 11.5px var(--fl);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
@media (max-width:640px){.hx-map{width:150%;right:-50%;top:-4%;opacity:.38}.hx-cta .btn.lg{flex:1 1 100%}}

.notice-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 13%,transparent),color-mix(in srgb,var(--gold) 3%,transparent));color:var(--txt)}
.notice-bar .i{color:var(--gold);flex:none}
.notice-bar a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:3px}

/* ---------- next campaign banner ---------- */
.nextbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px 30px;align-items:center;padding:22px 28px;border-color:color-mix(in srgb,var(--gold) 28%,var(--line2))}
.nextbar h2.nb-name{font:600 clamp(20px,2.8vw,30px)/1.1 var(--fd);letter-spacing:.04em;text-transform:uppercase;color:var(--txt);margin-top:6px}
.nb-meta{margin-top:7px;color:var(--mut);font-size:14.5px}
.nb-meta b{color:var(--gold-hi)}
.nb-m{text-align:center}
.nb-big{font:700 clamp(32px,4.4vw,52px)/1 var(--fn);color:var(--gold-hi);letter-spacing:.03em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.nb-big.nb-live{color:var(--ok)}
.nb-sub{margin-top:6px;font:700 11.5px var(--fl);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
@media (max-width:760px){.nextbar{grid-template-columns:minmax(0,1fr);text-align:left;padding:20px}.nb-m{text-align:left}.nb-r .btn{width:100%}}

/* ---------- open campaigns (public cards) ---------- */
.pcamps{display:flex;flex-direction:column;gap:16px}
.pcamp{--ev:var(--gold);display:flex;flex-direction:column;gap:13px;padding:18px 20px 16px;border-top:2px solid var(--ev)}
.pcamp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pcamp-top h3{font-size:18px}
.pcamp-meta{display:flex;align-items:baseline;gap:8px;color:var(--mut);font-size:14px}
.pcamp-meta b{font:700 28px/1 var(--fn);color:var(--txt);font-variant-numeric:lining-nums tabular-nums}
.pc-clock{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--gold-hi);font:700 14px var(--fn);letter-spacing:.06em;white-space:nowrap}
.pcamp-free .lab{display:block;margin-bottom:8px}
.fcs{display:flex;flex-wrap:wrap;gap:6px}
.fc{padding:4px 11px;border-radius:99px;font:600 12.5px var(--fb);color:var(--txt2);background:rgba(255,255,255,.05);border:1px solid var(--line)}
.fc.more{color:var(--faint);border-style:dashed}
.pcamp-foot{display:flex;gap:8px;justify-content:flex-end;min-height:0}
.pcamp-foot:empty{display:none}

/* ---------- the next few players under the podium ---------- */
.pv-col>.mboard{margin-top:16px;padding:4px 18px}
.mb-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line)}
.mb-row:first-child{border-top:0}
.mb-rk{width:24px;text-align:center;font:700 19px var(--fn);color:var(--mut);flex:none}
.mb-n{flex:1;min-width:0}
.mb-n b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-n .sub{display:block;font-size:12.5px;color:var(--faint)}
.mb-w{font:700 24px var(--fn);color:var(--gold-hi);font-variant-numeric:lining-nums tabular-nums;flex:none}
.mb-w small{font:700 11px var(--fl);letter-spacing:.16em;color:var(--faint);margin-left:6px;text-transform:uppercase}

/* ---------- latest claims feed ---------- */
.feed{display:flex;flex-direction:column}
.feed-i{display:flex;gap:13px;align-items:flex-start;padding:11px 2px;border-top:1px solid var(--line)}
.feed-i:first-child{border-top:0}
.feed-dot{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:none;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.feed-dot.win{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.pv-feed .feed{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:28px}
.pv-feed .feed-i{border-top:1px solid var(--line)}
.plink{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.plink:hover{color:var(--gold-hi);border-bottom-color:color-mix(in srgb,var(--gold) 60%,transparent)}
.pod-name .plink{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- three steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.step{position:relative;padding:24px 22px 22px;overflow:hidden}
.step-n{position:absolute;right:16px;top:6px;font:700 76px/1 var(--fn);color:color-mix(in srgb,var(--gold) 12%,transparent);pointer-events:none}
.step-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);margin-bottom:14px}
.step-ico .i{width:22px;height:22px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14.5px;line-height:1.55}

/* ---------- world teaser ---------- */
.world-teaser{position:relative;overflow:hidden;isolation:isolate;padding:clamp(26px,4vw,48px)}
.wt-map{position:absolute;right:-6%;top:50%;width:70%;transform:translateY(-50%);opacity:.5;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.wt-in{max-width:520px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.wt-h{font:600 clamp(24px,3.4vw,38px)/1.08 var(--fd);letter-spacing:.04em;text-transform:uppercase;color:var(--txt)}

/* ---------- sub-page heads ---------- */
.ph{position:relative;overflow:hidden;isolation:isolate;padding:clamp(8px,2vw,18px) 0 clamp(14px,2vw,22px);border-bottom:1px solid var(--line)}
.ph::after{content:"";position:absolute;left:0;bottom:-1px;width:min(220px,40%);height:1px;background:linear-gradient(90deg,var(--gold),transparent);box-shadow:0 0 14px var(--gold)}
.ph-in{position:relative;z-index:1;max-width:760px}
.ph h1{font-size:clamp(30px,4.6vw,52px)}
.ph .lede{text-shadow:0 0 16px rgba(3,7,14,.95)}
.ph-map{position:absolute;right:-4%;top:-60%;width:70%;opacity:.34;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.pubsite .toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.pubsite .pub-foot{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;color:var(--faint);font-size:13.5px}

/* ---------- how it works ---------- */
.rt{color:var(--txt2);line-height:1.65;max-width:72ch}
.rt p{margin:0 0 12px}.rt ul{margin:0 0 12px;padding-left:22px}.rt li{margin:4px 0}
.rt-h{font-size:17px;margin:18px 0 8px;color:var(--gold-hi)}
.rt a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.tiers,.cmds{display:flex;flex-direction:column}
.tier-row,.cmd-row{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:11px 2px;border-top:1px solid var(--line);flex-wrap:wrap}
.tier-row:first-child,.cmd-row:first-child{border-top:0}
.cmd-row{justify-content:flex-start;align-items:baseline}
.cmd-row code{flex:none;min-width:116px;padding:3px 9px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--gold-hi);font:600 13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cmd-row span{flex:1 1 200px;font-size:14.5px}
.faqs{display:flex;flex-direction:column}
.faq{border-top:1px solid var(--line)}
.faq:first-child{border-top:0}
.faq>summary{padding:15px 4px;cursor:pointer;list-style:none;font-weight:600;color:var(--txt2);display:flex;align-items:center;gap:12px}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(-45deg);transition:transform .4s var(--ease)}
.faq[open]>summary::after{transform:rotate(45deg);border-color:var(--gold)}
.faq>summary:hover{color:var(--gold-hi)}
.faq p{padding:0 4px 16px;font-size:14.5px;line-height:1.6;max-width:70ch}

/* ---------- seasons ---------- */
.srows{display:flex;flex-direction:column;margin-top:12px}
.srow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.srow .rk{width:24px;text-align:center;font:700 16px var(--fn);color:var(--mut)}
.srow b.gt{font:700 20px var(--fn)}
.srow form.inl{display:inline-flex}
.season-now h3{font-size:24px;margin:6px 0 4px}
.fame{display:flex;flex-direction:column}
.fame-i{display:flex;align-items:center;gap:14px;padding:11px 2px;border-top:1px solid var(--line)}
.fame-i:first-child{border-top:0}
.fame-i>div{min-width:0;flex:1}
.fame-i b{display:block}
.fame-star{color:var(--gold);flex:none}
.seasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
.season{display:flex;flex-direction:column;gap:16px}
.season-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.season-top h3{font-size:24px;margin-top:6px}
.champ{display:flex;align-items:center;gap:15px;padding:14px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 11%,transparent),transparent)}
.champ>div{min-width:0}
.champ b.disp{display:block;font-size:19px;color:var(--gold-hi)}
.season-more>summary{cursor:pointer;color:var(--gold);font:700 12.5px var(--fl);letter-spacing:.16em;text-transform:uppercase;list-style:none;padding:4px 0}
.season-more>summary::-webkit-details-marker{display:none}
.season-more[open]>summary{margin-bottom:10px}

/* ---------- player page ---------- */
.pl-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,34px);align-items:center;padding:clamp(20px,3vw,32px);overflow:hidden;isolation:isolate}
.pl-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 0% 0%,color-mix(in srgb,var(--ring,var(--gold)) 16%,transparent),transparent 65%)}
.pl-av{position:relative;flex:none;border-radius:50%;padding:5px;background:conic-gradient(from 200deg,var(--ring,var(--gold)),color-mix(in srgb,var(--ring,var(--gold)) 25%,transparent),var(--ring,var(--gold)));box-shadow:0 0 0 6px color-mix(in srgb,var(--ring,var(--gold)) 10%,transparent),0 18px 40px -14px rgba(0,0,0,.8)}
.pl-av .av{border:3px solid var(--bg2)}
.pl-av .crown{position:absolute;left:50%;top:-24px;transform:translateX(-50%);color:var(--gold-hi);filter:drop-shadow(0 4px 10px rgba(240,190,77,.6))}
.pl-av .crown .i{width:30px;height:30px}
.pl-id{min-width:0}
.pl-name{font-size:clamp(28px,4.6vw,48px);line-height:1.04;word-break:break-word}
.pl-rbx{margin-top:6px;color:var(--mut);font-size:15px}
.plink-ext{display:inline-flex;align-items:center;gap:6px;color:var(--mut);transition:color .2s}
.plink-ext:hover{color:var(--gold-hi)}
.pl-chips{margin-top:13px}
.pl-bio{margin-top:12px;color:var(--txt2);font-style:italic;max-width:56ch}
.pl-prog{margin-top:18px;max-width:440px}
.tier-bar>i{background:linear-gradient(90deg,color-mix(in srgb,var(--cc,var(--gold)) 70%,#000),var(--cc,var(--gold)))}
.pl-act{display:flex;flex-direction:column;gap:9px;align-items:stretch;min-width:150px}
.pl-act .btn{width:100%}
.pl-kpis{margin-top:0}
@media (max-width:860px){
  .pl-hero{grid-template-columns:auto minmax(0,1fr)}
  .pl-act{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .pl-act .btn{width:auto;flex:1 1 150px}
}
@media (max-width:520px){
  .pl-hero{grid-template-columns:minmax(0,1fr);justify-items:start}
  .pl-av .av{--s:92px!important;width:92px!important;height:92px!important}
}
.activity{width:100%;height:auto;display:block;overflow:visible}
.activity .ab{transition:opacity .2s}
.activity .ab-ev{fill:color-mix(in srgb,var(--info) 38%,transparent)}
.activity .ab-win{fill:var(--gold)}
.activity g:hover .ab{opacity:.75}
.activity .at{fill:var(--faint);font:600 9px var(--fb);letter-spacing:.04em}
.legend{display:flex;gap:18px;margin-top:10px;font-size:13px;color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend .lg{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend .lg-win{background:var(--gold)}.legend .lg-ev{background:color-mix(in srgb,var(--info) 55%,transparent)}
.past{display:flex;flex-direction:column}
.past-i{display:flex;align-items:center;gap:16px;padding:11px 2px;border-top:1px solid var(--line)}
.past-i:first-child{border-top:0}
.past-s{font:700 13px var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);min-width:96px}
.past-i b.gt{margin-left:auto;font:700 19px var(--fn)}

/* ---------- the public world map page: a short heading, then the 3D map filling the rest of the screen ---------- */
body.pubmap .pv{width:100%;max-width:none;padding:0;gap:0}
body.pubmap .ph{padding:clamp(14px,2.2vw,24px) max(clamp(16px,3vw,32px),calc((100% - 1180px)/2 + clamp(16px,3vw,32px))) clamp(12px,1.6vw,18px);border-bottom:1px solid var(--line)}
body.pubmap .ph h1{font-size:clamp(26px,3.8vw,40px)}
body.pubmap .ph .lede{margin-top:6px;font-size:15px}
body.pubmap .ph::after{display:none}
.pw-stage{position:relative;flex:none;width:100%;height:clamp(500px,calc(100dvh - 240px),900px);background:var(--bg);isolation:isolate}
.mx-nojs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;max-width:min(420px,86%)}
@media (max-width:640px){
  body.pubmap .ph .lede{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pw-stage{height:min(76dvh,760px);min-height:440px}
}
/* ================================================================================================
   v4 . win claims, the player area, site settings, automation
   ================================================================================================ */

/* ---------- win claims (staff list and the player's own list) ---------- */
.cl-list{display:flex;flex-direction:column;gap:16px}
.cl-card{padding:16px}
.cl-main{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:clamp(14px,2.4vw,24px);align-items:start}
.cl-shot{display:block;position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#050a13;transition:border-color .25s,transform .35s var(--ease),box-shadow .35s}
.cl-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.cl-shot:hover{border-color:color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 0 28px -10px var(--gold)}
.cl-shot:hover img{transform:scale(1.04)}
.cl-shot.none{display:grid;place-items:center;color:var(--faint);font-size:13px;border-style:dashed}
.cl-b{display:flex;flex-direction:column;gap:10px;min-width:0}
.cl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cl-top>b{font-size:16px;min-width:0;overflow-wrap:anywhere}
.cl-ev{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cl-ev b{color:var(--gold-hi);font-weight:700}
.cl-note{margin:0;padding:10px 13px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--txt2);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.cl-why{padding:9px 13px;border-radius:12px;font-size:13.5px;color:var(--txt2);background:rgba(242,105,91,.08);border:1px solid rgba(242,105,91,.3)}
.cl-why b{color:var(--bad)}
.cl-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.cl-acts form.inl{display:inline-flex;gap:8px;align-items:center}
.cl-acts form.rej{flex:1 1 280px;min-width:0}
.cl-acts form.rej input{min-height:34px;height:34px;padding:5px 12px;font-size:13.5px;flex:1;min-width:0}
@media (max-width:640px){
  .cl-main{grid-template-columns:minmax(0,1fr)}
  .cl-shot{aspect-ratio:16/9}
  .cl-acts form.rej{flex-basis:100%}
}

/* the player's own list (smaller, inside a card) */
.claims{display:flex;flex-direction:column}
.cl-i{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.cl-i:first-child{border-top:0;padding-top:4px}
.cl-i .cl-shot{aspect-ratio:4/3;border-radius:11px}
.cl-i .cl-b{gap:6px}
.cl-i .cl-top>b{font-size:15px}
@media (max-width:420px){.cl-i{grid-template-columns:76px minmax(0,1fr);gap:11px}}

/* ---------- the player area ---------- */
.me-hero{grid-template-columns:auto minmax(0,1fr) auto}
.me-hero .pl-name{font-size:clamp(26px,4vw,40px)}
.me-hero .pl-act{align-self:center}
.claim-form input[type=file]{padding:9px 12px;min-height:46px;cursor:pointer;color:var(--txt2);font-size:14px}
.claim-form input[type=file]::file-selector-button{margin-right:14px;padding:7px 16px;border-radius:9px;border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);
  background:color-mix(in srgb,var(--gold) 13%,transparent);color:var(--gold-hi);font:700 12.5px var(--fl);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s}
.claim-form input[type=file]::file-selector-button:hover{background:color-mix(in srgb,var(--gold) 24%,transparent)}
.shot-prev{border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#050a13;max-width:340px}
.shot-prev img{display:block;width:100%;max-height:230px;object-fit:contain}
.shot-prev[hidden]{display:none}

/* ---------- site settings ---------- */
.switches{display:flex;flex-direction:column;gap:13px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.copybox{display:flex;align-items:center;gap:10px;margin:8px 0;padding:6px 6px 6px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(2,6,12,.6);min-width:0}
.copybox code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;color:var(--gold-hi);font:600 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;scrollbar-width:none}
.copybox code::-webkit-scrollbar{display:none}
.copybox .btn{flex:none}
.steps-l{margin:12px 0 4px;padding-left:22px;display:flex;flex-direction:column;gap:11px;color:var(--txt2);font-size:14.5px;line-height:1.55}
.steps-l li::marker{color:var(--gold);font-weight:700}
.steps-l code,.card p code{padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--gold-hi);font:600 12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}

/* ---------- automation ---------- */
.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.tpls>.empty{grid-column:1/-1}
.tpl{display:flex;flex-direction:column;gap:13px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.tpl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tpl-top h3{font-size:17px;min-width:0;overflow-wrap:anywhere}
.tpl-sched{display:flex;gap:10px;align-items:center;padding:10px 13px;border-radius:12px;color:var(--gold-hi);font-weight:600;background:color-mix(in srgb,var(--gold) 9%,transparent);border:1px solid color-mix(in srgb,var(--gold) 24%,transparent)}
.tpl-sched .i{flex:none;width:18px;height:18px}
.tpl-meta{display:flex;flex-direction:column;gap:6px;color:var(--txt2)}
.tpl-meta .lab{display:inline-block;min-width:92px;margin-right:6px}
.tpl-err{color:var(--bad)}
.tpl-err .i{width:15px;height:15px;vertical-align:-3px}
.tpl-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.tpl-acts form.inl{display:inline-flex}
.daypicks{display:flex;flex-wrap:wrap;gap:8px}
.daypick{position:relative;cursor:pointer}
.daypick input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.daypick span{display:grid;place-items:center;min-width:56px;height:42px;padding:0 13px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--mut);
  font:700 13px var(--fl);letter-spacing:.14em;text-transform:uppercase;transition:background .25s,border-color .25s,color .25s,transform .25s var(--spring)}
.daypick:hover span{border-color:var(--line3);color:var(--txt)}
.daypick input:checked+span{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));border-color:var(--gold);color:var(--on-gold);transform:translateY(-1px);box-shadow:0 8px 18px -10px var(--gold)}
.daypick input:focus-visible+span{outline:2px solid var(--gold-hi);outline-offset:2px}
.auto-b{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.auto-b>b,.auto-b .switch b{font-size:15.5px;color:var(--txt)}
.auto-b .switch{align-self:flex-start}
.auto-b p{margin:0}
.srow input,.srow select{max-width:100%}
.srow .disp{font-size:14px;color:var(--gold-hi);white-space:nowrap}
.srow .grow{min-width:0}
@media (max-width:560px){
  .srow{flex-wrap:wrap}
  .srow .grow{flex-basis:calc(100% - 140px)}
  .copybox{flex-wrap:wrap;padding:8px}
  .copybox code{flex-basis:100%}
  .copybox .btn{width:100%}
}
/* ================= dialogs ================= */
dialog.dlg{border:1px solid var(--line2);border-radius:24px;background:linear-gradient(180deg,rgba(22,40,67,.98),rgba(9,17,31,.99));color:var(--txt);padding:0;width:calc(100% - 32px);max-width:480px;
  box-shadow:0 60px 120px -24px rgba(0,0,0,.92),0 0 0 1px rgba(0,0,0,.45),0 0 90px -44px var(--gold);
  opacity:0;transform:translateY(20px) scale(.955);
  transition:opacity .32s var(--ease),transform .5s var(--ease),display .5s allow-discrete,overlay .5s allow-discrete}
dialog.dlg[open]{opacity:1;transform:none}
@starting-style{dialog.dlg[open]{opacity:0;transform:translateY(20px) scale(.955)}}
dialog.dlg::backdrop{background:rgba(2,5,10,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .4s,backdrop-filter .4s,-webkit-backdrop-filter .4s,display .5s allow-discrete,overlay .5s allow-discrete}
dialog.dlg[open]::backdrop{background:rgba(2,5,10,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@starting-style{dialog.dlg[open]::backdrop{background:rgba(2,5,10,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
.dlg-b{padding:28px 28px 24px;display:flex;flex-direction:column;gap:16px}
.dlg-b h3{font-size:21px}
.dlg-ico{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;color:var(--gold);background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 24%,transparent),color-mix(in srgb,var(--gold) 6%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 34%,transparent),0 0 30px -10px var(--gold)}
.dlg-ico .i{width:24px;height:24px}
dialog.dlg.danger .dlg-ico{color:var(--bad);background:radial-gradient(closest-side,rgba(242,105,91,.26),rgba(242,105,91,.06));box-shadow:inset 0 0 0 1px rgba(242,105,91,.4),0 0 30px -10px var(--bad)}
.dlg-acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
dialog.dlg-cmdk{max-width:620px;margin-top:12vh}
.cmd-in{display:flex;align-items:center;gap:13px;padding:0 20px;border-bottom:1px solid var(--line)}
.cmd-in .i{color:var(--gold);width:20px;height:20px}
.cmd-in input{border:0!important;background:transparent!important;box-shadow:none!important;min-height:62px!important;font-size:17.5px;padding:0!important}
.cmd-list{max-height:min(52vh,430px);overflow:auto;padding:9px}
.cmd-g{font:700 11px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--faint);padding:11px 12px 5px}
.cmd-i{position:relative;display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:12px;cursor:pointer;color:var(--txt2);transition:background .2s,color .2s,transform .25s var(--ease)}
.cmd-i .i{color:var(--gold);width:18px;height:18px}
.cmd-i small{margin-left:auto;color:var(--faint);font-size:12.5px}
.cmd-i[aria-selected=true]{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 17%,transparent),color-mix(in srgb,var(--gold) 4%,transparent));color:var(--gold-hi);transform:translateX(3px)}
.cmd-i[aria-selected=true]::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.cmd-foot{display:flex;gap:18px;padding:11px 18px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;background:rgba(0,0,0,.18);border-radius:0 0 24px 24px}

/* ================= toasts ================= */
.toasts{position:fixed;top:18px;right:18px;z-index:1400;display:flex;flex-direction:column;gap:11px;width:min(410px,calc(100vw - 32px));pointer-events:none}
.toast{--tc:var(--ok);pointer-events:auto;position:relative;overflow:hidden;display:flex;gap:13px;align-items:flex-start;padding:15px 17px 19px;border-radius:18px;
  background:linear-gradient(180deg,rgba(20,36,60,.97),rgba(9,17,31,.97));border:1px solid color-mix(in srgb,var(--tc) 50%,transparent);
  box-shadow:0 28px 58px -16px rgba(0,0,0,.92),0 0 44px -18px var(--tc);animation:toast-in .7s var(--out-expo) both,toast-out .45s var(--ease) 6.2s forwards}
.toast.err{--tc:var(--bad)}
.toast .i{color:var(--tc);width:22px;height:22px;margin-top:1px;flex:none}
.toast p{flex:1;line-height:1.42;font-size:14.5px;overflow-wrap:anywhere}
.toast button{background:none;border:0;color:var(--mut);cursor:pointer;padding:2px;border-radius:7px;transition:color .2s,transform .25s var(--ease)}
.toast button:hover{color:var(--txt);transform:rotate(90deg)}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 40%,transparent));transform-origin:left;animation:drain 6s linear forwards}
.toast.hold,.toast.hold::after{animation-play-state:paused}
.toast.gone{animation:toast-out .32s var(--ease) forwards}
.toast.gone::after{animation:none}
/* ================= motion ================= */
@keyframes rise{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}
@keyframes hero-in{from{opacity:0;transform:translate3d(0,26px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes plinth{from{transform:scaleY(.04);opacity:0}}
@keyframes drop-in{from{opacity:0;transform:translate3d(0,-26px,0) scale(.9)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(95,212,126,.55)}70%,100%{box-shadow:0 0 0 9px rgba(95,212,126,0)}}
@keyframes ping-gold{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 60%,transparent)}70%,100%{box-shadow:0 0 0 10px transparent}}
@keyframes ping-ring{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(4.2);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drain{to{transform:scaleX(0)}}
@keyframes toast-in{from{opacity:0;transform:translate3d(46px,0,0) scale(.92)}}
@keyframes toast-out{to{opacity:0;transform:translate3d(46px,0,0) scale(.94);visibility:hidden}}
@keyframes vt-out{to{opacity:0;transform:translate3d(0,-10px,0);filter:blur(3px)}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes drift-a{to{transform:translate3d(-9vw,7vh,0) scale(1.12)}}
@keyframes drift-b{to{transform:translate3d(10vw,-8vh,0) scale(1.1)}}
@keyframes drift-c{to{transform:translate3d(-7vw,-9vh,0) scale(1.18)}}
@keyframes wm-scan{from{transform:translateX(-130%)}to{transform:translateX(470%)}}
@keyframes arc-run{from{stroke-dashoffset:2.4}to{stroke-dashoffset:-97.6}}
@keyframes boot-map{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
@keyframes boot-pop{from{opacity:0;transform:scale(.7)}}
@keyframes boot-name{from{opacity:0;transform:translate3d(0,14px,0);filter:blur(8px);letter-spacing:.7em}}
@keyframes boot-bar{from{transform:scaleX(0)}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(.9)}}
@keyframes scroll-line{to{transform:scaleX(1)}}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shimmer{to{background-position:-240% 0}}
@keyframes sweep{to{transform:translateX(100%)}}
@keyframes shine{0%,62%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes beam{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes ring-in{from{--p:0}}
@keyframes roll-in{from{opacity:0;transform:translate3d(0,-.55em,0)}}
@keyframes roll-out{to{opacity:0;transform:translate3d(0,.55em,0)}}
@keyframes tile-pop{from{opacity:0;transform:scale(.2)}}
@keyframes tile-in{from{opacity:0;transform:translate3d(0,16px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes row-in{from{opacity:0;transform:translate3d(-14px,0,0)}to{opacity:1;transform:none}}
@keyframes nav-in{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
@keyframes cmd-in{from{opacity:0;transform:translate3d(0,6px,0)}}
@keyframes ins{from{opacity:0;transform:translate3d(0,16px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes upd{from{outline:2px solid color-mix(in srgb,var(--gold) 85%,transparent);outline-offset:0}to{outline:2px solid transparent;outline-offset:9px}}
@keyframes upd-row{from{background-color:color-mix(in srgb,var(--gold) 20%,transparent)}to{background-color:transparent}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.16);color:var(--gold-hi)}100%{transform:scale(1)}}
@keyframes txt-flash{0%{opacity:.35;transform:translate3d(0,6px,0)}100%{opacity:1;transform:none}}

/* ---- page entrance: everything arrives in a staggered sequence (JS adds html.enter, and removes it again once done) ---- */
html.enter .anim{animation:rise .9s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + var(--i,0)*75ms)}
html.enter .hero.anim{animation:hero-in 1.2s var(--out-expo) both;animation-delay:var(--boot,0s)}
html.enter .hero-t>*{animation:rise 1s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .15s + var(--k,0)*95ms)}
.hero-t>:nth-child(2){--k:1}.hero-t>:nth-child(3){--k:2}.hero-t>:nth-child(4){--k:3}
html.enter .nextup{animation:rise 1.1s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .55s)}
html.enter .hero .wm{animation:fade 2.4s ease both;animation-delay:calc(var(--boot,0s) + .2s)}
html.enter .page-head>*{animation:rise .9s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + var(--k,0)*90ms)}
.page-head>:nth-child(2){--k:1}
html.enter .toolbar{animation:rise .9s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .12s)}
html.has-boot.enter .rail-brand,html.has-boot.enter .nav a,html.has-boot.enter .rail-foot{animation:nav-in .8s var(--out-expo) both}
html.has-boot.enter .rail-brand{animation-delay:calc(var(--boot,0s) - .05s)}
html.has-boot.enter .nav a{animation-delay:calc(var(--boot,0s) + .08s + var(--n,0)*65ms)}
html.has-boot.enter .rail-foot{animation-delay:calc(var(--boot,0s) + .45s)}
html.enter .topbar>*{animation:fade .9s ease both;animation-delay:calc(var(--boot,0s) + .2s)}
html.enter .tile{animation:tile-in .75s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .3s + min(var(--n,0),24)*38ms)}
html.enter .tbl tbody tr:not(.rv){animation:row-in .8s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .4s + min(var(--n,0),14)*45ms)}
html.enter .mini-i{animation:row-in .8s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .45s + min(var(--n,0),8)*60ms)}
html.enter .log-i:not(.rv),html.enter .log-day{animation:row-in .8s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .35s + min(var(--n,0),14)*42ms)}
html.enter .wl-i{animation:row-in .8s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .4s + min(var(--n,0),8)*60ms)}
html.enter .mosaic .t.on{animation:tile-pop .6s var(--spring) both;animation-delay:calc(var(--boot,0s) + .5s + min(var(--n,0),34)*24ms)}
html.enter .pod .pod-av,html.enter .pod .pod-name,html.enter .pod .pod-rbx,html.enter .pod .pod-w{animation:drop-in .9s var(--spring) both}
html.enter .pod.p3 .plinth{animation:plinth 1.1s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .15s)}
html.enter .pod.p2 .plinth{animation:plinth 1.1s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .35s)}
html.enter .pod.p1 .plinth{animation:plinth 1.2s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .6s)}
html.enter .pod.p3 :is(.pod-av,.pod-name,.pod-rbx,.pod-w){animation-delay:calc(var(--boot,0s) + .75s)}
html.enter .pod.p2 :is(.pod-av,.pod-name,.pod-rbx,.pod-w){animation-delay:calc(var(--boot,0s) + .95s)}
html.enter .pod.p1 :is(.pod-av,.pod-name,.pod-rbx,.pod-w){animation-delay:calc(var(--boot,0s) + 1.25s)}
html.enter .pod.p1 .crown{animation:drop-in .9s var(--spring) calc(var(--boot,0s) + 1.5s) both,bob 3.6s ease-in-out calc(var(--boot,0s) + 2.5s) infinite}
html.enter .podium .hud{animation:fade 1.2s ease both;animation-delay:calc(var(--boot,0s) + 1s)}
html.enter .auth-card{animation:hero-in 1.1s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .2s)}
html.enter .auth-hero>*{animation:rise 1s var(--out-expo) both;animation-delay:calc(var(--boot,0s) + .1s + var(--k,0)*110ms)}
.auth-hero>:nth-child(2){--k:1}.auth-hero>:nth-child(3){--k:2}.auth-hero>:nth-child(4){--k:3}
.cmd-list.fresh .cmd-i{animation:cmd-in .35s var(--ease) both;animation-delay:calc(var(--k,0)*22ms)}

/* ---- scroll-driven reveal for long lists (progressive enhancement, no JS) ---- */
@supports (animation-timeline:view()){
  .rv{animation:rv-in linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
}
@keyframes rv-in{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

/* ---- live updates (the page quietly keeps itself current) ---- */
.ins{animation:ins .8s var(--out-expo) both}
.upd{animation:upd 1.5s var(--ease) both}
tr.upd{animation:none}
tr.upd td{animation:upd-row 1.6s var(--ease) both}
.bump{display:inline-block;animation:bump .7s var(--ease)}
.txt-flash{animation:txt-flash .6s var(--ease) both}
.mo-leave{transition:opacity .22s,transform .22s;opacity:0;transform:scale(.96);pointer-events:none}

/* ---- navigation: a calm fade-through while the next page loads ---- */
.main{transition:opacity .2s ease,transform .2s ease}
html.leaving .main{opacity:.55;transform:translate3d(0,-3px,0)}

/* ---- cross-page transitions (Chrome / Edge / Safari 18+) ---- */
@view-transition{navigation:auto}
.main{view-transition-name:page}.rail{view-transition-name:rail}.topbar{view-transition-name:topbar}
::view-transition-old(page){animation:vt-out .2s var(--ease) both}
::view-transition-new(page){animation:vt-in .55s var(--out-expo) both}
::view-transition-group(rail),::view-transition-group(topbar){animation-duration:0s}

/* ---- people who prefer calm get calm: nothing moves ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .toast{animation:none}
  .rv{animation:none!important}
  .splash,.wm-band,.arc-run{display:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---- small additions ---- */
.rc{white-space:pre}
.rein{animation:ins .7s var(--out-expo) both;animation-delay:calc(var(--r,0)*55ms)}
/* ================= small screens ================= */
.only-m{display:none}
.tbl-wrap{container-type:inline-size}
@media(max-width:1180px){
  .grid-main,.grid-ev{grid-template-columns:minmax(0,1fr)}
  .hero .wm{width:110%;right:-25%;opacity:.6}
}
@media(max-width:900px){
  .rail{position:fixed;left:0;top:0;bottom:0;width:min(86vw,330px);transform:translateX(-104%);transition:transform .34s var(--out-expo);box-shadow:30px 0 80px rgba(0,0,0,.65)}
  .rail .rail-x{display:inline-grid}
  body.rail-open .rail{transform:none}
  body.rail-open .scrim{opacity:1;pointer-events:auto}
  body.rail-open{overflow:hidden}
  .only-m{display:inline-grid}.hide-m{display:none!important}
  .crumb b.only-m{display:inline}
  .main{padding-top:22px;padding-bottom:108px}
  .foot{padding-bottom:92px}
  .page-head{margin-bottom:20px;padding-bottom:18px}
  .toolbar .search{max-width:none}
  .tabs{max-width:100%}
  .tabbar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;padding:6px;gap:2px;border-radius:22px;
    background:linear-gradient(180deg,rgba(14,26,44,.9),rgba(6,12,22,.92));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--line2);box-shadow:0 24px 54px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
  .tabbar a,.tabbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 7px;border-radius:16px;background:none;border:0;color:var(--mut);font:700 11px var(--fl);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-width:0;transition:color .3s,background .3s,transform .25s var(--ease)}
  .tabbar a:active,.tabbar button:active{transform:scale(.94)}
  .tabbar .i{width:21px;height:21px;transition:transform .4s var(--spring)}
  .tabbar [aria-current=page]{color:var(--gold-hi);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 20%,transparent),color-mix(in srgb,var(--gold) 6%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 24%,transparent)}
  .tabbar [aria-current=page] .i{transform:translateY(-1px) scale(1.12)}
  .toasts{top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px));right:16px;left:16px;width:auto}
  .auth{grid-template-columns:1fr}
  .auth-hero{display:none}
  .auth-card .brand-s{display:flex;align-items:center;gap:14px;margin-bottom:22px}
  .auth-card .brand-s img{width:58px;height:58px;border-radius:17px;border:2px solid var(--gold)}
  .auth-side{overflow:clip}
  .auth-side::before{content:"";position:absolute;left:50%;top:-4%;width:150%;aspect-ratio:1000/433.3;transform:translateX(-50%);opacity:.22;pointer-events:none;
    -webkit-mask:var(--map) center/100% 100% no-repeat;mask:var(--map) center/100% 100% no-repeat;background:linear-gradient(180deg,var(--gold-hi),transparent 80%)}
  .hero{padding:26px 22px;min-height:0}
  .hero .wm{width:150%;right:-48%;top:42%;opacity:.38}
  .podium{padding-top:38px;min-height:340px}
  .pod-av .av{--s:62px}.pod.p1 .pod-av .av{--s:80px}
  .crown{width:30px;height:30px;margin-left:-15px;top:-25px}
  .pod-w small{display:none}
  .ev-head{padding:24px 20px}
  .tile-act .txt{display:none}
  .log-day{top:70px}
}
.tier-m{display:none}
/* the leaderboard table folds away its secondary columns according to the room it really has, so nobody scrolls sideways */
@container (max-width:880px){.tbl-lb .c-rate{display:none}}
@container (max-width:700px){.tbl-lb .c-ev{display:none}}
@container (max-width:620px){
  .tbl-lb{min-width:0!important}
  .tbl-lb .c-title{display:none}
  .tbl-lb th,.tbl-lb td{padding-left:10px;padding-right:10px}
  .tbl-lb .rk{width:44px;font-size:21px}
  .tbl-lb .w{font-size:25px;text-align:right}
  .tbl-lb th:nth-child(n+4){text-align:right}
  .tier-m{display:flex;margin-top:3px;font-size:11.5px}
  .tbl-lb .acts .txt{display:none}
  .tbl-lb .acts .btn.sm{padding:0;width:34px;justify-content:center}
}
@container (max-width:345px){
  .tbl-lb th,.tbl-lb td{padding-left:7px;padding-right:7px}
  .tbl-lb .rk{width:38px}
  .tbl-lb .acts{gap:4px}
}
@media(max-width:640px){
  /* the users table becomes one card per account */
  .tbl-cards{min-width:0!important}
  .tbl-cards thead{display:none}
  .tbl-cards,.tbl-cards tbody{display:block}
  .tbl-cards tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;padding:18px 16px;border-top:1px solid var(--line)}
  .tbl-cards tr:first-child{border-top:0}
  .tbl-cards td{display:block;padding:0;border:0;min-width:0}
  .tbl-cards td:first-child{flex:1 1 60%}
  .tbl-cards td:nth-child(3){flex:1 1 100%}
  .tbl-cards tbody tr:hover{background:none}
  .tbl-cards tbody tr:hover td{box-shadow:none}
  .mini-i{margin:0 -8px;padding:10px 8px}
}
@media(max-width:520px){
  body{font-size:15px}
  .kick{letter-spacing:.17em;font-size:12px}
  .kick::before{width:14px}
  .main{padding-left:14px;padding-right:14px}
  .kpis > :last-child:nth-child(odd){grid-column:1/-1}
  .pad{padding:17px}
  .btn{padding:0 14px}
  .kpis{grid-template-columns:1fr 1fr;gap:11px}
  .kpi{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .kpi>div:not(.ico){display:block}
  .kpi .ico{width:48px;height:48px}
  .kpi .val{font-size:36px}
  .cards{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .ev-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
  .stat{min-width:0;padding:11px 6px 9px}
  .stat.clock{grid-column:1/-1}
  .nextup{flex-basis:100%;padding:18px 20px}
  .frow{grid-template-columns:1fr}
  .hero h1{font-size:clamp(28px,9vw,36px)}
  .podium{padding-left:8px;padding-right:8px}
  .auth-card{padding:28px 22px 24px}
  .boot-name{font-size:19px;letter-spacing:.2em;padding-left:.2em;white-space:nowrap}
  .boot-tag{letter-spacing:.42em;padding-left:.42em}
}

/* ================= print ================= */
@media print{
  :root{--bg:#fff;--panel:#fff;--txt:#14161a;--txt2:#2b2f36;--mut:#4d5560;--faint:#6b7480;--line:#d4d8de;--line2:#bfc4cc;--line3:#9aa1ab;
    --gold:#8a5a00;--gold-hi:#8a5a00;--gold-lo:#6b4600;color-scheme:light}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important;transition:none!important}
  html,body{background:#fff!important;color:var(--txt)}
  .rail,.topbar,.tabbar,.toasts,.foot,.scrim,.bg,.splash,.progress,.tip,.skip,.page-actions,.toolbar,.quick,.acts,.btn,.icon-btn,dialog,.no-print,.search,.wm,.hud{display:none!important}
  .main{padding:0!important;max-width:none!important}
  .card,.tile,.kpi,.camp,.hero{box-shadow:none!important;background:#fff!important;border:1px solid var(--line2)!important}
  .card::before,.card::after{display:none}
  .gt{background:none!important;color:#8a5a00!important;-webkit-text-fill-color:#8a5a00!important}
  .camp,.tile,.kpi,tr,.pod{break-inside:avoid}
  .nextup{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .tbl-wrap{overflow:visible!important}
  .tbl{min-width:0!important;width:100%}
  .nu-time,.stat.clock b,.pod-w,.plinth{color:#14161a!important;text-shadow:none!important}
}