/* ==========================================================================
   CubRawl · In-game HUD, labels, feed, banners & touch controls
   ========================================================================== */

/* ================= name labels & floating numbers ================= */
.tag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;will-change:transform}
.nm{
  padding:3px 9px 4px;border-radius:2px;font:600 12.5px/1.1 var(--font-ui);color:#fff;
  background:rgba(5,9,20,.78);border:1px solid rgba(0,234,255,.22);white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.pwr{display:flex;gap:3px}
.pwr:empty{display:none}
.pi{
  display:flex;align-items:center;gap:3px;padding:2px 7px 2px 2px;border-radius:2px;
  background:rgba(5,9,20,.82);border:1px solid rgba(0,234,255,.2);
  color:#fff;font:700 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.pi img{width:18px;height:18px;display:block}
.nm.danger{background:rgba(120,8,30,.92);border-color:rgba(255,51,85,.7);box-shadow:0 0 14px rgba(255,51,85,.35)}
.nm.prey{background:rgba(4,70,48,.9);border-color:rgba(57,246,160,.6);box-shadow:0 0 14px rgba(57,246,160,.3)}
.nm.same{background:rgba(92,60,0,.92);border-color:rgba(255,176,32,.65);box-shadow:0 0 14px rgba(255,176,32,.3)}
.nm.me{background:linear-gradient(180deg,var(--cyan-soft),var(--cyan));color:#021018;border-color:transparent;box-shadow:0 0 18px rgba(0,234,255,.55)}
.tag.ghost{opacity:.55}
.ft{
  position:absolute;left:0;top:0;font:400 18px/1 var(--font-display);color:#fff;white-space:nowrap;
  will-change:transform,opacity;
  text-shadow:0 2px 0 rgba(0,0,0,.8),0 0 14px rgba(0,234,255,.35);
}
.ft.plus{font-size:14px}
.ft.merge{font-size:23px}
.ft.big{font-size:34px}
.ft.bad{color:var(--red);text-shadow:0 0 14px rgba(255,51,85,.7)}

/* ================= HUD shell ================= */
.hud-tl{
  position:fixed;top:0;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 0 0 calc(env(safe-area-inset-left,0px) + 12px);
}
.hud-tr{
  position:fixed;top:0;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-right,0px) + 12px) 0 0;
}
#hud .panel,.roomchip,#roundChip{
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}

/* ---- score / goal ---- */
.me{display:flex;align-items:center;gap:12px;padding:9px 16px 9px 9px;border-radius:2px}
.me-score{font:400 22px/1 var(--font-display);font-variant-numeric:tabular-nums;color:#fff}
.me-score small{font:500 10.5px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-left:7px}
.goal{display:flex;align-items:center;gap:8px;margin-top:7px;font:500 11.5px/1 var(--font-mono);color:var(--ink-soft)}
.goal b{font-weight:700;color:var(--cyan-soft)}
.bar{position:relative;width:110px;height:7px;border-radius:1px;background:rgba(255,255,255,.09);overflow:hidden;border:1px solid rgba(0,234,255,.14)}
.bar>i{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--magenta));
  box-shadow:0 0 10px rgba(0,234,255,.5);
}

