@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ══ BASE ══════════════════════════════════════════════════════════════════ */
body {
  margin:0; padding:0;
  background-color: #050510;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(100,0,180,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,100,180,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(180,0,100,0.10) 0%, transparent 50%);
  color: #fff;
  font-family: 'VT323', monospace;
  overflow-x: hidden;
  user-select: none;
}
.scanlines { position:fixed; top:0; left:0; width:100vw; height:100vh; background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,0.1) 50%),linear-gradient(90deg,rgba(255,0,0,0.03),rgba(0,255,0,0.01),rgba(0,0,255,0.03)); background-size:100% 4px,6px 100%; z-index:1000; pointer-events:none; }
.title { color:#ff00ff; text-shadow:2px 2px 0 #00ffff; text-align:center; font-size:2.5rem; margin-bottom:10px; }
.vapor-btn { background:linear-gradient(90deg,#ff00ff,#00ffff); border:2px solid #fff; color:#fff; font-family:'VT323',monospace; font-size:1.5rem; padding:10px 20px; cursor:pointer; text-transform:uppercase; box-shadow:4px 4px 0 #000; transition:transform 0.1s; }
.vapor-btn:active { transform:translate(2px,2px); box-shadow:2px 2px 0 #000; }

/* ══ INTRO ════════════════════════════════════════════════════════════════ */
#intro-container { position:fixed; top:0; left:0; width:100vw; height:100vh; background-color:#000; z-index:10000; display:flex; justify-content:center; align-items:center; overflow:visible; }
#intro-richard-walker { position:absolute; bottom:0; left:0; width:100%; height:60vh; pointer-events:none; z-index:10002; overflow:visible; }
#intro-richard-img-a, #intro-richard-img-b { position:absolute; bottom:-5vh; height:52vh; width:auto; image-rendering:pixelated; }
#intro-richard-img-a { animation:bossWalkLR 16s linear infinite; }
#intro-richard-img-b { animation:bossWalkRL 16s linear infinite; animation-delay:-8s; }
@keyframes bossWalkLR { 0%{left:-22vw;transform:scaleX(1);opacity:0}5%{opacity:1}95%{opacity:1}100%{left:110vw;transform:scaleX(1);opacity:0} }
@keyframes bossWalkRL { 0%{left:110vw;transform:scaleX(-1);opacity:0}5%{opacity:1}95%{opacity:1}100%{left:-22vw;transform:scaleX(-1);opacity:0} }
#skip-intro-btn { position:absolute; bottom:30px; right:30px; }

/* ══ LOGIN ════════════════════════════════════════════════════════════════ */
#login-screen { display:flex; justify-content:center; align-items:center; height:100vh; }
.login-box { background:rgba(0,0,0,0.8); border:2px solid #00ffff; padding:30px; text-align:center; box-shadow:0 0 15px #ff00ff; }
#username-input { font-family:'VT323',monospace; font-size:1.2rem; padding:5px; margin:15px 0; width:80%; text-align:center; background:#222; color:#00ffff; border:1px solid #ff00ff; }

/* ══ GAME LAYOUT ══════════════════════════════════════════════════════════ */
#game-container { padding:10px; max-width:1400px; margin:0 auto; display:flex; flex-direction:column; }
#game-wrapper { display:flex; flex-direction:row; gap:14px; align-items:flex-start; justify-content:center; width:100%; }
#center-col { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.side-col { flex:0 0 230px; width:230px; background:rgba(0,0,0,0.4); padding:12px; border:1px solid #00ffff; border-radius:5px; box-sizing:border-box; position:sticky; top:16px; }

/* ══ SIDEBARS ═════════════════════════════════════════════════════════════ */
.shop-title { text-align:center; color:#00ffff; margin-bottom:10px; }
.shop-btn { display:block; width:100%; margin:5px 0; padding:8px; background:#111; color:#fff; border:1px solid #00ffff; font-family:'VT323',monospace; font-size:1.1rem; cursor:pointer; line-height:1.3; }
.shop-btn:hover { background:#222; border-color:#ff00ff; }
.shop-btn span { color:#ff00ff; }
.shop-btn.upgrade-new { border-color:#ff00ff; background:linear-gradient(135deg,#0a001a,#1a0030); }
.shop-btn.upgrade-new:hover { background:linear-gradient(135deg,#1a003a,#2a0050); border-color:#00ffff; }
.cost-tag { color:#00ffcc; }

/* ══ INVENTORY ═══════════════════════════════════════════════════════════ */
#inventory-grid { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px; }
.inv-item { width:48px; height:48px; background:#111; display:flex; justify-content:center; align-items:center; position:relative; font-size:22px; cursor:pointer; transition:transform 0.1s; }
.inv-item:hover { transform:scale(1.1); }
.inv-count { position:absolute; bottom:-4px; right:-4px; font-size:11px; color:#fff; background:#ff00ff; padding:1px 5px; border-radius:8px; font-weight:bold; }
.inv-tooltip { display:none; position:absolute; bottom:115%; background:#000; color:#fff; padding:4px 8px; border:1px solid #00ffff; font-size:11px; white-space:nowrap; z-index:100; pointer-events:none; text-transform:uppercase; }
.inv-item:hover .inv-tooltip { display:block; }
.rarity-common { border:1px solid #aaa; }
.rarity-uncommon { border:1px solid #2ecc71; filter:drop-shadow(0 0 5px rgba(46,204,113,0.7)); }
.rarity-rare { border:1px solid #3498db; filter:drop-shadow(0 0 7px rgba(52,152,219,0.8)); }
.rarity-legendary { border:1px solid #f1c40f; filter:drop-shadow(0 0 10px rgba(241,196,15,1)); animation:legPulse 2s infinite; }
@keyframes legPulse { 0%,100%{filter:drop-shadow(0 0 8px rgba(241,196,15,0.8))}50%{filter:drop-shadow(0 0 14px rgba(241,196,15,1))} }

/* ══ DAMAGE / LOOT POPUPS ════════════════════════════════════════════════ */
.damage-popup,.quote-popup { position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); animation:popArc 1.2s cubic-bezier(0.15,1,0.3,1) forwards; }
.damage-popup { color:#ff00ff; font-size:5rem; font-weight:bold; text-shadow:4px 4px 0 #000,-2px -2px 0 #00ffff; }
.crit-popup { font-size:2.5rem!important; color:#ff0!important; text-shadow:0 0 12px #f00,0 0 24px #ff0!important; }
@keyframes popArc { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.2)}15%{opacity:1;transform:translate(calc(-50% + var(--tx)*0.5),calc(-50% + var(--ty))) scale(1.2) rotate(calc(var(--rot)*0.5))}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) + 140px)) scale(1) rotate(var(--rot))} }
.loot-popup { position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); color:#FFD700; font-size:3rem; font-weight:bold; font-style:italic; text-shadow:2px 2px 0 #000,0 0 12px #FFD700; animation:lootArc 3.5s cubic-bezier(0.15,1,0.3,1) forwards; }
@keyframes lootArc { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.2)}10%{opacity:1;transform:translate(calc(-50% + var(--tx)*0.4),calc(-50% + var(--ty)*0.8)) scale(1.3) rotate(calc(var(--rot)*0.5))}80%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) + 140px)) scale(1) rotate(var(--rot))} }
.merc-strike { position:fixed; font-size:3.5rem; pointer-events:none; animation:slashAnim 0.5s ease-out forwards; z-index:9998; }
@keyframes slashAnim { 0%{opacity:0;transform:scale(0.5) rotate(-20deg)}50%{opacity:1;transform:scale(1.2) rotate(10deg)}100%{opacity:0;transform:scale(1.5) rotate(20deg)} }

/* ══════════════════════════════════════════════════════════════════════════
   WIZARD101-STYLE BATTLE ARENA
═══════════════════════════════════════════════════════════════════════════ */
#battle-arena {
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  border: 2px solid #3a0070;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #1a0030, 0 0 50px rgba(140,0,255,0.4);
  position: relative;
  cursor: pointer;
}

/* Screen shake on hit */
@keyframes arenaShake {
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,2px)}
  40%{transform:translate(4px,-2px)}
  60%{transform:translate(-3px,3px)}
  80%{transform:translate(3px,-1px)}
}
#battle-arena.shaking { animation:arenaShake 0.22s ease; }

/* ── Boss Zone ────────────────────────────────────────────────────────── */
#boss-zone {
  position: relative;
  width: 100%;
  height: 380px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: #04000e;
}

#boss-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0020 0%, #04000e 100%);
  z-index: 0;
}

/* Gradient blends boss into the floor below */
#boss-zone::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(transparent, #080015);
  z-index: 1;
  pointer-events: none;
}

#boss-nameplate {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.78);
  border: 1px solid #9f00ff;
  border-radius: 4px;
  padding: 3px 14px;
  box-shadow: 0 0 16px rgba(160,0,255,0.5);
  white-space: nowrap;
}
#main-boss-name { font-size:1.5rem; color:#ff00ff; text-shadow:0 0 10px #ff00ff; letter-spacing:1px; }
#boss-level-badge { font-size:0.95rem; color:#f1c40f; background:rgba(241,196,15,0.15); border:1px solid #f1c40f; border-radius:3px; padding:0 6px; }
#boss-armor-badge { font-size:0.95rem; color:#00ffcc; }

#boss-sprite-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 360px;
  width: 100%;
}

#boss-image {
  display: block;
  /* Fill as much of the zone as possible — no fixed cap, let the zone contain it */
  height: 360px;
  width: auto;
  max-width: 480px;
  object-fit: contain;
  object-position: bottom center;
  /* pixel-art crisp rendering — no blur */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  filter: drop-shadow(0 0 28px rgba(255,0,255,0.6));
  transition: transform 0.1s ease;
}

