@font-face { font-family: 'Monoton'; src: url(../assets/fonts/Monoton-Regular.ttf); font-display: block; }
@font-face { font-family: 'Yellowtail'; src: url(../assets/fonts/Yellowtail-Regular.ttf); font-display: block; }
@font-face { font-family: 'Bebas Neue'; src: url(../assets/fonts/BebasNeue-Regular.ttf); font-display: block; }
@font-face { font-family: 'Rubik'; src: url(../assets/fonts/Rubik.ttf); font-weight: 300 900; font-display: block; }

:root {
  --pink: #ff4fd8; --cyan: #3fe6ff; --gold: #ffd24a; --violet: #b36bff; --lime: #7bff5a; --red: #ff3f5a;
  --ink: #0b0610; --panel: rgba(18, 8, 26, 0.72); --line: rgba(255, 255, 255, 0.12); --text: #f6ecff; --dim: #a996b8;
  --u: min(1vw, 1.7778vh);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: Rubik, system-ui, sans-serif; overflow: hidden; user-select: none; }
#game { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#game canvas { display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------ neon logo */
.logo { text-align: center; line-height: 0.9; pointer-events: none; }
.logo .l1 { font-family: Monoton; font-size: calc(var(--u) * 9); color: #ffe8fb; letter-spacing: 0.05em;
  text-shadow: 0 0 6px #fff, 0 0 18px var(--pink), 0 0 42px var(--pink), 0 0 90px #ff2fa4; animation: flicker 6s infinite; }
.logo .l2 { font-family: Yellowtail; font-size: calc(var(--u) * 10); color: #eaffff; margin-top: calc(var(--u) * -2.2); transform: rotate(-6deg);
  text-shadow: 0 0 6px #fff, 0 0 18px var(--cyan), 0 0 44px var(--cyan), 0 0 90px #1ab8ff; animation: flicker 9s 2s infinite; }
.logo .l3 { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.9); letter-spacing: 0.5em; color: var(--gold); margin-top: calc(var(--u) * 0.6); text-shadow: 0 0 12px rgba(255, 210, 74, 0.7); }
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.35; } }

/* -------------------------------------------------------------- loading */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4);
  background: radial-gradient(ellipse at 50% 40%, #2a0a36 0%, #0b0610 70%); transition: opacity 0.8s; }
#loading.done { opacity: 0; pointer-events: none; }
.lbar { width: min(40vw, 640px); height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); overflow: hidden; box-shadow: 0 0 20px rgba(255, 79, 216, 0.3); }
.lbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan)); transition: width 0.25s; box-shadow: 0 0 16px var(--pink); }
.lmsg { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2); letter-spacing: 0.12em; color: #ffd6f6; }
.lhint { color: var(--dim); font-size: calc(var(--u) * 1.1); }
.lstart { display: none; font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2.4); letter-spacing: 0.14em; color: #fff; text-shadow: 0 0 14px var(--pink); animation: pulse 1.4s infinite; }
#loading.ready .lstart { display: block; } #loading.ready .lbar, #loading.ready .lmsg { display: none; }
body.padmode, body.padmode * { cursor: none !important; }

/* ---------------------------------------------------------- TV mode ----
   Bigger HUD + prompts for couch distance, and everything pulled inside a
   5% overscan-safe frame (some TVs crop the edges). */
body.tv #hud { --u: calc(min(1vw, 1.7778vh) * 1.16); }
body.tv .pcard { width: calc(var(--u) * 25); }
body.tv #ui { --u: calc(min(1vw, 1.7778vh) * 1.1); padding: 5vh 5vw; }
body.tv .pcard.slot0 { left: 4.5vw; bottom: 4.5vh; } body.tv .pcard.slot1 { right: 4.5vw; bottom: 4.5vh; }
body.tv .pcard.slot2 { left: 4.5vw; top: 4.5vh; } body.tv .pcard.slot3 { right: 4.5vw; top: 4.5vh; }
body.tv #wavebox { top: 4vh; } body.tv #bossbar { top: calc(4vh + var(--u) * 11); }
body.tv .mfoot { bottom: 4.5vh; right: 5vw; }
body.tv .screen-title .logo { top: 5vh; left: 5vw; } body.tv .tmenu { left: 5.5vw; } body.tv .tside { right: 5vw; top: 5vh; } body.tv .devs { right: 5vw; bottom: 10vh; }
body.tv #prompts .prompt { font-size: calc(var(--u) * 1.25); }

