:root{
  --bg:#070b16; --panel:rgba(14,20,38,0.82); --panel-b:rgba(120,150,255,0.18);
  --ink:#e8eeff; --dim:#9aa8cc; --accent:#66e0c0;
  --grad:linear-gradient(90deg,#66e0c0,#7fb0ff,#c9a6ff);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased;user-select:none}
canvas#c{position:fixed;inset:0;display:block;touch-action:none}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud button,#hud .minimap,#hud .helpbtn{pointer-events:auto}
button{font-family:inherit;cursor:pointer}

.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#0e1730 0%,#05070f 70%)}
.title{font-size:52px;font-weight:800;letter-spacing:2px;margin:0;text-shadow:0 4px 40px rgba(80,120,255,.4)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:var(--dim);margin:10px 0 0;font-size:16px}
.pick{margin:34px 0 12px;letter-spacing:3px;color:var(--dim);font-size:13px;text-transform:uppercase}
.menu-inner,.loading-inner{text-align:center;max-width:1000px;padding:20px}
.loadbar-wrap{width:340px;height:8px;background:#141c34;border-radius:8px;margin:30px auto 12px;overflow:hidden}
#loadbar{height:100%;width:0;background:var(--grad);transition:width .25s}

.faction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:920px;margin:0 auto}
.fcard{background:var(--panel);border:1px solid var(--panel-b);border-radius:14px;padding:18px 16px 16px;
  text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;position:relative;overflow:hidden}
.fcard:hover{transform:translateY(-4px);border-color:rgba(150,180,255,.5)}
.fcard.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 12px 40px rgba(80,220,180,.25)}
.fcard .fbar{position:absolute;top:0;left:0;right:0;height:5px}
.fcard h3{margin:10px 0 2px;font-size:19px}
.fcard .motto{color:var(--dim);font-style:italic;font-size:12.5px;margin:0 0 12px;min-height:34px}
.fcard .bonus b{display:block;color:var(--accent);font-size:13px;margin-bottom:4px}
.fcard .bonus span{color:#c4d0ee;font-size:12.5px;line-height:1.45}
.menu-actions{margin-top:30px;display:flex;gap:14px;justify-content:center}
button.primary{background:var(--grad);color:#08131a;border:none;padding:14px 30px;border-radius:10px;font-size:16px;font-weight:700}
button.primary:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--panel-b);padding:14px 22px;border-radius:10px;font-size:15px}

.topbar{position:absolute;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:18px;
  padding:0 16px;background:linear-gradient(180deg,rgba(6,10,22,.92),rgba(6,10,22,.4));backdrop-filter:blur(6px)}
.faction-badge{display:flex;align-items:center;gap:8px;font-size:14px}
.faction-badge .dot{width:12px;height:12px;border-radius:50%}
.faction-badge em{color:var(--dim);font-style:normal;font-size:12px;border-left:1px solid var(--panel-b);padding-left:8px}
.resources{display:flex;gap:16px;margin-left:8px}
.res{display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.res .ri{font-size:15px}.res .rv{font-size:15px;font-weight:600;min-width:30px}
.timer{margin-left:auto;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:#cdd8f5}

.techpanel{position:absolute;top:64px;right:12px;width:270px;background:var(--panel);border:1px solid var(--panel-b);
  border-radius:12px;padding:12px 14px;backdrop-filter:blur(8px)}
.techpanel h3{margin:0 0 10px;font-size:14px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.techlist{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.techrow{display:flex;justify-content:space-between;align-items:baseline;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.03);font-size:12px;opacity:.65}
.techrow small{color:var(--dim);font-size:10px}
.techrow.done{opacity:1;background:rgba(90,224,140,.14)}
.techrow.done b::before{content:'\2713 ';color:#5fe08a}
.techrow.next{opacity:1;border:1px solid var(--accent)}
.techrow.current{opacity:1;background:rgba(127,176,255,.18);animation:pulserow 1.4s infinite}
@keyframes pulserow{50%{background:rgba(127,176,255,.34)}}
.techprog{margin:4px 0 8px}
.techprog .bar{height:7px;background:#141c34;border-radius:6px;overflow:hidden}
.techprog .bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s}
.techprog span{display:block;font-size:11px;color:var(--dim);margin-top:5px;line-height:1.35}
.bigbtn{width:100%;background:var(--grad);border:none;color:#08131a;font-weight:700;padding:11px;border-radius:9px;font-size:14px}
.bigbtn:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
.leader{margin-top:12px;border-top:1px solid var(--panel-b);padding-top:8px}
.leader h4{margin:0 0 6px;font-size:11px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}
.lrow{display:flex;align-items:center;gap:7px;font-size:12px;padding:2px 0}
.lrow .dot{width:9px;height:9px;border-radius:50%}
.lrow em{margin-left:auto;color:var(--dim);font-style:normal;font-size:11px}
.lrow.me{font-weight:700}

.buildbar{position:absolute;left:12px;bottom:12px;display:flex;gap:7px;align-items:flex-end;
  background:var(--panel);border:1px solid var(--panel-b);border-radius:12px;padding:10px;backdrop-filter:blur(8px)}
.bb-title{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:2px;color:var(--dim);align-self:center}
.buildbtn{width:74px;height:82px;background:rgba(255,255,255,.04);border:1px solid var(--panel-b);border-radius:9px;
  color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px;transition:.12s}
.buildbtn:hover{background:rgba(120,150,255,.16);border-color:var(--accent)}
.buildbtn.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.buildbtn.cant{opacity:.42}
.buildbtn .bi{font-size:22px}.buildbtn .bn{font-size:10.5px;text-align:center;line-height:1.1}
.buildbtn .bc{font-size:9.5px;color:var(--dim)}

.selpanel{position:absolute;left:50%;transform:translateX(-50%);bottom:126px;min-width:280px;max-width:420px;
  background:var(--panel);border:1px solid var(--panel-b);border-radius:12px;padding:10px 14px;backdrop-filter:blur(8px);min-height:10px}
.selpanel:empty{display:none}
.sel-head{display:flex;align-items:center;gap:8px;font-size:15px}.sel-head .bi{font-size:20px}
.sel-info{color:#c4d0ee;font-size:12.5px;margin:5px 0}
.sel-desc{color:var(--dim);font-size:11.5px;margin-top:6px;line-height:1.4}
.act{display:block;width:100%;margin-top:6px;background:rgba(120,150,255,.14);border:1px solid var(--panel-b);color:var(--ink);
  padding:8px 10px;border-radius:8px;font-size:13px;text-align:left}
.act:hover{background:rgba(120,150,255,.28)}
.act.demolish{background:rgba(255,80,80,.13);border-color:rgba(255,120,120,.42);color:#ffd7d7;margin-top:8px}
.act.demolish:hover{background:rgba(255,80,80,.26);border-color:rgba(255,140,140,.7)}
.act em{float:right;color:var(--dim);font-style:normal;font-size:12px}
.queue{font-size:11px;color:var(--accent);margin-top:6px}

.minimap{position:absolute;right:12px;bottom:12px;width:190px;height:190px;border-radius:12px;overflow:hidden;
  border:1px solid var(--panel-b);background:#0a1024;box-shadow:0 6px 30px rgba(0,0,0,.5)}
.minimap canvas{display:block;width:190px;height:190px;cursor:crosshair}

.alerts{position:absolute;left:12px;top:64px;width:260px;display:flex;flex-direction:column;gap:6px}
.alert{background:var(--panel);border:1px solid var(--panel-b);border-left:3px solid #6f8dff;border-radius:8px;
  padding:7px 10px;font-size:12px;backdrop-filter:blur(6px);transition:opacity .8s,transform .4s;animation:slidein .3s}
@keyframes slidein{from{opacity:0;transform:translateX(-16px)}}
.alert.fade{opacity:0;transform:translateX(-16px)}
.alert.a-tech{border-left-color:#66e0c0}.alert.a-combat{border-left-color:#ff6b6b}
.alert.a-build{border-left-color:#7fb0ff}.alert.a-warn{border-left-color:#ffcf5c}

.marquee{position:fixed;border:1.5px solid var(--accent);background:rgba(102,224,192,.12);z-index:20;pointer-events:none}
.pinglayer{position:fixed;inset:0;pointer-events:none;z-index:19}
.ping{position:absolute;width:34px;height:34px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%)}
.float{position:absolute;font-weight:700;font-size:14px;transform:translate(-50%,-50%);text-shadow:0 2px 6px #000}

.helpbtn{position:absolute;top:60px;right:290px;background:var(--panel);border:1px solid var(--panel-b);color:var(--ink);
  padding:8px 12px;border-radius:8px;font-size:12.5px;backdrop-filter:blur(6px)}
.helpbtn:hover{border-color:var(--accent)}
.endbtn{position:absolute;top:60px;right:406px;background:var(--panel);border:1px solid var(--panel-b);color:var(--ink);
  padding:8px 12px;border-radius:8px;font-size:12.5px;backdrop-filter:blur(6px);pointer-events:auto}
.endbtn:hover{border-color:#ff6b6b;color:#ffd7d7}

.howto-ov{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,rgba(14,23,48,.9),rgba(3,5,12,.94));backdrop-filter:blur(7px);pointer-events:auto}
.howto-card{position:relative;width:min(940px,94vw);max-height:90vh;overflow:auto;
  background:linear-gradient(180deg,#0e1730,#0a1022);border:1px solid var(--panel-b);
  border-radius:16px;padding:0 30px 26px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.howto-card::-webkit-scrollbar{width:10px}
.howto-card::-webkit-scrollbar-thumb{background:rgba(120,150,255,.25);border-radius:8px}

.ht-hero{padding:24px 0 12px;margin-bottom:6px;text-align:center}
.howto-card h1{margin:0;font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);font-weight:700}
.ht-title{font-size:30px;font-weight:800;letter-spacing:1px;margin-top:4px;text-shadow:0 4px 30px rgba(80,120,255,.3)}
.ht-lede{max-width:760px;margin:12px auto 0;font-size:13.5px;line-height:1.6;color:#cfd8f2}

.ht-panel{background:var(--panel);border:1px solid var(--panel-b);border-radius:12px;
  padding:14px 16px;margin-bottom:14px;backdrop-filter:blur(6px)}
.ht-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ht-cols .ht-panel{margin-bottom:14px}
.howto-card h2{font-size:14px;margin:0 0 8px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.ht-panel h2:not(:first-child){margin-top:14px;padding-top:12px;border-top:1px solid rgba(120,150,255,.12)}
.howto-card p{font-size:13px;line-height:1.55;color:#cfd8f2;margin:0 0 6px}

.ht-ladder{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;justify-content:center}
.ht-ladder span{background:rgba(120,150,255,.12);border:1px solid var(--panel-b);border-radius:20px;
  padding:5px 12px;font-size:12px;color:#dbe3fb}
.ht-ladder span.top{background:var(--grad);color:#08131a;font-weight:800;border:none}
.ht-ladder i{color:var(--dim);font-style:normal;font-size:12px}

.ht-chain{background:rgba(102,224,192,.07);border:1px solid rgba(102,224,192,.22);border-radius:10px;
  padding:12px 14px;font-size:13px;line-height:1.95;color:#dbe3fb;margin:4px 0 8px}
.ht-note{font-size:12.5px;color:var(--dim);font-style:italic;margin:0}

.ht-list{list-style:none;margin:2px 0 0;padding:0}
.ht-list li{font-size:12.5px;line-height:1.5;color:#cfd8f2;padding:6px 0;border-bottom:1px solid rgba(120,150,255,.07)}
.ht-list li:last-child{border-bottom:none}
.ht-list.ht-tight li{padding:4px 0;border-bottom:none}
.ht-list em{color:var(--dim);font-style:normal;display:block;font-size:11.5px;margin-top:2px}
ol.ht-list{counter-reset:step}
ol.ht-list li{position:relative;padding-left:28px;counter-increment:step;border-bottom:none;padding-top:5px;padding-bottom:5px}
ol.ht-list li::before{content:counter(step);position:absolute;left:0;top:5px;width:18px;height:18px;
  background:var(--grad);color:#08131a;font-weight:800;font-size:10px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}

.ht-chip{display:inline-block;font-weight:700;font-size:11.5px;padding:2px 8px;border-radius:6px;margin-right:7px;
  background:rgba(255,255,255,.06);border:1px solid var(--panel-b)}
.c-cap{color:#8affc1}.c-data{color:#7fd1ff}.c-comp{color:#ffd15c}.c-inf{color:#c9a6ff}.c-tru{color:#ff9db1}

.howto-close{position:absolute;top:16px;right:18px;z-index:3;background:rgba(10,16,34,.7);border:1px solid var(--panel-b);
  color:var(--dim);font-size:14px;width:30px;height:30px;border-radius:50%}
.howto-close:hover{border-color:#ff6b6b;color:#ffd7d7}
.howto-credits{margin-top:8px;padding-top:12px;border-top:1px solid var(--panel-b);color:var(--dim);font-size:11px;line-height:1.55;text-align:center}
.howto-start{display:block;margin:16px auto 0;background:var(--grad);border:none;color:#08131a;font-weight:700;padding:13px 28px;border-radius:10px;font-size:15px}
.howto-factions{display:none}

.endscreen{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%,rgba(14,23,48,.9),rgba(3,5,12,.96));animation:slidein .6s}
.endcard{text-align:center;max-width:560px;padding:30px}
.endcard h1{font-size:44px;margin:0 0 14px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.endscreen.lose .endcard h1{background:linear-gradient(90deg,#ff8a8a,#ff5a5a);-webkit-background-clip:text;background-clip:text;color:transparent}
.endcard p{font-size:17px;margin:8px 0}.endcard .sub{color:var(--dim);font-size:14px}
.endcard button{margin-top:22px;background:var(--grad);border:none;color:#08131a;font-weight:700;padding:14px 30px;border-radius:10px;font-size:16px}

@media (max-width:820px){ .faction-grid{grid-template-columns:repeat(2,1fr)} .howto-cols{grid-template-columns:1fr} .title{font-size:38px} }


/* ---------- MULTIPLAYER LOBBY ---------- */
.menu-inner.lobby{max-width:1080px;width:94%}
.lobby-head h1{font-size:34px;margin:0 0 6px;letter-spacing:.5px}
.lobby-head h1 span{color:var(--accent);font-weight:600}
.lobby-head .tag{color:var(--dim);margin:0 auto 18px;max-width:640px;font-size:14px;line-height:1.5}
.lobby-id{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.lobby-id label{color:var(--dim);font-size:13px}
.lobby-id input{background:rgba(255,255,255,.05);border:1px solid var(--panel-b);color:var(--ink);
  padding:9px 12px;border-radius:9px;font-size:14px;width:220px;text-align:center}
.lobby-id input:focus{outline:none;border-color:var(--accent)}
.vipbadge{background:linear-gradient(90deg,#f5c451,#f39c12);color:#241a04;font-weight:700;
  font-size:12px;padding:5px 10px;border-radius:20px}
.fgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.fcard4{background:var(--panel);border:1px solid var(--panel-b);border-radius:14px;
  padding:0 15px 15px;text-align:left;position:relative;overflow:hidden;transition:.15s;backdrop-filter:blur(8px)}
.fcard4 .fbar4{height:6px;margin:0 -15px 14px;border-radius:14px 14px 0 0}
.fcard4 h3{margin:0 0 3px;font-size:17px}
.fcard4 .motto{color:var(--dim);font-style:italic;font-size:12px;margin:0 0 10px;min-height:30px}
.fcard4 .bonus4 b{display:block;color:var(--accent);font-size:12.5px;margin-bottom:2px}
.fcard4 .bonus4 span{color:var(--dim);font-size:11.5px;line-height:1.4;display:block;min-height:44px}
.fcard4 .seatline{margin:10px 0 8px;font-size:13px;min-height:20px}
.fcard4 .seatline .open{color:var(--dim)}
.fcard4 .seatline .occ{color:var(--ink)}
.fcard4 .seatline .you{color:var(--accent)}
.fcard4 .seatline .vt,.fcard4 .seatline .vipbadge{color:#f5c451}
.fcard4.mine{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 12px 40px rgba(80,220,180,.22)}
.fcard4.taken{opacity:.9}
.claimbtn{width:100%;background:rgba(120,150,255,.16);border:1px solid var(--panel-b);color:var(--ink);
  padding:9px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.claimbtn:hover:not(:disabled){background:var(--accent);color:#08131a;border-color:var(--accent)}
.claimbtn:disabled{opacity:.4;cursor:not-allowed}
.fcard4.mine .claimbtn{background:transparent;border-color:#c0506a;color:#ff9fb0}
.fcard4.mine .claimbtn:hover{background:#c0506a;color:#fff}
.lobby-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--panel-b);padding-top:16px}
.vipwrap{display:flex;gap:8px;align-items:center}
.vipwrap input{background:rgba(255,255,255,.05);border:1px solid var(--panel-b);color:var(--ink);
  padding:9px 12px;border-radius:9px;font-size:13px;width:170px}
.vipwrap input:focus{outline:none;border-color:var(--accent)}
button.ghost.small{padding:9px 14px;font-size:13px}
.startwrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.startwrap .bigbtn{width:auto;padding:12px 22px;font-size:14px}
.specnote{color:var(--dim);font-size:12px}
.lobbystatus{margin-top:14px;color:var(--dim);font-size:12px;text-align:center}

/* spectator / player banner in-game */
.mpbanner{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:14;
  background:var(--panel);border:1px solid var(--panel-b);border-radius:22px;padding:7px 16px;
  font-size:13px;color:var(--ink);backdrop-filter:blur(8px);pointer-events:auto;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.mpbanner .dot{color:var(--accent);margin-right:6px}
.mpbanner a{color:var(--accent);text-decoration:none;margin-left:8px}
.mpbanner a:hover{text-decoration:underline}

/* transient toast */
.mptoast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);z-index:120;
  background:rgba(14,20,38,.95);border:1px solid var(--panel-b);color:var(--ink);padding:11px 18px;
  border-radius:10px;font-size:13.5px;opacity:0;transition:.25s;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:360px;text-align:center}
.mptoast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.fgrid4{grid-template-columns:repeat(2,1fr)}}


/* ---------- LOBBY CLEANUP (2026-07-02) ---------- */
/* hero star + rays centered behind the title */
#menu{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%, rgba(28,44,80,.55) 0%, rgba(8,12,24,.90) 55%, rgba(6,9,20,.96) 100%)}
#menu::after{content:'';position:absolute;top:38%;left:50%;width:1000px;height:1000px;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(150,195,255,.05) 0deg 4deg, transparent 4deg 12deg),
    radial-gradient(circle at 50% 50%, rgba(120,180,255,.30) 0%, rgba(102,224,192,.14) 18%, rgba(120,180,255,.05) 34%, transparent 58%);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.6) 30%, transparent 62%);
  mask:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.6) 30%, transparent 62%)}
#menu .menu-inner{position:relative;z-index:1}

/* Join/Leave button revealed only on card hover (keeps cards clean) */
.fcard4 .claimbtn{opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease,background .15s,color .15s,border-color .15s}
.fcard4:hover .claimbtn,.fcard4:focus-within .claimbtn{opacity:1;transform:translateY(0)}
.fcard4.mine .claimbtn{opacity:.55;transform:translateY(0)}
.fcard4.mine:hover .claimbtn{opacity:1}

/* centered footer: prominent Start, subtle links below */
.lobby-foot{display:flex;flex-direction:column;align-items:center;gap:12px;justify-content:center}
.lobby-foot .bigbtn{width:auto;min-width:280px;padding:13px 30px;font-size:15px}
.foot-links{display:flex;align-items:center;gap:12px}
.foot-links .sep{color:var(--dim);opacity:.6}
.linkbtn{background:none;border:none;color:var(--ink);font-size:13px;cursor:pointer;padding:4px 4px;border-radius:6px;
  opacity:.85;transition:.15s;text-decoration:none}
.linkbtn:hover{opacity:1;color:var(--accent)}
.linkbtn.subtle{color:var(--dim);font-size:12.5px}
.linkbtn.subtle:hover{color:var(--accent)}
.lobby-foot .specnote{text-align:center}


/* Unit-training progress bar in the building panel */
.trainbar{ position:relative; margin:8px 0 4px; height:20px; border-radius:6px; background:rgba(255,255,255,0.08); overflow:hidden; border:1px solid rgba(255,255,255,0.12); }
.trainbar span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.2px; z-index:2; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.trainbar i{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#2fd18b,#39a0ff); box-shadow:0 0 10px rgba(57,160,255,.5); transition:width .12s linear; }

/* Spectators: the game world is view-only; hide build controls entirely */
body.spectating .buildbar{ display:none !important; }
body.spectating #hud{ cursor:default; }

.act.cant{ opacity:.5; filter:grayscale(.45); }
.act.cant em{ color:#ff9db1; }


/* ---- lobby leaderboard (Hall of Fame) ---- */
.lobbyboard{ width:min(720px,94vw); margin:18px auto 0; }
.lb-cols{ display:flex; gap:14px; align-items:stretch; }
@media (max-width:680px){ .lb-cols{ flex-direction:column; } }
.lb-col{ flex:1 1 0; background:rgba(16,22,34,0.55); border:1px solid rgba(120,150,190,0.16);
  border-radius:14px; padding:12px 14px 10px; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); min-width:0; }
.lb-col h4{ margin:0 0 8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#9db4d6; font-weight:700; }
.lb-list{ display:flex; flex-direction:column; gap:5px; }
.lb-row{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:9px;
  background:rgba(255,255,255,0.03); }
.lb-row.lb-top3{ background:rgba(120,160,220,0.08); }
.lb-rank{ width:26px; text-align:center; font-weight:700; color:#c7d6ec; font-size:14px; flex:0 0 auto; }
.lb-info{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.lb-name{ font-weight:600; color:#eaf2ff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-sub{ font-size:11px; color:#8296b4; }
.lb-wins{ flex:0 0 auto; font-weight:800; font-size:16px; color:#8affc1; }
.lb-wins small{ font-size:10px; font-weight:700; color:#5f8f74; margin-left:1px; }
.lb-match{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  column-gap:8px; align-items:center; padding:5px 8px; border-radius:9px; background:rgba(255,255,255,0.03); }
.lb-dot{ grid-row:1 / span 2; width:9px; height:9px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.lb-mwin{ font-weight:600; color:#eaf2ff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-mwin em{ font-style:normal; color:#8296b4; font-size:11px; }
.lb-mfac{ grid-column:2; font-size:11px; color:#9db4d6; }
.lb-mmeta{ grid-column:3; grid-row:1 / span 2; font-size:11px; color:#7c8ca8; text-align:right; white-space:nowrap; }
.lb-empty{ font-size:12px; color:#7c8ca8; font-style:italic; padding:6px 4px; }