/* ---- stamina ---- */
.stamina{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:2px;font:500 11.5px/1 var(--font-mono);color:var(--ink-soft)}
.stamina svg{width:16px;height:16px;flex:none;color:var(--cyan)}
.stamina .bar{width:118px}
.stamina .bar>i{background:linear-gradient(90deg,var(--cyan),var(--cyan-soft));transition:none;box-shadow:0 0 10px rgba(0,234,255,.65)}
.stamina.locked .bar>i{background:repeating-linear-gradient(-45deg,#3c4966 0 6px,#243048 6px 12px)}
.stamina.on{box-shadow:var(--shadow),inset 0 0 0 1px var(--cyan),0 0 18px rgba(0,234,255,.35)}

/* ---- active powers ---- */
.powers{display:flex;flex-wrap:wrap;gap:6px;max-width:260px}
.pw{
  --c:#fff;--p:1;
  display:flex;align-items:center;gap:7px;padding:3px 12px 3px 3px;border-radius:2px;
  background:rgba(5,9,20,.78);border:1px solid rgba(0,234,255,.18);
  font:600 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:#fff;
  animation:pwIn .4s cubic-bezier(.2,1.5,.4,1) both;
  transition:opacity .25s,transform .25s;
}
.pw .ring{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:conic-gradient(var(--c) calc(var(--p) * 1turn),rgba(255,255,255,.12) 0);
}
.pw img{width:24px;height:24px;display:block}
.pw b{font-weight:700;min-width:2.4em}
.pw.low{animation:pwLow .42s ease-in-out infinite alternate}
.pw.gone{opacity:0;transform:scale(.55);animation:none}
.pw.bad{box-shadow:inset 0 0 0 1px var(--cyan),0 0 16px rgba(0,234,255,.3)}
@keyframes pwIn{from{opacity:0;transform:scale(.4)}}
@keyframes pwLow{to{opacity:.45;transform:scale(.96)}}

/* ---- minimap & round chip ---- */
#minimap{width:132px;height:132px;border-radius:3px;border:1px solid var(--line-strong);box-shadow:0 0 18px rgba(0,234,255,.14),var(--shadow)}
#roundChip{
  display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:2px;
  font:700 12.5px/1 var(--font-mono);color:var(--amber);
  background:rgba(255,176,32,.10);border:1px solid var(--line-amber);
  box-shadow:0 0 16px rgba(255,176,32,.18);
}
#roundChip[hidden]{display:none}
.life-usd{
  display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:2px;
  font:700 13px/1 var(--font-mono);color:var(--amber);
}
.life-usd span{font-size:15px}

/* ---- leaderboard ---- */
.board{--row:25px;width:224px;border-radius:2px;padding:10px 8px 8px}
.board h2{
  margin:0 8px 8px;font:700 10.5px/1.2 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.board ol{list-style:none;margin:0;padding:0;position:relative;height:200px;transition:height .3s}
.board li{
  position:absolute;left:0;right:0;top:0;height:var(--row);
  display:grid;grid-template-columns:18px 12px 1fr auto;align-items:center;gap:7px;
  padding:0 7px;border-radius:2px;font:500 13px/1.2 var(--font-ui);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .3s;
}
.board .rk{font:700 11.5px/1 var(--font-mono);color:var(--ink-dim);text-align:right;font-variant-numeric:tabular-nums}
.board .dot{width:12px;height:12px;border-radius:2px;background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)}
.board .nmx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .nmx svg{width:13px;height:13px;vertical-align:-1px;margin-right:4px;color:var(--amber);filter:drop-shadow(0 0 5px rgba(255,176,32,.6))}
.board .sc{font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--cyan-soft)}
.board li.me{background:linear-gradient(90deg,rgba(0,234,255,.18),rgba(0,234,255,.04));box-shadow:inset 0 0 0 1px rgba(0,234,255,.35)}
.board li.gap{display:block;text-align:center;padding:0;color:var(--ink-dim);line-height:var(--row)}

/* ---- top-right icons ---- */
.icons{display:flex;gap:6px;pointer-events:auto}

