:root{
  --bg:#080b12;
  --ink:#e8f0ff;
  --dim:#8fa0bd;
  --accent:#ffb43d;
  --accent2:#3ddcff;
  --good:#54e08a;
  --bad:#ff5a6a;
  --panel:rgba(12,18,30,.93);
  --line:rgba(120,160,220,.22);
  --font:'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);}
body{user-select:none;-webkit-user-select:none;cursor:default;}
canvas#stage{position:fixed;inset:0;width:100%;height:100%;display:block;background:#05070c;}
#vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 220px 40px rgba(0,0,0,.75);z-index:2;}

/* ---------------- screens ---------------- */
.screen{position:fixed;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;}
.screen.show{display:flex;}
.panel-screen{background:rgba(4,7,13,.72);backdrop-filter:blur(3px);}

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:26px 30px;min-width:440px;max-width:min(560px,94vw);max-height:92vh;overflow:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel.wide{max-width:min(1120px,96vw);width:min(1120px,96vw);}
.panel h2{margin:0 0 6px;font-size:26px;letter-spacing:3px;}
.panel h2.dead{color:var(--bad);}
.panel h3{margin:20px 0 8px;font-size:13px;letter-spacing:3px;color:var(--dim);}
.hint{color:var(--dim);font-size:12.5px;margin:4px 0 14px;line-height:1.5;}

/* ---------------- buttons ---------------- */
.btn{
  background:linear-gradient(180deg,#1b2740,#121a2b);color:var(--ink);
  border:1px solid var(--line);border-radius:11px;padding:11px 20px;
  font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:2px;cursor:pointer;
  transition:transform .08s ease, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover{background:linear-gradient(180deg,#26365a,#18223a);border-color:rgba(160,200,255,.5);transform:translateY(-1px);}
.btn:active{transform:translateY(1px);}
.btn.big{padding:15px 42px;font-size:19px;letter-spacing:5px;min-width:270px;}
.btn.sm{padding:7px 12px;font-size:11.5px;letter-spacing:1.2px;}
.btn.ghost{background:transparent;color:var(--dim);}
.btn.accent{background:linear-gradient(180deg,#ffc55c,#e0900f);color:#241600;border-color:#ffd894;}
.btn.accent:hover{background:linear-gradient(180deg,#ffd383,#f0a521);}
.btn.danger{background:linear-gradient(180deg,#5c1d26,#3a1119);border-color:#8d3a46;color:#ffd4d9;}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;}
.panel-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}
.panel-btns.col{flex-direction:column;align-items:stretch;}

/* ---------------- menu ---------------- */
#screen-menu{justify-content:space-between;padding:6vh 0 4vh;background:transparent;pointer-events:none;}
#screen-menu .btn, #screen-menu .menu-foot{pointer-events:auto;}
.title-wrap{text-align:center;}
.title-sub{color:var(--dim);letter-spacing:7px;font-size:11px;text-transform:uppercase;margin-bottom:6px;}
.title{
  margin:0;font-size:clamp(46px,9vw,112px);line-height:.92;letter-spacing:10px;font-weight:900;
  color:#fff;text-shadow:0 0 28px rgba(255,180,61,.55),0 6px 0 #6b3b00,0 10px 34px rgba(0,0,0,.8);
}
.title span{display:block;color:var(--accent);font-size:.62em;letter-spacing:16px;text-shadow:0 0 34px rgba(255,180,61,.8),0 4px 0 #5a3000;}
.title-tag{margin-top:10px;color:#cfe0ff;letter-spacing:4px;font-size:12.5px;opacity:.75;}
.menu-btns{display:flex;flex-direction:column;gap:13px;align-items:center;}
.menu-foot{color:var(--dim);font-size:12px;letter-spacing:2px;}
.menu-foot .dot{margin:0 8px;opacity:.5;}

/* ---------------- settings ---------------- */
.settings-grid{display:grid;grid-template-columns:190px 1fr;gap:11px 14px;align-items:center;font-size:13.5px;}
.settings-grid label{color:var(--dim);letter-spacing:1px;}
.rowflex{display:flex;align-items:center;gap:10px;}
.rowflex .val{min-width:34px;text-align:right;color:var(--accent2);font-variant-numeric:tabular-nums;}
input[type=range]{width:100%;accent-color:var(--accent);}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;}
input[type=text]{background:#0b1220;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 10px;font-family:var(--font);font-size:13px;width:100%;}
.controls-grid{display:grid;gap:6px;font-size:12.5px;color:#b9c8e4;}
.controls-grid b{color:var(--accent);margin-right:6px;}

/* ---------------- lobby ---------------- */
#screen-lobby{background:rgba(4,7,13,.82);backdrop-filter:blur(4px);justify-content:flex-start;padding:18px 20px;}
.lobby-top{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 6px 12px;border-bottom:1px solid var(--line);}
.lobby-title{font-size:24px;letter-spacing:8px;font-weight:800;}
.lobby-room{color:var(--accent2);font-size:12px;letter-spacing:2px;}
.lobby-coins{color:var(--accent);font-size:16px;font-weight:800;}
.lobby-coins i{font-style:normal;font-size:11px;color:var(--dim);letter-spacing:2px;}
.lobby-body{flex:1;width:100%;display:grid;grid-template-columns:1fr 340px 1fr;gap:16px;padding:14px 6px;min-height:0;}
.lobby-col{background:rgba(10,16,27,.72);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;min-height:0;}
.lobby-col.center{align-items:center;}
.col-head{font-size:11px;letter-spacing:4px;color:var(--dim);margin-bottom:10px;display:flex;justify-content:space-between;}
.player-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;}
.pcard{display:flex;align-items:center;gap:10px;background:#0d1627;border:1px solid var(--line);border-radius:10px;padding:8px 10px;}
.pcard.ready{border-color:var(--good);box-shadow:0 0 0 1px rgba(84,224,138,.25) inset;}
.pcard canvas{border-radius:8px;background:#0a101c;}
.pcard .pn{flex:1;min-width:0;}
.pcard .pn b{display:block;font-size:13.5px;}
.pcard .pn small{color:var(--dim);font-size:11px;letter-spacing:1px;}
.pcard .pstate{font-size:10.5px;letter-spacing:2px;color:var(--dim);}
.pcard .pstate.on{color:var(--good);}
.pcard .kick{background:none;border:none;color:#6b7a96;cursor:pointer;font-size:14px;}
.pcard .kick:hover{color:var(--bad);}
.join-hint{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.join-hint .hint{width:100%;margin:6px 0 0;}
#char-preview{width:300px;height:320px;}
.cust-tabs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:6px 0;}
.tab{padding:5px 11px;border-radius:20px;background:#0d1627;border:1px solid var(--line);font-size:11px;letter-spacing:2px;cursor:pointer;color:var(--dim);}
.tab.on{background:var(--accent);color:#231500;border-color:var(--accent);font-weight:800;}
.cust-items{flex:1;overflow:auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:flex-start;width:100%;padding:4px;}
.citem{padding:6px 10px;border-radius:8px;background:#0d1627;border:1px solid var(--line);font-size:11.5px;cursor:pointer;}
.citem:hover{border-color:rgba(160,200,255,.55);}
.citem.on{border-color:var(--accent);color:var(--accent);}
.citem.locked{opacity:.45;cursor:not-allowed;}
.citem .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.4);}
.cust-actions{display:flex;gap:8px;margin-top:6px;}
.map-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;}
.mapcard{display:flex;align-items:center;gap:10px;background:#0d1627;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;}
.mapcard:hover{border-color:rgba(160,200,255,.5);}
.mapcard.voted{border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,180,61,.3) inset;}
.mapcard canvas{border-radius:7px;}
.mapcard .mi{flex:1;}
.mapcard .mi b{display:block;font-size:13.5px;}
.mapcard .mi small{color:var(--dim);font-size:11px;}
.votes{display:flex;gap:3px;align-items:center;}
.votedot{width:9px;height:9px;border-radius:50%;background:var(--accent);}
.lobby-foot{width:100%;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);}
.ready-status{color:var(--dim);letter-spacing:3px;font-size:13px;}

/* ---------------- shop ---------------- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;max-height:58vh;overflow:auto;padding:4px;}
.sitem{background:#0d1627;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;cursor:pointer;}
.sitem:hover{border-color:rgba(160,200,255,.5);}
.sitem canvas{background:#080e19;border-radius:8px;}
.sitem b{display:block;font-size:12.5px;margin-top:6px;}
.sitem small{color:var(--accent);font-size:11.5px;letter-spacing:1px;}
.sitem.owned{border-color:var(--good);}
.sitem.owned small{color:var(--good);}
.sitem.cant small{color:var(--bad);}
.coinpill{float:right;font-size:13px;color:var(--accent);letter-spacing:1px;}

/* ---------------- class pick ---------------- */
.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.classcard{background:#0d1627;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;cursor:pointer;transition:transform .1s, border-color .15s;}
.classcard:hover{transform:translateY(-4px);border-color:var(--accent);}
.classcard canvas{background:radial-gradient(circle at 50% 40%, #16233b, #0a101c);border-radius:10px;}
.classcard b{display:block;font-size:16px;letter-spacing:2px;margin-top:8px;}
.classcard .weap{color:var(--accent2);font-size:11.5px;letter-spacing:1px;margin-top:2px;}
.classcard p{color:var(--dim);font-size:12px;line-height:1.45;margin:8px 0 0;}
.classcard .keyhint{margin-top:8px;font-size:10.5px;letter-spacing:2px;color:var(--dim);}

/* ---------------- cards ---------------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.upcard{
  background:linear-gradient(180deg,#152038,#0c1424);border:2px solid var(--line);border-radius:16px;
  padding:16px;cursor:pointer;text-align:center;transition:transform .12s, box-shadow .2s, border-color .2s;
  display:flex;flex-direction:column;align-items:center;gap:6px;min-height:230px;
}
.upcard:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 40px rgba(0,0,0,.6);}
.upcard .rar{font-size:10px;letter-spacing:3px;}
.upcard .ic{font-size:34px;line-height:1;}
.upcard b{font-size:16px;letter-spacing:1px;}
.upcard p{color:#b9c8e4;font-size:12.5px;line-height:1.5;margin:2px 0 0;}
.upcard .lvl{margin-top:auto;font-size:11px;color:var(--dim);letter-spacing:2px;}
.upcard.common{border-color:#5a6c8c;}
.upcard.rare{border-color:#4fb2ff;box-shadow:0 0 22px rgba(79,178,255,.16);}
.upcard.epic{border-color:#c07bff;box-shadow:0 0 26px rgba(192,123,255,.2);}
.upcard.legend{border-color:#ffc247;box-shadow:0 0 32px rgba(255,194,71,.28);}
.upcard.common .rar{color:#8ea3c4}.upcard.rare .rar{color:#4fb2ff}
.upcard.epic .rar{color:#c07bff}.upcard.legend .rar{color:#ffc247}
.cards-foot{margin-top:14px;display:flex;justify-content:space-between;align-items:center;color:var(--dim);font-size:12px;letter-spacing:2px;}

/* ---------------- gameover ---------------- */
.go-stats{max-height:46vh;overflow:auto;}
table.stats{width:100%;border-collapse:collapse;font-size:13px;}
table.stats th{color:var(--dim);font-size:10.5px;letter-spacing:2px;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);}
table.stats td{padding:8px;border-bottom:1px solid rgba(120,160,220,.1);}
table.stats td.nm{font-weight:700;}
table.stats tr.me td{background:rgba(255,180,61,.07);}
.go-reward{margin-top:14px;text-align:center;font-size:15px;letter-spacing:2px;}
.go-reward b{color:var(--accent);font-size:26px;}

/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;z-index:6;pointer-events:none;display:none;font-size:13px;}
#hud.show{display:block;}
#hud-top{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;}
.hud-chip{background:rgba(9,14,24,.78);border:1px solid var(--line);border-radius:10px;padding:6px 14px;letter-spacing:3px;font-size:12px;color:#cfe0ff;}
.hud-chip.big{font-size:22px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;padding:4px 18px;}
.hud-chip.warn{color:var(--bad);border-color:var(--bad);}
#hud-board{position:absolute;top:12px;right:12px;background:rgba(9,14,24,.78);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-width:216px;}
.bd-title{font-size:10px;letter-spacing:3px;color:var(--dim);margin-bottom:6px;}
.bd-row{display:flex;align-items:center;gap:7px;font-size:12px;padding:3px 0;}
.bd-row .sw{width:9px;height:9px;border-radius:50%;}
.bd-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bd-row .dm{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700;}
.bd-row.down{opacity:.45;text-decoration:line-through;}
#hud-wave{position:absolute;top:56px;left:50%;transform:translateX(-50%);color:var(--bad);letter-spacing:6px;font-size:15px;font-weight:800;text-shadow:0 2px 12px #000;opacity:0;transition:opacity .3s;}
#hud-wave.show{opacity:1;}
#hud-players{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;}
.ppill{display:flex;align-items:center;gap:8px;background:rgba(9,14,24,.78);border:1px solid var(--line);border-radius:10px;padding:5px 9px;min-width:212px;}
.ppill .av{width:26px;height:26px;border-radius:6px;background:#0a101c;}
.ppill .info{flex:1;}
.ppill .nm{font-size:11.5px;display:flex;justify-content:space-between;}
.ppill .nm i{font-style:normal;color:var(--dim);font-size:10px;letter-spacing:1px;}
.bar{height:5px;border-radius:4px;background:#1b2437;overflow:hidden;margin-top:3px;}
.bar > i{display:block;height:100%;border-radius:4px;transition:width .12s linear;}
.bar.hp > i{background:linear-gradient(90deg,#ff5a6a,#ff9aa4);}
.bar.xp > i{background:linear-gradient(90deg,#3ddcff,#9ef1ff);}
.ppill.down{opacity:.5;}
.ppill.down .nm{color:var(--bad);}
#hud-chat{position:absolute;left:12px;bottom:112px;width:390px;pointer-events:none;}
#chat-log{display:flex;flex-direction:column;gap:3px;max-height:190px;overflow:hidden;justify-content:flex-end;}
.cmsg{background:rgba(9,14,24,.72);border-left:3px solid var(--accent2);border-radius:5px;padding:4px 8px;font-size:12.5px;animation:fadein .2s;max-width:100%;}
.cmsg b{color:var(--accent2);}
.cmsg.sys{border-left-color:var(--accent);color:var(--accent);font-size:11.5px;letter-spacing:1px;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
#chat-input{display:none;margin-top:6px;pointer-events:auto;background:rgba(6,10,18,.95);border:1px solid var(--accent2);}
#chat-input.show{display:block;}
#hud-toast{position:absolute;top:96px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:5px;align-items:center;}
.toast{background:rgba(9,14,24,.85);border:1px solid var(--accent);border-radius:9px;padding:6px 16px;font-size:12.5px;letter-spacing:2px;color:var(--accent);animation:fadein .2s;}

/* boss bar */
#boss-bar{position:fixed;top:78px;left:50%;transform:translateX(-50%);width:min(640px,80vw);z-index:7;display:none;}
#boss-bar.show{display:block;}
.bb-name{text-align:center;letter-spacing:6px;font-size:13px;color:var(--bad);text-shadow:0 2px 10px #000;margin-bottom:4px;font-weight:800;}
.bb-track{height:13px;background:rgba(9,14,24,.85);border:1px solid var(--bad);border-radius:8px;overflow:hidden;}
.bb-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff2d45,#ff8a3d);transition:width .15s linear;}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#243352;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#31456d}

@media (max-width:1080px){
  .lobby-body{grid-template-columns:1fr;overflow:auto;}
  .class-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:1fr;}
}

/* ---------------- menu legibility over the campfire ---------------- */
/* the main menu sits on top of a bright animated fire, so its buttons
   need their own backdrop or the ghost button vanishes into the flames */
#screen-menu .btn{box-shadow:0 10px 30px rgba(0,0,0,.55);}
#screen-menu .btn.ghost{background:rgba(10,16,26,.78);color:#c9d6ea;border-color:rgba(150,180,230,.35);}
#screen-menu .btn.ghost:hover{color:#fff;border-color:rgba(190,215,255,.6);}
#screen-menu .menu-foot{text-shadow:0 2px 8px #000;}
#screen-menu .title-wrap{text-shadow:0 4px 24px rgba(0,0,0,.8);}
/* lift the title + buttons into the sky so the crew round the fire
   stays visible underneath them */
#screen-menu{justify-content:flex-start;padding-top:5vh;gap:2.2vh;}
#screen-menu .menu-foot{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);}

/* ================= upgrade cards (reworked) ================= */
#screen-cards .panel{
  background:linear-gradient(180deg,rgba(13,20,36,.96),rgba(8,12,22,.98));
  border-color:rgba(120,160,230,.22);
  box-shadow:0 40px 120px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
}
#cards-title{
  background:linear-gradient(90deg,#fff,#9ec7ff 60%,#6f9fe0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:5px;
}
.card-grid{gap:20px;perspective:1200px;}

.upcard{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(175deg,#1a2740 0%,#111b2e 45%,#0a1120 100%);
  border-width:2px;border-radius:18px;padding:16px 14px 14px;
  min-height:360px;gap:2px;
  animation:cardIn .42s cubic-bezier(.2,.9,.3,1.2) both;
  animation-delay:var(--d,0ms);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s, border-color .22s;
  will-change:transform;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(34px) rotateX(-14deg) scale(.94);}
  to{opacity:1;transform:none;}
}
.upcard:hover{transform:translateY(-10px) scale(1.035);}
.upcard:active{transform:translateY(-4px) scale(1.01);}

/* sweeping sheen that lives behind the content */
.uc-glow{
  position:absolute;inset:-40% -60%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,var(--rc,#4fb2ff) 40deg,transparent 90deg);
  opacity:.16;animation:ucSpin 7s linear infinite;
}
@keyframes ucSpin{to{transform:rotate(360deg);}}
.upcard:hover .uc-glow{opacity:.34;}

.upcard .rar{
  font-size:10px;letter-spacing:4px;font-weight:800;opacity:.95;
}
.uc-art{
  width:100%;height:150px;display:flex;align-items:center;justify-content:center;
  margin:2px 0 4px;
}
.uc-art canvas{width:150px;height:150px;}
.upcard b{font-size:16.5px;letter-spacing:.5px;line-height:1.2;}
.upcard p{font-size:12.5px;color:#aebfdd;min-height:54px;}

.uc-key{
  font-size:9.5px;letter-spacing:3px;font-weight:800;color:#0b1018;
  background:linear-gradient(90deg,#ffd76a,#ffb43d);
  padding:3px 10px;border-radius:20px;margin-bottom:2px;
  box-shadow:0 0 18px rgba(255,190,80,.5);
}

.upcard .lvl{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;margin-top:auto;padding-top:8px;
  border-top:1px solid rgba(140,175,230,.14);
}
.uc-num{
  width:19px;height:19px;border-radius:5px;display:grid;place-items:center;
  background:rgba(150,185,240,.13);color:#b9cdee;font-size:11px;font-weight:800;
}
.pips{display:flex;gap:4px;}
.pips i{width:9px;height:9px;border-radius:2px;background:rgba(150,185,240,.2);}
.pips i.on{background:var(--rc,#4fb2ff);box-shadow:0 0 8px var(--rc,#4fb2ff);}

/* rarity drives the sheen, pips and border together */
.upcard.common{--rc:#8ea3c4;border-color:#5a6c8c;}
.upcard.rare{--rc:#4fb2ff;border-color:#4fb2ff;box-shadow:0 0 26px rgba(79,178,255,.18);}
.upcard.epic{--rc:#c07bff;border-color:#c07bff;box-shadow:0 0 30px rgba(192,123,255,.22);}
.upcard.legend{--rc:#ffc247;border-color:#ffc247;box-shadow:0 0 38px rgba(255,194,71,.32);}
.upcard.rare:hover{box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 40px rgba(79,178,255,.34);}
.upcard.epic:hover{box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 46px rgba(192,123,255,.4);}
.upcard.legend:hover{box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 56px rgba(255,194,71,.5);}
.upcard.common:hover{box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 26px rgba(142,163,196,.3);}

/* legendaries get a slow breathing pulse so they stand out immediately */
.upcard.legend{animation:cardIn .42s cubic-bezier(.2,.9,.3,1.2) both, legendPulse 2.6s ease-in-out infinite 1s;}
@keyframes legendPulse{
  0%,100%{box-shadow:0 0 38px rgba(255,194,71,.32);}
  50%{box-shadow:0 0 62px rgba(255,194,71,.6);}
}

/* ================= summon panel (E) ================= */
#hud-summon{
  position:absolute;right:12px;bottom:12px;display:none;
  align-items:center;gap:10px;padding:8px 10px;
  background:rgba(9,14,24,.82);border:1px solid var(--line);border-radius:12px;
  min-width:186px;
}
#hud-summon.show{display:flex;}
#hud-summon canvas{background:#0a101c;border-radius:8px;}
#hud-summon .sm-info{flex:1;}
#hud-summon .sm-name{font-size:11px;letter-spacing:2px;color:#cfe0ff;}
#hud-summon .sm-count{font-size:15px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums;}
#hud-summon .sm-count b{color:#fff;}
#hud-summon .sm-count i{font-style:normal;}
#hud-summon .sm-key{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:rgba(150,185,240,.12);color:#8fa9cc;font-size:12px;font-weight:800;
  border:1px solid rgba(150,185,240,.25);
}
#hud-summon .sm-cd{
  position:absolute;left:10px;right:10px;bottom:5px;height:3px;
  background:#1b2437;border-radius:3px;overflow:hidden;
}
#hud-summon .sm-cd > i{display:block;height:100%;width:0;background:#5b6472;border-radius:3px;}
#hud-summon.ready{border-color:var(--good);box-shadow:0 0 0 1px rgba(84,224,138,.2) inset;}
#hud-summon.ready .sm-key{background:var(--good);color:#06120a;border-color:var(--good);}
#hud-summon.ready .sm-cd > i{background:var(--good);}
#hud-summon.full .sm-count b{color:var(--accent);}
#hud-summon.full .sm-key{background:rgba(150,185,240,.12);color:#8fa9cc;border-color:rgba(150,185,240,.25);}

/* five classes now, so the picker needs a fifth column */
.class-grid{grid-template-columns:repeat(5,1fr);gap:10px;}
.classcard{padding:12px 10px;}
.classcard canvas{width:100px;height:100px;}
.classcard b{font-size:14px;letter-spacing:1px;}
.classcard p{font-size:11.5px;}
@media (max-width:1100px){ .class-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .class-grid{grid-template-columns:repeat(2,1fr);} }

/* the minimap is drawn bottom-right on the canvas, so the summon panel
   moves to the bottom centre where nothing else lives */
#hud-summon{
  right:auto;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;
}

/* ---------------- lobby name field ---------------- */
.name-row{width:100%;display:flex;justify-content:center;margin:2px 0 6px;}
#lobby-name{
  width:min(240px,90%);text-align:center;
  background:#0d1627;border:1px solid var(--line);border-radius:9px;
  padding:7px 12px;color:#fff;font-size:15px;font-weight:700;letter-spacing:2px;
  transition:border-color .15s, box-shadow .15s;
}
#lobby-name::placeholder{color:var(--dim);font-weight:400;letter-spacing:1px;}
#lobby-name:hover{border-color:rgba(160,200,255,.5);}
#lobby-name:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,180,61,.14);}

/* ============ customisation: scrollable image grid ============ */
.cust-items{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  align-content:start;justify-content:stretch;
  max-height:300px;overflow-y:auto;overflow-x:hidden;
  padding:4px 6px 4px 4px;width:100%;
}
.cust-items::-webkit-scrollbar{width:8px;}
.cust-items::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px;}
.cust-items::-webkit-scrollbar-thumb{background:rgba(150,185,240,.28);border-radius:4px;}
.cust-items::-webkit-scrollbar-thumb:hover{background:rgba(150,185,240,.45);}

.citem{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 6px 7px;border-radius:11px;
  background:#0d1627;border:1px solid var(--line);cursor:pointer;
  transition:border-color .14s, transform .14s, box-shadow .18s;
}
.citem:hover{border-color:rgba(160,200,255,.55);transform:translateY(-2px);}
.citem.on{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset, 0 0 18px rgba(255,180,61,.22);
}
.citem.locked{opacity:.5;cursor:not-allowed;}
.citem.locked:hover{transform:none;}
.ci-art{
  width:100%;max-width:96px;height:auto;aspect-ratio:1;
  background:radial-gradient(circle at 50% 42%, #16233b, #0a101c);
  border-radius:8px;
}
.ci-name{
  font-size:11px;line-height:1.25;text-align:center;color:#cfe0ff;
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.citem.on .ci-name{color:var(--accent);font-weight:700;}
.ci-lock{
  position:absolute;top:6px;right:6px;
  background:rgba(8,12,20,.9);border:1px solid var(--accent);
  color:var(--accent);font-size:10px;font-weight:800;
  padding:2px 6px;border-radius:20px;
}

/* ================== shop: category tabs ================== */
#shop-tabs{margin:4px 0 12px;}
#shop-tabs .tab i{
  font-style:normal;background:var(--accent);color:#231500;
  font-size:9px;font-weight:800;padding:1px 5px;border-radius:20px;margin-left:5px;
}
#shop-tabs .tab.on i{background:#231500;color:var(--accent);}
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
.sitem canvas{width:84px;height:92px;}
.shop-empty{
  grid-column:1/-1;text-align:center;color:var(--dim);
  padding:34px 10px;font-size:13px;letter-spacing:1px;
}

/* give the cosmetic grid room to breathe: the preview no longer eats
   the whole column, and the grid scrolls in the space that frees up */
.lobby-col.center{justify-content:flex-start;}
#char-preview{width:210px;height:196px;flex:0 0 auto;}
.cust-items{max-height:none;flex:1 1 auto;min-height:190px;}
.cust-tabs{flex:0 0 auto;}
.cust-actions{flex:0 0 auto;}

/* ================= big XP dock (bottom centre) =================
   The XP bar used to be a 3px sliver inside each player pill, which made
   levelling feel like nothing happened. It now owns the bottom of the
   screen, collects gems that fly into it, and makes a fuss on level up. */
#xp-dock{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:96px; width:min(660px, 62vw);
  display:none; flex-direction:column; align-items:center; gap:4px;
  pointer-events:none; z-index:6;
}
#xp-dock.show{display:flex;}

#xp-dock .xd-row{display:flex; align-items:center; gap:12px; width:100%;}

#xp-dock .xd-lvl{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:54px; padding:5px 9px;
  background:rgba(9,14,24,.88); border:1px solid var(--line); border-radius:11px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#xp-dock .xd-lvl b{font-size:20px; font-weight:900; color:#eaf3ff; line-height:1;}
#xp-dock .xd-lvl i{font-size:8px; font-style:normal; letter-spacing:2.2px; color:#7d90ad; margin-top:2px;}

#xp-dock .xd-mid{flex:1; display:flex; flex-direction:column; gap:3px;}

#xp-dock .xd-track{
  position:relative; height:20px; border-radius:11px; overflow:hidden;
  background:rgba(8,13,22,.9); border:1px solid var(--line);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.55);
}
#xp-dock .xd-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,#2aa7d8,#3ddcff 55%,#9ef1ff);
  border-radius:11px;
  box-shadow:0 0 14px rgba(61,220,255,.5);
  transition:width .16s cubic-bezier(.2,.8,.3,1);
}
/* a paler bar that lags behind the real one, so a big gain reads as a surge */
#xp-dock .xd-ghost{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:rgba(158,241,255,.28); border-radius:11px;
  transition:width .5s ease-out;
}
#xp-dock .xd-shine{
  position:absolute; top:0; bottom:0; width:60px; left:-70px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  opacity:0;
}
#xp-dock.gain .xd-shine{animation:xdShine .55s ease-out;}
@keyframes xdShine{
  0%{opacity:.9; left:-70px;}
  100%{opacity:0; left:100%;}
}

#xp-dock .xd-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10.5px; letter-spacing:1.4px; color:#8fa6c4;
  font-variant-numeric:tabular-nums;
}
#xp-dock .xd-pending{color:var(--accent); font-weight:800;}
#xp-dock .xd-pending.none{opacity:0;}

/* level-up flourish */
#xp-dock .xd-pop{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%) scale(.6);
  font-size:20px; font-weight:900; letter-spacing:5px;
  color:#fff; text-shadow:0 0 18px rgba(61,220,255,.9), 0 2px 6px #000;
  opacity:0;
}
#xp-dock.levelup .xd-pop{animation:xdPop 1.1s ease-out;}
@keyframes xdPop{
  0%{opacity:0; transform:translateX(-50%) scale(.55);}
  18%{opacity:1; transform:translateX(-50%) scale(1.18);}
  36%{transform:translateX(-50%) scale(1);}
  75%{opacity:1;}
  100%{opacity:0; transform:translateX(-50%) scale(1.05) translateY(-14px);}
}
#xp-dock.levelup .xd-lvl{
  transform:scale(1.22);
  border-color:var(--accent);
  box-shadow:0 0 22px rgba(255,210,61,.55);
}
#xp-dock.levelup .xd-track{border-color:var(--accent);}

/* the summon panel sits below the dock rather than on top of it */
#hud-summon{bottom:20px;}

@media (max-width:820px){
  #xp-dock{width:86vw; bottom:86px;}
}

/* ---------------- special (merge) rarity ----------------
   These only appear once two upgrades are fully maxed, so they get the
   loudest treatment on the card screen: red, and they never sit still. */
.upcard.special{
  --rc:#ff4a4a;
  border-color:#ff4a4a;
  box-shadow:0 0 42px rgba(255,74,74,.4);
  animation:cardIn .42s cubic-bezier(.2,.9,.3,1.2) both, specialPulse 1.7s ease-in-out infinite .6s;
}
.upcard.special .rar{color:#ff6b6b; letter-spacing:4px;}
.upcard.special:hover{box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 64px rgba(255,74,74,.62);}
@keyframes specialPulse{
  0%,100%{box-shadow:0 0 30px rgba(255,74,74,.32);}
  50%{box-shadow:0 0 56px rgba(255,74,74,.62);}
}

/* ============ bottom dock row: ability + summon side by side ============ */
#hud-docks{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:20px; display:flex; gap:10px; align-items:flex-end;
  pointer-events:none; z-index:5;
}
/* the panels are laid out by the row now, not individually placed */
#hud-docks #hud-summon,
#hud-docks #hud-ability{
  position:relative; left:auto; right:auto; bottom:auto; transform:none;
}

#hud-ability{
  display:none; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(9,14,24,.82); border:1px solid var(--line); border-radius:12px;
  min-width:172px;
}
#hud-ability.show{display:flex;}
#hud-ability canvas{background:#0a101c;border-radius:8px;}
#hud-ability .sm-info{flex:1;}
#hud-ability .sm-name{font-size:11px;letter-spacing:2px;color:#cfe0ff;}
#hud-ability .sm-count{font-size:13px;font-weight:800;color:var(--dim);}
#hud-ability .sm-count b{color:#fff;}
#hud-ability .sm-key{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:rgba(150,185,240,.12);color:#8fa9cc;font-size:12px;font-weight:800;
  border:1px solid rgba(150,185,240,.25);
}
#hud-ability .sm-cd{
  position:absolute;left:10px;right:10px;bottom:5px;height:3px;
  background:#1b2437;border-radius:3px;overflow:hidden;
}
#hud-ability .sm-cd > i{display:block;height:100%;width:0;background:#5b6472;border-radius:3px;}
#hud-ability.ready{border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,210,61,.22) inset;}
#hud-ability.ready .sm-key{background:var(--accent);color:#1a1200;border-color:var(--accent);}
#hud-ability.ready .sm-cd > i{background:var(--accent);}
#hud-ability.ready .sm-count b{color:var(--accent);}

/* ========================== achievements ========================== */
.achv-list{
  display:flex; flex-direction:column; gap:8px;
  max-height:min(56vh,460px); overflow-y:auto; padding:4px 6px 4px 2px; margin-top:6px;
}
.achv-list::-webkit-scrollbar{width:9px;}
.achv-list::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:5px;}
.achv-list::-webkit-scrollbar-thumb{background:rgba(150,185,240,.28);border-radius:5px;}

.achv{
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  background:rgba(13,20,33,.8); border:1px solid var(--line); border-radius:12px;
  opacity:.72;
}
.achv.done{opacity:1; border-color:rgba(255,194,71,.5); background:rgba(28,24,12,.68);}
.achv-art{background:#0a101c; border-radius:9px; flex:0 0 auto;}
.achv-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.achv-txt b{font-size:13.5px; color:#eaf3ff; letter-spacing:.4px;}
.achv-txt small{font-size:11px; color:#8fa6c4;}
.achv-bar{height:5px; background:#141d2e; border-radius:3px; overflow:hidden; margin-top:3px;}
.achv-bar > i{display:block; height:100%; background:linear-gradient(90deg,#2aa7d8,#9ef1ff); border-radius:3px;}
.achv.done .achv-bar > i{background:linear-gradient(90deg,#c8981f,#ffd77a);}
.achv-prog{font-size:10px; color:#7d90ad; font-variant-numeric:tabular-nums;}
.achv-prize{
  flex:0 0 150px; text-align:right; display:flex; flex-direction:column; gap:2px;
}
.achv-prize b{font-size:10px; letter-spacing:2px; color:#6d7f9c;}
.achv.done .achv-prize b{color:var(--accent);}
.achv-prize small{font-size:11px; color:#a8bcd8;}

/* the little list of things you just earned on the game over screen */
.achv-won{
  margin-top:8px; display:flex; flex-direction:column; gap:3px;
  font-size:12px; color:#ffd77a;
}
.achv-won b{letter-spacing:2px; font-size:10px; color:var(--accent);}

@media (max-width:760px){
  .achv-prize{flex-basis:96px;}
}

/* the dock row only exists during a run */
#hud-docks{display:none;}
#hud-docks.show{display:flex;}

/* ===================== round complete banner ===================== */
#round-banner{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  pointer-events:none; z-index:20;
}
#round-banner.show{display:flex;}
#round-banner .rb-inner{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:rbIn .5s cubic-bezier(.2,.9,.3,1.3) both;
}
#round-banner.out .rb-inner{animation:rbOut .45s ease-in both;}
#round-banner .rb-title{
  font-size:54px; font-weight:900; letter-spacing:10px; color:#fff;
  text-shadow:0 0 34px rgba(61,220,255,.75), 0 4px 10px #000;
}
#round-banner .rb-sub{
  font-size:20px; font-weight:800; letter-spacing:12px; color:var(--accent);
  text-shadow:0 0 20px rgba(255,210,61,.6), 0 2px 6px #000;
}
#round-banner .rb-line{
  width:min(420px,52vw); height:2px;
  background:linear-gradient(90deg,transparent,rgba(158,241,255,.9),transparent);
}
@keyframes rbIn{
  0%{opacity:0; transform:scale(.7) translateY(18px);}
  60%{opacity:1; transform:scale(1.06) translateY(0);}
  100%{opacity:1; transform:scale(1);}
}
@keyframes rbOut{
  0%{opacity:1; transform:scale(1);}
  100%{opacity:0; transform:scale(1.12) translateY(-16px);}
}

/* cards slide out when the last pick is made */
#screen-cards.closing .panel{animation:cardsOut .32s ease-in both;}
@keyframes cardsOut{
  0%{opacity:1; transform:translateY(0) scale(1);}
  100%{opacity:0; transform:translateY(24px) scale(.94);}
}

/* ===================== vendor + EHS summon docks =====================
   Two extra manager callouts sitting alongside the E dock. They inherit
   the summon panel's look so the whole row reads as one control strip. */
#hud-vendor, #hud-ehs{
  position:relative; left:auto; right:auto; bottom:auto; transform:none;
  display:none; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(9,14,24,.82); border:1px solid var(--line); border-radius:12px;
  min-width:168px;
}
#hud-vendor.show, #hud-ehs.show{display:flex;}
#hud-vendor canvas, #hud-ehs canvas{background:#0a101c;border-radius:8px;}
#hud-vendor .sm-info, #hud-ehs .sm-info{flex:1;}
#hud-vendor .sm-name, #hud-ehs .sm-name{font-size:11px;letter-spacing:2px;color:#cfe0ff;}
#hud-vendor .sm-count, #hud-ehs .sm-count{
  font-size:15px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums;
}
#hud-vendor .sm-count b, #hud-ehs .sm-count b{color:#fff;}
#hud-vendor .sm-count i, #hud-ehs .sm-count i{font-style:normal;}
#hud-vendor .sm-key, #hud-ehs .sm-key{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:#101a2c;border:1px solid var(--line);
  font-size:12px;font-weight:800;color:#8fa4c4;
}
#hud-vendor .sm-cd, #hud-ehs .sm-cd{
  position:absolute;left:10px;right:10px;bottom:4px;height:3px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
#hud-vendor .sm-cd i, #hud-ehs .sm-cd i{
  display:block;height:100%;width:0%;border-radius:2px;
  background:#c07bff;transition:width .08s linear;
}
#hud-vendor.ready{border-color:#c07bff;box-shadow:0 0 18px rgba(192,123,255,.3);}
#hud-vendor.ready .sm-key{background:#2a1740;border-color:#c07bff;color:#e2c8ff;}
#hud-ehs.ready{border-color:#7dff9e;box-shadow:0 0 18px rgba(125,255,158,.28);}
#hud-ehs.ready .sm-key{background:#14301d;border-color:#7dff9e;color:#c7ffd8;}
#hud-ehs.ready .sm-cd i{background:#7dff9e;}
#hud-vendor.full, #hud-ehs.full{opacity:.62;}

/* ===================== B: your upgrades ===================== */
#hud-upghint{
  position:absolute; left:246px; bottom:14px;
  display:flex; align-items:center; gap:7px;
  padding:6px 11px 6px 8px;
  background:rgba(9,14,24,.82); border:1px solid var(--line); border-radius:10px;
  pointer-events:none; z-index:4;
}
#hud-upghint b{
  width:20px; height:20px; border-radius:5px; display:grid; place-items:center;
  background:#101a2c; border:1px solid var(--line);
  font-size:11px; font-weight:800; color:#8fa4c4;
}
#hud-upghint span{font-size:10px; letter-spacing:2px; color:#8fa4c4;}
#hud-upghint.lit{border-color:#9fd6ff; box-shadow:0 0 16px rgba(159,214,255,.28);}
#hud-upghint.lit b{background:#16283f; border-color:#9fd6ff; color:#dff0ff;}
#hud-upghint.lit span{color:#dff0ff;}

#upg-panel{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,8,14,.72); z-index:30;
}
#upg-panel.show{display:flex; animation:upIn .16s ease-out both;}
@keyframes upIn{from{opacity:0} to{opacity:1}}
#upg-panel .up-inner{
  width:min(760px,92vw); max-height:82vh; display:flex; flex-direction:column;
  background:rgba(10,16,26,.97); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:upPop .2s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes upPop{from{transform:translateY(14px) scale(.98)} to{transform:none}}
#upg-panel .up-head{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 20px 12px; border-bottom:1px solid var(--line);
}
#upg-panel .up-title{font-size:16px; font-weight:800; letter-spacing:3px; color:#fff;}
#upg-panel .up-sub{flex:1; font-size:11px; letter-spacing:1px; color:var(--dim);}
#upg-panel .up-close{font-size:10px; letter-spacing:1px; color:var(--dim);}
#upg-panel .up-close b{color:#9fd6ff;}
#upg-panel .up-list{
  overflow-y:auto; padding:12px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:9px;
}
#upg-panel .up-empty{
  grid-column:1/-1; padding:34px; text-align:center;
  color:var(--dim); font-size:12px; letter-spacing:1px;
}
#upg-panel .up-item{
  display:flex; gap:10px; padding:9px 11px;
  background:#0d1524; border:1px solid var(--line);
  border-left-width:3px; border-radius:10px;
}
#upg-panel .up-art{background:#080d16; border-radius:7px; flex:none;}
#upg-panel .up-body{min-width:0;}
#upg-panel .up-name{
  font-size:12px; font-weight:800; letter-spacing:.6px; color:#fff;
  display:flex; align-items:center; gap:7px;
}
#upg-panel .up-stack{
  font-size:10px; font-weight:700; color:var(--dim);
  background:#101a2c; border-radius:5px; padding:1px 5px; font-variant-numeric:tabular-nums;
}
#upg-panel .up-item.maxed .up-stack{background:#1d2c1f; color:#7dff9e;}
#upg-panel .up-desc{
  margin-top:3px; font-size:10.5px; line-height:1.45; color:#9fb0c8;
}
/* rarity stripe down the left edge */
#upg-panel .up-item.common {border-left-color:#8b93a3;}
#upg-panel .up-item.rare   {border-left-color:#4fb2ff;}
#upg-panel .up-item.epic   {border-left-color:#c07bff;}
#upg-panel .up-item.legend {border-left-color:#ffb43d;}
#upg-panel .up-item.special{border-left-color:#ff4a4a;}

@media (max-width:820px){
  #upg-panel .up-list{grid-template-columns:1fr;}
  #hud-upghint{left:auto; right:12px; bottom:96px;}
}

/* ===================== Cutting-Edge rarity =====================
   The rarest cards in the deck: an iridescent border that keeps cycling,
   a prismatic sheen, and a tag reminding you it is a one-use summon. */
.upcard.cutting{
  --rc:#7df9ff;
  border-color:transparent;
  background:
    linear-gradient(175deg,#16233a 0%,#0f1a2d 45%,#0a1120 100%) padding-box,
    linear-gradient(115deg,#7df9ff,#b69cff,#ff8ad8,#ffe27a,#7df9ff) border-box;
  background-size:auto, 320% 320%;
  animation:cardIn .42s cubic-bezier(.2,.9,.3,1.2) both, cutShift 3.4s linear infinite, cutGlow 2.2s ease-in-out infinite;
}
.upcard.cutting .uc-glow{
  opacity:.26;
  background:conic-gradient(from 0deg,transparent 0deg,#7df9ff 30deg,#ff8ad8 70deg,#ffe27a 110deg,transparent 150deg);
}
.upcard.cutting .rar{
  background:linear-gradient(90deg,#7df9ff,#b69cff,#ff8ad8,#ffe27a,#7df9ff);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:4px; animation:cutShift 3.4s linear infinite;
}
.upcard.cutting:hover{box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 70px rgba(125,249,255,.55),0 0 110px rgba(255,138,216,.25);}
@keyframes cutShift{from{background-position:0% 50%, 0% 50%;} to{background-position:0% 50%, 320% 50%;}}
@keyframes cutGlow{
  0%,100%{box-shadow:0 0 40px rgba(125,249,255,.32),0 0 80px rgba(182,156,255,.14);}
  50%{box-shadow:0 0 64px rgba(125,249,255,.55),0 0 120px rgba(255,138,216,.24);}
}
.uc-key.cut{
  background:linear-gradient(90deg,#7df9ff,#b69cff,#ff8ad8);
  box-shadow:0 0 18px rgba(125,249,255,.5); color:#0b1018; letter-spacing:1.6px;
}
/* the B panel's rarity stripe */
#upg-panel .up-item.cutting{border-left-color:#7df9ff; box-shadow:inset 3px 0 12px -6px #ff8ad8;}

/* ===================== DCT (V) + CEOM (Y) docks ===================== */
#hud-dct, #hud-ceom{
  position:relative; left:auto; right:auto; bottom:auto; transform:none;
  display:none; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(9,14,24,.82); border:1px solid var(--line); border-radius:12px;
  min-width:160px;
}
#hud-dct.show, #hud-ceom.show{display:flex;}
#hud-dct canvas, #hud-ceom canvas{background:#0a101c;border-radius:8px;}
#hud-dct .sm-info, #hud-ceom .sm-info{flex:1;}
#hud-dct .sm-name, #hud-ceom .sm-name{font-size:11px;letter-spacing:2px;color:#cfe0ff;}
#hud-dct .sm-count, #hud-ceom .sm-count{font-size:15px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums;}
#hud-ceom .sm-count{font-size:12px;letter-spacing:1px;}
#hud-dct .sm-count b, #hud-ceom .sm-count b{color:#fff;}
#hud-dct .sm-count i{font-style:normal;}
#hud-dct .sm-key, #hud-ceom .sm-key{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:#101a2c;border:1px solid var(--line);
  font-size:12px;font-weight:800;color:#8fa4c4;
}
#hud-dct .sm-cd, #hud-ceom .sm-cd{
  position:absolute;left:10px;right:10px;bottom:4px;height:3px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
#hud-dct .sm-cd i, #hud-ceom .sm-cd i{display:block;height:100%;width:0%;border-radius:2px;background:#3aa0ff;transition:width .08s linear;}
#hud-dct.ready{border-color:#3aa0ff;box-shadow:0 0 18px rgba(58,160,255,.32);}
#hud-dct.ready .sm-key{background:#10233d;border-color:#3aa0ff;color:#cfe6ff;}
#hud-dct.full{opacity:.62;}
#hud-ceom{border-color:transparent;
  background:linear-gradient(rgba(9,14,24,.9),rgba(9,14,24,.9)) padding-box,
             linear-gradient(115deg,#7df9ff,#b69cff,#ff8ad8,#ffe27a,#7df9ff) border-box;
  background-size:auto,300% 300%; animation:cutShift 3.4s linear infinite;}
#hud-ceom .sm-cd i{background:linear-gradient(90deg,#ff5a4a,#ffd23d);}
#hud-ceom.ready{box-shadow:0 0 24px rgba(255,138,216,.35);}
#hud-ceom.ready .sm-key{background:#3a1420;border-color:#ff8ad8;color:#ffd6ea;}
/* the guard's dash readout has no "have / max" divider */
.sm-count.nodiv{font-size:0 !important;}
.sm-count.nodiv b{font-size:13px;letter-spacing:1px;}

/* ---------------- card refresh (batch 6) ---------------- */
.cards-tools{display:flex;justify-content:center;margin:14px 0 2px;}
.refresh-btn{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;border-radius:999px;
  font-size:13px;letter-spacing:.14em;font-weight:800;color:#dff6ff;
  background:linear-gradient(180deg,rgba(61,220,255,.18),rgba(61,220,255,.06));
  border:1px solid rgba(61,220,255,.55);box-shadow:0 0 18px rgba(61,220,255,.18), inset 0 0 12px rgba(61,220,255,.08);
  cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, background .2s ease;}
.refresh-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 0 26px rgba(61,220,255,.38), inset 0 0 14px rgba(61,220,255,.14);
  background:linear-gradient(180deg,rgba(61,220,255,.3),rgba(61,220,255,.1));}
.refresh-btn:hover:not([disabled]) .rf-ico{transform:rotate(200deg);}
.refresh-btn .rf-ico{display:inline-block;font-size:18px;line-height:1;transition:transform .45s cubic-bezier(.2,.9,.3,1.3);}
.refresh-btn .rf-pips{display:inline-flex;gap:5px;}
.refresh-btn .rf-pips i{width:9px;height:9px;border-radius:50%;border:1px solid rgba(61,220,255,.7);background:transparent;}
.refresh-btn .rf-pips i.on{background:#3ddcff;box-shadow:0 0 8px #3ddcff;}
.refresh-btn .rf-left{font-size:10px;color:var(--dim);letter-spacing:.12em;}
.refresh-btn[disabled]{opacity:.42;cursor:not-allowed;filter:grayscale(.6);box-shadow:none;}
.card-grid.reroll .upcard{animation:cardReroll .42s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--d,0ms);}
@keyframes cardReroll{0%{transform:rotateY(90deg) scale(.9);opacity:0;}100%{transform:none;opacity:1;}}

/* =====================================================================
   MENU + LOBBY REDESIGN (batch 6)
   Glassy panels, animated entrances, a living background and clearer
   hierarchy. Pure presentation: every id / data-act hook is unchanged.
   ===================================================================== */

/* ---------- shared bits ---------- */
.coin-ico{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#fff6c8 0 18%,#ffd35c 20% 55%,#d98a0c 58% 100%);
  box-shadow:0 0 0 1.5px #8a5200 inset, 0 0 10px rgba(255,190,70,.55);animation:coinSpin 3.2s ease-in-out infinite;}
@keyframes coinSpin{0%,70%,100%{transform:scaleX(1);}80%{transform:scaleX(.15);}90%{transform:scaleX(1);}}
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-26px) scale(1.06);filter:blur(6px);}100%{opacity:1;transform:none;filter:none;}}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-18deg);}60%,100%{transform:translateX(260%) skewX(-18deg);}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1;}50%{box-shadow:0 0 0 5px transparent;opacity:.65;}}