#boss-hit-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(255,30,30,0.4);
  border-radius: 4px;
  transition: opacity 0.06s;
}
#boss-hit-flash.flashing { opacity: 1; }

/* Boss entrance */
@keyframes bossEntrance {
  0%   { transform:scale(0.35) translateY(100px); opacity:0; filter:brightness(4) }
  55%  { transform:scale(1.07) translateY(-12px); opacity:1 }
  80%  { transform:scale(0.97) translateY(5px) }
  100% { transform:scale(1) translateY(0) }
}
.boss-enter { animation:bossEntrance 0.5s cubic-bezier(0.2,1,0.4,1) forwards; }

/* ── HP Bar ───────────────────────────────────────────────────────────── */
#hp-bar-row {
  background: #07000f;
  padding: 5px 10px;
  border-top: 1px solid #2a005a;
  border-bottom: 1px solid #2a005a;
}
#health-bar-container { width:100%; height:24px; border:2px solid #cc00ff; background:#1a0030; position:relative; border-radius:3px; overflow:hidden; }
#health-bar-fill { height:100%; background:linear-gradient(90deg,#aa00ff,#ff00ff,#ff6699); width:100%; transition:width 0.12s ease; }
#health-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:#fff; text-shadow:1px 1px 0 #000; pointer-events:none; }