/* ---- live feed ---- */
#feed{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:min(440px,52vw);padding-top:calc(env(safe-area-inset-top,0px) + 14px);
}
.fd{
  display:flex;align-items:center;gap:9px;padding:7px 15px;border-radius:2px;
  background:rgba(5,9,20,.86);color:#fff;border:1px solid rgba(0,234,255,.22);
  border-left:2px solid var(--cyan);
  font:500 13.5px/1.25 var(--font-ui);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  animation:fdIn .35s cubic-bezier(.2,1.4,.4,1);text-align:center;
}
.fd b{font:400 14px/1 var(--font-mono);white-space:nowrap;color:var(--cyan-soft)}
.fd.good b{color:var(--green)}
.fd.bad{background:rgba(70,6,20,.92);border-color:rgba(255,51,85,.5);border-left-color:var(--red)}
.fd.bad b{color:#ff93a8}
.fd.info{background:rgba(5,9,20,.6);font-size:12.5px;border-left-color:var(--violet)}
.fd.king{
  background:linear-gradient(90deg,rgba(96,58,0,.95),rgba(150,32,110,.9));
  border-color:rgba(255,176,32,.55);border-left-color:var(--amber);
  box-shadow:0 0 22px rgba(255,176,32,.25);
}
.fd.king b{color:#fff0c2}
.fd.out{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s}
@keyframes fdIn{from{opacity:0;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:none}}

/* ---- hint ---- */
.hint{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  transition:opacity .6s;
}
.hint span{
  display:block;padding:9px 16px;border-radius:2px;
  background:rgba(5,9,20,.8);border:1px solid var(--line);
  color:var(--ink);font:500 13.5px/1.3 var(--font-ui);text-align:center;max-width:86vw;
}
.hint.gone{opacity:0}
body.touch .hint{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 132px)}

/* ---- big banner ---- */
#banner{position:fixed;left:50%;top:25%;transform:translate(-50%,-50%);text-align:center;opacity:0;white-space:nowrap}
#banner.show{animation:bn 2.2s ease-out forwards}
.bn-big{
  --c:#00eaff;
  font:400 clamp(48px,10vw,96px)/1 var(--font-display);color:#fff;
  text-shadow:
    0 0 10px color-mix(in srgb,var(--c) 85%,transparent),
    0 0 42px color-mix(in srgb,var(--c) 60%,transparent),
    0 6px 0 rgba(4,6,15,.85);
  -webkit-text-stroke:2px color-mix(in srgb,var(--c) 55%,#04060f);
}
.bn-sub{margin-top:10px;font:700 14px/1.2 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-soft);text-shadow:0 0 14px rgba(0,234,255,.55)}
@keyframes bn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  13%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  20%{transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-64%) scale(1)}
}

/* ---- combo ---- */
#combo{
  position:fixed;left:50%;top:61%;transform:translate(-50%,-50%);
  display:flex;align-items:baseline;gap:7px;opacity:0;white-space:nowrap;
}
#combo b{font:400 36px/1 var(--font-display);color:#fff;text-shadow:0 0 12px var(--magenta),0 0 34px rgba(255,47,208,.7),0 3px 0 rgba(4,6,15,.8)}
#combo span{font:700 14px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-soft);text-shadow:0 0 10px rgba(0,234,255,.6)}
#combo.show{animation:combo .95s ease-out forwards}
@keyframes combo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}
  26%{transform:translate(-50%,-50%) scale(1)}
  72%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-90%) scale(1)}
}

/* ================= screen-edge effects ================= */
#vignette{background:radial-gradient(ellipse at 50% 46%,transparent 56%,rgba(0,0,0,.5) 100%)}
#speedfx{background:radial-gradient(ellipse at center,transparent 48%,rgba(0,234,255,.22) 100%);opacity:0;transition:opacity .25s}
#speedfx.on{opacity:1}
#hurtfx{background:radial-gradient(ellipse at center,transparent 40%,rgba(255,30,70,.5) 100%);opacity:0}
#hurtfx.flash{animation:hurt .65s ease-out}
@keyframes hurt{0%{opacity:1}100%{opacity:0}}
#frostfx{width:100%;height:100%;opacity:0;transition:opacity .55s ease-out}
#frostfx.on{opacity:1;transition:opacity .12s}
#ghostfx{opacity:0;transition:opacity .45s}
#ghostfx.on{opacity:1}
#ghostfx::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 44%,rgba(122,92,255,.2) 72%,rgba(150,110,255,.5) 100%);
}
#ghostfx.on::before{animation:ghostPulse 1.4s ease-in-out infinite alternate}
@keyframes ghostPulse{from{opacity:.5}to{opacity:1}}
#huntfx{opacity:0;transition:opacity .4s}
#huntfx.on,#huntfx.me{opacity:1}
#huntfx::before{content:'';position:absolute;inset:0}
#huntfx.on::before{
  background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(255,40,70,.18) 72%,rgba(255,52,82,.52) 100%);
  animation:huntPulse .7s ease-in-out infinite alternate;
}
#huntfx.me::before{
  background:radial-gradient(ellipse at 50% 50%,transparent 48%,rgba(255,176,32,.16) 76%,rgba(255,176,32,.46) 100%);
  animation:ghostPulse 1.1s ease-in-out infinite alternate;
}
@keyframes huntPulse{from{opacity:.35}to{opacity:1}}

