/* ═══════════ ZOMAPO HUD v3 — survival bulletin in-game ═══════════
   Identity: sharp corners, hard offset shadows, hazard tape, stencil tags.
   Composition (≠ MONSI/HOKA): wave tag TOP-LEFT · vitals BOTTOM-LEFT ·
   skills BOTTOM-RIGHT · kill feed RIGHT · combo LEFT.                    */

@font-face{font-family:'Creepster';src:url('/assets/fonts/creepster-latin-400-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Rubik';src:url('/assets/fonts/rubik-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Rubik';src:url('/assets/fonts/rubik-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Rubik';src:url('/assets/fonts/rubik-latin-900-normal.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --bone:#e8e4d8; --bone-dim:#a09c8d;
  --blood:#c1272d; --blood-hot:#ff3b30;
  --zgreen:#86c232; --hazard:#e3b71f; --hazard-dark:#141210;
  --ink:#0c0d0a; --panel:#14160fee; --panel2:#1b1e15;
  --edge:#3a3d30; --edge-hi:#55584a;
  --disp:'Creepster',cursive; --ui:'Rubik',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;color:var(--bone);font-family:var(--ui);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
button{font-family:var(--ui);color:inherit;background:none;border:none;cursor:pointer}
.icn{width:16px;height:16px;vertical-align:-3px;opacity:.9}
.icn-big{width:26px;height:26px;vertical-align:-6px}
.amber{color:var(--hazard)}

/* dusk apocalypse sky: CSS gradient behind transparent canvas (playbook §4) */
body{background:linear-gradient(180deg,#151714 0%,#2a2721 34%,#5a3b23 62%,#7a4a26 78%,#3a2a1c 100%)}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* hazard tape strip */
.tapeline{height:14px;background:repeating-linear-gradient(-45deg,var(--hazard) 0 14px,var(--hazard-dark) 14px 28px);
  border-top:2px solid #000;border-bottom:2px solid #000}

/* ── overlays ── */
.overlay{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:rgba(10,11,8,.9);overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) 16px}
.overlay.is-open{display:flex;animation:ovIn .3s ease}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── start screen: split bulletin (logo/controls LEFT · survivors RIGHT) ── */
.start-inner{position:relative;width:min(940px,100%);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:0 34px;text-align:left;align-items:start;padding:10px 0 26px}
.logo-wrap{grid-column:1}
.logo-img{width:min(400px,86vw);filter:drop-shadow(7px 7px 0 rgba(0,0,0,.85));animation:logoFlicker 6s infinite}
.logo{font-family:var(--disp);font-size:clamp(58px,10vw,104px);line-height:.9;letter-spacing:.04em;color:var(--blood-hot);
  text-shadow:0 3px 0 #6d1114,7px 7px 0 rgba(0,0,0,.85);animation:logoFlicker 6s infinite}
@keyframes logoFlicker{0%,93%,97%,100%{opacity:1}94%,96%{opacity:.75}}
.logo-sub{font-weight:900;font-size:11px;letter-spacing:.42em;color:var(--hazard);margin-top:12px;text-transform:uppercase}
.tagline{margin-top:8px;color:var(--bone-dim);font-size:14px}
.tagline span{color:var(--bone);font-weight:700}

.survivor-select{grid-column:2;grid-row:1 / span 3;border:2px solid #000;background:var(--panel);
  box-shadow:7px 7px 0 #000;padding:16px}
.panel-label{font-size:10px;font-weight:900;letter-spacing:.26em;color:var(--bone-dim);margin-bottom:12px}
.survivor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.survivor-card{position:relative;padding:12px 6px 10px;background:var(--panel2);
  border:2px solid var(--edge);transition:transform .12s,border-color .12s;text-align:center}
.survivor-card:hover{transform:translate(-2px,-2px)}
.survivor-card.is-selected{border-color:var(--hazard);box-shadow:4px 4px 0 #000}
.survivor-face{width:52px;height:52px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:28px;color:var(--ink);border:2px solid #000;
  background:radial-gradient(120% 120% at 30% 20%,#b9c98f,#6f8f3f 60%,#42591f)}
.survivor-face::before{content:attr(data-face)}
.survivor-face.is-gold{background:radial-gradient(120% 120% at 30% 20%,#ffe9a8,#e0a83c 55%,#8a5f14);color:#4d3405}
.survivor-name{font-weight:900;font-size:12px;letter-spacing:.08em}
.survivor-trait{font-size:10px;color:var(--bone-dim);margin-top:2px}
.survivor-card.is-locked{opacity:.85;filter:saturate(.8)}
.survivor-card.is-locked .survivor-name{color:var(--hazard)}

.controls-guide{grid-column:1;display:flex;flex-direction:column;gap:9px;margin:22px 0 4px;
  border-left:3px solid var(--blood);padding-left:14px}
.ctrl{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--bone-dim)}
.ctrl em{font-style:normal}
.key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 8px;
  background:#000;border:1px solid var(--edge-hi);border-bottom-width:3px;
  font-weight:900;font-size:11px;color:var(--bone)}
.key-ult{border-color:var(--blood-hot);color:#ffd9d6}
.ctrl-touch{display:none}
@media (pointer:coarse){.ctrl-touch{display:flex}}

.btn-primary{grid-column:1;justify-self:start;display:inline-block;margin-top:18px;padding:16px 30px;
  font-weight:900;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#141210;
  background:var(--hazard);border:2px solid #000;box-shadow:6px 6px 0 #000;transition:transform .1s,box-shadow .1s}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #000}
.btn-primary:active{transform:translate(1px,1px);box-shadow:none}
.btn-danger{background:var(--blood);color:#ffe9e6}
.btn-ghost{padding:8px 14px;border:2px solid var(--edge);color:var(--bone-dim);font-weight:900;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;transition:color .15s,border-color .15s;background:rgba(0,0,0,.4)}
.btn-ghost:hover{color:var(--bone);border-color:var(--edge-hi)}
.btn-ghost.ok{color:var(--zgreen);border-color:var(--zgreen)}
.btn-big{font-size:13px;padding:13px 22px}
.start-foot{grid-column:1;margin-top:16px;font-size:11.5px;color:var(--bone-dim);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.foot-dot{width:7px;height:7px;background:var(--zgreen);display:inline-block;animation:dotPulse 1.6s infinite}
@keyframes dotPulse{50%{opacity:.35}}

@media (max-width:760px){
  .start-inner{grid-template-columns:1fr;text-align:center}
  .survivor-select{grid-column:1;grid-row:auto;margin-top:18px}
  .controls-guide{grid-column:1;border-left:none;border-top:2px dashed var(--edge);padding:14px 0 0;align-items:center}
  .btn-primary,.start-foot{grid-column:1;justify-self:center;justify-content:center}
  .logo-img{margin:0 auto}
  .logo-wrap{text-align:center}
}

/* ── HUD frame ── */
.hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:var(--ui)}
.hud.is-hidden{display:none}
.hud [class^=hud-]{position:absolute}

/* wave tag — TOP-LEFT stencil plate */
.hud-tc{top:max(12px,env(safe-area-inset-top));left:14px;text-align:left;z-index:3;pointer-events:none;
  background:var(--panel);border:2px solid #000;box-shadow:4px 4px 0 #000;padding:8px 14px 9px}
.wave-chip{font-family:var(--disp);font-size:clamp(22px,3.4vw,30px);letter-spacing:.06em;color:var(--bone);line-height:1}
.wave-chip span{color:var(--blood-hot)}
.left-chip{margin-top:4px;font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--bone-dim);text-transform:uppercase}
.left-chip span{color:var(--hazard)}

/* vitals — BOTTOM-LEFT */
.hud-tl{left:14px;bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:flex-end}
.portrait{width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:28px;color:var(--ink);
  background:radial-gradient(120% 120% at 30% 20%,#b9c98f,#6f8f3f 60%,#42591f);
  border:2px solid #000;box-shadow:4px 4px 0 #000}
.vitals{display:flex;flex-direction:column;gap:5px}
.hpbar{position:relative;width:min(250px,32vw);height:20px;overflow:hidden;
  background:#0b0d09;border:2px solid #000;box-shadow:4px 4px 0 #000}
.hpbar-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(1);
  background:linear-gradient(180deg,#ff5148,#a41d1c);transition:transform .18s ease}
.hpbar-ghost{position:absolute;inset:0;transform-origin:left;transform:scaleX(1);background:rgba(255,220,210,.35);transition:transform .7s ease .25s}
.hpbar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:11.5px;text-shadow:0 1px 3px rgba(0,0,0,.9);letter-spacing:.05em}
.stambar{width:min(190px,24vw);height:6px;overflow:hidden;background:#0b0d09;border:1px solid #000}
.stambar-fill{height:100%;transform-origin:left;background:linear-gradient(180deg,#b8e26a,#5f8f22);transition:transform .2s}

/* currency + system — TOP-RIGHT */
.hud-tr{top:max(12px,env(safe-area-inset-top));right:14px;display:flex;gap:8px;align-items:center;pointer-events:auto}
.scrap-chip,.best-chip{display:flex;align-items:center;gap:6px;padding:8px 12px;
  background:var(--panel);border:2px solid #000;box-shadow:4px 4px 0 #000;font-weight:900;font-size:14px}
.scrap-chip{color:var(--hazard)}
.scrap-ic{font-size:15px}
.scrap-chip em{font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--bone-dim)}
.scrap-chip.bump{animation:bump .3s ease}
@keyframes bump{35%{transform:scale(1.13)}}
.best-chip{font-size:11.5px;color:var(--bone-dim)}
.sysbtn{width:36px;height:36px;background:var(--panel);border:2px solid #000;box-shadow:4px 4px 0 #000;
  display:flex;align-items:center;justify-content:center}
.sysbtn .icn{width:17px;height:17px}
.sysbtn:hover{border-color:var(--edge-hi)}
@media (max-width:980px){
  .best-chip{display:none}
  .scrap-chip em{display:none}
  .hpbar{width:min(190px,42vw)}
}

/* combo — LEFT side */
.combo{position:absolute;left:16px;top:32%;text-align:left;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.combo.is-live{opacity:1;transform:none}
.combo span{display:block;font-family:var(--disp);font-size:clamp(34px,6vw,56px);color:var(--zgreen);
  text-shadow:4px 4px 0 rgba(0,0,0,.7)}
.combo.tier-2 span{color:var(--hazard)}
.combo.tier-3 span{color:var(--blood-hot)}
.combo em{font-style:normal;font-weight:900;font-size:10px;letter-spacing:.3em;color:var(--bone-dim)}
.combo.pop span{animation:comboPop .22s ease}
@keyframes comboPop{40%{transform:scale(1.22)}}

/* kill feed — RIGHT side */
.feed{position:absolute;right:14px;top:34%;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.feed-row{font-size:11.5px;font-weight:700;color:var(--bone-dim);background:rgba(8,9,6,.85);
  border-right:3px solid var(--blood);border-top:1px solid #000;border-bottom:1px solid #000;
  padding:5px 10px;animation:feedIn .18s ease;max-width:230px;text-align:right}
.feed-row b{color:var(--bone)}
.feed-row.gold{border-right-color:var(--hazard)}
.feed-row.gold b{color:var(--hazard)}
@keyframes feedIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

.crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);opacity:.5;pointer-events:none}
.crosshair.is-off{display:none}

/* skills — BOTTOM-RIGHT cluster */
.skillbar{position:absolute;right:16px;bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;gap:9px;align-items:flex-end;pointer-events:auto}
.skill{position:relative;width:54px;height:54px;overflow:hidden;
  background:var(--panel);border:2px solid #000;box-shadow:4px 4px 0 #000;
  display:flex;align-items:center;justify-content:center}
.skill-ic{font-size:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.skill-key{position:absolute;bottom:2px;right:4px;font-size:8.5px;font-weight:900;letter-spacing:.05em;color:var(--bone-dim)}
.skill-cd{position:absolute;inset:0;background:rgba(4,5,3,.8);transform-origin:bottom;transform:scaleY(0);pointer-events:none}
.skill.on-cd .skill-cd{transition:transform linear}
.skill.flash{animation:skillFlash .25s ease}
@keyframes skillFlash{30%{box-shadow:4px 4px 0 #000,0 0 0 3px var(--zgreen)}}

.skill-ult{width:70px;height:70px;border-radius:50%;border-color:#2a0a0a;box-shadow:4px 4px 0 #000}
.skill-ult .skill-ic{font-size:28px;color:#ffb4ad}
.ult-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ult-ring circle{fill:none;stroke-width:5}
.ult-ring-bg{stroke:rgba(232,228,216,.12)}
.ult-ring-fill{stroke:var(--blood-hot);stroke-linecap:butt;stroke-dasharray:201;stroke-dashoffset:201;transition:stroke-dashoffset .3s}
.ult-ready-label{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:900;letter-spacing:.22em;color:var(--blood-hot);opacity:0}
.skill-ult.is-ready{animation:ultThrob 1.1s infinite}
.skill-ult.is-ready .ult-ready-label{opacity:1;animation:dotPulse 1.1s infinite}
@keyframes ultThrob{50%{box-shadow:4px 4px 0 #000,0 0 0 4px rgba(255,59,48,.35),0 0 30px rgba(255,59,48,.5)}}

/* ── damage / ult overlays ── */
#bloodVignette{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(78% 78% at 50% 50%,transparent 52%,rgba(120,10,10,.5) 82%,rgba(90,4,4,.85) 100%)}
#lowHpPulse{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(80% 80% at 50% 50%,transparent 58%,rgba(160,10,10,.42) 100%)}
.hud.is-lowhp #lowHpPulse{animation:heartbeat 1s infinite}
@keyframes heartbeat{0%,100%{opacity:0}18%{opacity:1}32%{opacity:.25}46%{opacity:.8}60%{opacity:0}}
.letterbox{position:absolute;left:0;right:0;height:0;background:#000;transition:height .3s ease;z-index:5}
.letterbox-top{top:0;border-bottom:0 solid transparent}
.letterbox-bot{bottom:0;border-top:0 solid transparent}
.hud.is-ult .letterbox{height:9vh}
.hud.is-ult .letterbox-top{border-bottom:4px solid var(--hazard)}
.hud.is-ult .letterbox-bot{border-top:4px solid var(--hazard)}
.ult-title{position:absolute;left:50%;top:15%;transform:translateX(-50%) scale(.8);opacity:0;z-index:6;
  font-family:var(--disp);font-size:clamp(40px,8vw,76px);color:var(--blood-hot);letter-spacing:.08em;
  text-shadow:6px 6px 0 rgba(0,0,0,.85)}
.hud.is-ult .ult-title{animation:ultTitle 2.2s ease forwards}
@keyframes ultTitle{0%{opacity:0;transform:translateX(-50%) scale(.8)}12%{opacity:1;transform:translateX(-50%) scale(1.06)}20%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.02)}}

/* ── toasts & banner ── */
.toasts{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center}
.toast{padding:8px 16px;background:var(--panel);border:2px solid #000;box-shadow:4px 4px 0 #000;
  font-size:12.5px;font-weight:900;letter-spacing:.03em;animation:toastIn .25s ease}
.toast.gold{color:var(--hazard)}
.toast.green{color:var(--zgreen)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.banner{position:absolute;left:0;right:0;top:24%;text-align:center;pointer-events:none;
  font-family:var(--disp);font-size:clamp(38px,8vw,72px);letter-spacing:.06em;color:var(--bone);
  opacity:0;text-shadow:6px 6px 0 rgba(0,0,0,.8)}
.banner.show{animation:bannerIn 2s ease forwards}
.banner.danger{color:var(--blood-hot)}
.banner.green{color:var(--zgreen)}
@keyframes bannerIn{0%{opacity:0;transform:scale(.92)}12%{opacity:1;transform:scale(1.03)}22%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1.01)}}

/* ── touch ── */
.touch-ui{display:none}
@media (pointer:coarse){
  .touch-ui{display:block;pointer-events:none}
  .joy-zone{position:absolute;left:0;bottom:0;width:46vw;height:44vh;pointer-events:auto}
  .joy-base{position:absolute;left:30px;bottom:112px;width:108px;height:108px;border-radius:50%;
    background:rgba(12,13,10,.55);border:2px solid #000}
  .joy-stick{position:absolute;left:50%;top:50%;width:50px;height:50px;border-radius:50%;transform:translate(-50%,-50%);
    background:radial-gradient(120% 120% at 35% 25%,#3c4237,#20241d);border:2px solid #000}
  .touch-actions{position:absolute;right:18px;bottom:108px;display:flex;flex-direction:column;gap:12px;align-items:flex-end;pointer-events:auto}
  .tbtn{width:60px;height:60px;border-radius:50%;font-size:23px;background:rgba(18,20,14,.85);
    border:2px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.6)}
  .tbtn:active{transform:scale(.92)}
  .tbtn-ult{width:72px;height:72px;background:radial-gradient(120% 120% at 35% 25%,#8f2a26,#4a0f12);border-color:#000}
  .tbtn-roll{width:66px;height:66px}
  .skillbar{display:none}
  .crosshair{display:none}
}

/* ── shop / death / lb / pause ── */
.shop-inner,.death-inner,.lb-inner,.pause-inner{position:relative;width:min(620px,100%);text-align:center;padding:10px 0 26px}
.wave-clear-title{font-family:var(--disp);font-size:clamp(38px,7vw,60px);color:var(--zgreen);text-shadow:6px 6px 0 rgba(0,0,0,.8)}
.wave-clear-title span{color:var(--bone)}
.tally{width:min(380px,100%);margin:16px auto 0;border:2px solid #000;background:var(--panel);box-shadow:6px 6px 0 #000}
.tally-row{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--edge);font-size:13px;color:var(--bone-dim)}
.tally-row:last-child{border-bottom:none}
.tally-row:nth-child(odd){background:var(--panel2)}
.tally-row b{color:var(--bone);font-size:13.5px}
.panel-label{margin-top:24px}
.shop-grid{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.shop-card{width:104px;padding:14px 8px 12px;background:var(--panel);border:2px solid var(--edge);
  box-shadow:4px 4px 0 #000;transition:transform .12s,border-color .12s}
.shop-card:hover{transform:translate(-2px,-2px);border-color:var(--hazard)}
.shop-ic{font-size:28px;margin-bottom:8px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.shop-name{font-weight:900;font-size:12px}
.shop-price{margin-top:5px;font-size:11px;font-weight:900;color:var(--hazard)}
.shop-card.is-owned{border-color:var(--zgreen)}
.shop-card.is-owned .shop-price{color:var(--zgreen)}
.shop-card.is-locked{opacity:.55;filter:saturate(.5)}
.shop-card.is-locked:hover{transform:none;border-color:var(--edge)}
.shop-card.bought{animation:bought .35s ease}
@keyframes bought{40%{transform:scale(1.08)}}
.shop-inner .btn-primary,.death-inner .btn-primary,.pause-inner .btn-primary{grid-column:auto;justify-self:auto}

.overlay-death{background:rgba(22,7,7,.93)}
.death-title{font-family:var(--disp);font-size:clamp(60px,14vw,120px);color:var(--blood-hot);line-height:.95;
  text-shadow:8px 8px 0 rgba(0,0,0,.85);animation:deathSlam .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes deathSlam{0%{transform:scale(1.7);opacity:0}60%{transform:scale(.97);opacity:1}100%{transform:scale(1)}}
.death-sub{margin-top:8px;color:var(--bone-dim);font-size:14.5px}
.death-sub b{color:var(--bone)}
.tally-death{margin-top:18px}
.death-btns{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.death-lb{margin-top:18px;font-size:12px;color:var(--bone-dim)}
.death-lb b{color:var(--hazard)}

.panel-title{font-family:var(--disp);font-size:clamp(30px,5vw,44px);letter-spacing:.05em;margin-bottom:16px;text-shadow:5px 5px 0 rgba(0,0,0,.8)}
.lb-rows{width:min(460px,100%);margin:0 auto 18px;border:2px solid #000;background:var(--panel);box-shadow:6px 6px 0 #000;max-height:52vh;overflow-y:auto}
.lb-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;text-align:left;
  padding:9px 14px;border-bottom:1px solid var(--edge);font-size:13px}
.lb-row:last-child{border-bottom:none}
.lb-row:nth-child(odd){background:var(--panel2)}
.lb-rank{font-weight:900;color:var(--bone-dim)}
.lb-row:nth-child(1) .lb-rank{color:var(--hazard)}
.lb-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-name .demo{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--bone-dim);border:1px solid var(--edge);padding:1px 5px;margin-left:7px;vertical-align:1px}
.lb-wave{font-weight:900;color:var(--zgreen)}
.pause-hint{color:var(--bone-dim);font-size:13px;margin-bottom:18px}
.pause-inner .btn-ghost{margin-top:12px}

/* screen-shake hook */
.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}