/* ---------- title screen ---------- */
#screen-menu .title-wrap{animation:dropIn .9s cubic-bezier(.2,.9,.25,1) both;}
.title-sub{display:flex;align-items:center;justify-content:center;gap:14px;color:#a9bde0;letter-spacing:8px;}
.title-sub i{display:block;width:70px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,180,61,.8));}
.title-sub i:last-child{background:linear-gradient(90deg,rgba(255,180,61,.8),transparent);}
.title .t-top,.title .t-bot{display:block;}
.title .t-top{color:#fff;font-size:1em;letter-spacing:12px;
  text-shadow:0 0 30px rgba(255,190,90,.55),0 6px 0 #6b3b00,0 12px 34px rgba(0,0,0,.85);
  animation:titleFloat 6s ease-in-out infinite;}
.title .t-bot{position:relative;font-size:.6em;letter-spacing:18px;margin-top:4px;
  color:transparent;text-shadow:none;
  background:linear-gradient(100deg,#ffb43d 0%,#ffb43d 38%,#fff4cf 48%,#ffb43d 58%,#ffb43d 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 22px rgba(255,180,61,.65)) drop-shadow(0 4px 0 #5a3000);
  animation:titleShine 5.5s linear infinite, titleFloat 6s ease-in-out -0.4s infinite;}
@keyframes titleShine{0%{background-position:100% 0;}55%,100%{background-position:0% 0;}}
@keyframes titleFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.title-tag{letter-spacing:5px;color:#d8e6ff;opacity:.85;}

.menu-btns{gap:12px;}
#screen-menu .btn.mbtn{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  width:360px;min-width:0;padding:11px 16px 11px 12px;text-align:left;border-radius:14px;letter-spacing:0;
  background:linear-gradient(180deg,rgba(24,36,60,.88),rgba(11,17,30,.9));
  border:1px solid rgba(140,180,240,.28);color:#e8f0ff;
  box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3), border-color .18s, box-shadow .2s, background .2s;
  animation:rise .6s cubic-bezier(.2,.9,.3,1) both;}