/* ================= touch controls ================= */
#joy{
  position:fixed;left:0;top:0;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;
  background:rgba(0,234,255,.08);border:2px solid rgba(0,234,255,.55);
  box-shadow:0 0 26px rgba(0,234,255,.25),inset 0 0 26px rgba(0,234,255,.10);
  display:none;
}
#joy.on{display:block}
#joyKnob{
  position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#bffcff,#00eaff 62%,#0096b8);
  box-shadow:0 0 18px rgba(0,234,255,.65),0 4px 14px rgba(0,0,0,.45);
}
.boost-wrap{
  position:fixed;right:0;bottom:0;display:none;
  padding:0 calc(env(safe-area-inset-right,0px) + 24px) calc(env(safe-area-inset-bottom,0px) + 24px) 0;
}
body.touch .boost-wrap{display:block}
#btnBoost{
  pointer-events:auto;position:relative;width:88px;height:88px;border-radius:50%;border:0;padding:0;
  background:radial-gradient(circle at 35% 30%,#ff9ff0,#ff2fd0 58%,#a3007f);
  box-shadow:inset 0 -6px 0 rgba(60,0,44,.4),0 0 30px rgba(255,47,208,.45),0 8px 22px rgba(0,0,0,.5);
  touch-action:none;display:grid;place-items:center;transition:transform .08s;
}
#btnBoost .bolt{width:34px;height:34px;color:#fff;filter:drop-shadow(0 0 10px rgba(255,255,255,.8))}
#btnBoost .ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg);pointer-events:none}
#btnBoost.locked{filter:grayscale(.85) brightness(.85)}
#btnBoost.on{transform:scale(.93)}

/* ================= responsive ================= */
@media (max-width:720px){
  .board{width:152px;padding:8px 5px 6px}
  .board h2{font-size:10px;margin-bottom:5px}
  .board{--row:22px}
  .board li{font-size:12px;grid-template-columns:15px 10px 1fr auto;gap:5px;padding:0 5px}
  .me{padding:7px 12px 7px 7px;gap:9px}
  .me-score{font-size:18px}
  .me-score small{font-size:9px;letter-spacing:.08em}
  .bar{width:64px}
  .goal .gl{display:none}
  .stamina .bar{width:84px}
  .pw .pwn{display:none}
  .pw{padding-right:9px;gap:5px}
  .pw .ring{width:27px;height:27px}
  .pw img{width:21px;height:21px}
  .powers{max-width:180px}
  #minimap{width:98px;height:98px}
  #feed{width:min(330px,64vw)}
  .fd{font-size:12.5px;padding:6px 11px}
}
@media (max-height:520px){
  #minimap{display:none}
  .pw .pwn{display:none}
  .powers{max-width:220px}
}
@media (max-width:720px) and (orientation:portrait){
  .hud-tr #feed{position:static;transform:none;width:auto;max-width:var(--feed-w,300px);padding-top:0;align-items:flex-end}
  .hud-tr .fd{flex-wrap:wrap;justify-content:flex-end;row-gap:2px;text-align:right;border-radius:2px}
  .hud-tr .fd:nth-child(n+4){display:none}
}
@media (max-width:720px) and (orientation:landscape){
  #feed{width:min(330px,calc(100vw - 396px))}
}
@media (prefers-reduced-motion:reduce){
  #ghostfx.on::before,#huntfx.on::before,#huntfx.me::before{animation:none}
  #banner.show{animation-duration:1.6s}
  #combo.show{animation:none;opacity:1}
}