/* ------------------------------------------------------------ menu base */
#ui { position: fixed; inset: 0; z-index: 20; padding: calc(var(--u) * 3) calc(var(--u) * 4); display: flex; flex-direction: column;
  background: linear-gradient(90deg, rgba(8, 3, 14, 0.82) 0%, rgba(8, 3, 14, 0.25) 55%, rgba(8, 3, 14, 0.55) 100%); font-size: calc(var(--u) * 1.25); }
#ui.dim { background: rgba(8, 3, 14, 0.7); backdrop-filter: blur(6px); justify-content: center; align-items: center; }
.nav { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, background 0.12s, border-color 0.12s; outline: none; }
.nav.disabled { opacity: 0.45; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: calc(var(--u) * 1.6); backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mhead { display: flex; align-items: baseline; gap: calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * 1.6); }
.mtitle { font-family: Monoton; font-size: calc(var(--u) * 3.6); color: #ffe8fb; text-shadow: 0 0 10px var(--pink), 0 0 30px var(--pink); letter-spacing: 0.04em; }
.msub { color: var(--dim); font-size: calc(var(--u) * 1.3); }
.badge { margin-left: auto; display: flex; gap: calc(var(--u) * 1.4); align-items: center; }
.lvl { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.8); padding: 0.1em 0.6em; border-radius: 999px; background: linear-gradient(90deg, #ff4fd8, #b36bff); color: #fff; box-shadow: 0 0 16px rgba(255, 79, 216, 0.6); white-space: nowrap; }
.lvl em { font-style: normal; color: var(--gold); margin-right: 0.4em; }
.glit { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.8); color: var(--gold); text-shadow: 0 0 12px rgba(255, 210, 74, 0.6); }
.glit.big { font-size: calc(var(--u) * 2.6); } .glit small { font-size: 0.5em; color: var(--dim); }
.mfoot { position: fixed; bottom: calc(var(--u) * 1.6); right: calc(var(--u) * 3); display: flex; gap: calc(var(--u) * 2); color: var(--dim); font-size: calc(var(--u) * 1.1); align-items: center; }
.ch { font-family: 'Bebas Neue'; letter-spacing: 0.14em; color: var(--cyan); font-size: calc(var(--u) * 1.5); margin: calc(var(--u) * 1) 0 calc(var(--u) * 0.6); }
.dim { color: var(--dim); }
.uitoast { position: fixed; top: 7%; left: 50%; transform: translateX(-50%); z-index: 60; padding: 0.7em 1.4em; border-radius: 999px; background: rgba(20, 8, 28, 0.92); border: 1px solid var(--pink);
  box-shadow: 0 0 24px rgba(255, 79, 216, 0.5); font-size: calc(var(--u) * 1.3); animation: toastIn 2.6s forwards; }
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%, -20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* key / pad glyphs */
.key, .pad { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 0.4em; border-radius: 0.4em; font-family: 'Bebas Neue'; font-size: 0.95em; line-height: 1;
  background: #f2e8ff; color: #1a0a1e; box-shadow: 0 2px 0 #7a6a8a; vertical-align: middle; margin: 0 0.12em; }
.pad { border-radius: 999px; color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 2px 0 rgba(0, 0, 0, 0.4); }
.pad-a { background: #2fae4a; } .pad-b { background: #d93a3a; } .pad-x { background: #2f6fd9; } .pad-y { background: #d9a92f; color: #1a0a1e; }
.pad-sh { background: #3a3446; border-radius: 0.45em; } .pad-dp { background: #3a3446; border-radius: 0.35em; }

/* ---------------------------------------------------------------- title */
.screen-title { justify-content: flex-start; }
.screen-title .logo { position: absolute; top: calc(var(--u) * 4); left: calc(var(--u) * 5); text-align: left; transform: scale(0.8); transform-origin: left top; }
.tmenu { position: absolute; left: calc(var(--u) * 5.5); top: calc(var(--u) * 23); display: flex; flex-direction: column; gap: calc(var(--u) * 0.1); }
.tmenu button { background: none; border: none; text-align: left; font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2.5); letter-spacing: 0.08em; color: #d9c8e6; padding: 0.08em 0.4em; border-radius: 10px; position: relative; text-shadow: 0 2px 8px #000; }
.tmenu button.big { font-size: calc(var(--u) * 4.2); color: #fff; }
.tmenu button.focus { color: #fff; transform: translateX(calc(var(--u) * 1)); text-shadow: 0 0 8px #fff, 0 0 22px var(--pink), 0 0 40px var(--pink); }
.tmenu button.focus::before { content: ''; position: absolute; left: calc(var(--u) * -1.4); top: 50%; width: calc(var(--u) * 0.8); height: calc(var(--u) * 0.8); border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px var(--pink); transform: translateY(-50%); }
.dot { display: inline-block; width: 0.35em; height: 0.35em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); vertical-align: super; }
.tside { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 3); width: calc(var(--u) * 30); display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); }
.tcard { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: calc(var(--u) * 1.3); backdrop-filter: blur(10px); }
.lvlrow { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.xpbar { flex: 1; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.xpbar.big { height: 16px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); box-shadow: 0 0 12px var(--pink); transition: width 1.6s cubic-bezier(.2, .8, .2, 1); }
.chal { display: flex; justify-content: space-between; gap: 1em; padding: 0.35em 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 1.1); flex-wrap: wrap; }
.chal b { font-family: 'Bebas Neue'; color: var(--gold); font-size: 1.2em; }
.chal small { width: 100%; color: var(--dim); }
.chal.done span { text-decoration: line-through; color: var(--lime); }
.devs { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 5); display: flex; gap: calc(var(--u) * 1); flex-wrap: wrap; justify-content: flex-end; max-width: calc(var(--u) * 40); }
.dev { padding: 0.35em 0.9em; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); font-size: calc(var(--u) * 1.05); }
.dev.dim { color: var(--dim); }

/* ---------------------------------------------------------------- setup */
.setup { width: min(900px, 60vw); display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }
.opt { display: grid; grid-template-columns: calc(var(--u) * 13) 1fr auto; align-items: center; gap: 1em; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.2); border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.03); }
.opt .ol { font-family: 'Bebas Neue'; letter-spacing: 0.14em; color: var(--dim); font-size: 1.2em; }
.opt .ov { display: flex; align-items: center; gap: 0.6em; font-size: 1.1em; }
.opt .ov small { color: var(--dim); } .opt .ov em { color: var(--gold); font-style: normal; }
.opt .ov img { height: 2em; } .opt .ov img.wimg { height: 2.2em; }
.opt .arr { color: var(--dim); font-size: 0.8em; letter-spacing: 0.3em; }
.opt.focus { border-color: var(--pink); background: rgba(255, 79, 216, 0.12); box-shadow: 0 0 22px rgba(255, 79, 216, 0.3); }
.opt.focus .arr { color: var(--pink); }
.opt.locked { opacity: 0.5; }
.sl { display: inline-block; width: 12em; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); overflow: hidden; vertical-align: middle; }
.sl b { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
b.on { color: var(--lime); } b.off { color: var(--dim); }
.hint { color: var(--dim); font-size: 0.9em; padding: 0.5em 1em; }
button.go, .rbtn button, .pausebox button, button.big { font-family: 'Bebas Neue'; letter-spacing: 0.1em; }
.setup button.go, button.danger, .rbtn button, .pausebox button, .crate button, .wheelbox button, .reveal button, .prest {
  margin-top: 0.4em; padding: 0.55em 1.4em; font-size: calc(var(--u) * 1.8); border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); }