#screen-menu .btn.mbtn:nth-child(1){animation-delay:.25s;}
#screen-menu .btn.mbtn:nth-child(2){animation-delay:.35s;}
#screen-menu .btn.mbtn:nth-child(3){animation-delay:.45s;}
#screen-menu .btn.mbtn::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transform:translateX(-120%) skewX(-18deg);}
#screen-menu .btn.mbtn:hover::after{animation:sheen .9s ease-out;}
#screen-menu .btn.mbtn:hover{transform:translateY(-2px) scale(1.02);border-color:rgba(255,190,90,.7);
  box-shadow:0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,190,90,.25), 0 0 26px rgba(255,170,60,.22);}
#screen-menu .btn.mbtn:active{transform:translateY(1px) scale(.99);}
.mbtn .mb-ico{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#ffcf7a;background:rgba(255,180,61,.12);border:1px solid rgba(255,180,61,.35);}
.mbtn .mb-txt{flex:1;display:flex;flex-direction:column;gap:2px;}
.mbtn .mb-txt b{font-size:18px;letter-spacing:5px;font-weight:900;}
.mbtn .mb-txt small{font-size:11px;letter-spacing:1.5px;color:#9fb2d4;font-weight:600;}
.mbtn .mb-arrow{font-size:28px;line-height:1;color:rgba(255,200,120,.5);transition:transform .2s, color .2s;}
.mbtn:hover .mb-arrow{transform:translateX(5px);color:#ffcf7a;}
#screen-menu .btn.mbtn.primary{background:linear-gradient(180deg,#ffc964,#e89514);color:#2a1600;border-color:#ffe0a0;
  box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 30px rgba(255,170,50,.35), inset 0 1px 0 rgba(255,255,255,.5);
  animation:rise .6s cubic-bezier(.2,.9,.3,1) .25s both, playGlow 2.6s ease-in-out 1s infinite;}
#screen-menu .btn.mbtn.primary .mb-ico{background:rgba(60,30,0,.18);border-color:rgba(60,30,0,.3);color:#3a2000;}
#screen-menu .btn.mbtn.primary .mb-txt small{color:#6a4210;}
#screen-menu .btn.mbtn.primary .mb-arrow{color:#6a4210;}
#screen-menu .btn.mbtn.primary:hover{background:linear-gradient(180deg,#ffd888,#f2a326);border-color:#fff0c8;}
@keyframes playGlow{0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 22px rgba(255,170,50,.28), inset 0 1px 0 rgba(255,255,255,.5);}
  50%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 44px rgba(255,170,50,.6), inset 0 1px 0 rgba(255,255,255,.5);}}