/* ── Office Floor ─────────────────────────────────────────────────────── */
#office-floor {
  position: relative;
  width: 100%;
  height: 165px;
  background: #080015;
  overflow: hidden;
}

#floor-bg {
  position: absolute;
  inset: 0;
  background-color: #080018;
  background-image:
    linear-gradient(rgba(100,0,200,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,0,200,0.2) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Perspective lines to give top-down depth feel */
#floor-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 40%, rgba(0,0,0,0.2) 100%);
}

.cubicle {
  position: absolute;
  width: 70px;
  height: 58px;
  pointer-events: none;
  z-index: 1;
}
.cubicle-desk { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.3rem; }
.cubicle-wall { position:absolute; background:rgba(120,0,220,0.45); border:1px solid rgba(180,0,255,0.55); }
.cw-r { top:0; right:0; width:4px; height:100%; }
.cw-l { top:0; left:0;  width:4px; height:100%; }
.cw-b { bottom:0; left:0; width:100%; height:4px; }

/* ── Player Row ───────────────────────────────────────────────────────── */
#player-row {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  z-index: 5;
  max-width: 94%;
  flex-wrap: nowrap;
}

.player-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  animation: playerPopIn 0.45s cubic-bezier(0.2,1.5,0.5,1) forwards;
  opacity: 0;
  transform: scale(0.4) translateY(24px);
}
@keyframes playerPopIn {
  0%   { opacity:0; transform:scale(0.4) translateY(24px); }
  70%  { opacity:1; transform:scale(1.08) translateY(-5px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

.player-avatar {
  font-size: 2.2rem;
  line-height: 1;
  transition: transform 0.12s ease, filter 0.12s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

/* Bounce up when attacking */
.player-card.attacking .player-avatar {
  transform: translateY(-8px) scale(1.25);
  filter: drop-shadow(0 0 12px #ff00ff);
}

.player-nametag {
  background: rgba(0,0,0,0.88);
  border: 1px solid #00ffcc;
  border-radius: 3px;
  padding: 1px 8px;
  font-family: 'VT323', monospace;
  font-size: 0.82rem;
  color: #00ffcc;
  text-align: center;
  white-space: nowrap;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 6px rgba(0,255,204,0.25);
  letter-spacing: 0.5px;
}

/* Current user glows pink */
.player-card.is-me .player-nametag {
  border-color: #ff00ff;
  color: #ff88ff;
  box-shadow: 0 0 10px rgba(255,0,255,0.5);
}
.player-card.is-me .player-avatar {
  filter: drop-shadow(0 0 8px #ff00ff);
}

/* ── Frenzy Bar ───────────────────────────────────────────────────────── */
#frenzy-container {
  background: #07000f;
  padding: 3px 10px 5px;
  border-top: 1px solid #2a005a;
  position: relative;
  height: 22px;
}
#frenzy-bar-fill { height:100%; background:linear-gradient(90deg,#f1c40f,#ff8800); width:0%; transition:width 0.1s; border-radius:2px; }
#frenzy-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.82rem; color:#fff; text-shadow:1px 1px 0 #000; pointer-events:none; }

/* ══ SKILL PANEL ══════════════════════════════════════════════════════════ */
#skill-panel { width:100%; max-width:500px; background:rgba(20,10,40,0.85); border:2px solid #4a2070; border-radius:4px; padding:10px 12px; margin:0 auto; box-sizing:border-box; box-shadow:0 0 12px rgba(160,80,255,0.3); }
.skill-panel-title { font-size:1rem; color:#c89fff; text-align:center; margin:0 0 8px 0; letter-spacing:2px; text-shadow:0 0 6px #9f00ff; }
#skill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.skill-slot { display:flex; flex-direction:column; align-items:center; padding:6px 4px; border-radius:3px; border:1px solid #3a1060; background:rgba(10,5,20,0.7); transition:border-color 0.15s,background 0.15s,transform 0.1s; cursor:default; position:relative; }
.skill-active { border-color:#00ffcc!important; background:rgba(0,60,40,0.6)!important; cursor:pointer; box-shadow:0 0 8px rgba(0,255,180,0.3); }
.skill-active:hover { border-color:#ff00ff!important; background:rgba(60,0,60,0.7)!important; transform:scale(1.04); }
.skill-locked { opacity:0.4; filter:grayscale(80%); cursor:not-allowed; }
.skill-icon { font-size:1.4rem; line-height:1; margin-bottom:2px; }
.skill-label { font-size:0.75rem; color:#ccc; }
.skill-level { font-size:0.7rem; color:#00ffcc; }

.action-buttons { width:100%; max-width:500px; }

/* ══ RICHARD CAMEOS ════════════════════════════════════════════════════════ */
#richard-event-container { position:fixed; bottom:0; left:0; width:100vw; height:100vh; z-index:99999; pointer-events:none; overflow:hidden; }
#richard-image { position:absolute; bottom:-5px; height:28vh; width:auto; image-rendering:pixelated; opacity:0; transition:opacity 1.2s ease, transform 1.5s ease; object-fit:contain; filter:drop-shadow(0 0 15px #00ffff); }
#richard-dialogue { position:absolute; bottom:30vh; padding:10px 15px; background:rgba(0,0,0,0.92); color:#fff; border:2px solid #00ffff; font-size:1rem; max-width:250px; text-align:center; text-transform:uppercase; opacity:0; transform:scale(0.8); transition:opacity 0.5s 1.5s,transform 0.5s 1.5s; box-shadow:4px 4px 0 #ff00ff; }
#richard-event-container.active #richard-image { opacity:0.85; }
#richard-event-container.active #richard-dialogue { opacity:1; transform:scale(1); }

/* ══ MIKITA INSTRUCTOR ════════════════════════════════════════════════════ */
.instructor-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:200000; display:flex; align-items:center; justify-content:center; }
.instructor-box { background:linear-gradient(160deg,#0a001a,#050010); border:2px solid #9f00ff; box-shadow:0 0 40px rgba(160,0,255,0.5); border-radius:6px; max-width:720px; width:92vw; padding:24px 28px 20px; position:relative; }
.instructor-close { position:absolute; top:10px; right:14px; background:none; border:none; color:#9f00ff; font-size:1.6rem; cursor:pointer; font-family:'VT323',monospace; }
.instructor-close:hover { color:#ff00ff; }
.instructor-inner { display:flex; gap:24px; align-items:flex-start; }
.instructor-char-side { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:140px; }
.instructor-char-side img { height:220px; width:auto; image-rendering:pixelated; filter:drop-shadow(0 0 12px rgba(160,0,255,0.6)); }
.instructor-char-name { font-size:0.9rem; color:#c89fff; text-align:center; margin-top:8px; line-height:1.3; }
.instructor-text-side { flex:1; }
.instructor-title { font-size:2rem; color:#ff00ff; text-shadow:2px 2px 0 #00ffff; margin:0 0 12px; }
.instructor-dialogue { background:rgba(0,0,0,0.5); border:1px solid #3a1060; border-radius:4px; padding:12px 16px; font-size:1rem; color:#ddd; line-height:1.6; }
.instructor-dialogue p { margin:0 0 10px; }
.instructor-dialogue strong { color:#00ffcc; }
.instructor-dialogue em { color:#ff88ff; font-style:normal; }
.instructor-coming-soon { margin-top:14px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.instructor-coming-soon span { font-size:1.2rem; color:#f1c40f; letter-spacing:1px; }

/* ══ PHISHING GAME ════════════════════════════════════════════════════════ */
.phishing-game-box { background:linear-gradient(160deg,#001a1a,#000a10); border:3px solid #00ffcc; box-shadow:0 0 40px rgba(0,255,204,0.4); border-radius:6px; width:90vw; max-width:600px; padding:20px; display:flex; flex-direction:column; gap:15px; }
.phish-header { display:flex; justify-content:space-between; align-items:center; border-bottom:2px dashed #00ffcc; padding-bottom:10px; }
.phish-title { font-size:2.2rem; color:#00ffcc; margin:0; text-shadow:2px 2px 0 #000; }
.phish-stats { font-size:1.5rem; color:#ff00ff; }
.email-client { background:#ddd; border:2px solid #555; border-radius:4px; color:#222; font-family:'Courier New',monospace; }
.email-meta { background:#eee; border-bottom:1px solid #aaa; padding:10px; font-size:1.1rem; line-height:1.4; }
.email-body { padding:15px; font-size:1.2rem; min-height:120px; white-space:pre-wrap; background:#fff; }
.phish-timer-wrap { width:100%; height:14px; background:#222; border:2px solid #00ffcc; }
.phish-timer-fill { height:100%; background:#00ffcc; width:100%; transition:width 0.1s linear,background-color 0.3s; }
.phish-controls { display:flex; gap:20px; justify-content:center; width:100%; }
.phish-btn { flex:1; font-family:'VT323',monospace; font-size:2rem; padding:14px; border:3px solid #fff; cursor:pointer; transition:transform 0.1s; }
.phish-btn:active { transform:translate(2px,2px); }
.btn-safe { background:linear-gradient(90deg,#00aa55,#00ff88); color:#fff; }
.btn-danger { background:linear-gradient(90deg,#aa0000,#ff4444); color:#fff; }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #game-wrapper { flex-direction:column; align-items:center; }
  .side-col { width:100%; max-width:500px; position:static; flex:none; }
  #boss-zone { height:280px; }
  #boss-sprite-wrap { height:265px; }
  #boss-image { height:265px; max-width:300px; }
  #office-floor { height:140px; }
  .player-avatar { font-size:1.8rem; }
  .player-nametag { font-size:0.75rem; max-width:74px; }
}

/* ══ CUBICLE PLAQUES ══════════════════════════════════════════════════════ */
.cubicle-plaque {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VT323', monospace;
  font-size: 0.62rem;
  color: #00ffcc;
  text-align: center;
  white-space: nowrap;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  pointer-events: none;
}
.cubicle-title-badge {
  display: none;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VT323', monospace;
  font-size: 0.55rem;
  background: rgba(0,0,0,0.8);
  border: 1px solid #f1c40f;
  color: #f1c40f;
  border-radius: 2px;
  padding: 0 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

/* ══ XP GAIN TOAST ANIMATION ══════════════════════════════════════════════ */
@keyframes xpSlide {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes xpFade {
  from { opacity:1; }
  to   { opacity:0; }
}

/* ══ PRESTIGE POPUP FADE-IN ═══════════════════════════════════════════════ */
@keyframes fadeInPop {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ══ PRESTIGE BUFF STAT LINE ══════════════════════════════════════════════ */
#prestige-buff-line {
  color: #ff00ff;
}

/* ══ SKILL MILESTONE TOOLTIP ══════════════════════════════════════════════
   Show milestone progress when hovering an active skill slot.
════════════════════════════════════════════════════════════════════════════ */
.skill-slot { position: relative; }

.skill-slot .milestone-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.95);
  border: 1px solid #00ffcc;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: 'VT323', monospace;
  font-size: 0.75rem;
  color: #ccc;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  min-width: 160px;
  box-shadow: 0 0 10px rgba(0,255,204,0.3);
}

.skill-slot.skill-active:hover .milestone-tip {
  display: block;
}

.milestone-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 0;
}
.milestone-row.unlocked { color: #00ffcc; }
.milestone-row.locked   { color: #444; }
.milestone-row .ms-icon { font-size: 0.8rem; min-width: 14px; }