.setup button.go.focus, .rbtn button.focus, .pausebox button.focus, .crate button.focus, .wheelbox button.focus, .reveal button.focus, .prest.focus {
  background: linear-gradient(90deg, var(--pink), var(--violet)); border-color: transparent; box-shadow: 0 0 30px rgba(255, 79, 216, 0.6); transform: scale(1.03); }
button.danger { color: #ff9aa8; font-size: calc(var(--u) * 1.3); }
button.danger.focus { background: #7a1020; }

/* ---------------------------------------------------------------- lobby */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.4); flex: 1; max-height: 70vh; }
.slot { border-radius: 20px; border: 2px dashed rgba(255, 255, 255, 0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--u) * 1.4); gap: 0.5em; text-align: center; background: rgba(12, 5, 18, 0.55); backdrop-filter: blur(8px); }
.slot.empty .join { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2); letter-spacing: 0.12em; color: var(--dim); animation: pulse 1.6s infinite; }
.slot:not(.empty) { border: 2px solid var(--pc); box-shadow: 0 0 30px color-mix(in srgb, var(--pc) 40%, transparent), inset 0 0 60px color-mix(in srgb, var(--pc) 16%, transparent); justify-content: flex-start; }
.slot .pn { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2.4); color: var(--pc); } .slot .pn small { font-size: 0.5em; color: var(--dim); letter-spacing: 0.08em; }
.slot .port { width: 60%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 50%, #000) 0%, #120818 70%); border: 3px solid var(--pc); box-shadow: 0 0 30px var(--pc); image-rendering: auto; }
.slot .sn { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2.1); letter-spacing: 0.05em; }
.slot .st { color: var(--pc); font-weight: 700; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.15em; }
.slot .sb { color: var(--dim); font-size: 0.9em; min-height: 3.4em; }
.slot .rd { margin-top: auto; font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.6); }
.slot.ready { transform: translateY(-6px); } .slot.ready .rd { color: var(--lime); text-shadow: 0 0 12px var(--lime); font-size: calc(var(--u) * 2.6); }
.lobbyhint { text-align: center; margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 2.6); color: var(--dim); font-size: calc(var(--u) * 1.4); }
.lobbyhint .go { color: var(--lime); font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2.4); letter-spacing: 0.08em; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* ---------------------------------------------------------------- squad */
.squad, .armory { display: grid; grid-template-columns: calc(var(--u) * 30) 1fr; gap: calc(var(--u) * 2); flex: 1; min-height: 0; }
.slist, .wlist { display: flex; flex-direction: column; gap: 0.4em; overflow-y: auto; padding: 4px; }
.sv, .wi { display: flex; align-items: center; gap: 0.8em; padding: 0.5em 0.8em; border-radius: 12px; border: 1px solid transparent; background: rgba(12, 5, 18, 0.6); }
.sv img { width: 3.2em; height: 3.2em; border-radius: 50%; border: 2px solid var(--pc); background: #120818; }
.sv em, .wi em { margin-left: auto; font-style: normal; color: var(--gold); font-family: 'Bebas Neue'; font-size: 1.2em; }
.sv.locked { opacity: 0.45; } .sv.sel, .wi.sel { border-color: rgba(255, 255, 255, 0.3); }
.sv.focus, .wi.focus, .outfit.focus, .camo.focus { border-color: var(--pink); background: rgba(255, 79, 216, 0.14); box-shadow: 0 0 18px rgba(255, 79, 216, 0.35); }
.sdetail, .wdetail { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: calc(var(--u) * 2); backdrop-filter: blur(10px); overflow-y: auto; }
.sname { font-family: Monoton; font-size: calc(var(--u) * 2.6); color: #fff; text-shadow: 0 0 16px var(--pc, var(--pink)); }
.stag { color: var(--pc); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.outfit { display: flex; gap: 1em; align-items: center; padding: 0.7em 1em; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 0.4em; }
.outfit em { font-style: normal; font-weight: 700; font-size: 0.85em; } .outfit b { margin-left: auto; font-family: 'Bebas Neue'; color: var(--lime); }
.outfit.eq { border-color: var(--lime); }
.wi img { height: 2.4em; width: 5em; object-fit: contain; }
.wprev { display: flex; justify-content: center; padding: 1em; } .wprev img { height: calc(var(--u) * 12); image-rendering: auto; filter: drop-shadow(0 0 20px rgba(255, 79, 216, 0.5)); }
.wr { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.wstats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em 2em; margin: 1em 0; }
.ws { display: flex; align-items: center; gap: 1em; } .ws span { width: 6em; color: var(--dim); } .ws i { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; overflow: hidden; } .ws b { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.kl { font-family: 'Bebas Neue'; font-size: 1.4em; color: var(--gold); }
.camos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; }
.camo { display: flex; flex-direction: column; align-items: center; padding: 0.5em; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); font-size: 0.85em; }
.camo img { width: 100%; height: 3.6em; object-fit: contain; } .camo.eq { border-color: var(--lime); }

/* ---------------------------------------------------------------- vault */
.vault { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: calc(var(--u) * 2); flex: 1; min-height: 0; }
.crates { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.crate { border-radius: 18px; padding: calc(var(--u) * 1.4); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, #120818), #120818 70%); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 25%, transparent); }
.crate .cn { font-family: Monoton; font-size: calc(var(--u) * 1.9); color: #fff; text-shadow: 0 0 12px var(--c); }
.crate .cd { color: #d8c8e6; font-size: 0.9em; margin: 0.4em 0; }
.crate button { margin-right: 0.5em; } .crate button.free { border-color: var(--lime); color: var(--lime); }
.wheelbox { display: flex; flex-direction: column; align-items: center; gap: 1em; }
.wheelbox canvas { width: min(100%, calc(var(--u) * 26)); filter: drop-shadow(0 0 30px rgba(255, 79, 216, 0.5)); }
.inv { background: var(--panel); border-radius: 18px; padding: calc(var(--u) * 1.4); border: 1px solid var(--line); overflow-y: auto; }
.teai { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 0 0.7em; align-items: center; padding: 0.4em 0; border-bottom: 1px solid var(--line); }
.teai img { width: 2.4em; grid-row: span 2; } .teai b { color: var(--gold); font-family: 'Bebas Neue'; font-size: 1.3em; } .teai small { grid-column: 2 / 4; color: var(--dim); }
.reelwrap { margin: auto; width: min(1400px, 90vw); text-align: center; }
.reelwrap .cn { font-family: Monoton; font-size: calc(var(--u) * 3); text-shadow: 0 0 20px var(--c); margin-bottom: 0.6em; }
.reel { position: relative; overflow: hidden; height: 220px; border-radius: 20px; border: 2px solid var(--c); background: rgba(10, 4, 16, 0.85); box-shadow: 0 0 60px color-mix(in srgb, var(--c) 40%, transparent); }
.strip { display: flex; position: absolute; left: 0; top: 20px; will-change: transform; }
.ri { width: 160px; height: 180px; margin-right: 10px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4em; font-size: 0.8em; padding: 0.4em; background: rgba(255, 255, 255, 0.04); border-bottom: 5px solid var(--rc); }
.ri img { width: 110px; height: 100px; object-fit: contain; }
.needle { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #fff; box-shadow: 0 0 20px #fff, 0 0 40px var(--c); transform: translateX(-50%); }
.r-common { --rc: #c8c8d8; } .r-rare { --rc: #3fb8ff; } .r-epic { --rc: #b36bff; } .r-legendary { --rc: #ffb400; } .r-mythic { --rc: #ff3f8e; }
.reveal { margin-top: 1.6em; display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
.rv { padding: 1.2em 3em; border-radius: 20px; border: 2px solid var(--rc); box-shadow: 0 0 60px var(--rc); background: rgba(10, 4, 16, 0.9); animation: pop 0.5s cubic-bezier(.2, 1.6, .4, 1); }
.rv img { height: 120px; } .rv .rn { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2.6); } .rv .rr { color: var(--rc); font-weight: 900; letter-spacing: 0.3em; }
.rw { display: flex; align-items: center; gap: 0.5em; color: var(--rc); } .rw img { height: 1.8em; }
@keyframes pop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* --------------------------------------------------------------- career */
.career { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); flex: 1; min-height: 0; }
.career .panel { overflow-y: auto; }
.lvlrow.big .lvl { font-size: calc(var(--u) * 2.6); }
.road { display: flex; flex-direction: column; gap: 0.25em; }
.ru { display: flex; gap: 1em; padding: 0.35em 0.6em; border-radius: 8px; color: var(--dim); }
.ru b { font-family: 'Bebas Neue'; font-size: 1.3em; width: 2em; color: var(--dim); } .ru.got { color: var(--text); background: rgba(123, 255, 90, 0.07); } .ru.got b { color: var(--lime); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em 2em; } .stats div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0.3em 0; } .stats b { font-family: 'Bebas Neue'; font-size: 1.3em; color: var(--gold); }

/* ---------------------------------------------------------------- howto */
.howto { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(var(--u) * 2); }
.howto table { width: 100%; border-collapse: collapse; } .howto td { padding: 0.45em 0.6em; border-bottom: 1px solid var(--line); }
.howto td.pad { color: var(--lime); font-weight: 700; } .howto td.kb { color: var(--cyan); font-weight: 700; }
.tips p { line-height: 1.5; color: #e2d4ee; } .tips b { color: var(--pink); }

/* ----------------------------------------------------- pause / results */
.pausebox { display: flex; flex-direction: column; align-items: stretch; gap: 0.4em; min-width: 420px; text-align: center; }
.screen-results { justify-content: center; align-items: center; background: rgba(8, 3, 14, 0.78) !important; backdrop-filter: blur(6px); }
.results { width: min(1200px, 86vw); text-align: center; }
.results .rt { font-family: Monoton; font-size: calc(var(--u) * 3.4); color: #fff; text-shadow: 0 0 20px var(--pink); }
.results .rs { font-size: calc(var(--u) * 1.6); color: var(--dim); margin: 0.4em 0 1.2em; } .results .rs b { color: var(--gold); font-family: 'Bebas Neue'; font-size: 1.6em; }
.rgrid { display: flex; justify-content: center; gap: 1em; flex-wrap: wrap; }
.rp { display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 1em 1.6em; border-radius: 16px; border: 1px solid var(--pc); background: rgba(255, 255, 255, 0.03); min-width: 180px; }
.rp img { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--pc); background: #120818; } .rp span { color: var(--dim); font-size: 0.9em; }
.rxp { margin: 1.4em auto; max-width: 760px; } .rxp .xpn { font-family: 'Bebas Neue'; font-size: 1.6em; color: var(--gold); }
.rglit { font-family: 'Bebas Neue'; font-size: 1.8em; color: var(--gold); margin-top: 0.4em; }
.unls { margin-top: 0.6em; display: flex; flex-direction: column; gap: 0.3em; } .unl { color: var(--lime); font-weight: 700; animation: pop 0.5s both; } .unl.ch { color: var(--cyan); }
.rbtn { display: flex; justify-content: center; gap: 1em; }
.screen-loading { align-items: center; justify-content: center; }
.doors .dtxt { font-family: Monoton; font-size: calc(var(--u) * 3); color: #fff; text-shadow: 0 0 20px var(--pink); animation: pulse 1s infinite; }

/* =============================================================== HUD === */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-size: calc(var(--u) * 1); }
#wavebox { position: absolute; top: calc(var(--u) * 1.2); left: 50%; transform: translateX(-50%); text-align: center; }
#wavebox .wlabel { font-family: 'Bebas Neue'; letter-spacing: 0.5em; color: #ffb3e6; font-size: calc(var(--u) * 1.2); padding-left: 0.5em; }
#wavebox .wnum { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 6); line-height: 0.9; color: #ffe8fb; text-shadow: 0 0 6px #fff, 0 0 18px var(--pink), 0 0 40px #ff1f8e, 0 0 80px #ff1f8e; }
#wavebox .wleft { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.3); color: var(--dim); letter-spacing: 0.12em; }
#wavebox.bump .wnum { animation: bump 0.8s; }
@keyframes bump { 0% { transform: scale(2.2); filter: brightness(3); } 100% { transform: scale(1); } }
#powers { position: absolute; top: calc(var(--u) * 10); left: 50%; transform: translateX(-50%); display: flex; gap: 0.8em; }
.pw { display: flex; flex-direction: column; align-items: center; font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.6); color: var(--c); text-shadow: 0 0 10px var(--c); }
.pw img { width: calc(var(--u) * 3.4); filter: drop-shadow(0 0 10px var(--c)); } .pw.blink { animation: pulse 0.3s infinite; }
#countdown { position: absolute; top: calc(var(--u) * 9); left: 50%; transform: translateX(-50%); font-family: 'Bebas Neue'; letter-spacing: 0.2em; font-size: calc(var(--u) * 1.6); color: var(--lime); text-shadow: 0 0 10px var(--lime); }
#fps { position: absolute; top: 6px; right: 10px; font-family: 'Bebas Neue'; color: var(--lime); font-size: 18px; }

#bossbar { position: absolute; top: calc(var(--u) * 11.5); left: 50%; transform: translateX(-50%); width: min(56vw, calc(var(--u) * 70)); text-align: center; }
#bossbar .bname { font-family: Monoton; font-size: calc(var(--u) * 1.8); color: #fff; text-shadow: 0 0 14px var(--c); letter-spacing: 0.08em; }
#bossbar .bbar { position: relative; height: calc(var(--u) * 1.3); border-radius: 999px; background: rgba(0, 0, 0, 0.6); border: 2px solid var(--c); overflow: hidden; box-shadow: 0 0 24px var(--c); margin-top: 0.3em; }
#bossbar .bbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--c), #fff); transition: width 0.15s; }
#bossbar .bbar b { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, 0.6); }
#bossbar.p2 .bbar { animation: pulse 0.6s infinite; }

#announce { position: absolute; top: 26%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.ann { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 3.4); letter-spacing: 0.1em; color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px var(--c), 0 0 44px var(--c); animation: annIn 2s both; white-space: nowrap; }
.ann.wave { font-family: Monoton; font-size: calc(var(--u) * 5); }
.ann.title { font-family: Monoton; font-size: calc(var(--u) * 2.6); }
.ann.boss { font-family: Monoton; font-size: calc(var(--u) * 3.6); }
.ann.power { font-size: calc(var(--u) * 4.4); }
.ann.area { font-family: Yellowtail; font-size: calc(var(--u) * 4.4); letter-spacing: 0.02em; }
.ann.small { font-size: calc(var(--u) * 2); }
.ann.over { font-family: Monoton; font-size: calc(var(--u) * 7); }
.ann.oversub { font-family: Yellowtail; font-size: calc(var(--u) * 3); --c: #ff3f5a; }
@keyframes annIn { 0% { opacity: 0; transform: scale(1.8); filter: blur(8px); } 8% { opacity: 1; transform: scale(1); filter: blur(0); } 80% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0; transform: scale(0.96) translateY(-10px); } }

#letterbox i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.6s; }
#letterbox i:first-child { top: 0; } #letterbox i:last-child { bottom: 0; }
#letterbox.on i { height: 11vh; }
#bosscard { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; }
#bosscard.go { animation: annIn 3.3s both; }
#bosscard .bt { font-family: 'Bebas Neue'; letter-spacing: 0.4em; color: var(--dim); font-size: calc(var(--u) * 1.6); }
#bosscard .bn { font-family: Monoton; font-size: calc(var(--u) * 6); color: #fff; text-shadow: 0 0 10px #fff, 0 0 30px var(--c), 0 0 70px var(--c); }
#bosscard .bq { font-family: Yellowtail; font-size: calc(var(--u) * 2.4); color: #ffd6f6; }

/* player cards */
.pcard { position: absolute; width: calc(var(--u) * 27); padding: calc(var(--u) * 0.9) calc(var(--u) * 1.1); border-radius: 16px; background: linear-gradient(135deg, rgba(20, 8, 28, 0.82), rgba(10, 4, 16, 0.7));
  border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--pc) 22%, transparent); backdrop-filter: blur(6px); }
.pcard.slot0 { left: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.4); }
.pcard.slot1 { right: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.4); }
.pcard.slot2 { left: calc(var(--u) * 1.4); top: calc(var(--u) * 1.4); }
.pcard.slot3 { right: calc(var(--u) * 1.4); top: calc(var(--u) * 1.4); }
.pcard.down { border-color: var(--red); animation: pulse 0.8s infinite; } .pcard.dead { opacity: 0.5; filter: grayscale(0.8); }
.ptop { display: flex; align-items: center; gap: 0.7em; }
.portrait { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: 50%; border: 2px solid var(--pc); background: #120818; box-shadow: 0 0 12px var(--pc); }
.pinfo { flex: 1; min-width: 0; }
.pname { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.3); letter-spacing: 0.06em; color: var(--pc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp { position: relative; height: calc(var(--u) * 1.1); border-radius: 999px; background: rgba(0, 0, 0, 0.55); overflow: hidden; margin-top: 0.2em; }
.hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff3f8e, #ff9ad8); transition: width 0.15s; }
.hp b { position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%); font-family: 'Bebas Neue'; font-size: calc(var(--u) * 0.95); color: #fff; }
.pcard.low .hp i { background: linear-gradient(90deg, #ff2020, #ff6060); animation: pulse 0.5s infinite; }
.pts { position: relative; font-family: 'Bebas Neue'; font-size: calc(var(--u) * 2.5); color: var(--gold); text-shadow: 0 0 12px rgba(255, 210, 74, 0.5); min-width: 3.4em; text-align: right; }
.pts em { position: absolute; right: 0; bottom: 100%; display: flex; flex-direction: column-reverse; align-items: flex-end; font-style: normal; }
.pts .gain { font-style: normal; font-size: 0.55em; color: #fff4c0; animation: gain 0.9s forwards; }
.pts .gain.spend { color: #ff8aa0; }
@keyframes gain { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-24px); } }
.shake { animation: shake 0.35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); color: var(--red); } 40%, 80% { transform: translateX(6px); color: var(--red); } }
.pmid { display: flex; align-items: center; gap: 0.6em; margin-top: 0.5em; }
.wicon { width: calc(var(--u) * 6.4); height: calc(var(--u) * 3); object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25)); }
.wtxt { flex: 1; min-width: 0; }
.wname { font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.15); color: #e8dcf4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wname.glam { background: linear-gradient(90deg, #ff4fd8, #ffd24a, #3fe6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ammo { font-family: 'Bebas Neue'; line-height: 1; } .ammo .mag { font-size: calc(var(--u) * 2.2); color: #fff; } .ammo .res { font-size: calc(var(--u) * 1.3); color: var(--dim); }
.ammo.low .mag { color: var(--red); }
.reload { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 3px; visibility: hidden; } .reload.on { visibility: visible; } .reload i { display: block; height: 100%; background: var(--cyan); }
.side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2em; font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.2); }
.nade { display: flex; gap: 3px; } .gn { width: calc(var(--u) * 0.9); height: calc(var(--u) * 0.9); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ff8ad8 45%, #b3206b); box-shadow: 0 0 6px #ff8ad8; }
.scrap { display: flex; align-items: center; gap: 0.2em; color: #d8d8e8; } .scrap img { width: 1.5em; } .scrap.pop { animation: bump 0.4s; }
.tea { display: flex; align-items: center; gap: 0.2em; color: #fff; } .tea img { width: 1.5em; } .tea img.used { filter: grayscale(1); opacity: 0.5; } .tea .pad, .tea .key { font-size: 0.7em; }
.perks { display: flex; gap: 0.3em; margin-top: 0.4em; min-height: 0; } .perks img { width: calc(var(--u) * 2.3); border-radius: 8px; animation: pop 0.4s; }
.buildpanel { margin-top: 0.5em; border-top: 1px solid var(--line); padding-top: 0.5em; }
.bhead { font-family: 'Bebas Neue'; letter-spacing: 0.1em; color: var(--lime); font-size: calc(var(--u) * 1.15); }
.bitems { display: flex; gap: 0.3em; margin: 0.3em 0; }
.bitem { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0.2em; border-radius: 8px; border: 1px solid transparent; font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.1); color: #d8d8e8; }
.bitem img { height: calc(var(--u) * 2.6); object-fit: contain; } .bitem.sel { border-color: var(--lime); background: rgba(123, 255, 90, 0.12); } .bitem.poor { opacity: 0.4; }
.bdesc { font-size: calc(var(--u) * 0.9); color: var(--dim); } .bdesc b { color: #fff; }
.toast { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 0.4em; white-space: nowrap; font-family: 'Bebas Neue'; font-size: calc(var(--u) * 1.8); color: #fff; text-shadow: 0 0 12px var(--c), 0 0 24px var(--c); animation: gain 1.8s forwards; }
.pcard.slot2 .toast, .pcard.slot3 .toast { bottom: auto; top: 100%; }
#prompts .prompt { position: absolute; left: 0; top: 0; padding: 0.45em 0.9em; border-radius: 12px; background: rgba(10, 4, 16, 0.86); border: 1px solid color-mix(in srgb, var(--pc) 60%, transparent);
  font-size: calc(var(--u) * 1.15); white-space: nowrap; text-align: center; box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 30%, transparent); }
.prompt b.cost { color: var(--gold); font-family: 'Bebas Neue'; font-size: 1.25em; margin-left: 0.3em; } .prompt b.cost.no { color: var(--red); }
.prompt small { color: var(--dim); font-size: 0.8em; }
.tmenu button.small { font-size: calc(var(--u) * 1.6); color: var(--dim); margin-top: 0.4em; }