#screen-menu .btn.mbtn.ghost{background:linear-gradient(180deg,rgba(16,24,40,.8),rgba(9,14,24,.84));color:#cdd9ee;}
#screen-menu .btn.mbtn.ghost .mb-ico{color:#9fb2d4;background:rgba(140,170,220,.08);border-color:rgba(140,170,220,.25);}
#screen-menu .menu-foot{display:flex;align-items:center;gap:0;padding:7px 16px;border-radius:999px;
  background:rgba(8,12,22,.72);border:1px solid rgba(140,180,240,.2);backdrop-filter:blur(6px);
  animation:rise .6s ease .6s both;}
.coin-pill{display:inline-flex;align-items:center;gap:7px;color:#ffd27a;font-weight:800;}

/* ---------- lobby: living background ---------- */
#screen-lobby{position:fixed;background:
  radial-gradient(1100px 620px at 12% -12%,rgba(61,220,255,.11),transparent 62%),
  radial-gradient(900px 560px at 108% 112%,rgba(255,180,61,.11),transparent 60%),
  rgba(4,7,13,.88);backdrop-filter:blur(6px);}
#screen-lobby > *{position:relative;z-index:1;}
#screen-lobby > .lobby-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.lobby-bg::before{content:'';position:absolute;inset:-60px;opacity:.5;
  background-image:linear-gradient(rgba(120,170,240,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,240,.07) 1px,transparent 1px);
  background-size:46px 46px;animation:gridDrift 24s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);}
@keyframes gridDrift{from{transform:translate(0,0);}to{transform:translate(46px,46px);}}
.lobby-bg .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;}
.lobby-bg .o1{width:380px;height:380px;left:-80px;top:30%;background:#1f7fd0;animation:orbA 18s ease-in-out infinite;}
.lobby-bg .o2{width:320px;height:320px;right:-60px;top:6%;background:#b0661a;animation:orbB 22s ease-in-out infinite;}
.lobby-bg .o3{width:260px;height:260px;left:45%;bottom:-120px;background:#6a3bd0;animation:orbA 26s ease-in-out -6s infinite;}
@keyframes orbA{0%,100%{transform:translate(0,0);}50%{transform:translate(90px,-60px);}}
@keyframes orbB{0%,100%{transform:translate(0,0);}50%{transform:translate(-80px,70px);}}

/* ---------- lobby: top + foot bars ---------- */
.lobby-top{padding:4px 8px 14px;border-bottom:1px solid rgba(120,170,240,.16);animation:rise .45s ease both;}
.lobby-title{display:flex;align-items:center;gap:12px;font-size:26px;letter-spacing:9px;font-weight:900;
  background:linear-gradient(90deg,#fff,#b9d4ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lobby-title small{font-size:10px;letter-spacing:4px;font-weight:700;color:#7f93b8;-webkit-text-fill-color:#7f93b8;margin-left:4px;align-self:flex-end;padding-bottom:5px;}
.lt-mark{width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,#ffcf6a,#e88a0e);
  box-shadow:0 0 14px rgba(255,170,50,.6);transform:rotate(45deg);animation:markSpin 6s ease-in-out infinite;}
@keyframes markSpin{0%,100%{transform:rotate(45deg);}50%{transform:rotate(225deg);}}
.lobby-room{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;font-weight:700;
  background:rgba(61,220,255,.08);border:1px solid rgba(61,220,255,.3);color:#8fe9ff;}
.lobby-room .room-dot{width:8px;height:8px;border-radius:50%;background:#3ddcff;color:rgba(61,220,255,.6);animation:pulseDot 1.8s ease-in-out infinite;}
.lobby-room.online{background:rgba(84,224,138,.09);border-color:rgba(84,224,138,.38);color:#9ff5c0;}
.lobby-room.online .room-dot{background:#54e08a;color:rgba(84,224,138,.6);}
.lobby-coins{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:rgba(255,180,61,.09);border:1px solid rgba(255,180,61,.32);font-size:16px;}
.lobby-foot{padding:12px 8px 0;border-top:1px solid rgba(120,170,240,.16);animation:rise .5s ease .25s both;}
.ready-status{padding:8px 18px;border-radius:999px;background:rgba(10,16,28,.7);border:1px solid rgba(120,170,240,.2);color:#b5c6e4;font-weight:700;}
.btn.ready-btn{position:relative;overflow:hidden;border-radius:14px;min-width:280px;
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 26px rgba(255,170,50,.3);}
.btn.ready-btn::after{content:'';position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:sheen 3.4s ease-in-out infinite;}
.btn.ready-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.55), 0 0 40px rgba(255,170,50,.5);}

/* ---------- lobby: panels ---------- */
.lobby-body{gap:18px;padding:16px 6px;}
.lobby-col{position:relative;border-radius:18px;padding:14px;
  background:linear-gradient(180deg,rgba(20,31,52,.8),rgba(9,14,25,.82));
  border:1px solid rgba(130,175,240,.18);
  box-shadow:0 22px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  animation:rise .55s cubic-bezier(.2,.9,.3,1) both;}
.lobby-col::before{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(120,200,255,.6),transparent);}
.lobby-body .lobby-col:nth-child(1){animation-delay:.05s;}
.lobby-body .lobby-col:nth-child(2){animation-delay:.12s;}
.lobby-body .lobby-col:nth-child(3){animation-delay:.19s;}
.lobby-col .col-head{align-items:center;color:#d6e4ff;font-weight:800;font-size:11.5px;letter-spacing:4px;margin-bottom:10px;}
.lobby-col .col-head > span:first-child{display:inline-flex;align-items:center;gap:9px;}
.lobby-col .col-head > span:first-child::before{content:'';width:4px;height:14px;border-radius:2px;background:linear-gradient(180deg,#ffcf6a,#e88a0e);box-shadow:0 0 10px rgba(255,170,50,.5);}
.lobby-col.center .col-head{justify-content:center;}
.ch-pill{font-size:10.5px;letter-spacing:1.5px;padding:3px 9px;border-radius:999px;background:rgba(120,170,240,.12);border:1px solid rgba(120,170,240,.25);color:#b9d0f5;}
.lobby-col .hint{color:#8d9fbf;}

/* players */
.lc-left .player-list{flex:1 1 auto;min-height:96px;}
.pcard{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(24,38,64,.9),rgba(13,21,37,.9));
  border:1px solid rgba(130,175,240,.2);border-radius:12px;padding:7px 10px 7px 12px;
  transition:transform .15s, border-color .2s, box-shadow .2s;}
.pcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#5f7ba8;}
.pcard:hover{transform:translateX(3px);border-color:rgba(160,200,255,.4);}
.pcard.ready{border-color:rgba(84,224,138,.55);box-shadow:0 0 0 1px rgba(84,224,138,.18) inset, 0 0 18px rgba(84,224,138,.12);}
.pcard.ready::before{background:#54e08a;box-shadow:0 0 12px #54e08a;}
.pcard canvas{background:radial-gradient(circle at 50% 40%,#1b2a46,#0a101c);border:1px solid rgba(130,175,240,.18);}
.pcard .pstate{padding:3px 9px;border-radius:999px;border:1px solid rgba(143,160,189,.35);font-weight:800;}
.pcard .pstate.on{border-color:rgba(84,224,138,.6);background:rgba(84,224,138,.12);box-shadow:0 0 12px rgba(84,224,138,.25);}
.join-hint{margin-top:8px;}
.join-hint .btn.sm{border-radius:9px;}

/* character column */
.preview-stage{position:relative;display:flex;justify-content:center;flex:0 0 auto;}
.preview-stage::before{content:'';position:absolute;left:50%;bottom:10px;width:170px;height:34px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,180,61,.28),rgba(255,180,61,0) 70%);}
.preview-stage::after{content:'';position:absolute;left:50%;bottom:-48px;width:150px;height:150px;margin-left:-75px;border-radius:50%;
  border:1.5px dashed rgba(255,190,90,.45);animation:platSpin 9s linear infinite;}
@keyframes platSpin{from{transform:scaleY(.18) rotate(0deg);}to{transform:scaleY(.18) rotate(360deg);}}
.preview-stage canvas{position:relative;z-index:1;}
.tab{transition:background .15s, color .15s, border-color .15s, transform .12s;}
.tab:hover{transform:translateY(-1px);color:#dbe7ff;border-color:rgba(160,200,255,.45);}
.tab.on{box-shadow:0 0 16px rgba(255,180,61,.35);}
.citem{background:linear-gradient(180deg,rgba(22,34,58,.95),rgba(12,19,33,.95));}
.citem:hover{box-shadow:0 8px 18px rgba(0,0,0,.35);}

/* maps */
.mapcard{position:relative;overflow:hidden;color:var(--ink);text-align:left;font-family:var(--font);
  background:linear-gradient(90deg,rgba(24,38,64,.9),rgba(13,21,37,.9));border:1px solid rgba(130,175,240,.2);border-radius:12px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3), border-color .2s, box-shadow .2s;}
.map-list .mapcard:nth-child(1){animation-delay:.2s;}
.map-list .mapcard:nth-child(2){animation-delay:.25s;}
.map-list .mapcard:nth-child(3){animation-delay:.3s;}
.map-list .mapcard:nth-child(4){animation-delay:.35s;}
.map-list .mapcard:nth-child(5){animation-delay:.4s;}
.map-list .mapcard:nth-child(6){animation-delay:.45s;}
.mapcard:hover{transform:translateX(-3px);border-color:rgba(160,200,255,.5);box-shadow:0 10px 24px rgba(0,0,0,.4);}
.mapcard .mi b{color:#f2f6ff;letter-spacing:2px;font-weight:800;}
.mapcard .mi small{color:#93a6c8;}
.mapcard canvas{border:1px solid rgba(130,175,240,.25);box-shadow:0 4px 12px rgba(0,0,0,.4);}
.mapcard.voted{border-color:rgba(255,190,90,.8);box-shadow:0 0 0 1px rgba(255,190,90,.3) inset, 0 0 22px rgba(255,170,50,.2);
  background:linear-gradient(90deg,rgba(70,48,14,.75),rgba(20,24,36,.9));}
.mapcard.voted::after{content:'YOUR VOTE';position:absolute;right:10px;top:7px;font-size:9px;letter-spacing:2px;font-weight:800;color:#ffcf7a;}
.votedot{box-shadow:0 0 8px rgba(255,180,61,.8);}

/* ---------- lobby: perks ---------- */
.perk-sec{flex:0 0 auto;margin-top:12px;padding-top:12px;border-top:1px solid rgba(120,170,240,.14);}
.perk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px;}
.perk-slot{position:relative;display:flex;align-items:center;gap:6px;min-height:60px;padding:5px 8px 5px 4px;border-radius:12px;
  font-family:var(--font);color:var(--ink);text-align:left;}
.perk-slot.empty{justify-content:center;flex-direction:column;gap:0;border:1.5px dashed rgba(130,175,240,.3);background:rgba(10,16,28,.5);color:#6f84aa;}
.perk-slot.empty .ps-plus{font-size:22px;line-height:1;font-weight:300;animation:plusPulse 2.2s ease-in-out infinite;}
.perk-slot.empty small{font-size:9px;letter-spacing:2px;font-weight:800;}
@keyframes plusPulse{0%,100%{opacity:.45;transform:scale(1);}50%{opacity:1;transform:scale(1.18);}}
.perk-slot.full{cursor:pointer;border:1px solid var(--pc);
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 26%,#0b1220),#0b1220 75%);
  box-shadow:0 0 16px color-mix(in srgb,var(--pc) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.08);transition:transform .15s, box-shadow .2s;}
.perk-slot.full:hover{transform:translateY(-2px);}
.perk-slot.full canvas{width:42px;height:42px;flex:0 0 auto;}
.perk-slot .ps-txt{display:flex;flex-direction:column;min-width:0;}
.perk-slot .ps-txt b{font-size:11.5px;line-height:1.15;}
.perk-slot .ps-txt small{font-size:10px;color:color-mix(in srgb,var(--pc) 70%,#fff);font-weight:700;}
.perk-slot .ps-x{position:absolute;top:3px;right:6px;font-style:normal;font-size:13px;color:#fff;opacity:0;transition:opacity .15s;}
.perk-slot.full:hover .ps-x{opacity:.8;}
.perk-slot.pop{animation:slotPop .45s cubic-bezier(.2,1.4,.4,1);}
@keyframes slotPop{0%{transform:scale(.7);filter:brightness(2);}100%{transform:none;filter:none;}}
.perk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:236px;overflow-y:auto;padding-right:2px;}
.perk-grid::-webkit-scrollbar{width:6px;}
.perk-grid::-webkit-scrollbar-thumb{background:rgba(150,185,240,.28);border-radius:3px;}
.perk-card{position:relative;display:flex;align-items:center;gap:7px;padding:4px 8px 4px 4px;border-radius:11px;cursor:pointer;
  font-family:var(--font);color:var(--ink);text-align:left;
  background:linear-gradient(180deg,rgba(22,34,58,.95),rgba(12,19,33,.95));border:1px solid rgba(130,175,240,.18);
  transition:transform .15s cubic-bezier(.2,.9,.3,1.3), border-color .18s, box-shadow .2s;}
.perk-card:hover{transform:translateY(-2px);border-color:var(--pc);box-shadow:0 8px 18px rgba(0,0,0,.35), 0 0 14px color-mix(in srgb,var(--pc) 30%,transparent);}
.perk-card canvas{width:40px;height:40px;flex:0 0 auto;}
.perk-card .pc-txt{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px;}
.perk-card .pc-txt b{font-size:12px;line-height:1.1;}
.perk-card .pc-txt small{font-size:10px;line-height:1.25;color:#93a6c8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.perk-card .pc-row{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.perk-card .pc-tag .coin-ico{width:10px;height:10px;}
.perk-card.on{border-color:var(--pc);background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 22%,#0b1220),#0c1424 80%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 40%,transparent) inset;}
.perk-card.on .pc-tag{color:#54e08a;}
.perk-card.locked{filter:saturate(.45);}
.perk-card.locked canvas{opacity:.55;}
.perk-card.locked .pc-tag{color:#ffcf7a;}
.perk-card.paid:not(.locked) .pc-tag{color:#ffcf7a;}
.perk-card.on.paid .pc-tag{color:#54e08a;}
.perk-card.armed{filter:none;border-color:#ffcf6a;animation:armPulse .8s ease-in-out infinite;}
.perk-card.armed .pc-tag{color:#fff;background:#e0900f;padding:1px 6px;border-radius:999px;}
@keyframes armPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,190,90,.55);}50%{box-shadow:0 0 0 4px rgba(255,190,90,0), 0 0 18px rgba(255,170,50,.4);}}
.perk-card.shake{animation:perkShake .38s ease;}
@keyframes perkShake{0%,100%{transform:none;}20%{transform:translateX(-5px);}40%{transform:translateX(5px);}60%{transform:translateX(-3px);}80%{transform:translateX(3px);}}

/* shorter windows: tighten the lobby rather than overflow it */
@media (max-height:760px){
  .perk-grid{max-height:170px;}
  #char-preview{height:170px;}
  .lobby-body{padding:10px 6px;}
}

/* entrance animations only while the lobby is opening, so re-renders
   (a vote, a perk swap, a peer joining) never replay them */
#screen-lobby.enter .pcard{animation:rise .35s ease both;}
#screen-lobby.enter .mapcard{animation:rise .4s ease both;}
#screen-lobby.enter .perk-card{animation:rise .35s ease both;animation-delay:var(--d,0ms);}
.preview-stage::before,.preview-stage::after{pointer-events:none;}
.perk-card .pc-txt small{-webkit-line-clamp:2;}

.perk-card .pc-tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:8.5px;letter-spacing:1.2px;font-weight:800;color:#8fa0bd;white-space:nowrap;}
.perk-card.on .pc-tag,.perk-card.on.paid .pc-tag{color:#54e08a;}
.perk-card.locked .pc-tag,.perk-card.paid:not(.locked):not(.on) .pc-tag{color:#ffcf7a;}
.perk-card.armed .pc-tag{color:#fff;background:#e0900f;padding:1px 6px;border-radius:999px;}

/* ================= upgrade categories + class bonus ================= */
.uc-cat{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9px;font-weight:800;letter-spacing:2.5px;color:var(--cc,#9fb0c8);
  background:rgba(8,13,22,.72);border:1px solid color-mix(in srgb, var(--cc,#9fb0c8) 45%, transparent);
  padding:2px 9px 2px 7px;border-radius:20px;margin-top:4px;
}
.uc-cat i{
  width:7px;height:7px;border-radius:50%;background:var(--cc,#9fb0c8);
  box-shadow:0 0 8px var(--cc,#9fb0c8);
}
#upg-panel .up-cat{
  font-size:8.5px;font-weight:800;letter-spacing:1.6px;color:var(--cc,#9fb0c8);
  border:1px solid color-mix(in srgb, var(--cc,#9fb0c8) 40%, transparent);
  border-radius:5px;padding:0 5px;margin-left:auto;
}
.classcard .cls-bonus{
  margin-top:9px;padding:7px 8px;border-radius:9px;text-align:left;
  font-size:11px;line-height:1.4;color:#dfe8f7;
  background:color-mix(in srgb, var(--cc,#4fb2ff) 10%, #0a111e);
  border:1px solid color-mix(in srgb, var(--cc,#4fb2ff) 38%, transparent);
}
.classcard .cls-bonus .cb-tag{
  display:block;font-size:8.5px;font-weight:800;letter-spacing:2.2px;
  color:var(--cc,#4fb2ff);margin-bottom:2px;
}

/* ================= upgrade slots (above the XP bar) ================= */
#xp-dock .xd-slots{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin-bottom:2px;
}
#xp-dock .xs-count{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:46px; height:40px; margin-right:4px;
  background:rgba(9,14,24,.88); border:1px solid var(--line); border-radius:10px;
}
#xp-dock .xs-count b{font-size:14px; font-weight:900; color:#eaf3ff; line-height:1; font-variant-numeric:tabular-nums;}
#xp-dock .xs-count b i{font-style:normal; font-size:10px; color:#7d90ad; font-weight:700;}
#xp-dock .xs-count small{font-size:7.5px; letter-spacing:1.8px; color:#7d90ad; margin-top:3px;}
#xp-dock .xs-count.full{border-color:var(--accent); box-shadow:0 0 12px rgba(255,210,61,.35);}
#xp-dock .xs-count.full small{color:var(--accent);}
#xp-dock .xs-slot{
  position:relative; width:40px; height:40px; flex:none;
  background:rgba(9,14,24,.88);
  border:1px solid color-mix(in srgb, var(--cc,#5a6c8c) 60%, transparent);
  border-radius:10px;
  box-shadow:0 0 10px color-mix(in srgb, var(--cc,#5a6c8c) 28%, transparent);
}
#xp-dock .xs-slot canvas{width:40px; height:40px; display:block; border-radius:9px;}
#xp-dock .xs-slot.empty{border:1px dashed rgba(140,170,215,.22); box-shadow:none; background:rgba(9,14,24,.5);}
#xp-dock .xs-slot.merge{border-color:#ff4a4a; box-shadow:0 0 12px rgba(255,74,74,.42);}
#xp-dock .xs-cat{
  position:absolute; right:-5px; bottom:-5px; width:17px; height:17px;
  display:flex; align-items:center; justify-content:center;
  background:#0b111c; border:1px solid var(--cc,#9fb0c8); border-radius:50%;
  color:var(--cc,#9fb0c8);
}
#xp-dock .xs-cat svg{width:11px; height:11px; display:block;}
/* the level-up flourish now clears the slot row */
#xp-dock .xd-pop{bottom:92px;}
@media (max-width:820px){
  #xp-dock .xs-slot, #xp-dock .xs-slot canvas{width:32px; height:32px;}
  #xp-dock .xs-count{height:32px; min-width:40px;}
  #xp-dock .xd-slots{gap:4px;}
}

/* ================= six classes + Titan Frame / Managers docks ================= */
.class-grid{grid-template-columns:repeat(6,1fr);}
@media (max-width:1100px){ .class-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .class-grid{grid-template-columns:repeat(2,1fr);} }

#hud-mech, #hud-mgr{
  position:relative; left:auto; right:auto; bottom:auto; transform:none;
  display:none; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(9,14,24,.82); border:1px solid var(--line); border-radius:12px;
  min-width:160px;
}
#hud-mech.show, #hud-mgr.show{display:flex;}
#hud-mech canvas, #hud-mgr canvas{background:#0a101c;border-radius:8px;}
#hud-mech .sm-info, #hud-mgr .sm-info{flex:1;}
#hud-mech .sm-name, #hud-mgr .sm-name{font-size:11px;letter-spacing:2px;color:#cfe0ff;}
#hud-mech .sm-count, #hud-mgr .sm-count{font-size:15px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums;}
#hud-mech .sm-count{font-size:12px;letter-spacing:1px;}
#hud-mech .sm-count b, #hud-mgr .sm-count b{color:#fff;}
#hud-mgr .sm-count i{font-style:normal;}
#hud-mech .sm-key, #hud-mgr .sm-key{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:#101a2c;border:1px solid var(--line);
  font-size:12px;font-weight:800;color:#8fa4c4;
}
#hud-mech .sm-cd, #hud-mgr .sm-cd{
  position:absolute;left:10px;right:10px;bottom:4px;height:3px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
#hud-mech .sm-cd i, #hud-mgr .sm-cd i{display:block;height:100%;width:0%;border-radius:2px;background:#c07bff;transition:width .08s linear;}
#hud-mgr.ready{border-color:#c07bff;box-shadow:0 0 18px rgba(192,123,255,.32);}
#hud-mgr.ready .sm-key{background:#241536;border-color:#c07bff;color:#ecdcff;}
#hud-mgr.full{opacity:.62;}
/* Titan Frame is Cutting-Edge: same shimmering border as the CEOM */
#hud-mech{border-color:transparent;
  background:linear-gradient(rgba(9,14,24,.9),rgba(9,14,24,.9)) padding-box,
             linear-gradient(115deg,#7df9ff,#b69cff,#ff8ad8,#ffe27a,#7df9ff) border-box;
  background-size:auto,300% 300%; animation:cutShift 3.4s linear infinite;}
#hud-mech .sm-cd i{background:linear-gradient(90deg,#54e08a,#9ef1ff);}
#hud-mech.ready{box-shadow:0 0 24px rgba(125,249,255,.35);}
#hud-mech.ready .sm-key{background:#10302a;border-color:#7df9ff;color:#dffcff;}

/* ============================ ADMIN MODE ============================ */
#hud-adminhint{
  position:absolute; left:368px; bottom:14px;
  display:none; align-items:center; gap:7px;
  padding:6px 11px 6px 8px;
  background:rgba(34,10,18,.86); border:1px solid rgba(255,90,120,.45); border-radius:10px;
  pointer-events:auto; cursor:pointer; z-index:4;
  box-shadow:0 0 14px rgba(255,60,100,.16);
  transition:border-color .15s, box-shadow .15s;
}
#hud-adminhint.on{display:flex;}
#hud-adminhint b{
  width:20px; height:20px; border-radius:5px; display:grid; place-items:center;
  background:#3a0f1c; border:1px solid rgba(255,90,120,.6);
  font-size:11px; font-weight:800; color:#ffc2cf;
}
#hud-adminhint span{font-size:10px; letter-spacing:2px; color:#ff9fb3;}
#hud-adminhint:hover, #hud-adminhint.lit{border-color:#ff5a7a; box-shadow:0 0 18px rgba(255,90,122,.45);}
#hud-adminhint.lit b{background:#5a1428; color:#fff;}
@media (max-width:820px){
  #hud-adminhint{left:auto; right:12px; bottom:136px;}
}

#admin-panel{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,6,12,.78); backdrop-filter:blur(3px); z-index:31;
}
#admin-panel.show{display:flex; animation:upIn .16s ease-out both;}
#admin-panel .ad-inner{
  width:min(1100px,95vw); max-height:90vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,rgba(20,12,24,.98),rgba(10,12,20,.98));
  border:1px solid rgba(255,90,122,.35); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 60px rgba(255,60,100,.12);
  animation:upPop .22s cubic-bezier(.2,.9,.3,1.2) both;
}
.ad-head{display:flex; align-items:center; gap:14px; padding:16px 20px 12px; border-bottom:1px solid rgba(255,120,150,.18);}
.ad-title{font-size:18px; font-weight:900; letter-spacing:4px; color:#fff; display:flex; align-items:center; gap:10px;}
.ad-badge{
  font-style:normal; font-size:11px; letter-spacing:2px; padding:3px 9px; border-radius:6px;
  background:linear-gradient(90deg,#ff4a6a,#ff8a5a); color:#1a0508; box-shadow:0 0 16px rgba(255,74,106,.5);
}
.ad-sub{flex:1; font-size:11.5px; letter-spacing:1px; color:#c2a3b1;}
.ad-x{
  background:#1c1220; border:1px solid rgba(255,120,150,.35); color:#ffc2cf; border-radius:9px;
  padding:6px 8px 6px 11px; font:800 10px var(--font); letter-spacing:1.6px; cursor:pointer;
  display:flex; align-items:center; gap:7px;
}
.ad-x b{padding:1px 6px; border-radius:4px; background:#3a0f1c; color:#fff;}
.ad-x:hover{border-color:#ff5a7a;}

.ad-tools{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 20px; border-bottom:1px solid rgba(255,120,150,.12);}
.ad-tool{
  display:flex; align-items:center; gap:7px; padding:7px 9px 7px 12px;
  background:rgba(255,255,255,.035); border:1px solid rgba(160,190,240,.16); border-radius:11px;
}
.ad-lbl{font-size:10px; letter-spacing:2px; color:#9fb0c8; margin-right:3px; display:flex; align-items:center; gap:7px;}
.ad-lbl b{color:#fff; font-size:15px; letter-spacing:0; font-variant-numeric:tabular-nums; min-width:18px;}
.ad-btn{
  background:linear-gradient(180deg,#26365a,#18223a); color:#e8f0ff;
  border:1px solid rgba(160,200,255,.35); border-radius:8px; padding:5px 11px;
  font:800 12px var(--font); cursor:pointer; transition:transform .08s, box-shadow .15s;
}
.ad-btn:hover{transform:translateY(-1px); box-shadow:0 0 12px rgba(120,180,255,.35);}
.ad-btn:active{transform:translateY(1px);}
.ad-toggle{min-width:56px; background:#1a1f2c; color:#8fa0bd;}
.ad-toggle.on{
  background:linear-gradient(180deg,#3fe08a,#1f9e5a); color:#04160b; border-color:#7dffb4;
  box-shadow:0 0 14px rgba(84,224,138,.45);
}
.ad-note{font-size:10.5px; color:#8a97ad; letter-spacing:.4px; background:transparent; border-style:dashed;}

.ad-list{overflow-y:auto; padding:12px 20px 16px; display:flex; flex-direction:column; gap:16px; min-height:120px;}
.ad-list::-webkit-scrollbar{width:9px;}
.ad-list::-webkit-scrollbar-thumb{background:rgba(255,140,170,.25); border-radius:5px;}
.ad-cat-head{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:11px; font-weight:800; letter-spacing:3px; color:var(--cc);
}
.ad-cat-head i{width:16px; height:16px; display:grid; place-items:center;}
.ad-cat-head i svg{width:14px; height:14px; display:block;}
.ad-cat-head small{font-size:10px; letter-spacing:1px; color:#6f7f99; font-weight:700;}
.ad-cat-head::after{content:''; flex:1; height:1px; background:rgba(140,170,215,.14);}
.ad-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:8px;}
.ad-up{
  display:flex; align-items:center; gap:9px; padding:7px 9px; text-align:left;
  background:#0e1524; border:1px solid rgba(140,175,230,.16); border-left:3px solid #8b93a3; border-radius:10px;
  color:#e8f0ff; cursor:pointer; font-family:var(--font);
  transition:transform .08s ease, border-color .15s, box-shadow .15s, background .15s;
}
.ad-up:hover{transform:translateY(-2px); border-color:rgba(160,200,255,.45); background:#111b2e; box-shadow:0 8px 20px rgba(0,0,0,.45);}
.ad-up:active{transform:translateY(0);}
.ad-up canvas{width:38px; height:38px; flex:none; background:#080d16; border-radius:8px;}
.ad-txt{min-width:0; display:flex; flex-direction:column; gap:3px;}
.ad-name{font-size:11.5px; font-weight:800; line-height:1.2; color:#f2f6ff;}
.ad-meta{display:flex; flex-wrap:wrap; gap:2px 6px; align-items:center; font-size:8.5px; letter-spacing:1px; color:#7d90ad;}
.ad-meta em{font-style:normal;}
.ad-meta b{color:#cfe0ff; font-size:10px; letter-spacing:0; background:#101a2c; border-radius:4px; padding:0 5px; font-variant-numeric:tabular-nums;}
.ad-req{font-style:normal; font-size:8px; color:#ffcf7a; border:1px solid rgba(255,207,122,.45); border-radius:4px; padding:0 3px;}
.ad-up.owned{background:#101a2b;}
.ad-up.owned .ad-meta b{background:#16283f; color:#9fd6ff;}
.ad-up.maxed{opacity:.5; cursor:default;}
.ad-up.maxed:hover{transform:none; box-shadow:none;}
.ad-up.maxed .ad-meta b{background:#1d2c1f; color:#7dff9e;}
.ad-up.common {border-left-color:#8b93a3;}
.ad-up.rare   {border-left-color:#4fb2ff;}
.ad-up.epic   {border-left-color:#c07bff;}
.ad-up.legend {border-left-color:#ffb43d;}
.ad-up.special{border-left-color:#ff4a4a;}
.ad-up.cutting{border-left-color:#7df9ff; box-shadow:inset 3px 0 12px -6px #ff8ad8;}
.ad-up.pop{animation:adPop .34s ease-out;}
@keyframes adPop{
  0%{transform:scale(1);}
  40%{transform:scale(1.06); box-shadow:0 0 24px rgba(255,210,61,.6);}
  100%{transform:scale(1);}
}
.ad-detail{
  padding:10px 20px 12px; border-top:1px solid rgba(255,120,150,.14);
  font-size:11.5px; color:#b3c2da; min-height:58px; line-height:1.5;
}
.ad-detail b{color:#fff; font-size:12.5px; margin-right:8px;}
.ad-dim{color:#7d8aa3;}
.ad-dcat{font-size:9px; letter-spacing:2px; font-weight:800; color:var(--cc); margin-right:8px;}
.ad-drar{font-size:9px; letter-spacing:2px; font-weight:800; color:#9fb0c8; margin-right:8px;}
.ad-drar.rare{color:#4fb2ff;} .ad-drar.epic{color:#c07bff;} .ad-drar.legend{color:#ffb43d;}
.ad-drar.special{color:#ff6b6b;} .ad-drar.cutting{color:#7df9ff;}
.ad-dnote{font-style:normal; font-size:10px; letter-spacing:1px; color:#7dff9e; font-weight:800;}
.ad-ddesc{margin-top:3px;}
.ad-ddesc i{color:#ffcf7a; font-style:normal;}
.ad-empty{padding:40px; text-align:center; color:var(--dim);}

#admin-code{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(3,5,10,.72); backdrop-filter:blur(4px); z-index:60;
}
#admin-code.show{display:flex; animation:upIn .16s ease-out both;}
.ac-box{
  width:min(360px,90vw); padding:22px 26px 20px; text-align:center;
  background:linear-gradient(180deg,#1b1221,#0e1119);
  border:1px solid rgba(255,90,122,.4); border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 50px rgba(255,60,100,.15);
  animation:upPop .22s cubic-bezier(.2,.9,.3,1.2) both;
}
.ac-box.shake{animation:acShake .36s ease-in-out;}
@keyframes acShake{
  0%,100%{transform:translateX(0);} 20%{transform:translateX(-9px);} 40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);} 80%{transform:translateX(4px);}
}
.ac-lock{
  width:46px; height:46px; margin:0 auto 10px; border-radius:13px; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%,#5a1428,#2a0a14); color:#ff9fb3;
  box-shadow:0 0 22px rgba(255,74,106,.35);
}
.ac-lock svg{width:24px; height:24px;}
.ac-title{font-size:17px; font-weight:900; letter-spacing:4px; color:#fff;}
.ac-sub{font-size:12px; color:#c2a3b1; margin:6px 0 14px;}
#admin-code-input{
  width:100%; padding:11px 14px; text-align:center;
  font:800 20px var(--font); letter-spacing:8px; color:#fff;
  background:#0a0e18; border:1px solid rgba(255,120,150,.4); border-radius:11px; outline:none;
  user-select:text; -webkit-user-select:text;
}
#admin-code-input:focus{border-color:#ff5a7a; box-shadow:0 0 0 3px rgba(255,90,122,.18);}
.ac-err{height:18px; margin-top:8px; font-size:11.5px; letter-spacing:2px; color:#ff6a7a; font-weight:800;}
.ac-btns{display:flex; gap:10px; justify-content:center; margin-top:10px;}

/* B panel: which number key an ability sits on */
#upg-panel .up-keyb{
  font-size:9px; font-weight:800; letter-spacing:1px; color:#1a1200;
  background:var(--accent); border-radius:4px; padding:1px 5px;
}

/* the ROUND COMPLETE banner never shows over pause or any other screen */
#round-banner.held{display:none !important;}

/* card screen: skip this pick */
.cards-tools{gap:12px; flex-wrap:wrap;}
.skip-btn{
  display:inline-flex; align-items:center; gap:9px; padding:10px 20px; border-radius:999px;
  background:rgba(14,20,34,.9); border:1px solid rgba(160,180,210,.35); color:#c9d6ea;
  font-size:13px; letter-spacing:.18em;
  transition:transform .15s, box-shadow .2s, border-color .2s, color .2s;
}
.skip-btn .sk-ico{font-size:15px; line-height:1; opacity:.85;}
.skip-btn:hover{transform:translateY(-2px); border-color:rgba(255,120,120,.6); color:#ffd0d0; box-shadow:0 0 20px rgba(255,90,90,.22);}

/* admin panel: which class a Cutting-Edge card normally belongs to */
.ad-cls{font-style:normal; font-size:8px; color:#9ef1ff; border:1px solid rgba(125,249,255,.45); border-radius:4px; padding:0 3px;}
.ad-cut .ad-cat-head{
  background:linear-gradient(90deg,#7df9ff,#b69cff,#ff8ad8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ad-cut .ad-cat-head i{color:#7df9ff;}
.ad-cut .ad-cat-head small{color:#6f7f99; -webkit-text-fill-color:#6f7f99;}
/* admin panel: the list gives way so the description strip is never cut off */
#admin-panel .ad-list{flex:1 1 auto; min-height:0;}
#admin-panel .ad-detail{flex:none;}

/* ================= BATCH 13: Zeus / Power Hose / Supervisor docks ================= */
#hud-god, #hud-hose, #hud-sup{
  position:relative; left:auto; right:auto; bottom:auto; transform:none;
  display:none; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(9,14,24,.82); border:1px solid var(--line); border-radius:12px;
  min-width:160px;
}
#hud-god.show, #hud-hose.show, #hud-sup.show{display:flex;}
#hud-god canvas, #hud-hose canvas, #hud-sup canvas{background:#0a101c;border-radius:8px;}
#hud-god .sm-info, #hud-hose .sm-info, #hud-sup .sm-info{flex:1;}
#hud-god .sm-name, #hud-hose .sm-name, #hud-sup .sm-name{font-size:11px;letter-spacing:2px;color:#cfe0ff;}
#hud-god .sm-count, #hud-hose .sm-count, #hud-sup .sm-count{font-size:12px;letter-spacing:1px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums;}
#hud-god .sm-count b, #hud-hose .sm-count b, #hud-sup .sm-count b{color:#fff;}
#hud-god .sm-key, #hud-hose .sm-key, #hud-sup .sm-key{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:#101a2c;border:1px solid var(--line);
  font-size:12px;font-weight:800;color:#8fa4c4;
}
#hud-god .sm-cd, #hud-hose .sm-cd, #hud-sup .sm-cd{
  position:absolute;left:10px;right:10px;bottom:4px;height:3px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
#hud-god .sm-cd i, #hud-hose .sm-cd i, #hud-sup .sm-cd i{display:block;height:100%;width:0%;border-radius:2px;transition:width .08s linear;}
/* the two new forms are Cutting-Edge: same shimmering border as the Titan Frame */
#hud-god, #hud-hose{border-color:transparent;
  background:linear-gradient(rgba(9,14,24,.9),rgba(9,14,24,.9)) padding-box,
             linear-gradient(115deg,#7df9ff,#b69cff,#ff8ad8,#ffe27a,#7df9ff) border-box;
  background-size:auto,300% 300%; animation:cutShift 3.4s linear infinite;}
#hud-god .sm-cd i{background:linear-gradient(90deg,#ffd23d,#fff3c4);}
#hud-hose .sm-cd i{background:linear-gradient(90deg,#3ddcff,#9fe4ff);}
#hud-god.ready{box-shadow:0 0 24px rgba(255,210,61,.38);}
#hud-hose.ready{box-shadow:0 0 24px rgba(61,220,255,.38);}
#hud-god.ready .sm-key{background:#302a10;border-color:#ffd23d;color:#fff4c8;}
#hud-hose.ready .sm-key{background:#10283a;border-color:#3ddcff;color:#dff6ff;}
#hud-sup .sm-cd i{background:#8fb4ff;}
#hud-sup.ready{border-color:#8fb4ff;box-shadow:0 0 18px rgba(143,180,255,.3);}
#hud-sup.ready .sm-key{background:#152036;border-color:#8fb4ff;color:#e2ecff;}
#hud-sup.full{opacity:.7;}

/* ================= BATCH 14 ================= */
/* Hardware Refresh dock */
#hud-comp{
  position:relative; left:auto; right:auto; bottom:auto; transform:none;
  display:none; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(9,14,24,.82); border:1px solid var(--line); border-radius:12px;
  min-width:160px;
}
#hud-comp.show{display:flex;}
#hud-comp canvas{background:#0a101c;border-radius:8px;}
#hud-comp .sm-info{flex:1;}
#hud-comp .sm-name{font-size:11px;letter-spacing:2px;color:#cfe0ff;}
#hud-comp .sm-count{font-size:12px;letter-spacing:1px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums;}
#hud-comp .sm-count b{color:#fff;}
#hud-comp .sm-key{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:#101a2c;border:1px solid var(--line);
  font-size:12px;font-weight:800;color:#8fa4c4;
}
#hud-comp .sm-cd{
  position:absolute;left:10px;right:10px;bottom:4px;height:3px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
#hud-comp .sm-cd i{display:block;height:100%;width:0%;border-radius:2px;transition:width .08s linear;background:linear-gradient(90deg,#ff9f43,#ffd9a8);}
#hud-comp.ready{border-color:#ffb43d;box-shadow:0 0 18px rgba(255,180,61,.3);}
#hud-comp.ready .sm-key{background:#2e2112;border-color:#ffb43d;color:#fff0d8;}

/* ================= BATCH 31 ================= */
/* Dancing Cat callout dock */
#hud-dance{
  position:relative; left:auto; right:auto; bottom:auto; transform:none;
  display:none; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(9,14,24,.82); border:1px solid var(--line); border-radius:12px;
  min-width:160px;
}
#hud-dance.show{display:flex;}
#hud-dance canvas{background:#0a101c;border-radius:8px;}
#hud-dance .sm-info{flex:1;}
#hud-dance .sm-name{font-size:11px;letter-spacing:2px;color:#cfe0ff;}
#hud-dance .sm-count{font-size:15px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums;}
#hud-dance .sm-count b{color:#fff;}
#hud-dance .sm-count i{font-style:normal;}
#hud-dance .sm-key{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:#101a2c;border:1px solid var(--line);
  font-size:12px;font-weight:800;color:#8fa4c4;
}
#hud-dance .sm-cd{
  position:absolute;left:10px;right:10px;bottom:4px;height:3px;
  background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
}
#hud-dance .sm-cd i{display:block;height:100%;width:0%;border-radius:2px;transition:width .08s linear;background:#ff9fd0;}
#hud-dance.ready{border-color:#ff9fd0;box-shadow:0 0 18px rgba(255,159,208,.3);}
#hud-dance.ready .sm-key{background:#2e1224;border-color:#ff9fd0;color:#ffe6f2;}
#hud-dance.full{opacity:.7;}

/* B panel: take an upgrade back out */
#upg-panel .up-item{position:relative;}
#upg-panel .up-art{align-self:flex-start; width:46px; height:46px;}
#upg-panel .up-list{grid-template-columns:repeat(2,minmax(0,1fr));}
#upg-panel .up-name{padding-right:62px; flex-wrap:wrap; row-gap:3px;}
#upg-panel .up-rm{
  position:absolute; top:8px; right:9px;
  font:800 9.5px var(--font); letter-spacing:1px; color:#ffb4b4;
  background:rgba(255,90,90,.08); border:1px solid rgba(255,110,110,.35);
  border-radius:6px; padding:2px 7px; cursor:pointer;
  transition:background .12s, color .12s, box-shadow .15s, transform .08s;
}
#upg-panel .up-rm:hover{background:rgba(255,90,90,.2); color:#fff; box-shadow:0 0 12px rgba(255,90,90,.3);}
#upg-panel .up-rm:active{transform:translateY(1px);}
#upg-panel .up-rm.armed{background:#ff5a5a; border-color:#ffb0b0; color:#1a0606; animation:rmPulse .7s ease-in-out infinite;}
@keyframes rmPulse{50%{box-shadow:0 0 16px rgba(255,90,90,.7);}}

/* admin: spawn enemies */
.ad-list{overflow-anchor:none;}
.ad-foes .ad-cat-head .ad-cnt{padding:2px 8px; font-size:11px; min-width:0;}
.ad-foe-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:6px;}
.ad-foe{
  display:flex; align-items:center; gap:7px; padding:4px 8px 4px 4px; text-align:left;
  background:rgba(255,90,90,.05); border:1px solid rgba(255,120,120,.18); border-radius:9px;
  color:#e6ecf6; font:700 11px var(--font); cursor:pointer;
  transition:transform .08s, border-color .15s, box-shadow .15s;
}
.ad-foe canvas{flex:none; background:#0b111c; border-radius:6px;}
.ad-foe span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ad-foe:hover{transform:translateY(-1px); border-color:rgba(255,140,140,.55); box-shadow:0 0 12px rgba(255,90,90,.25);}
.ad-foe:active{transform:translateY(1px);}
.ad-foe.mini{border-color:rgba(255,190,90,.3); background:rgba(255,180,60,.06);}
.ad-foe.boss{padding:9px 10px; border-color:rgba(255,80,80,.4); background:rgba(255,60,60,.09); letter-spacing:.6px;}
.ad-foe.boss.off{opacity:.4; pointer-events:none;}
.ad-boss-dot{width:9px; height:9px; border-radius:50%; background:#ff4a4a; box-shadow:0 0 8px #ff4a4a; flex:none;}
.ad-foe-sub{margin:10px 0 6px; font-size:10px; font-weight:800; letter-spacing:2.5px; color:#ff9b9b;}
.ad-foe-sub em{font-style:normal; letter-spacing:.5px; color:#7f8ca3; font-weight:700;}

/* the card screen while waiting for the other players */
.card-wait{
  grid-column:1/-1; justify-self:center; align-self:center;
  width:min(520px,90vw); padding:34px 28px 30px; text-align:center;
  background:linear-gradient(180deg,rgba(18,28,46,.92),rgba(10,16,28,.92));
  border:1px solid rgba(140,180,255,.22); border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 0 40px rgba(80,140,255,.06);
  animation:waitIn .35s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes waitIn{from{opacity:0; transform:translateY(12px) scale(.97);} to{opacity:1; transform:none;}}
.card-wait b{display:block; margin-top:16px; font-size:15px; letter-spacing:3px; color:#fff;}
.card-wait p{margin:10px 0 0; font-size:12.5px; line-height:1.5; color:#9fb0c8;}
.card-wait p em{font-style:normal; color:#ffd27a; font-weight:800;}
.cw-dots{display:flex; justify-content:center; gap:9px;}
.cw-dots i{width:11px; height:11px; border-radius:50%; background:#6fb4ff; animation:cwDot 1.1s ease-in-out infinite;}
.cw-dots i:nth-child(2){animation-delay:.18s;}
.cw-dots i:nth-child(3){animation-delay:.36s;}
@keyframes cwDot{0%,100%{transform:translateY(0); opacity:.35;} 40%{transform:translateY(-9px); opacity:1;}}

/* ======================= BATCH 15 ======================= */
/* class select: one class at a time, the others blurred either side */
.class-carousel{position:relative; height:min(560px,68vh); margin-top:6px; overflow:hidden; user-select:none; touch-action:pan-y;}
.class-carousel .cc-track{position:absolute; inset:0 64px 26px; overflow:visible;}
.cc-card{
  position:absolute; left:50%; top:12px; width:min(470px,72vw); box-sizing:border-box;
  padding:16px 20px 14px; border-radius:18px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--cc) 14%, #0e1728), #0a111e 60%);
  border:1px solid color-mix(in srgb, var(--cc) 45%, transparent);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  transition:transform .38s cubic-bezier(.2,.8,.2,1), filter .38s, opacity .38s;
  cursor:pointer;
}
.cc-card.on{cursor:default; box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--cc) 60%, transparent), 0 0 44px color-mix(in srgb, var(--cc) 22%, transparent);}
.cc-art{height:170px; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--cc) 30%, #16233b), #0a101c 70%);}
.cc-art canvas{width:380px; max-width:100%; height:auto;}
.cc-title{margin-top:10px; font-size:24px; font-weight:900; letter-spacing:4px; color:var(--cc);}
.cc-weap{color:var(--accent2); font-size:12.5px; letter-spacing:2px; margin-top:2px;}
.cc-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0 8px;}
.cc-stats > div{background:rgba(8,12,20,.6); border:1px solid var(--line); border-radius:9px; padding:6px 4px;}
.cc-stats b{display:block; font-size:9px; letter-spacing:1.6px; color:var(--dim);}
.cc-stats span{display:block; margin-top:2px; font-size:15px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums;}
.cc-desc{color:#b7c3d8; font-size:12.5px; line-height:1.5; margin:6px 2px 8px;}
.cc-bonus{margin:0 0 10px; padding:8px 10px; border-radius:10px; text-align:left; font-size:12px; line-height:1.45; color:#e4ecf9;
  background:color-mix(in srgb, var(--cc) 12%, #0a111e); border:1px solid color-mix(in srgb, var(--cc) 40%, transparent);}
.cc-bonus .cb-tag{display:inline-block; margin-right:7px; font-size:9px; font-weight:900; letter-spacing:1.5px; color:#10131a;
  background:var(--cc); border-radius:4px; padding:1px 6px;}
.cc-pick{font:900 13px var(--font); letter-spacing:2px; padding:10px 18px; border-radius:10px; cursor:pointer; width:100%;
  color:#10131a; background:var(--cc); border:none; box-shadow:0 6px 18px color-mix(in srgb, var(--cc) 35%, transparent);}
.cc-card:not(.on) .cc-pick{pointer-events:none;}
.cc-pick:hover{filter:brightness(1.1);}
.cc-key{margin-top:7px; font-size:10px; letter-spacing:1.5px; color:var(--dim);}
.cc-nav{position:absolute; top:40%; z-index:20; width:46px; height:64px; border-radius:12px; cursor:pointer;
  font:900 34px var(--font); line-height:1; color:#e8f0ff; background:rgba(10,16,28,.85); border:1px solid var(--line);}
.cc-nav:hover{border-color:var(--accent);}
.cc-nav.prev{left:4px;} .cc-nav.next{right:4px;}
.cc-dots{position:absolute; bottom:2px; left:0; right:0; display:flex; gap:8px; justify-content:center;}
.cc-dots i{width:9px; height:9px; border-radius:50%; background:rgba(143,160,189,.35); cursor:pointer; transition:transform .2s, background .2s;}
.cc-dots i.on{background:var(--accent); transform:scale(1.3);}

/* boss bar: split into its three phases */
#boss-bar .bb-track{position:relative;}
#boss-bar .bb-fill{position:relative; z-index:1;}
#boss-bar .bb-segs{position:absolute; inset:0; display:flex; z-index:0;}
#boss-bar .bb-segs i{flex:1; background:rgba(255,255,255,.03);}
#boss-bar .bb-ticks{position:absolute; inset:0; z-index:2; pointer-events:none;}
#boss-bar .bb-ticks i{position:absolute; top:-2px; bottom:-2px; width:3px; margin-left:-1.5px; background:#0b0f18; box-shadow:0 0 0 1px rgba(255,255,255,.55);}
#boss-bar .bb-labels{position:absolute; inset:0; z-index:3; display:flex; pointer-events:none;}
#boss-bar .bb-labels span{flex:1; text-align:center; font:900 9px/13px var(--font); letter-spacing:2px; color:rgba(255,255,255,.7); text-shadow:0 1px 2px #000;}
#boss-bar .bb-phase{text-align:center; margin:-2px 0 4px; font-size:10px; font-weight:900; letter-spacing:3px; color:#ffd23d; text-shadow:0 2px 8px #000;}
#boss-bar[data-phase="2"] .bb-fill{background:linear-gradient(90deg,#ff2d45,#ff5a3d);}
#boss-bar[data-phase="3"] .bb-fill{background:linear-gradient(90deg,#b0102a,#ff2d45); animation:bbRage .6s ease-in-out infinite alternate;}
#boss-bar[data-phase="2"] .bb-phase{color:#ff9a3d;}
#boss-bar[data-phase="3"] .bb-phase{color:#ff4a5a;}
@keyframes bbRage{from{filter:brightness(1)} to{filter:brightness(1.35)}}

/* the Auditor's report, stamped on to the screen with a countdown */
#report-fx{position:fixed; top:142px; left:50%; transform:translateX(-50%); z-index:8; display:none; pointer-events:none;}
#report-fx.show{display:block;}
#report-fx .rf-card{position:relative; width:300px; padding:12px 16px 12px; border-radius:6px; background:#f4f1e8; color:#2c323c;
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 2px #8f1f2a inset; font-family:var(--font); overflow:hidden;}
#report-fx.pop .rf-card{animation:rfIn .45s cubic-bezier(.2,1.4,.3,1) both;}
#report-fx .rf-head{display:flex; justify-content:space-between; font-size:10px; font-weight:900; letter-spacing:3px; color:#8f1f2a;
  border-bottom:1px solid rgba(143,31,42,.35); padding-bottom:4px;}
#report-fx .rf-lvl{font-style:normal; color:#6b7280;}
#report-fx .rf-name{margin-top:6px; font-size:17px; font-weight:900; letter-spacing:1.5px; color:#1c2230;}
#report-fx .rf-text{font-size:12px; color:#4a5263; margin-top:2px;}
#report-fx .rf-stamp{position:absolute; right:10px; top:26px; padding:3px 9px; border:3px solid #c0392b; border-radius:6px; color:#c0392b;
  font-size:15px; font-weight:900; letter-spacing:2px; transform:rotate(-12deg); opacity:.88;}
#report-fx.pop .rf-stamp{animation:rfStamp .5s .25s cubic-bezier(.2,1.6,.4,1) both;}
#report-fx .rf-bar{margin-top:10px; height:6px; border-radius:4px; background:rgba(44,50,60,.18); overflow:hidden;}
#report-fx .rf-bar i{display:block; height:100%; width:100%; background:#c0392b;}
#report-fx .rf-time{margin-top:3px; text-align:right; font-size:11px; font-weight:800; color:#8f1f2a; font-variant-numeric:tabular-nums;}
#report-fx[data-k="sheep"] .rf-card{box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 2px #6b5bd6 inset;}
#report-fx[data-k="sheep"] .rf-stamp{border-color:#6b5bd6; color:#6b5bd6;}
@keyframes rfIn{from{transform:translateY(-40px) rotate(-6deg) scale(.7); opacity:0} to{transform:none; opacity:1}}
@keyframes rfStamp{from{transform:rotate(-12deg) scale(2.6); opacity:0} to{transform:rotate(-12deg) scale(1); opacity:.88}}

/* admin panel: the Classified section */
.ad-cla .ad-cat-head{color:#ffc247;}
.ad-cla .ad-cat-head i{color:#ffc247;}

/* infected rounds: the breach warning */
#breach-fx{position:fixed; top:196px; left:50%; transform:translateX(-50%); z-index:9; display:none; pointer-events:none;}
#breach-fx.show{display:block;}
#breach-fx .bf-card{position:relative; min-width:470px; padding:14px 28px 13px; border-radius:10px; text-align:center;
  background:repeating-linear-gradient(135deg, rgba(34,4,9,.95) 0 14px, rgba(58,8,15,.95) 14px 28px);
  border:2px solid #ff2d3d; color:#ffe3e6;
  box-shadow:0 0 0 3px rgba(255,45,61,.22), 0 16px 40px rgba(0,0,0,.6), 0 0 42px rgba(255,45,61,.45);
  transition:opacity .7s;}
#breach-fx.pop .bf-card{animation:bfIn .5s cubic-bezier(.2,1.4,.3,1) both, bfShake .45s .5s steps(6) 2;}
#breach-fx.fade .bf-card{opacity:0;}
#breach-fx .bf-top{font-size:12px; font-weight:900; letter-spacing:4px; color:#ff5a66; animation:bfBlink .5s steps(2) infinite;}
#breach-fx .bf-main{margin-top:6px; font-size:24px; font-weight:900; letter-spacing:2px; color:#fff;
  text-shadow:2px 0 #ff2d3d, -2px 0 #3ddcff; animation:bfGlitch 1.1s steps(8) infinite;}
#breach-fx .bf-sub{margin-top:4px; font-size:15px; font-weight:900; letter-spacing:3px; color:#ff9aa3;}
#breach-fx .bf-note{margin-top:8px; font-size:12px; color:#ffc9ce; opacity:.92;}
@keyframes bfIn{from{transform:scale(1.6); opacity:0; filter:blur(6px)} to{transform:none; opacity:1; filter:none}}
@keyframes bfShake{0%,100%{transform:none} 25%{transform:translateX(-6px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)}}
@keyframes bfBlink{50%{opacity:.25}}
@keyframes bfGlitch{0%,100%{transform:none} 10%{transform:translate(-2px,1px) skewX(-6deg)} 12%{transform:none} 55%{transform:translate(3px,-1px)} 57%{transform:none}}

/* ===== BATCH 21: miniboss bars ===== */
#mini-bars{position:fixed; top:78px; left:50%; transform:translateX(-50%); width:min(560px,70vw); z-index:7; display:none; pointer-events:none;}
#mini-bars.show{display:flex; flex-direction:column; gap:7px;}
#mini-bars.below{top:136px;}
#mini-bars .mb-bar{--mc:#ff4a5a;}
#mini-bars .mb-name{text-align:center; letter-spacing:5px; font-size:11px; font-weight:800; color:var(--mc); text-shadow:0 2px 8px #000; margin-bottom:3px;}
#mini-bars .mb-track{position:relative; height:11px; background:rgba(9,14,24,.85); border:1px solid var(--mc); border-radius:7px; overflow:hidden;}
#mini-bars .mb-fill{position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--mc);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.3); transition:width .15s linear;}
#mini-bars .mb-ticks{position:absolute; inset:0; pointer-events:none;}
#mini-bars .mb-ticks i{position:absolute; top:-2px; bottom:-2px; width:3px; margin-left:-1.5px; background:#0b0f18; box-shadow:0 0 0 1px rgba(255,255,255,.55);}
#mini-bars .mb-labels{position:absolute; inset:0; display:flex; pointer-events:none;}
#mini-bars .mb-labels span{flex:1; text-align:center; font:900 8px/11px var(--font); letter-spacing:2px; color:rgba(255,255,255,.75); text-shadow:0 1px 2px #000;}
#mini-bars .mb-phase{text-align:center; margin-top:2px; font-size:9px; font-weight:900; letter-spacing:3px; color:#ffd23d; text-shadow:0 2px 8px #000;}
#mini-bars .mb-phase:empty{display:none;}
#mini-bars .mb-bar[data-phase="2"] .mb-phase{color:#ff9a3d;}
#mini-bars .mb-bar[data-phase="2"] .mb-fill{animation:mbRage .7s ease-in-out infinite alternate;}
@keyframes mbRage{from{filter:brightness(1)} to{filter:brightness(1.35)}}

/* ===== BATCH 22: card-screen upgrades, cutting-edge teases, upgrades path ===== */
.upcard p.uc-tease{font-style:italic; color:#bff7ff; letter-spacing:.3px; text-shadow:0 0 12px rgba(125,249,255,.35);}

.cards-owned{margin:14px 0 0; padding:10px 12px; display:flex; gap:18px; align-items:flex-start;
  background:rgba(8,13,24,.72); border:1px solid rgba(120,160,230,.18); border-radius:14px;}
.cards-owned .co-group{display:flex; flex-direction:column; gap:6px; min-width:0;}
.cards-owned .co-extra{flex:1;}
.cards-owned .co-lab{font-size:10px; font-weight:800; letter-spacing:3px; color:var(--dim);}
.cards-owned .co-lab b{margin-left:6px; color:#dfe9ff; font-size:12px; letter-spacing:1px;}
.cards-owned .co-lab b i{font-style:normal; color:var(--dim); font-weight:600;}
.cards-owned .co-lab b.full{color:#ff9a5a;}
.cards-owned .co-tiles{display:flex; flex-wrap:wrap; gap:5px;}
.cards-owned .co-tile{position:relative; width:38px; height:38px; border-radius:9px; background:#0e1728;
  border:1.5px solid var(--cc,#3a4456); box-shadow:inset 0 0 10px rgba(0,0,0,.45);}
.cards-owned .co-tile canvas{width:34px; height:34px; display:block; margin:0.5px auto 0;}
.cards-owned .co-tile.merge{box-shadow:0 0 10px rgba(255,74,74,.35), inset 0 0 10px rgba(0,0,0,.45);}
.cards-owned .co-tile.empty{border-style:dashed; border-color:rgba(140,160,200,.25); background:rgba(10,16,28,.5);}
.cards-owned .co-n{position:absolute; right:-4px; bottom:-5px; padding:0 3px; border-radius:5px; background:#0b1120;
  border:1px solid rgba(160,190,240,.35); font:800 8.5px/12px var(--font); color:#dfe9ff; letter-spacing:.5px;}
.cards-owned .co-n.m{color:#ff8a8a; border-color:rgba(255,120,120,.5);}
.cards-owned .co-none{font-size:11px; color:var(--dim); padding:11px 2px;}

#screen-uppath{justify-content:flex-start; align-items:stretch;
  background:radial-gradient(ellipse at 50% 45%, #111c33 0%, #080d18 60%, #04070d 100%);}
#screen-uppath .upp-top{display:flex; align-items:center; gap:18px; padding:14px 22px 6px;}
#screen-uppath .upp-title{font-size:24px; font-weight:900; letter-spacing:5px;
  background:linear-gradient(90deg,#fff,#9ec7ff 60%,#6f9fe0); -webkit-background-clip:text; background-clip:text; color:transparent;}
#screen-uppath .upp-title small{display:block; font-size:11px; letter-spacing:2px; font-weight:600; color:var(--dim); -webkit-text-fill-color:var(--dim);}
#screen-uppath .upp-count{flex:1; text-align:center; font-size:13px; letter-spacing:2px; color:var(--dim);}
#screen-uppath .upp-count b{color:#fff; font-size:18px;}
#screen-uppath .upp-stage{position:relative; flex:1; overflow:hidden; cursor:grab;}
#screen-uppath .upp-stage.drag{cursor:grabbing;}
#screen-uppath .upp-map{position:absolute; left:0; top:0; transform-origin:0 0;}
#screen-uppath .upp-svg{position:absolute; left:0; top:0; overflow:visible; pointer-events:none;}
.upp-l{fill:none; stroke:var(--lc); stroke-opacity:.16; stroke-width:1.4;}
.upp-l.hub{stroke-opacity:.55; stroke-width:5; stroke-linecap:round;}
.upp-l.sup{stroke-opacity:.34; stroke-width:2;}
.upp-l.out{stroke-dasharray:4 5; stroke-opacity:.14;}
.upp-hline{fill:none; stroke-linecap:round;}
.upp-hline.partner{stroke:#ffe08a; stroke-width:3; stroke-dasharray:9 7; animation:uppDash .8s linear infinite;}
.upp-hline.result{stroke:#ff6a6a; stroke-width:3.4; filter:drop-shadow(0 0 5px rgba(255,90,90,.7));}
@keyframes uppDash{to{stroke-dashoffset:-32;}}
.upp-core{position:absolute; width:124px; height:124px; margin:-62px 0 0 -62px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 40% 35%, #25406e, #0d1830 70%); border:2px solid rgba(160,200,255,.45);
  box-shadow:0 0 40px rgba(80,140,255,.35), inset 0 0 20px rgba(0,0,0,.5);}
.upp-core b{font-size:30px; color:#fff; line-height:1;}
.upp-core b i{font-size:15px; font-style:normal; color:var(--dim);}
.upp-core span{font-size:9px; letter-spacing:3px; color:#9ec7ff; margin-top:4px; font-weight:800;}
.upp-hub-cat{position:absolute; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:#0c1424; border:2.5px solid var(--cc); color:var(--cc); box-shadow:0 0 22px color-mix(in srgb, var(--cc) 35%, transparent);}
.upp-hub-cat i{width:24px; height:24px; display:block;}
.upp-hub-cat i svg{width:100%; height:100%;}
.upp-hub-cat span{font-size:6.5px; font-weight:900; letter-spacing:1px; color:#dfe9ff;}
.upp-node{position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  background:#0d1628; border:2.5px solid var(--rc); box-shadow:0 0 12px color-mix(in srgb, var(--rc) 30%, transparent), inset 0 0 10px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s, opacity .15s, box-shadow .15s;}
.upp-node canvas{width:40px; height:40px; border-radius:50%;}
.upp-node.locked{background:#0a1019; box-shadow:inset 0 0 12px rgba(0,0,0,.6); cursor:help;}
.upp-node .upp-q{font-size:20px; font-weight:900; color:#4a566c;}
.upp-node:hover{transform:scale(1.18); z-index:3;}
.upp-map.focus .upp-node{opacity:.32;}
.upp-map.focus .upp-node.me, .upp-map.focus .upp-node.hl, .upp-map.focus .upp-node.hl-m{opacity:1;}
.upp-node.me{transform:scale(1.22); z-index:4; box-shadow:0 0 22px var(--rc);}
.upp-node.hl{transform:scale(1.12); box-shadow:0 0 20px #ffe08a; border-color:#ffe08a; z-index:3;}
.upp-node.hl-m{transform:scale(1.16); box-shadow:0 0 24px #ff5a5a; border-color:#ff6a6a; z-index:3;}
.upp-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding:6px 18px 12px; font-size:11px; color:var(--dim); letter-spacing:1px;}
.upp-legend span{display:flex; align-items:center; gap:6px;}
.upp-legend .lg-dot{width:12px; height:12px; border-radius:50%; border:2px solid var(--rc); background:#0d1628;}
.upp-legend .lg-q{width:14px; height:14px; border-radius:50%; border:2px solid #3a4456; font-style:normal; font-size:9px; font-weight:900; color:#4a566c; display:flex; align-items:center; justify-content:center;}
.upp-legend .lg-hint{flex-basis:100%; justify-content:center; opacity:.8;}
.upp-tip{position:fixed; z-index:40; width:330px; padding:12px 14px; border-radius:14px; pointer-events:none; display:none;
  background:linear-gradient(175deg,#16233c,#0b1222); border:1px solid rgba(140,180,240,.3); box-shadow:0 20px 60px rgba(0,0,0,.7);}
.upp-tip.show{display:block;}
.upp-tip .ut-head{display:flex; gap:10px; align-items:center;}
.upp-tip .ut-head canvas{width:56px; height:56px; flex:none; border-radius:12px; background:#0d1628;}
.upp-tip .ut-head b{font-size:15px; color:#fff;}
.upp-tip .ut-chips{display:flex; gap:5px; margin:4px 0 2px; flex-wrap:wrap;}
.upp-tip .ut-chips span{font-size:8.5px; font-weight:900; letter-spacing:1.5px; padding:2px 6px; border-radius:6px; color:var(--cc); border:1px solid var(--cc);}
.upp-tip .ut-meta{font-size:9.5px; letter-spacing:1.5px; color:var(--dim); font-weight:700;}
.upp-tip .ut-desc{font-size:11.5px; line-height:1.45; color:#b9c8e2; margin:8px 0 4px;}
.upp-tip .ut-sub{font-size:9px; font-weight:900; letter-spacing:3px; color:#ff8a8a; margin-top:6px;}
.upp-tip .ut-merge{list-style:none; margin:4px 0 0; padding:0; font-size:11px; color:#dfe9ff; line-height:1.5;}
.upp-tip .ut-merge li.from{color:#ffe08a;}
.upp-tip .ut-merge em{font-style:normal; color:#ff6a6a; font-weight:900;}
.upp-tip .ut-merge i.lk{font-style:normal; color:#6f7c93;}
.upp-tip .ut-lock{display:flex; align-items:baseline; gap:10px;}
.upp-tip .ut-lock b{font-size:22px; color:#6f7c93;}
.upp-tip .ut-lock span{font-size:10px; font-weight:900; letter-spacing:3px; color:#ff9a5a;}

/* Second Wind: spare lives on the player card */
.ppill .nm i b.lv{color:#ffb347;font-weight:800;letter-spacing:0;margin-right:6px;text-shadow:0 0 8px rgba(255,179,71,.45);}

/* =====================================================================
   BATCH 24: the music track picker in Settings
   ===================================================================== */
.trk-row{gap:8px;}
.trk-row .btn.sm.trk-btn{padding:5px 11px;min-width:34px;font-size:11px;letter-spacing:0;}
.trk-row .trk-name{min-width:150px;text-align:center;color:var(--accent2);font-weight:700;letter-spacing:.6px;}

/* ============================ BATCH 27 ============================ */
/* ---------------- the vending machine ---------------- */
#screen-cards.vending .card-grid{display:block;}
.vend-wrap{display:flex;justify-content:center;}
.vend-mc{position:relative;width:min(980px,100%);padding:16px 18px 14px;border-radius:26px;
  background:linear-gradient(180deg,#d84a5a,#a8283a 60%,#7e1c2c);border:3px solid #ff8a96;
  box-shadow:0 26px 60px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -8px 0 rgba(0,0,0,.25);}
.vend-top{display:flex;justify-content:space-between;align-items:center;padding:4px 10px 12px;color:#fff;}
.vend-top b{font-size:22px;letter-spacing:5px;text-shadow:0 2px 0 #7e1c2c, 0 0 18px rgba(255,255,255,.35);}
.vend-top span{font-size:11px;letter-spacing:3px;font-weight:800;background:#ffd23d;color:#5a1414;padding:4px 10px;border-radius:20px;}
.vend-glass{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px;border-radius:18px;
  background:linear-gradient(160deg,rgba(190,235,255,.18),rgba(20,30,50,.85) 40%,rgba(10,16,28,.95));
  border:2px solid rgba(255,255,255,.28);box-shadow:inset 0 0 40px rgba(0,0,0,.6);}
.vend-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;
  border-radius:16px;border:2px solid var(--vc);background:linear-gradient(175deg,#1a2740,#0e1628);
  color:#e8f0ff;cursor:pointer;font-family:inherit;min-height:300px;
  animation:cardIn .42s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--d,0ms);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s, opacity .3s, filter .3s;}
.vend-slot:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 34px color-mix(in srgb,var(--vc) 55%,transparent);}
.vend-coil{position:absolute;left:14px;right:14px;top:128px;height:14px;border-radius:7px;
  background:repeating-linear-gradient(90deg,#c3cad6 0 6px,#6f7c93 6px 10px);opacity:.5;}
.vend-slot canvas{width:132px;height:132px;position:relative;z-index:1;}
.vend-code{position:absolute;top:8px;left:10px;font-style:normal;font-size:11px;font-weight:900;letter-spacing:2px;color:#0b1018;background:#ffd23d;padding:2px 7px;border-radius:6px;}
.vend-slot b{font-size:17px;letter-spacing:.5px;margin-top:6px;}
.vend-slot p{margin:2px 4px 6px;font-size:12.5px;line-height:1.4;color:#aebfdd;text-align:center;min-height:52px;}
.vend-tag{margin-top:auto;font-size:10px;font-weight:900;letter-spacing:3px;color:#0b1018;background:var(--vc);padding:3px 10px;border-radius:20px;}
.vend-slot .uc-num{position:absolute;top:8px;right:10px;}
.vend-slot.picked{transform:translateY(22px) scale(1.04);box-shadow:0 0 50px color-mix(in srgb,var(--vc) 70%,transparent);
  transition:transform .5s cubic-bezier(.5,-0.3,.4,1.4), box-shadow .3s;}
.vend-slot.out{opacity:.32;filter:grayscale(.7);transform:scale(.97);}
.vend-tray{margin:12px auto 0;width:46%;height:34px;border-radius:10px;background:#1a0a10;box-shadow:inset 0 4px 10px rgba(0,0,0,.8);display:grid;place-items:center;}
.vend-tray span{font-size:10px;letter-spacing:5px;color:rgba(255,255,255,.35);font-weight:800;}

/* ---------------- what you are on (HUD) ---------------- */
#hud-vend{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:5px;pointer-events:none;z-index:3;}
.hv-chip{display:flex;align-items:center;gap:7px;background:rgba(9,14,24,.82);border:1px solid color-mix(in srgb,var(--vc) 60%,transparent);
  border-radius:9px;padding:4px 10px;font-size:11px;letter-spacing:1.2px;color:#e8f0ff;font-weight:700;}
.hv-chip i{width:8px;height:8px;border-radius:50%;background:var(--vc);box-shadow:0 0 8px var(--vc);}
.hv-chip em{font-style:normal;color:var(--dim);font-weight:600;letter-spacing:1px;}

/* the new audit report */
#report-fx[data-k="nodash"] .rf-stamp{border-color:#ff9a3d; color:#ff9a3d;}

/* ---------------- the Virus Encyclopedia ---------------- */
#screen-foes{justify-content:flex-start;align-items:stretch;background:radial-gradient(circle at 50% 30%,rgba(22,30,50,.97),rgba(5,8,14,.99));}
#screen-foes .foe-top{display:flex;align-items:center;gap:18px;padding:14px 22px 8px;}
#screen-foes .foe-title{font-size:24px;font-weight:900;letter-spacing:5px;
  background:linear-gradient(90deg,#fff,#ff9a9a 55%,#ff5a6a);-webkit-background-clip:text;background-clip:text;color:transparent;}
#screen-foes .foe-title small{display:block;font-size:11px;letter-spacing:2px;font-weight:600;color:var(--dim);-webkit-text-fill-color:var(--dim);}
#screen-foes .foe-count{flex:1;text-align:center;font-size:13px;letter-spacing:2px;color:var(--dim);}
#screen-foes .foe-count b{color:#fff;font-size:18px;}
.foe-body{flex:1;display:flex;gap:18px;padding:6px 22px 18px;min-height:0;}
.foe-list{flex:1.4;overflow:auto;padding-right:8px;}
.foe-group{font-size:11px;font-weight:900;letter-spacing:4px;color:#ff9a9a;margin:12px 2px 8px;}
.foe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;}
.foe-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 9px;border-radius:14px;
  border:1.5px solid rgba(120,160,220,.22);background:linear-gradient(175deg,#152036,#0b1222);color:#dfe9ff;
  font-family:inherit;cursor:pointer;transition:transform .14s, border-color .14s, box-shadow .14s;}
.foe-tile:hover{transform:translateY(-3px);border-color:#ff9a9a;}
.foe-tile.on{border-color:#ff6a6a;box-shadow:0 0 18px rgba(255,90,106,.35);}
.foe-tile canvas{width:72px;height:72px;}
.foe-tile span{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-align:center;line-height:1.2;min-height:26px;display:flex;align-items:center;}
.foe-tile.locked{background:#0a1019;border-style:dashed;color:#4a566c;}
.foe-q{display:grid;place-items:center;width:72px;height:72px;font-size:34px;font-weight:900;color:#3a4456;}
.foe-q.big{width:220px;height:220px;font-size:100px;}
.foe-detail{flex:1;min-width:340px;max-width:480px;padding:18px 20px;border-radius:18px;background:var(--panel);border:1px solid var(--line);overflow:auto;}
.fd-art{display:flex;justify-content:center;background:radial-gradient(circle,rgba(255,90,106,.13),transparent 70%);border-radius:16px;}
.fd-art canvas{width:240px;height:240px;}
.fd-chip{display:inline-block;margin-top:10px;font-size:10px;font-weight:900;letter-spacing:3px;color:#0b1018;background:#ff9a9a;padding:3px 10px;border-radius:20px;}
.fd-name{font-size:24px;font-weight:900;letter-spacing:2px;margin:8px 0 10px;color:#fff;}
.fd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.fd-stats div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;}
.fd-stats b{display:block;font-size:18px;color:#fff;}
.fd-stats span{font-size:9px;letter-spacing:2px;color:var(--dim);font-weight:800;}
.fd-h{font-size:10px;font-weight:900;letter-spacing:3px;color:#ff9a9a;margin-top:12px;}
.fd-desc{font-size:13px;line-height:1.5;color:#c9d6ee;margin:4px 0;}
.fd-lore{font-size:13px;line-height:1.5;color:#ffd27a;font-style:italic;margin:4px 0;}
.fd-note{font-size:10.5px;color:var(--dim);margin-top:14px;}

/* ---------------- the run report ---------------- */
.go-stats.rr-on{max-height:none;overflow:visible;}
.rr-team{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 12px;}
.rr-chip{min-width:92px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:center;}
.rr-chip b{display:block;font-size:18px;color:#fff;}
.rr-chip span{font-size:8.5px;letter-spacing:2px;color:var(--dim);font-weight:800;}
.rr-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:10px;}
.rr-tab{font-family:inherit;font-size:12px;font-weight:800;letter-spacing:1px;padding:6px 12px;border-radius:10px;
  border:1.5px solid color-mix(in srgb,var(--pc) 50%,transparent);background:rgba(255,255,255,.03);color:var(--pc);cursor:pointer;}
.rr-tab.on{background:color-mix(in srgb,var(--pc) 22%,transparent);border-color:var(--pc);}
.rr-tab em{font-style:normal;color:var(--dim);font-weight:600;}
.rr-body{display:flex;gap:14px;align-items:stretch;}
.rr-stats{flex:0 0 280px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);}
.rr-who{margin-bottom:4px;}
.rr-who b{display:block;font-size:17px;color:var(--pc);}
.rr-who span{font-size:10px;letter-spacing:2px;color:var(--dim);font-weight:800;}
.rr-stat{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid rgba(120,160,220,.1);font-size:12.5px;color:#b9c8e2;}
.rr-stat b{color:#fff;font-size:14px;text-align:right;}
.rr-stat small{display:block;font-size:10px;color:var(--dim);font-weight:600;}
.rr-dmg{flex:1;min-width:0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);}
.rr-dh{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:900;letter-spacing:3px;color:#9ec7ff;margin-bottom:8px;}
.rr-dh small{font-size:11px;color:var(--dim);letter-spacing:1px;}
.rr-list{max-height:34vh;overflow:auto;padding-right:6px;display:flex;flex-direction:column;gap:6px;}
.rr-row{display:flex;align-items:center;gap:10px;}
.rr-row canvas{width:34px;height:34px;flex:none;border-radius:8px;background:#0d1628;}
.rr-mid{flex:1;min-width:0;}
.rr-nm{font-size:12.5px;font-weight:700;color:#e8f0ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rr-bar{height:8px;border-radius:4px;background:rgba(150,185,240,.12);margin-top:4px;overflow:hidden;}
.rr-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--bc),color-mix(in srgb,var(--bc) 55%,#fff));
  box-shadow:0 0 8px color-mix(in srgb,var(--bc) 60%,transparent);}
.rr-val{flex:0 0 84px;text-align:right;}
.rr-val b{display:block;font-size:13px;color:#fff;}
.rr-val span{font-size:10.5px;color:var(--dim);}
.rr-foot{font-size:10.5px;color:var(--dim);margin:8px 0 0;}
.rr-wait{text-align:center;margin-top:8px;}

/* ============================ BATCH 28 ============================ */
/* the vending machine takes your coins: credit display, price tags, walk away */
.vend-credit{position:relative;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 12px;border-radius:12px;
  background:linear-gradient(180deg,#12070b,#1f0c12);border:2px solid #ffd23d;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.8), 0 0 16px rgba(255,210,61,.25);}
.vend-credit small{font-size:10px;font-weight:900;letter-spacing:3px;color:#ffd27a;opacity:.85;}
.vend-credit .coin-ico{width:18px;height:18px;}
.vend-credit strong{font-family:ui-monospace,Consolas,monospace;font-size:22px;font-weight:900;letter-spacing:2px;color:#ffe27a;
  text-shadow:0 0 10px rgba(255,200,60,.7);min-width:3ch;text-align:right;}
.vend-credit.paid{animation:vendPaid .45s ease;}
@keyframes vendPaid{0%{transform:scale(1);}35%{transform:scale(1.08);box-shadow:inset 0 2px 8px rgba(0,0,0,.8),0 0 30px rgba(255,120,90,.6);}100%{transform:scale(1);}}
.vend-spent{position:absolute;right:12px;top:-8px;font-style:normal;font-size:16px;font-weight:900;color:#ff8a7a;
  text-shadow:0 2px 0 #5a1414;pointer-events:none;animation:vendSpent 1.05s ease-out forwards;}
@keyframes vendSpent{0%{opacity:0;transform:translateY(8px);}15%{opacity:1;}100%{opacity:0;transform:translateY(-30px);}}
.vend-price{position:absolute;top:120px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px 3px 6px;border-radius:8px;background:#fff4d6;color:#5a3000;border:1.5px solid #ffd23d;font-size:14px;font-weight:900;letter-spacing:.5px;
  box-shadow:0 3px 0 #c9a25a, 0 6px 14px rgba(0,0,0,.45);}
.vend-price .coin-ico{width:13px;height:13px;}
.vend-slot.poor{cursor:not-allowed;border-style:dashed;border-color:color-mix(in srgb,var(--vc) 45%,#3a4456);}
.vend-slot.poor canvas,.vend-slot.poor b,.vend-slot.poor p,.vend-slot.poor .vend-tag{opacity:.45;filter:grayscale(.75);}
.vend-slot.poor:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.45);}
.vend-slot.poor .vend-price{background:#3a1418;color:#ff8a8a;border-color:#8a2a32;box-shadow:0 3px 0 #1a0608, 0 6px 14px rgba(0,0,0,.45);}
.vend-need{position:absolute;top:60px;left:50%;z-index:3;transform:translateX(-50%) rotate(-9deg);white-space:nowrap;
  padding:5px 12px;border-radius:7px;background:#e0303a;color:#fff;font-size:12px;font-weight:900;letter-spacing:2px;
  border:2px solid #fff;box-shadow:0 8px 18px rgba(0,0,0,.55);}
.vend-slot.deny{animation:vendDeny .38s ease;}
@keyframes vendDeny{0%,100%{transform:translateX(0);}20%{transform:translateX(-9px);}40%{transform:translateX(8px);}60%{transform:translateX(-5px);}80%{transform:translateX(3px);}}
.vend-leave[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none;}
.vend-leave.urge{border-color:rgba(255,210,61,.75);color:#ffe9a8;animation:vendUrge 1.6s ease-in-out infinite;}
@keyframes vendUrge{0%,100%{box-shadow:0 0 0 rgba(255,210,61,0);}50%{box-shadow:0 0 22px rgba(255,210,61,.45);}}
/* shorter screens: the machine tightens up so the walk-away row still fits */
@media (max-height: 900px){
  #screen-cards.vending .vend-mc{padding:12px 16px 10px;}
  #screen-cards.vending .vend-top{padding:2px 8px 8px;}
  #screen-cards.vending .vend-credit{padding:4px 12px 4px 10px;}
  #screen-cards.vending .vend-slot{min-height:0;}
  #screen-cards.vending .vend-tray{margin-top:8px;height:28px;}
  #screen-cards.vending .cards-tools{margin-top:8px;}
}