/* ════════════════════════════════════════════════════
   SLUMA WORLD ONLINE - ESTILO CARTOON BRUTALIST
   ════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── RESET ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --black: #1a1a2e;
  --dark: #16213e;
  --primary: #e94560;
  --primary-dark: #c2314a;
  --secondary: #0f3460;
  --gold: #ffd700;
  --gold-dark: #b8860b;
  --green: #4ade80;
  --red: #ef4444;
  --orange: #f97316;
  --bg: #0f0f23;
  --card-bg: #1e1e3a;
  --input-bg: #16162e;
  --text: #e2e8f0;
  --text-dim: #8892b0;
  --border: #2a2a4a;
  --border-bold: #e94560;
  --shadow: 6px 6px 0px rgba(0,0,0,0.4);
  --shadow-hover: 8px 8px 0px rgba(0,0,0,0.5);
  --radius: 12px;
  --font-game: 'Press Start 2P', monospace;
  --font-body: 'Inter', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  position: relative;
}

/* ─── FONDO DE PARTÍCULAS ─── */
.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.particles::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(233, 69, 96, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 215, 0, 0.2), transparent),
    radial-gradient(2px 2px at 50px 160px, rgba(74, 222, 128, 0.2), transparent),
    radial-gradient(2px 2px at 90px 40px, rgba(233, 69, 96, 0.3), transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255, 215, 0, 0.2), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(74, 222, 128, 0.2), transparent);
  background-size: 200px 200px;
  animation: drift 20s linear infinite;
  opacity: 0.5;
}

@keyframes drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-50px, -50px); }
}

/* ─── CONTENEDOR ─── */
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ─── TARJETA DE AUTENTICACIÓN ─── */
.auth-card {
  background: var(--card-bg);
  border: 3px solid var(--border-bold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 35px;
  width: 100%;
  max-width: 440px;
  position: relative;
  animation: cardIn 0.4s ease-out;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── LOGO ─── */
.logo {
  text-align: center;
  margin-bottom: 30px;
}

.logo-icon {
  font-size: 48px;
  margin-bottom: 10px;
  filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.5));
}

.logo h1 {
  font-family: var(--font-game);
  font-size: 18px;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.logo h1 span {
  color: var(--primary);
  display: block;
}

.subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 8px;
  font-style: italic;
}

/* ─── INPUT GROUP ─── */
.input-group {
  margin-bottom: 18px;
  position: relative;
}

.input-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.label-icon {
  font-size: 14px;
}

.input-group input {
  width: 100%;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.input-group input::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}

.input-group input:user-invalid {
  border-color: var(--red);
}

.char-counter {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 11px;
  color: var(--text-dim);
}

/* ─── TOGGLE PASSWORD ─── */
.toggle-password {
  position: absolute;
  right: 12px;
  top: 38px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.toggle-password:hover {
  opacity: 1;
}

/* ─── BARRA DE FORTALEZA DE CONTRASEÑA ─── */
.password-strength {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 0.3s, background 0.3s;
}

/* ─── TÉRMINOS ─── */
.terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
}

.terms input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  margin-top: 1px;
  cursor: pointer;
}

.terms a {
  color: var(--primary);
  text-decoration: underline;
}

.terms a:hover {
  color: var(--gold);
}

/* ─── BOTONES ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  border: 3px solid var(--black);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  width: 100%;
  background: var(--primary);
  color: white;
  box-shadow: 4px 4px 0px var(--black);
  border-color: var(--black);
}

.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--black);
  background: var(--primary-dark);
}

.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--black);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 4px 4px 0px var(--black);
}

.btn-logout {
  background: transparent;
  color: var(--text);
  padding: 8px 16px;
  font-size: 13px;
  border-color: var(--border);
  box-shadow: 3px 3px 0px var(--black);
}

.btn-logout:hover {
  background: var(--red);
  color: white;
  border-color: var(--red);
  box-shadow: 5px 5px 0px var(--black);
}

/* ─── LOADER ─── */
.btn-loader {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── SWITCH TEXT ─── */
.switch-text {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-dim);
}

.switch-text a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.switch-text a:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ─── TOAST ─── */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow);
  animation: slideIn 0.3s ease-out;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast.success {
  border-color: var(--green);
  color: var(--green);
}

.toast.error {
  border-color: var(--red);
  color: var(--red);
}

.toast.info {
  border-color: var(--gold);
  color: var(--gold);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast.fade-out {
  animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

/* ─── MODAL ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: var(--card-bg);
  border: 3px solid var(--border-bold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  animation: modalIn 0.3s ease-out;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid var(--border);
}

.modal-header h3 {
  font-family: var(--font-game);
  font-size: 12px;
  color: var(--text);
}

.modal-close {
  background: none;
  border: 2px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

.modal-body {
  padding: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.modal-body ul {
  list-style: none;
  padding: 0;
  margin-top: 12px;
}

.modal-body ul li {
  padding: 8px 0;
  padding-left: 24px;
  position: relative;
}

.modal-body ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 2px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.modal-footer .btn {
  width: auto;
  padding: 10px 28px;
}

/* ════════════════════════════════════════════════════
   SELECCIÓN DE CRIATURA
   ════════════════════════════════════════════════════ */

body.starter-selection-active {
  background: #03120f;
  overflow-y: auto;
}

/* ========================================================================== */
/* SLUMADEX — PROFESSIONAL RESEARCH ARCHIVE                                   */
/* ========================================================================== */

#slumadexOverlay {
  --dex-lime: #a3e635;
  --dex-green: #22c55e;
  --dex-mint: #5eead4;
  --dex-gold: #facc15;
  --dex-violet: #a78bfa;
  --dex-ink: #06110f;
  --dex-panel: rgba(5, 18, 16, 0.985);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 92;
  padding: 16px;
  background:
    radial-gradient(circle at 18% 16%, rgba(34, 197, 94, 0.13), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(139, 92, 246, 0.12), transparent 36%),
    rgba(2, 8, 7, 0.90);
  backdrop-filter: blur(14px) saturate(1.15);
}

#slumadexPanel {
  width: min(1240px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(163, 230, 53, 0.35);
  border-radius: 18px;
  background:
    linear-gradient(rgba(94, 234, 212, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.022) 1px, transparent 1px),
    radial-gradient(circle at 12% 0%, rgba(34, 197, 94, 0.10), transparent 28%),
    linear-gradient(145deg, rgba(6, 23, 20, 0.995), rgba(3, 11, 13, 0.995));
  background-size: 32px 32px, 32px 32px, auto, auto;
  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.82),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 45px rgba(34, 197, 94, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: slumadexArchiveEnter 0.36s cubic-bezier(.2, .9, .25, 1) both;
}

#slumadexPanel::before,
#slumadexPanel::after {
  content: '';
  position: absolute;
  z-index: 8;
  width: 46px;
  height: 46px;
  pointer-events: none;
}

#slumadexPanel::before {
  left: 10px;
  top: 10px;
  border-left: 2px solid rgba(163, 230, 53, 0.65);
  border-top: 2px solid rgba(163, 230, 53, 0.65);
  border-radius: 8px 0 0;
}

#slumadexPanel::after {
  right: 10px;
  bottom: 10px;
  border-right: 2px solid rgba(94, 234, 212, 0.42);
  border-bottom: 2px solid rgba(94, 234, 212, 0.42);
  border-radius: 0 0 8px;
}

@keyframes slumadexArchiveEnter {
  from { opacity: 0; transform: translateY(14px) scale(.975); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

#slumadexHeader {
  min-height: 94px;
  display: grid;
  grid-template-columns: minmax(315px, 1fr) minmax(260px, 430px) 38px;
  align-items: center;
  gap: 22px;
  padding: 16px 20px 15px 22px;
  border-bottom: 1px solid rgba(163, 230, 53, 0.24);
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.105), transparent 42%),
    rgba(2, 13, 12, 0.88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.slumadex-brand-lockup {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

#slumadexIcon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(163, 230, 53, 0.46);
  border-radius: 12px 3px 12px 3px;
  color: #d9f99d;
  background:
    radial-gradient(circle, rgba(163, 230, 53, 0.22), transparent 62%),
    rgba(20, 83, 45, 0.24);
  box-shadow: inset 0 0 18px rgba(163, 230, 53, 0.10), 0 0 18px rgba(34, 197, 94, 0.10);
  transform: rotate(45deg);
}

#slumadexIcon::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(94, 234, 212, 0.28);
  border-radius: 8px 2px 8px 2px;
}

#slumadexIcon span {
  position: relative;
  font: 700 7px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .5px;
  transform: rotate(-45deg);
}

#slumadexTitleRow {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.slumadex-eyebrow,
.slumadex-section-kicker,
.slumadex-empty-kicker,
.slumadex-name-lockup > span,
.slumadex-entry-status {
  color: var(--dex-lime);
  font: 700 6px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 1.35px;
}

#slumadexTitle {
  color: #f8fafc;
  background: none;
  -webkit-text-fill-color: currentColor;
  font: 700 17px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 2px;
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(163, 230, 53, 0.12);
}

.slumadex-subtitle {
  max-width: 410px;
  overflow: hidden;
  color: rgba(203, 213, 225, 0.48);
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#slumadexProgressWrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 234, 212, 0.10);
  border-radius: 10px;
  background: rgba(2, 15, 14, 0.64);
}

.slumadex-progress-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.slumadex-progress-heading span {
  color: rgba(148, 163, 184, 0.62);
  font: 700 5.5px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .9px;
}

.slumadex-progress-heading strong {
  color: #d9f99d;
  font: 700 8px var(--font-game, 'Press Start 2P', monospace);
}

#slumadexProgressBarTrack {
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.055);
}

#slumadexProgressFill {
  width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 99px;
  background: linear-gradient(90deg, #16a34a, #a3e635, #5eead4);
  box-shadow: 0 0 14px rgba(163, 230, 53, 0.42);
}

#slumadexProgressFill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.58) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: slumadexProgressScan 2.8s ease-in-out infinite;
}

@keyframes slumadexProgressScan { 55%, 100% { transform: translateX(120%); } }

#slumadexProgress {
  color: rgba(134, 239, 172, 0.60);
  font-size: 5.5px;
  text-transform: uppercase;
}

#slumadexClose {
  width: 36px;
  height: 36px;
  border-color: rgba(148, 163, 184, 0.20);
  border-radius: 10px;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.72);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

#slumadexClose:hover {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.30);
  transform: rotate(4deg);
}

#slumadexBody {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  overflow: hidden;
}

.slumadex-catalogue {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(4, 18, 16, 0.34), rgba(3, 10, 12, 0.14));
}

.slumadex-catalogue-head {
  min-height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 13px 18px 10px;
}

.slumadex-catalogue-head h3,
#slumadexDetailEmpty h3 {
  margin: 5px 0 0;
  color: #f1f5f9;
  font: 700 10px var(--font-game, 'Press Start 2P', monospace);
}

.slumadex-catalogue-metrics {
  display: flex;
  align-items: center;
  gap: 7px;
}

.slumadex-catalogue-metrics > span {
  min-width: 92px;
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.58);
  background: rgba(2, 12, 12, 0.58);
  font-size: 7.5px;
  text-align: center;
}

.slumadex-catalogue-metrics b {
  margin-right: 4px;
  color: #d9f99d;
  font: 700 8px var(--font-game, 'Press Start 2P', monospace);
}

#slumadexToolbar {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.07);
  border-bottom: 1px solid rgba(148, 163, 184, 0.09);
  background: rgba(2, 11, 11, 0.58);
}

.slumadex-search {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(94, 234, 212, 0.13);
  border-radius: 8px;
  color: rgba(94, 234, 212, 0.56);
  background: rgba(1, 10, 10, 0.74);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.slumadex-search:focus-within {
  border-color: rgba(163, 230, 53, 0.46);
  box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.06);
}

.slumadex-search > span { font-size: 19px; line-height: 1; transform: translateY(-1px); }

#slumadexSearch {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: #e2e8f0;
  background: transparent;
  font: 500 9px Inter, system-ui, sans-serif;
}

#slumadexSearch::placeholder { color: rgba(148, 163, 184, 0.36); }
#slumadexSearch::-webkit-search-cancel-button { filter: invert(1); opacity: .35; }

.slumadex-filters {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 8px;
  background: rgba(2, 10, 12, 0.72);
}

.dex-filter-btn {
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: rgba(148, 163, 184, 0.54);
  background: transparent;
  font: 700 5.5px var(--font-game, 'Press Start 2P', monospace);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.dex-filter-btn:hover { color: #e2e8f0; background: rgba(255,255,255,.035); }
.dex-filter-btn.is-active {
  color: #ecfccb;
  background: linear-gradient(180deg, rgba(77, 124, 15, .58), rgba(22, 101, 52, .36));
  box-shadow: inset 0 0 0 1px rgba(163, 230, 53, .24), 0 0 14px rgba(34,197,94,.08);
}

#slumadexVisibleCount {
  color: rgba(148, 163, 184, 0.43);
  font: 700 5.5px var(--font-game, 'Press Start 2P', monospace);
  white-space: nowrap;
}

#slumadexGridWrap {
  min-height: 0;
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px 22px;
  scrollbar-color: rgba(163, 230, 53, 0.25) transparent;
}

#slumadexGridWrap::-webkit-scrollbar { width: 6px; }
#slumadexGridWrap::-webkit-scrollbar-thumb { background: rgba(163, 230, 53, 0.24); }

#slumadexGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}

#slumadexNoResults {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(148, 163, 184, .34);
}

#slumadexNoResults span { color: rgba(163,230,53,.5); font: 700 7px var(--font-game, 'Press Start 2P', monospace); letter-spacing: 1px; }
#slumadexNoResults p { margin: 0; font-size: 9px; }

.dex-card {
  min-height: 144px;
  aspect-ratio: auto;
  padding: 8px 8px 7px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  gap: 5px;
  border-width: 1px;
  border-radius: 11px;
  background: rgba(5, 14, 17, 0.84);
  isolation: isolate;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.dex-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--dex-color, #94a3b8) 20%, transparent), transparent 58%);
  transition: opacity .2s ease;
}

.dex-card-seen {
  border-color: color-mix(in srgb, var(--dex-color) 34%, rgba(148, 163, 184, .08));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--dex-color) 7%, rgba(6, 16, 18, .96)), rgba(2, 10, 13, .96));
}

.dex-card-seen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 36%),
    linear-gradient(90deg, color-mix(in srgb, var(--dex-color) 62%, transparent), transparent) left top / 34px 1px no-repeat;
}

.dex-card-seen:hover {
  z-index: 2;
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--dex-color) 72%, rgba(255,255,255,.16));
  box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 18px color-mix(in srgb, var(--dex-color) 18%, transparent);
}

.dex-card-seen:hover::after { opacity: 1; }

.dex-card-selected,
.dex-card-selected:hover {
  outline: 0;
  border-color: #bef264;
  box-shadow: 0 0 0 1px rgba(190,242,100,.35), 0 10px 28px rgba(0,0,0,.38), 0 0 20px rgba(163,230,53,.16);
}

.dex-card-selected::before { box-shadow: inset 3px 0 0 #a3e635; }

.dex-card-unknown {
  cursor: default;
  border-color: rgba(148, 163, 184, .075);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.011) 0 6px, transparent 6px 12px),
    rgba(2, 8, 11, .76);
}

.dex-card-topline {
  width: 100%;
  min-height: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.dex-card-num {
  align-self: auto;
  color: color-mix(in srgb, var(--dex-color, #94a3b8) 64%, rgba(255,255,255,.28));
  font-size: 5.5px;
  letter-spacing: .4px;
}

.dex-card-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--dex-color, #94a3b8) 72%, #e2e8f0);
  font: 700 4px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .35px;
}

.dex-card-status i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dex-color, #94a3b8);
  box-shadow: 0 0 6px var(--dex-color, #94a3b8);
}

.dex-card-unknown .dex-card-num,
.dex-card-unknown .dex-card-status { color: rgba(148, 163, 184, .19); }

.dex-card-img-wrap {
  width: 76px;
  height: 76px;
  aspect-ratio: auto;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dex-card-scan-ring {
  position: absolute;
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--dex-color, #64748b) 22%, transparent);
  border-radius: 50%;
  opacity: .65;
}

.dex-card-scan-ring::before,
.dex-card-scan-ring::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dex-color, #64748b) 68%, transparent);
  transform: translateX(-50%);
}

.dex-card-scan-ring::after { top: auto; bottom: -3px; }

.dex-card-img-wrap img {
  width: 92%;
  height: 92%;
  position: relative;
  z-index: 2;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 7px 7px rgba(0,0,0,.68));
  transition: transform .2s ease, filter .2s ease;
}

.dex-card-seen:hover .dex-card-img-wrap img {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 9px 9px rgba(0,0,0,.74));
}

.dex-card-img-wrap img[data-sluma-id="butlermi"] { width: 142%; height: 112%; }

.dex-card-fallback { width: 74%; height: 74%; border-radius: 50%; box-shadow: 0 0 18px rgba(255,255,255,.08); }

.dex-card-question {
  position: relative;
  z-index: 2;
  color: rgba(148, 163, 184, .13);
  font-family: var(--font-game, 'Press Start 2P', monospace);
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(148,163,184,.08);
}

.dex-card-name {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
  font-size: 5.5px;
  line-height: 1.45;
  text-transform: uppercase;
}

.dex-card-unknown .dex-card-name { color: rgba(148, 163, 184, .18); font-size: 4.5px; }

.dex-card-hint {
  margin-top: auto;
  color: rgba(148, 163, 184, .12);
  font: 700 3.7px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .25px;
}

.dex-card-element-bar,
.dex-card-element-bar:not(:empty) {
  min-height: 17px;
  width: auto;
  margin: auto 0 0;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--dex-color) 22%, transparent);
  border-radius: 999px;
  background: rgba(2, 8, 10, .60);
  gap: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dex-card-element-bar .dex-card-element-icon { width: 14px; height: 14px; }

#slumadexDetail {
  width: 390px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(163, 230, 53, .17);
  background:
    radial-gradient(circle at 50% 8%, rgba(139, 92, 246, .09), transparent 28%),
    rgba(2, 10, 13, .76);
  box-shadow: -14px 0 30px rgba(0,0,0,.18);
}

#slumadexDetailEmpty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 38px;
  background: radial-gradient(circle at 50% 42%, rgba(163,230,53,.04), transparent 35%);
}

#slumadexDetailEmptyIcon {
  width: 112px;
  height: 112px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(94, 234, 212, .10);
  border-radius: 50%;
  color: rgba(217, 249, 157, .22);
  background: rgba(3, 16, 15, .62);
  box-shadow: 0 0 0 12px rgba(94,234,212,.015), inset 0 0 30px rgba(34,197,94,.04);
}

#slumadexDetailEmptyIcon i {
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(163, 230, 53, .14);
  border-radius: 50%;
  animation: slumadexOrbitSpin 12s linear infinite;
}

#slumadexDetailEmptyIcon b { font: 700 30px var(--font-game, 'Press Start 2P', monospace); }
#slumadexDetailEmpty p { max-width: 250px; color: rgba(203, 213, 225, .44); font-size: 9.5px; line-height: 1.6; }
.slumadex-empty-tip { max-width: 250px; padding: 8px 10px; border: 1px solid rgba(250,204,21,.10); border-radius: 7px; color: rgba(250,204,21,.45); background: rgba(113,63,18,.05); font-size: 7.5px; line-height: 1.4; }

#slumadexPortraitSection {
  height: 218px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-bottom-color: rgba(163, 230, 53, .13);
  background: rgba(2, 12, 14, .48);
}

#slumadexPortraitBg {
  position: absolute;
  inset: 0;
  opacity: .17;
  filter: saturate(1.25);
}

.slumadex-portrait-grid {
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    linear-gradient(rgba(94,234,212,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,234,212,.045) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle, #000, transparent 78%);
}

.slumadex-portrait-orbit {
  width: 156px;
  height: 156px;
  position: absolute;
  border: 1px solid rgba(163, 230, 53, .13);
  border-radius: 50%;
  animation: slumadexOrbitSpin 13s linear infinite;
}

.slumadex-portrait-orbit::before,
.slumadex-portrait-orbit::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(94,234,212,.38);
  background: #06211d;
  transform: translateX(-50%) rotate(45deg);
}

.slumadex-portrait-orbit::before { top: -5px; }
.slumadex-portrait-orbit::after { bottom: -5px; }
.slumadex-portrait-orbit i { position: absolute; inset: 17px; border: 1px dashed rgba(167,139,250,.13); border-radius: 50%; }
.slumadex-portrait-orbit i:last-child { inset: 37px; border-style: solid; border-color: rgba(94,234,212,.08); }

@keyframes slumadexOrbitSpin { to { transform: rotate(360deg); } }

.slumadex-entry-status {
  position: absolute;
  left: 14px;
  top: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(134, 239, 172, .64);
  font-size: 5px;
  letter-spacing: 1px;
}

.slumadex-entry-status i { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #22c55e; animation: slumadexStatusPulse 1.7s ease-in-out infinite; }
@keyframes slumadexStatusPulse { 50% { opacity: .35; box-shadow: 0 0 2px #22c55e; } }

#slumadexDirectionBadge {
  position: absolute;
  right: 14px;
  bottom: 13px;
  z-index: 4;
  min-width: 80px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 7px;
  padding: 6px 8px;
  border: 1px solid rgba(94, 234, 212, .16);
  border-radius: 7px;
  background: rgba(2, 10, 13, .78);
  box-shadow: inset 0 0 12px rgba(94, 234, 212, .025);
}

#slumadexDirectionBadge::before {
  content: '';
  grid-row: 1 / 3;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(163, 230, 53, .62);
  transform: rotate(45deg);
}

#slumadexDirectionBadge span {
  color: rgba(148, 163, 184, .42);
  font: 700 4px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .8px;
}

#slumadexDirectionBadge b {
  color: #a7f3d0;
  font: 700 5px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .4px;
  white-space: nowrap;
}

#slumadexDetailSprite,
#slumadexDetailFallback {
  width: 145px;
  height: 145px;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.72));
  animation: slumadexPortraitFloat 3.5s ease-in-out infinite;
}

@keyframes slumadexPortraitFloat { 50% { transform: translateY(-5px); } }

#slumadexDetailSprite[data-sluma-id="butlermi"] { width: 224px; height: 164px; }

#slumadexDetailSprite[data-direction] {
  width: 170px;
  height: 170px;
  border-radius: 0;
  object-fit: contain;
  transform-origin: 50% 72%;
}

#slumadexDetailSprite[data-direction][data-sluma-id="butlermi"] { width: 205px; height: 174px; }

#slumadexDetailSprite.is-direction-swap { animation: slumadexDirectionSwap .30s cubic-bezier(.2,.82,.25,1) both; }

@keyframes slumadexDirectionSwap {
  from { opacity: .25; transform: translateY(3px) scale(.93); filter: drop-shadow(0 5px 8px rgba(0,0,0,.5)); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 12px 18px rgba(0,0,0,.72)); }
}

#slumadexDexNumBadge {
  position: absolute;
  z-index: 3;
  bottom: 13px;
  left: 15px;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, .10);
  border-radius: 6px;
  color: rgba(226, 232, 240, .42);
  background: rgba(2, 8, 12, .68);
  font-size: 6px;
}

#slumadexVariantBtns { position: absolute; z-index: 4; top: 11px; right: 12px; display: flex; gap: 5px; }

.dex-variant-btn {
  min-height: 25px;
  padding: 0 8px;
  border-radius: 7px;
  color: rgba(203, 213, 225, .62);
  background: rgba(3, 12, 18, .82);
  border: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-game, 'Press Start 2P', monospace);
  font-size: 5px;
  letter-spacing: .3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.dex-variant-btn:hover { color: #f8fafc; border-color: rgba(255,255,255,.26); transform: translateY(-1px); }
.dex-variant-shiny.is-active { color: #fef08a; border-color: rgba(250,204,21,.68); background: rgba(161,98,7,.24); box-shadow: 0 0 13px rgba(250,204,21,.22); }
.dex-variant-ultra.is-active { color: #ddd6fe; border-color: rgba(167,139,250,.72); background: rgba(91,33,182,.25); box-shadow: 0 0 13px rgba(139,92,246,.25); }

#slumadexInfoScroll { flex: 1; overflow-y: auto; scrollbar-color: rgba(163,230,53,.18) transparent; }

#slumadexDetailContent { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#slumadexInfoScroll::-webkit-scrollbar { width: 5px; }
#slumadexInfoScroll::-webkit-scrollbar-thumb { background: rgba(163,230,53,.18); }

#slumadexNameRow {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 15px;
  border-bottom-color: rgba(148, 163, 184, .08);
  background: rgba(3, 13, 14, .58);
}

.slumadex-name-lockup { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.slumadex-name-lockup > span { color: rgba(163,230,53,.48); font-size: 4.5px; }

#slumadexDetailName {
  overflow: hidden;
  color: #f8fafc;
  font-size: 11px;
  margin: 0;
  line-height: 1.45;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.slumadex-species-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
#slumadexLegendaryBadge {
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 20px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 93, 117, .95);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(89, 4, 18, .98), rgba(224, 28, 58, .94));
  color: #fff7ed;
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  letter-spacing: .9px;
  text-shadow: 0 0 8px #fff, 0 0 14px #fb7185;
  box-shadow: 0 0 8px rgba(244, 63, 94, .72), inset 0 0 9px rgba(255,255,255,.16);
  animation: dexLegendaryPulse 1.45s ease-in-out infinite;
}
#slumadexLegendaryBadge::after {
  content: '';
  position: absolute;
  inset: -60% auto -60% -45%;
  width: 35%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation: dexLegendarySweep 2.25s ease-in-out infinite;
}
#slumadexLegendaryBadge[data-rarity="mythic"] {
  border-color: rgba(232,121,249,.95);
  background: linear-gradient(135deg, rgba(59,7,100,.98), rgba(168,85,247,.94), rgba(6,182,212,.9));
  color: #fdf4ff;
  text-shadow: 0 0 8px #fff, 0 0 16px #e879f9;
  box-shadow: 0 0 11px rgba(217,70,239,.8), inset 0 0 10px rgba(255,255,255,.2);
}
@keyframes dexLegendaryPulse {
  50% { transform: translateY(-1px) scale(1.035); box-shadow: 0 0 16px rgba(244,63,94,.95), inset 0 0 12px rgba(255,255,255,.22); }
}
@keyframes dexLegendarySweep {
  0%, 28% { left: -45%; opacity: 0; }
  42% { opacity: 1; }
  72%, 100% { left: 125%; opacity: 0; }
}

#slumadexDetailElement {
  gap: 5px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid;
  max-width: 180px;
  padding: 4px 8px;
  border-radius: 8px;
}

#slumadexDetailElement .dex-detail-element-icon { width: 22px; height: 22px; }
#slumadexDetailElement .dex-detail-element-label { overflow: hidden; font-size: 8px; text-overflow: ellipsis; }

.dex-section {
  padding: 13px 15px 12px;
  border-bottom-color: rgba(148, 163, 184, .07);
}

.dex-section:last-child { border-bottom: 0; }

.dex-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(148, 163, 184, .48);
  font-size: 5.5px;
  letter-spacing: 1.25px;
}

.dex-section-title::before {
  content: '';
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, var(--dex-lime), transparent);
}

#slumadexDetailStatsGrid { display: grid; gap: 6px; }

.dex-stat-row {
  min-height: 34px;
  display: grid;
  align-items: center;
  grid-template-columns: 76px 1fr 52px;
  gap: 9px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--stat-color) 13%, transparent);
  border-radius: 7px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--stat-color) 5%, transparent), rgba(255,255,255,.008));
}

.dex-stat-label { display: flex; align-items: center; gap: 6px; color: rgba(203, 213, 225, .58); font-size: 8px; }
.dex-stat-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--stat-color); box-shadow: 0 0 7px color-mix(in srgb, var(--stat-color) 65%, transparent); }
.dex-stat-bar-track { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(148,163,184,.08); }
.dex-stat-bar-fill { height: 100%; border-radius: 99px; box-shadow: 0 0 7px color-mix(in srgb, var(--stat-color) 40%, transparent); }
.dex-stat-val { color: #f1f5f9; font-size: 8.5px; font-weight: 800; }

#slumadexDetailLocationList { display: flex; flex-wrap: wrap; gap: 6px; }
.dex-loc-tag { padding: 5px 9px; border-radius: 7px; color: #86efac; background: rgba(20,83,45,.18); font-size: 8px; }
.dex-loc-tag::before { content: '◆'; margin-right: 5px; color: #a3e635; font-size: 6px; }
.dex-loc-none { color: rgba(148,163,184,.36); font-size: 8.5px; }

.dex-section-passive { background: linear-gradient(90deg, rgba(139,92,246,.035), transparent); }
.dex-passive-name { margin-bottom: 4px; color: #c4b5fd; font-size: 10px; }
.dex-passive-desc { color: rgba(203, 213, 225, .61); font-size: 8.5px; line-height: 1.55; }

.dex-capture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

.dex-count-row {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 21px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 6px;
  padding: 7px 8px;
  border: 1px solid rgba(148,163,184,.09);
  border-radius: 8px;
  background: rgba(2,10,13,.58);
}

.dex-count-icon { grid-row: 1 / 3; color: #86efac; font-size: 11px; text-align: center; }
.dex-count-label { color: rgba(148,163,184,.48); font-size: 7px; }
.dex-count-val { overflow: hidden; color: #d9f99d; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.dex-count-row.is-shiny { border-color: rgba(250,204,21,.14); background: rgba(113,63,18,.05); }
.dex-count-row.is-shiny .dex-count-icon, .dex-count-row.is-shiny .dex-count-val { color: #fde047; }
.dex-count-row.is-ultra { border-color: rgba(167,139,250,.15); background: rgba(76,29,149,.05); }
.dex-count-row.is-ultra .dex-count-icon, .dex-count-row.is-ultra .dex-count-val { color: #c4b5fd; }

@media (max-width: 1000px) {
  #slumadexPanel { width: min(960px, calc(100vw - 20px)); height: min(740px, calc(100vh - 20px)); }
  #slumadexHeader { grid-template-columns: minmax(280px, 1fr) minmax(230px, 330px) 36px; gap: 14px; padding-inline: 16px; }
  #slumadexBody { grid-template-columns: minmax(0, 1fr) 340px; }
  #slumadexDetail { width: 340px; }
  #slumadexGrid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
  #slumadexToolbar { grid-template-columns: minmax(160px, 1fr) auto; }
  #slumadexVisibleCount { display: none; }
  .slumadex-catalogue-metrics > span { min-width: 78px; }
}

@media (max-width: 760px) {
  #slumadexOverlay { padding: 6px; align-items: stretch; }
  #slumadexPanel { width: 100%; height: 100%; max-height: none; border-radius: 12px; }
  #slumadexHeader { min-height: 76px; grid-template-columns: 1fr 34px; padding: 11px 12px; }
  #slumadexIcon { width: 42px; height: 42px; flex-basis: 42px; }
  #slumadexTitle { font-size: 12px; }
  .slumadex-subtitle { display: none; }
  #slumadexProgressWrap { grid-column: 1 / -1; grid-row: 2; padding: 6px 8px; }
  #slumadexClose { grid-column: 2; grid-row: 1; }
  #slumadexBody { display: block; overflow-y: auto; }
  .slumadex-catalogue { min-height: 590px; }
  .slumadex-catalogue-head { min-height: 60px; padding-inline: 12px; }
  .slumadex-catalogue-metrics > span { min-width: 0; padding: 6px; }
  #slumadexToolbar { grid-template-columns: 1fr; padding: 8px 12px; }
  .slumadex-filters { justify-content: stretch; }
  .dex-filter-btn { flex: 1; }
  #slumadexGridWrap { padding: 12px; }
  #slumadexGrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  #slumadexDetail { width: 100%; min-height: 610px; border-top: 1px solid rgba(163,230,53,.18); border-left: 0; }
  #slumadexDetailEmpty { min-height: 430px; }
}

@media (max-width: 430px) {
  .slumadex-eyebrow { font-size: 4.5px; }
  #slumadexTitle { font-size: 10px; }
  .slumadex-catalogue-metrics { gap: 4px; }
  .slumadex-catalogue-metrics > span { font-size: 6.5px; }
  #slumadexGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dex-card { min-height: 132px; padding-inline: 6px; }
  .dex-card-img-wrap { width: 68px; height: 68px; }
  .dex-card-status { display: none; }
}

body.starter-selection-active::before,
body.starter-selection-active::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.starter-selection-active::before {
  z-index: 0;
  background: #03120f url('/imagenes/fondo.png') center center / cover no-repeat;
}

body.starter-selection-active::after {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(1,8,7,.3), rgba(1,8,7,.48) 58%, rgba(1,8,7,.82)),
    linear-gradient(90deg, rgba(1,9,7,.42), rgba(1,9,7,.08) 48%, rgba(1,9,7,.42));
}

body.starter-selection-active > .particles { display: none; }
body.starter-selection-active .container { padding: clamp(22px, 4vh, 46px) 22px; }

.sluma-select {
  width: 100%;
  max-width: 1020px;
  position: relative;
  isolation: isolate;
  background: linear-gradient(145deg, rgba(3,25,21,.96), rgba(3,14,15,.94));
  border: 1px solid rgba(134,239,172,.42);
  border-radius: 18px;
  box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(250,204,21,.08), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cardIn 0.4s ease-out;
}

.sluma-select::before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(250,204,21,.1);
  border-radius: 12px;
}

.select-header {
  padding: 18px 24px;
  background: linear-gradient(90deg, rgba(4,37,31,.9), rgba(6,58,45,.64), rgba(4,37,31,.9));
  border-bottom: 1px solid rgba(134,239,172,.18);
}

.select-logo {
  font-family: var(--font-game);
  font-size: 11px;
  color: #d9f99d;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: 0 0 16px rgba(74,222,128,.48);
}

.select-title {
  text-align: center;
  padding: 30px 20px 10px;
}

.select-title h2 {
  font-family: var(--font-game);
  font-size: 16px;
  color: #f7fee7;
  margin-bottom: 8px;
}

.select-title h2 span {
  color: #facc15;
}

.select-title p {
  font-size: 14px;
  color: #9fbbb0;
}

.sluma-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 28px 30px 34px;
}

.sluma-card {
  background: linear-gradient(160deg, rgba(7,31,28,.94), rgba(3,14,18,.94));
  border: 3px solid var(--border);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sluma-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  transition: opacity 0.3s;
}

.sluma-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 0 18px 38px rgba(0,0,0,.44), 0 0 24px color-mix(in srgb, var(--starter-color) 18%, transparent);
}

.sluma-card:hover::before {
  opacity: 0.15;
}

.sluma-card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.4);
}

.sluma-orb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: 4px solid;
  box-shadow: 0 0 20px rgba(255,255,255,0.1), inset 0 0 10px rgba(255,255,255,0.05);
  transition: all 0.3s;
}

.sluma-card:hover .sluma-orb {
  transform: scale(1.08);
  box-shadow: 0 0 30px rgba(255,255,255,0.2), inset 0 0 15px rgba(255,255,255,0.1);
}

.sluma-starter-portrait {
  position: relative;
  width: 164px;
  height: 138px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--starter-color) 72%, white);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--starter-color) 24%, transparent), transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(0,0,0,0.22));
  box-shadow: inset 0 0 22px rgba(0,0,0,0.28), 0 0 20px color-mix(in srgb, var(--starter-color) 20%, transparent);
  transition: transform .24s ease, box-shadow .24s ease;
}

.sluma-starter-portrait::after {
  content: '';
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--starter-light) 28%, transparent);
  border-radius: 9px;
}

.sluma-starter-portrait img {
  width: 136px;
  height: 120px;
  object-fit: contain;
  image-rendering: auto;
  transform: scale(1.03);
  backface-visibility: hidden;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.52)) saturate(1.08) contrast(1.04);
  transition: transform .24s ease;
}

.sluma-starter-level {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--starter-color) 68%, white);
  border-radius: 5px;
  background: rgba(2,8,12,0.82);
  color: #f8fafc;
  font: 700 7px/1 var(--font-game);
  letter-spacing: .6px;
}

.sluma-card:hover .sluma-starter-portrait {
  transform: translateY(-3px);
  box-shadow: inset 0 0 22px rgba(0,0,0,0.22), 0 0 30px color-mix(in srgb, var(--starter-color) 34%, transparent);
}

.sluma-card:hover .sluma-starter-portrait img { transform: scale(1.11); }

.sluma-name {
  font-family: var(--font-game);
  font-size: 11px;
  color: var(--text);
  margin-bottom: 4px;
}

.sluma-element {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.sluma-element .starter-element-icon {
  width: 22px;
  height: 22px;
  image-rendering: auto;
  filter: drop-shadow(0 0 5px currentColor);
}

.sluma-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 14px;
}

.sluma-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.sluma-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.sluma-stat-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sluma-stat-value {
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-game);
  font-size: 10px;
}

.sluma-stat-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 8px;
  overflow: hidden;
}

.sluma-stat-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.sluma-total {
  font: 700 8px/1.4 var(--font-game);
  color: #d9f99d;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(134,239,172,.13);
}

@media (max-width: 700px) {
  .sluma-grid {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .sluma-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: center;
    padding: 18px;
  }
  .sluma-orb {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin: 0;
    flex-shrink: 0;
  }
  .sluma-starter-portrait {
    width: 148px;
    height: 122px;
    margin: 0 auto 14px;
    flex-shrink: 0;
  }
  .sluma-starter-portrait img { width:122px; height:105px; }
  .sluma-starter-level { top:5px; left:5px; padding:4px 5px; font-size:5px; }
  .sluma-stats {
    width: 100%;
    min-width: 0;
  }
}

/* ─── DASHBOARD ─── */
.dashboard {
  width: 100%;
  max-width: 900px;
  min-height: 80vh;
  background: var(--card-bg);
  border: 3px solid var(--border-bold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cardIn 0.4s ease-out;
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--dark);
  border-bottom: 3px solid var(--border);
}

.dash-logo {
  font-family: var(--font-game);
  font-size: 12px;
  color: var(--primary);
  letter-spacing: 1px;
}

.dash-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-level {
  font-family: var(--font-game);
  font-size: 10px;
  color: var(--gold);
  background: rgba(255, 215, 0, 0.1);
  padding: 4px 10px;
  border: 2px solid var(--gold-dark);
  border-radius: 6px;
}

.dash-username {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.dash-content {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.welcome-card {
  background: var(--input-bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.welcome-card h2 {
  font-family: var(--font-game);
  font-size: 14px;
  color: var(--text);
  margin-bottom: 10px;
}

.welcome-card h2 span {
  color: var(--primary);
}

.welcome-card p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}

.stats-preview {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  padding: 12px 20px;
  border: 2px solid var(--border);
  border-radius: 8px;
  min-width: 120px;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  font-weight: 600;
}

.stat-value {
  font-family: var(--font-game);
  font-size: 14px;
  color: var(--gold);
}

.placeholder-msg {
  text-align: center;
  padding: 40px 20px;
  border: 2px dashed var(--border);
  border-radius: 10px;
}

.msg-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.placeholder-msg p {
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
}

.msg-sub {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  font-weight: 400 !important;
  margin-top: 6px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 500px) {
  .auth-card {
    padding: 28px 20px;
  }

  .logo h1 {
    font-size: 14px;
  }

  .dash-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .dash-user-info {
    flex-wrap: wrap;
    justify-content: center;
  }

  .stats-preview {
    justify-content: center;
  }

  .modal {
    width: 95%;
  }
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}


/* ════════════════════════════════════════════════════
   GAME SCREEN
   ════════════════════════════════════════════════════ */

#gameScreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #1a1a1a;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

/* ── Botón salir en la barra inferior ── */
#gameLogoutBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 110px;
  padding: 0 14px;
  border: 2px solid rgba(255,255,255,0.20);
  border-radius: 10px;
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-body);
  text-transform: uppercase;
}

#gameLogoutBtn:hover {
  transform: translateY(-1px);
  background: rgba(239,68,68,0.45);
  border-color: rgba(239,68,68,0.6);
  color: #fff;
}

#gameLogoutBtn:active {
  transform: translateY(1px);
}

#captureHudPanel {
  position: absolute;
  left: 16px;
  bottom: 86px;
  z-index: 21;
  width: min(360px, 42vw);
  min-width: 300px;
  max-height: min(290px, 38vh);
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.14);
  background: rgba(12, 17, 24, 0.82);
  box-shadow: 0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#captureHudHead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  cursor: move;
  user-select: none;
}

#captureHudHead label {
  font-size: 0.78rem;
  color: #dbeafe;
  font-weight: 700;
  white-space: nowrap;
}

#captureItemSelect {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(20, 25, 31, 0.92);
  color: #f8fafc;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0 8px;
}

#captureDefeatLogList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow: auto;
}

.capture-log-empty {
  padding: 18px 12px;
  border: 1px dashed rgba(167, 139, 250, 0.35);
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.07);
  color: #cbd5e1;
  font-size: 0.76rem;
  text-align: center;
}

.capture-log-row {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(17, 23, 31, 0.9);
  padding: 8px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  align-items: center;
}

.capture-log-portrait {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.capture-log-sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.capture-log-sprite-fallback {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.capture-log-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.capture-log-title {
  color: #f8fafc;
  font-size: 0.8rem;
  font-weight: 700;
}

.capture-log-meta {
  color: rgba(203,213,225,0.86);
  font-size: 0.74rem;
}

.capture-log-status {
  font-size: 0.74rem;
  font-weight: 700;
}

.capture-log-status.pending { color: #93c5fd; }
.capture-log-status.captured { color: #86efac; }
.capture-log-status.failed { color: #fca5a5; }

.capture-btn {
  height: 32px;
  min-width: 84px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 9px;
  background: rgba(20, 25, 31, 0.92);
  color: #f8fafc;
  font-weight: 800;
  font-size: 0.74rem;
  cursor: pointer;
}

.capture-btn:hover {
  border-color: rgba(147,197,253,0.55);
  background: rgba(26, 36, 47, 0.94);
}

.capture-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Shiny badge in capture log ─── */
.capture-log-shiny-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* --- Ultra badge in capture log --- */
.capture-log-ultra-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.35);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

.capture-log-row-captured {
  opacity: 0.65;
}

/* ── Capture log filter buttons ── */
#captureLogFilters {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.capture-filter-btn {
  flex: 1;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(20, 25, 31, 0.8);
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.capture-filter-btn:hover {
  background: rgba(40, 50, 65, 0.9);
  color: #e2e8f0;
}

.capture-filter-btn.active {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.45);
}

/* ── Barra inferior para acciones futuras ── */
#bottomActionBar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 20;
  height: 64px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.14);
  background: rgba(32, 37, 46, 0.74);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 10px;
  padding: 8px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

#bottomActionBar::-webkit-scrollbar { display: none; }

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 110px;
  padding: 0 14px;
  border: 2px solid rgba(255,255,255,0.20);
  border-radius: 10px;
  background: rgba(20, 25, 31, 0.88);
  color: #f3f4f6;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  background: rgba(33, 43, 56, 0.92);
  border-color: rgba(147,197,253,0.5);
}

.action-btn:active {
  transform: translateY(1px);
}

.action-btn.has-nav-icon {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  min-width: 54px;
  height: 48px;
  padding: 3px;
  overflow: visible;
}

.action-btn-icon {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  image-rendering: auto;
  backface-visibility: hidden;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.action-btn.has-nav-icon:hover .action-btn-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.55));
}

/* ── HUD Areas ── */
#areasHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: rgba(8, 10, 14, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#areasHudPanel {
  width: min(1180px, 96vw);
  height: min(700px, 86vh);
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(26, 30, 38, 0.96) 0%, rgba(18, 22, 29, 0.96) 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
}

#slumasHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 36;
  background: rgba(7, 10, 16, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#inventoryHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 37;
  background: rgba(7, 10, 16, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#inventoryHudPanel {
  width: min(980px, 96vw);
  height: min(700px, 86vh);
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(20, 27, 36, 0.96) 0%, rgba(14, 19, 27, 0.96) 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#inventoryHudHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

#inventoryHudHeader h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: #e5e7eb;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#inventoryHudTitle {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.inventory-hud-money {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--gold-dark, #b8860b);
  border-radius: 8px;
  background: rgba(255, 215, 0, 0.08);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gold, #ffd700);
  white-space: nowrap;
}

.inventory-hud-money b {
  font-weight: normal;
  color: #fff7d6;
}

#inventoryHudClose {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
  cursor: pointer;
}

#inventoryHudClose:hover {
  background: rgba(239,68,68,0.28);
}

#inventoryHudBody {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(220px, 300px);
  gap: 14px;
  padding: 14px;
}

#inventorySlotsPane {
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(84px, max-content);
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 222, 128, 0.55) rgba(255,255,255,0.05);
}

#inventorySlotsPane::-webkit-scrollbar { width: 8px; }
#inventorySlotsPane::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}
#inventorySlotsPane::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.55);
}

.inventory-slot-card {
  min-height: 84px;
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  background: rgba(17, 23, 31, 0.92);
  color: #e5e7eb;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.inventory-slot-card:hover {
  transform: translateY(-1px);
  border-color: rgba(147,197,253,0.55);
  background: rgba(26, 36, 47, 0.94);
}

.inventory-slot-card.is-selected {
  border-color: rgba(74,222,128,0.7);
  background: rgba(17, 41, 34, 0.88);
}

.inventory-slot-card.is-empty {
  opacity: 0.76;
}

.inventory-slot-index {
  font-size: 0.72rem;
  color: rgba(203,213,225,0.7);
  font-weight: 700;
}

.inventory-slot-main {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inventory-slot-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
}

.inventory-slot-icon img { width: 100%; height: 100%; object-fit: contain; }

.inventory-slot-name {
  font-size: 0.78rem;
  color: #f8fafc;
  font-weight: 700;
  line-height: 1.2;
}

.inventory-slot-empty {
  font-size: 0.74rem;
  color: rgba(203,213,225,0.7);
}

.inventory-slot-qty {
  font-size: 0.78rem;
  color: #86efac;
  font-weight: 700;
}

#inventoryDetailPane {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#inventoryDetailName {
  color: #f8fafc;
  font-size: 1rem;
  margin: 0;
}

#inventoryDetailCount {
  color: #86efac;
  font-weight: 700;
  font-size: 0.86rem;
}

#inventoryDetailDesc {
  color: rgba(203,213,225,0.85);
  font-size: 0.82rem;
  line-height: 1.45;
}

#inventoryDetailImage {
  width: 128px;
  height: 128px;
  align-self: center;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.42));
}

#inventoryDetailStats { display: flex; flex-wrap: wrap; gap: 7px; }
#inventoryDetailStats span {
  padding: 6px 8px;
  border: 1px solid rgba(96,165,250,0.3);
  border-radius: 7px;
  background: rgba(59,130,246,0.09);
  color: #bfdbfe;
  font-size: 0.72rem;
  font-weight: 700;
}

#inventoryUseBtn {
  margin-top: auto;
  min-height: 42px;
  border: 1px solid rgba(74,222,128,0.62);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(34,197,94,0.32), rgba(21,128,61,0.26));
  color: #dcfce7;
  font-weight: 800;
  cursor: pointer;
}
#inventoryUseBtn:hover:not(:disabled) { background-color: rgba(34,197,94,0.35); }
#inventoryUseBtn:disabled { opacity: 0.55; cursor: wait; }
#inventoryUseStatus { min-height: 18px; color: #86efac; font-size: 0.75rem; line-height: 1.35; }
#inventoryUseStatus.is-error { color: #fca5a5; }

#inventoryUseConfirm[hidden] { display: none; }
#inventoryUseConfirm {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3,7,18,0.72);
  backdrop-filter: blur(5px);
}
#inventoryUseConfirmCard {
  width: min(460px, 94vw);
  display: grid;
  grid-template-columns: 108px minmax(0,1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(167,139,250,0.48);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(31,25,55,0.98), rgba(12,18,30,0.98));
  box-shadow: 0 24px 60px rgba(0,0,0,0.62), inset 0 1px rgba(255,255,255,0.08);
}
#inventoryUseConfirmImage {
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}
#inventoryUseConfirmCopy > span {
  display: block;
  margin-bottom: 6px;
  color: #c4b5fd;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#inventoryUseConfirmTitle { margin: 0; color: #f5f3ff; font-size: 1.05rem; }
#inventoryUseConfirmDesc { margin: 7px 0 0; color: #cbd5e1; font-size: 0.78rem; line-height: 1.45; }
#inventoryUseConfirmStatus { min-height: 18px; margin-top: 7px; color: #86efac; font-size: 0.72rem; }
#inventoryUseConfirmStatus.is-error { color: #fca5a5; }
#inventoryUseConfirmActions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#inventoryUseConfirmActions button {
  min-height: 42px;
  border-radius: 9px;
  color: #f8fafc;
  font-weight: 800;
  cursor: pointer;
}
#inventoryUseCancelBtn { border: 1px solid rgba(148,163,184,0.42); background: rgba(71,85,105,0.3); }
#inventoryUseConfirmBtn { border: 1px solid rgba(74,222,128,0.65); background: rgba(22,163,74,0.32); }
#inventoryUseConfirmBtn:hover:not(:disabled) { background: rgba(22,163,74,0.48); }
#inventoryUseCancelBtn:hover { background: rgba(100,116,139,0.45); }
#inventoryUseConfirmBtn:disabled { opacity: 0.55; cursor: wait; }

#activeEffectsHud {
  position: absolute;
  z-index: 34;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  display: none;
  max-width: min(760px, calc(100vw - 28px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#activeEffectsHud.is-visible {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#activeEffectsSummary {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.17);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,27,40,0.94), rgba(9,15,25,0.94));
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
}
.active-effect-chip {
  display: grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  min-width: 124px;
  padding: 4px 9px 4px 5px;
  border: 1px solid rgba(167,139,250,0.34);
  border-radius: 11px;
  background: rgba(124,58,237,0.12);
}
.active-effect-chip img { grid-row: 1 / 3; width: 28px; height: 28px; object-fit: contain; }
.active-effect-chip b { color: #ede9fe; font-size: 0.69rem; white-space: nowrap; }
.active-effect-chip time { color: #c4b5fd; font: 700 0.66rem monospace; }
.active-effect-message { color: #dcfce7; font-size: 0.78rem; font-weight: 700; padding: 3px 9px; }
#activeEffectsTooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  width: min(440px, calc(100vw - 34px));
  transform: translateX(-50%) translateY(-5px);
  padding: 10px;
  border: 1px solid rgba(167,139,250,0.34);
  border-radius: 12px;
  background: rgba(8,13,23,0.97);
  box-shadow: 0 14px 36px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
#activeEffectsHud:hover #activeEffectsTooltip:not(:empty) {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.active-effect-tooltip-row { display: flex; gap: 10px; align-items: center; padding: 7px; }
.active-effect-tooltip-row + .active-effect-tooltip-row { border-top: 1px solid rgba(255,255,255,0.08); }
.active-effect-tooltip-row img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.active-effect-tooltip-row strong { color: #f5f3ff; font-size: 0.78rem; }
.active-effect-tooltip-row p { margin: 3px 0 0; color: #cbd5e1; font-size: 0.72rem; line-height: 1.4; }

#slumasHudPanel {
  width: min(1080px, 96vw);
  height: min(700px, 86vh);
  border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(18, 24, 32, 0.97) 0%, rgba(12, 16, 24, 0.97) 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#slumasHudHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#slumasHudHeader h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: #cbd5e1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#slumasHudClose {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#slumasHudClose:hover {
  background: rgba(239,68,68,0.25);
  color: #fca5a5;
}

#slumasHudBody {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(230px, 280px) 1fr;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  min-height: 0;
}

#slumasSlotsPane {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

#slumasRightCol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  padding-right: 2px;
}

#slumasRightCol::-webkit-scrollbar {
  width: 5px;
}

#slumasRightCol::-webkit-scrollbar-track {
  background: transparent;
}

#slumasRightCol::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}

.sluma-hunt-panel {
  margin-top: auto;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.6);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sluma-hunt-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.56rem;
  color: #94a3b8;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.sluma-hunt-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.sluma-hunt-btn {
  height: 28px;
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(20, 25, 31, 0.88);
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.sluma-hunt-btn:hover {
  border-color: rgba(147,197,253,0.5);
  background: rgba(26, 36, 47, 0.92);
  transform: translateY(-1px);
}

.sluma-hunt-btn.is-active {
  border-color: rgba(74,222,128,0.75);
  background: rgba(15, 38, 30, 0.9);
  color: #bbf7d0;
}

.sluma-hunt-note {
  color: rgba(148,163,184,0.7);
  font-size: 0.68rem;
  line-height: 1.4;
}

.sluma-slot-card {
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 10px;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(17, 23, 31, 0.88);
  padding: 8px 10px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.sluma-slot-card:hover {
  transform: translateY(-1px);
  border-color: rgba(147,197,253,0.5);
  background: rgba(22, 32, 43, 0.94);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.sluma-slot-card.is-selected {
  border-color: rgba(74,222,128,0.65);
  background: rgba(15, 38, 30, 0.92);
  box-shadow: 0 0 10px rgba(74,222,128,0.12);
}

.sluma-slot-card.is-empty {
  cursor: default;
  opacity: 0.5;
}

.sluma-slot-card.is-empty:hover {
  transform: none;
  border-color: rgba(255,255,255,0.12);
  background: rgba(17, 23, 31, 0.88);
  box-shadow: none;
}

.sluma-slot-portrait {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

.sluma-slot-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.sluma-slot-fallback {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
}

.sluma-slot-name {
  color: #f3f4f6;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.sluma-slot-sub {
  color: rgba(203,213,225,0.7);
  font-size: 0.76rem;
  line-height: 1.3;
}

#slumaDetailPane {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#slumaDetailTop {
  display: flex;
  align-items: center;
  gap: 12px;
}

#slumaEquipmentPanel {
  position: relative;
  width: min(430px, 58%);
  margin-left: auto;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.92), rgba(8, 12, 18, 0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.18);
}

#slumaEquipmentPanel.is-disabled { opacity: 0.62; }

#slumaEquipmentHeader,
#slumaEquipmentPickerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#slumaEquipmentHeader {
  margin-bottom: 8px;
  color: #e2e8f0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#slumaEquipmentHeader small {
  color: #64748b;
  font: 600 0.64rem Inter, system-ui, sans-serif;
  text-transform: none;
}

#slumaEquipmentCurrent { min-height: 62px; }

.sluma-equipment-equipped,
.sluma-equipment-empty {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 9px;
  background: rgba(2, 6, 12, 0.38);
}

.sluma-equipment-equipped {
  border-style: solid;
  border-color: rgba(52, 211, 153, 0.28);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.09), rgba(2, 6, 12, 0.48));
}

.sluma-equipment-equipped img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  filter: drop-shadow(0 4px 7px rgba(0,0,0,0.45));
}

.sluma-equipment-equipped span,
.sluma-equipment-empty > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sluma-equipment-equipped strong,
.sluma-equipment-empty strong {
  color: #f8fafc;
  font-size: 0.78rem;
}

.sluma-equipment-equipped small,
.sluma-equipment-empty small {
  color: #94a3b8;
  font-size: 0.65rem;
  line-height: 1.35;
}

.sluma-equipment-empty-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 9px;
  color: #64748b;
  font-size: 1.35rem;
}

#slumaEquipmentActions {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}

#slumaEquipmentActions button {
  min-height: 29px;
  padding: 5px 10px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 7px;
  background: rgba(37, 99, 235, 0.14);
  color: #bfdbfe;
  font-weight: 750;
  font-size: 0.66rem;
  cursor: pointer;
}

#slumaEquipmentRemoveBtn {
  border-color: rgba(248, 113, 113, 0.32) !important;
  background: rgba(239, 68, 68, 0.10) !important;
  color: #fecaca !important;
}

#slumaEquipmentActions button:hover:not(:disabled) { filter: brightness(1.22); }
#slumaEquipmentActions button:disabled { opacity: 0.5; cursor: default; }

#slumaEquipmentStatus {
  min-height: 13px;
  margin-top: 5px;
  color: #86efac;
  font-size: 0.61rem;
}

#slumaEquipmentStatus.is-error { color: #fca5a5; }

#slumaEquipmentPicker {
  position: absolute;
  z-index: 35;
  top: calc(100% + 8px);
  right: 0;
  width: min(440px, 76vw);
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, 0.36);
  border-radius: 11px;
  background: rgba(8, 13, 21, 0.98);
  box-shadow: 0 18px 50px rgba(0,0,0,0.58);
}

#slumaEquipmentPicker[hidden] { display: none; }

#slumaEquipmentPickerHead {
  padding: 1px 2px 9px;
  color: #dbeafe;
  font-size: 0.73rem;
}

#slumaEquipmentPickerClose {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  cursor: pointer;
}

#slumaEquipmentList {
  max-height: 280px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  padding-right: 2px;
}

.sluma-equipment-option {
  width: 100%;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px;
  background: rgba(255,255,255,0.035);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
}

.sluma-equipment-option:hover:not(:disabled) {
  border-color: rgba(52, 211, 153, 0.42);
  background: rgba(16, 185, 129, 0.08);
}

.sluma-equipment-option img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

.sluma-equipment-option-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sluma-equipment-option-copy strong { color: #f8fafc; font-size: 0.72rem; }
.sluma-equipment-option-copy small { color: #94a3b8; font-size: 0.61rem; line-height: 1.32; }

.sluma-equipment-quantity {
  min-width: 30px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.15);
  color: #bfdbfe;
  font-size: 0.65rem;
  font-weight: 800;
  text-align: center;
}

.sluma-equipment-empty-list {
  padding: 20px 12px;
  color: #94a3b8;
  font-size: 0.7rem;
  text-align: center;
}

#slumaDetailPortraitWrap {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

#slumaDetailSprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

#slumaDetailFallback {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
}

#slumaDetailName {
  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.2px;
}

#slumaDetailLevel {
  color: #86efac;
  font-weight: 700;
  font-size: 0.82rem;
}

#slumaDetailExp {
  color: #93c5fd;
  font-size: 0.78rem;
}

.sluma-deploy-btn {
  margin-top: 4px;
  height: 28px;
  min-width: 100px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(20, 25, 31, 0.88);
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.sluma-deploy-btn:hover {
  border-color: rgba(147,197,253,0.5);
  background: rgba(26, 36, 47, 0.92);
}

.sluma-deploy-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#slumaDetailStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 8px;
}

.sluma-stat-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  background: rgba(10, 14, 20, 0.5);
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sluma-stat-card.is-boosted {
  border-color: rgba(74, 222, 128, 0.34);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(10, 14, 20, 0.54));
}

.sluma-stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.sluma-stat-name {
  color: #cbd5e1;
  font-size: 0.76rem;
}

.sluma-stat-value {
  color: #f1f5f9;
  font-weight: 700;
  font-size: 0.95rem;
}

.sluma-stat-value.is-boosted,
.sluma-stat-rarity.is-boosted {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.22);
}

.sluma-stat-rarity {
  width: fit-content;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #f8fafc;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 0.68rem;
}

.rarity-F { color: #d1d5db; border-color: rgba(209,213,219,0.35); }
.rarity-E { color: #bae6fd; border-color: rgba(186,230,253,0.45); }
.rarity-D { color: #93c5fd; border-color: rgba(147,197,253,0.45); }
.rarity-C { color: #86efac; border-color: rgba(134,239,172,0.45); }
.rarity-B { color: #facc15; border-color: rgba(250,204,21,0.45); }
.rarity-A { color: #f97316; border-color: rgba(249,115,22,0.45); }
.rarity-S { color: #fb7185; border-color: rgba(251,113,133,0.5); }
.rarity-SS { color: #c084fc; border-color: rgba(192,132,252,0.5); }
.rarity-SSS { color: #22d3ee; border-color: rgba(34,211,238,0.5); }
.rarity-M { color: #facc15; border-color: rgba(250,204,21,0.65); box-shadow: 0 0 10px rgba(250,204,21,0.18); }

#slumaSkillsPanel {
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 11px;
  padding: 10px;
  background: linear-gradient(145deg, rgba(9, 14, 22, 0.78), rgba(16, 23, 34, 0.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

#slumaSkillsPanel.is-empty {
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.18);
}

#slumaSkillsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  color: #dbeafe;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

#slumaSkillsHeader small {
  color: #64748b;
  font: 700 0.65rem Inter, system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

#slumaSkillsList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#slumaSkillsEmpty {
  padding: 10px;
  border-radius: 8px;
  color: #64748b;
  background: rgba(2, 6, 12, 0.28);
  font-size: 0.72rem;
  text-align: center;
}

.sluma-skill-card {
  --skill-accent: #93c5fd;
  position: relative;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--skill-accent) 28%, transparent);
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--skill-accent) 8%, transparent), rgba(5, 9, 15, 0.68));
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.sluma-skill-card.is-ready {
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--skill-accent) 4%, transparent);
}

.sluma-skill-card.is-casting {
  border-color: color-mix(in srgb, var(--skill-accent) 72%, white 8%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--skill-accent) 18%, transparent);
}

.sluma-skill-card.is-cooling {
  border-color: rgba(251, 146, 60, 0.28);
}

.sluma-skill-orb {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--skill-accent) 52%, transparent);
  border-radius: 9px;
  background: radial-gradient(circle, color-mix(in srgb, var(--skill-accent) 28%, white 4%) 0 20%, color-mix(in srgb, var(--skill-accent) 10%, transparent) 52%, rgba(3, 7, 12, 0.82) 100%);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--skill-accent) 16%, transparent);
}

.sluma-skill-orb span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--skill-accent);
  box-shadow: 0 0 10px var(--skill-accent);
}

.sluma-skill-info { min-width: 0; flex: 1; }

.sluma-skill-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sluma-skill-title-row strong {
  min-width: 0;
  overflow: hidden;
  color: #f1f5f9;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sluma-skill-current {
  flex: 0 0 auto;
  color: #4ade80;
  font: 800 0.6rem ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.25px;
}

.sluma-skill-card.is-cooling .sluma-skill-current { color: #fb923c; }
.sluma-skill-card.is-casting .sluma-skill-current { color: var(--skill-accent); }

.sluma-skill-info p {
  min-height: 28px;
  margin: 4px 0 7px;
  color: #94a3b8;
  font-size: 0.64rem;
  line-height: 1.35;
}

.sluma-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sluma-skill-tags span {
  padding: 2px 5px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.06);
  color: #cbd5e1;
  font-size: 0.57rem;
  font-weight: 700;
}

.sluma-skill-cooldown-track {
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.12);
}

.sluma-skill-cooldown-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fb923c;
  box-shadow: 0 0 7px rgba(251, 146, 60, 0.5);
  transition: width 0.08s linear;
}

.sluma-skill-card.is-casting .sluma-skill-cooldown-fill {
  background: var(--skill-accent);
  box-shadow: 0 0 7px var(--skill-accent);
}

@media (max-width: 860px) {
  #slumaDetailTop { flex-wrap: wrap; }

  #slumaEquipmentPanel {
    width: 100%;
    margin-left: 0;
  }

  #slumaEquipmentPicker {
    left: 0;
    right: auto;
    width: min(100%, 440px);
  }

  #slumaSkillsList { grid-template-columns: 1fr; }
}

#areasHudHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

#areasHudHeader h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: #e5e7eb;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#areasHudClose {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
  cursor: pointer;
}

#areasHudClose:hover {
  background: rgba(239,68,68,0.28);
}

#areasHudBody {
  flex: 1;
  display: flex;
  padding: 14px;
}

#areasListPane {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.area-item {
  width: fit-content;
  min-width: 140px;
  text-align: left;
  border: 2px solid rgba(255,255,255,0.20);
  border-radius: 10px;
  background: rgba(18, 24, 32, 0.92);
  color: #f3f4f6;
  font-weight: 700;
  padding: 12px 10px;
  cursor: pointer;
}

.area-item:hover {
  background: rgba(33, 43, 56, 0.92);
  border-color: rgba(147,197,253,0.5);
}

.area-item.is-selected {
  background: rgba(36, 54, 72, 0.95);
  border-color: rgba(147,197,253,0.7);
}

#areaDetailHud {
  position: absolute;
  left: calc(100% + 12px);
  right: auto;
  top: 72px;
  width: min(340px, 34vw);
  max-height: calc(100% - 86px);
  z-index: 5;
  display: none;
}

#areaDetailHud.is-open {
  display: block;
}

#areaDetailPane {
  width: 100%;
  background: rgba(18, 23, 30, 0.96);
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 26px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}

#areaDetailName {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  color: #f3f4f6;
  margin-bottom: 16px;
}

.area-detail-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.area-detail-label {
  font-size: 0.82rem;
  color: rgba(229,231,235,0.75);
  letter-spacing: 0.2px;
  font-weight: 600;
}

.area-detail-value {
  min-height: 20px;
  color: #d1d5db;
}

.area-sluma-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.area-sluma-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(10, 14, 20, 0.5);
  padding: 7px 9px;
}

.area-sluma-sprite {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: auto;
  flex-shrink: 0;
}

.area-sluma-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.area-sluma-name {
  color: #f3f4f6;
  font-weight: 700;
  font-size: 0.88rem;
}

.area-sluma-rate {
  color: #86efac;
  font-size: 0.8rem;
  font-weight: 700;
}

.area-detail-creatures {
  flex: 1;
}

#areaCreaturesCard {
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
}

#areaGoBtn {
  align-self: flex-end;
  min-width: 140px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.20);
  background: rgba(22, 105, 52, 0.9);
  color: #ecfdf5;
  font-weight: 700;
  cursor: pointer;
}

#areaGoBtn:hover {
  background: rgba(26, 131, 67, 0.95);
}

/* ════════════════════════════════════════════════════
   PROFILE HUD — REDESIGNED (Professional Pixel Art)
   ════════════════════════════════════════════════════ */

#profileHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: rgba(2, 4, 12, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#profileHudPanel {
  width: min(560px, 96vw);
  max-height: 85vh;
  border-radius: 18px;
  border: 2px solid rgba(99,102,241,0.25);
  background: linear-gradient(160deg, rgba(16,18,34,0.99) 0%, rgba(10,12,24,0.99) 100%);
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hudSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

#profileHudHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(99,102,241,0.18);
  background: linear-gradient(90deg, rgba(99,102,241,0.12) 0%, transparent 60%);
  flex-shrink: 0;
}

#profileHudTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: #a5b4fc;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(99,102,241,0.4);
}

#profileHudClose {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#profileHudClose:hover {
  background: rgba(239,68,68,0.25);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}

#profileHudBody {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,0.25) transparent;
}

#profileHudBody::-webkit-scrollbar { width: 5px; }

/* Global Ranking HUD */
#rankingHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 48;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 5, 12, 0.82);
  backdrop-filter: blur(7px);
}

#rankingHudPanel {
  width: min(1120px, 97vw);
  height: min(760px, 91vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(250, 204, 21, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(245, 158, 11, 0.11), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(59, 130, 246, 0.09), transparent 28%),
    linear-gradient(155deg, rgba(16, 22, 33, 0.99), rgba(7, 11, 18, 0.99));
  box-shadow: 0 28px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: hudSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

#rankingHudHeader {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 17px;
  border-bottom: 1px solid rgba(250, 204, 21, 0.13);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent 58%);
}

#rankingHudIdentity,
#rankingHudHeaderActions {
  display: flex;
  align-items: center;
  gap: 11px;
}

#rankingHudCrown {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 204, 21, 0.36);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.20), rgba(234, 179, 8, 0.05));
  color: #fde68a;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.11);
}

#rankingHudEyebrow {
  color: #d6a84c;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}

#rankingHudIdentity h3 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 0.8px;
}

#rankingRefreshBtn,
#rankingHudClose {
  height: 34px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 9px;
  background: rgba(255,255,255,0.045);
  color: #cbd5e1;
  font-weight: 750;
  cursor: pointer;
}

#rankingRefreshBtn { padding: 0 12px; font-size: 10px; }
#rankingHudClose { width: 34px; font-size: 18px; }
#rankingRefreshBtn:hover:not(:disabled) { border-color: rgba(250, 204, 21, 0.32); color: #fde68a; }
#rankingHudClose:hover { border-color: rgba(248,113,113,0.4); background: rgba(239,68,68,0.16); color: #fecaca; }
#rankingRefreshBtn:disabled { opacity: 0.45; cursor: default; }

#rankingSummaryBar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 185px 185px 1fr;
  gap: 8px;
  padding: 10px 17px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ranking-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

.ranking-summary-card span { color: #94a3b8; font-size: 9px; }
.ranking-summary-card strong { color: #facc15; font-family: 'Press Start 2P', monospace; font-size: 9px; }
#rankingUpdatedAt { align-self: center; justify-self: end; color: #64748b; font-size: 9px; }

#rankingTabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 17px 12px;
}

.ranking-tab {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  color: #94a3b8;
  text-align: left;
  cursor: pointer;
}

.ranking-tab.is-active {
  border-color: rgba(250, 204, 21, 0.32);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.11), rgba(255,255,255,0.02));
  color: #fde68a;
}

.ranking-tab-index {
  color: #64748b;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}

.ranking-tab > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.ranking-tab strong { color: #e2e8f0; font-size: 10px; }
.ranking-tab small { color: #64748b; font-size: 8px; }

#rankingHudBody {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 17px 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(2, 6, 12, 0.38);
}

.ranking-section {
  display: none;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.ranking-section.is-active { display: flex; }

.ranking-table-head {
  flex: 0 0 auto;
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
  color: #64748b;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ranking-player-grid { grid-template-columns: 64px minmax(140px, 0.8fr) 155px minmax(310px, 1.55fr); }
.ranking-sluma-grid { grid-template-columns: 64px minmax(150px, 0.9fr) minmax(280px, 1.5fr) 155px; }

.ranking-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 204, 21, 0.18) transparent;
}

.ranking-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 67px;
  margin-bottom: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  transition: border-color 0.16s, transform 0.16s, background 0.16s;
}

.ranking-row:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(255,255,255,0.04);
}

.ranking-row.rank-1 { border-color: rgba(250,204,21,0.34); background: linear-gradient(90deg, rgba(250,204,21,0.09), rgba(255,255,255,0.02)); }
.ranking-row.rank-2 { border-color: rgba(203,213,225,0.25); background: linear-gradient(90deg, rgba(203,213,225,0.07), rgba(255,255,255,0.02)); }
.ranking-row.rank-3 { border-color: rgba(251,146,60,0.25); background: linear-gradient(90deg, rgba(251,146,60,0.07), rgba(255,255,255,0.02)); }
.ranking-row.is-current-player { box-shadow: inset 3px 0 0 #38bdf8; }

.ranking-position {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #94a3b8;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
}

.rank-1 .ranking-position { color: #facc15; }
.rank-2 .ranking-position { color: #e2e8f0; }
.rank-3 .ranking-position { color: #fb923c; }
.ranking-medal { font-family: Inter, system-ui, sans-serif; font-size: 15px; }

.ranking-player-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ranking-player-name strong { overflow: hidden; color: #f1f5f9; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-player-name small { color: #64748b; font-size: 8px; text-transform: uppercase; }

.ranking-progress-block { display: flex; flex-direction: column; gap: 5px; }
.ranking-progress-block strong { color: #86efac; font-size: 11px; }
.ranking-progress-block small { color: #94a3b8; font-size: 8px; }
.ranking-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.07); }
.ranking-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #60a5fa); }

.ranking-equipped-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ranking-team-sluma {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  background: rgba(2,6,12,0.34);
}

.ranking-team-sluma img,
.ranking-best-sluma img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

.ranking-team-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ranking-team-copy strong { overflow: hidden; color: #e2e8f0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-team-copy small { color: #64748b; font-size: 8px; }
.ranking-team-empty { display: grid; place-items: center; min-height: 45px; color: #475569; font-size: 8px; }

.ranking-variant-badge {
  width: fit-content;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 6px;
  font-weight: 900;
  text-transform: uppercase;
}

.ranking-variant-badge.shiny { background: rgba(250,204,21,0.12); color: #fde047; }
.ranking-variant-badge.ultra { background: rgba(168,85,247,0.14); color: #c084fc; }

.ranking-best-sluma { min-width: 0; display: flex; align-items: center; gap: 9px; }
.ranking-best-sluma-portrait {
  position: relative;
  width: 49px;
  height: 49px;
  flex: 0 0 49px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
}
.ranking-best-sluma img { width: 45px; height: 45px; }
.ranking-team-sluma img.ui-south-sprite,
.ranking-best-sluma img.ui-south-sprite {
  width: 142%;
  height: 142%;
  max-width: none;
  justify-self: center;
  object-fit: contain;
  image-rendering: auto;
}
.ranking-best-sluma-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ranking-best-sluma-copy strong { color: #f1f5f9; font-size: 11px; }
.ranking-best-sluma-copy small { color: #64748b; font-size: 8px; }

#rankingLoadingState,
#rankingErrorState,
.ranking-empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
}

#rankingErrorState { color: #fca5a5; }
#rankingErrorState[hidden], #rankingLoadingState[hidden] { display: none; }

@media (max-width: 760px) {
  #rankingHudOverlay { padding: 8px; }
  #rankingHudPanel { width: 100%; height: 94vh; }
  #rankingSummaryBar { grid-template-columns: 1fr 1fr; }
  #rankingUpdatedAt { grid-column: 1 / -1; justify-self: start; }
  .ranking-tab small, .ranking-table-head { display: none; }
  .ranking-row.ranking-player-grid,
  .ranking-row.ranking-sluma-grid { grid-template-columns: 52px minmax(0, 1fr); }
  .ranking-progress-block, .ranking-equipped-team, .ranking-best-sluma { grid-column: 2; }
  .ranking-equipped-team { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
  #rankingHudBody { margin-left: 9px; margin-right: 9px; }
}
#profileHudBody::-webkit-scrollbar-track { background: transparent; }
#profileHudBody::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 4px; }

#profileLeftCol,
#profileRightCol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ── Avatar Card ── */
#profileAvatarCard {
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(10,14,24,0.6) 100%);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

#profileAvatarCard::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.06) 0%, transparent 50%);
  pointer-events: none;
}

#profileAvatarBadge {
  display: flex;
  align-items: center;
  gap: 14px;
}

#profileAvatarWrap {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  border: 2px solid rgba(99,102,241,0.3);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

#profileAvatarFallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background 0.3s;
}

#profileNameRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#profileUsername {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: #e2e8f0;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

#profilePlayerLevel {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

#profileExpSection {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#profilePlayerExpBar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

#profilePlayerExpFill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #22d3ee, #818cf8, #a78bfa);
  transition: width 0.4s cubic-bezier(0.22,1,0.36,1);
  width: 0%;
  box-shadow: 0 0 8px rgba(129,140,248,0.4);
}

#profilePlayerExpText {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: rgba(148,163,184,0.6);
  letter-spacing: 0.3px;
}

#profileCreatedRow,
#profilePlaytimeRow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.7rem;
}

.profile-info-icon { font-size: 0.85rem; flex-shrink: 0; }
.profile-info-label { color: rgba(148,163,184,0.7); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.6rem; }
#profileCreatedAt,
#profilePlayTime { color: #e2e8f0; font-weight: 700; margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 0.5rem; }

/* ── Combat Stats Card ── */
#profileCombatStatsCard {
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 14px;
  background: rgba(239,68,68,0.04);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#profileCombatStatsTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #fca5a5;
  letter-spacing: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(239,68,68,0.1);
}

#profileCombatStatsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.pcs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.pcs-label {
  font-size: 0.65rem;
  color: rgba(203,213,225,0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pcs-val {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #f1f5f9;
}

/* ── Rarity Card ── */
#profileRarityCard {
  border: 1px solid rgba(234,179,8,0.12);
  border-radius: 14px;
  background: rgba(234,179,8,0.04);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#profileRarityTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #fde68a;
  letter-spacing: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(234,179,8,0.1);
}

#profileRarityGrid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.prar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
}

.prar-rarity {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  min-width: 36px;
  text-align: center;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
}

.prar-bar-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.prar-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.prar-count {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #e2e8f0;
  min-width: 24px;
  text-align: right;
}

/* ── Collection Card ── */
#profileCollectionCard {
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(10,14,24,0.4) 100%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#profileCollectionTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #a5b4fc;
  letter-spacing: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(99,102,241,0.1);
}

#profileCollectionGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pcol-item {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.pcol-icon { font-size: 1rem; line-height: 1; }
.profile-stat-icon {
  width: 27px;
  height: 27px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 7px rgba(56,189,248,.34));
}
.profile-stat-icon.is-power {
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--power-color, #fde047) 62%, transparent));
}
.profile-stat-icon.is-total {
  filter: drop-shadow(0 0 7px rgba(56,189,248,.55));
}
.profile-stat-icon.is-money {
  filter: drop-shadow(0 0 7px rgba(250,204,21,.58));
}
.profile-stat-icon.is-level {
  filter: drop-shadow(0 0 7px rgba(74,222,128,.62));
}
.inline-power-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  vertical-align: middle;
  image-rendering: auto;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--power-color, #facc15) 62%, transparent));
}
.profile-equip-power,
.sluma-slot-power,
.pvp-power {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sluma-power-badge {
  position: relative;
}
.sluma-power-icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--power-color, #facc15) 68%, transparent));
}
.search-field-icon {
  width: 25px;
  height: 25px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
}
.pcol-label { font-size: 0.55rem; color: rgba(203,213,225,0.6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.pcol-val { font-family: 'Press Start 2P', monospace; font-size: 0.6rem; color: #e2e8f0; }
.pcol-val.profile-shiny { color: #fbbf24; }
.pcol-val.profile-ultra { color: #a78bfa; }

.pcol-shiny .pcol-val { color: #fbbf24; }
.pcol-ultra .pcol-val { color: #a78bfa; }
.pcol-money .pcol-val { color: #facc15; }

/* Real currency icons: World Shop + dual-currency Global Market */
#shopHudMoneyLabel img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.42));
}

.shop-money-inline,
.market-currency-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  vertical-align: middle;
  white-space: nowrap;
}

.shop-money-inline img,
.market-currency-price img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
}

.market-currency-price.is-crystal {
  color: #67e8f9;
  text-shadow: 0 0 9px rgba(34, 211, 238, 0.28);
}

#marketMoneyPill {
  min-width: 230px;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}

#marketMoneyPill .market-balance-unit {
  display: grid;
  grid-template-columns: 25px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  padding-right: 8px;
  border-right: 1px solid rgba(251, 191, 36, 0.17);
}

#marketMoneyPill .market-balance-unit:last-child {
  padding-right: 0;
  border-right: 0;
}

#marketMoneyPill .market-balance-unit img {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

#marketMoneyPill .market-balance-unit small {
  color: #85785d;
  font-size: 0.43rem;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

#marketMoneyPill .market-balance-unit b {
  overflow: hidden;
  margin: 2px 0 0;
  font-size: 0.72rem;
  line-height: 1.1;
  text-overflow: ellipsis;
}

#marketMoneyPill .market-balance-unit.is-crystal b { color: #67e8f9; }

.market-price-input i {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
}

.market-price-input i img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.market-price-input input { padding-left: 34px !important; }

#marketCreatePanel select,
#marketListingCurrency,
#marketOrderCurrency {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(163, 230, 53, 0.20);
  border-radius: 8px;
  outline: none;
  background: rgba(2, 6, 15, 0.72);
  color: #dbeafe;
  font: 700 0.58rem Arial, sans-serif;
}

#marketCreatePanel select:focus,
#marketListingCurrency:focus,
#marketOrderCurrency:focus {
  border-color: rgba(34, 211, 238, 0.52);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.08);
}

#marketListingCurrency:disabled,
#marketOrderCurrency:disabled {
  opacity: 0.7;
  color: #fcd34d;
  cursor: not-allowed;
}

#marketCreatePanel [hidden],
#marketOrderComposer [hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  #marketMoneyPill { min-width: 0; padding: 6px; }
  #marketMoneyPill .market-balance-unit { grid-template-columns: 20px 1fr; }
  #marketMoneyPill .market-balance-unit img { width: 18px; height: 18px; }
  #marketMoneyPill .market-balance-unit small { display: none; }
}
.pcol-dex .pcol-val { color: #818cf8; }
.pcol-level .pcol-val { color: #4ade80; }

/* ── Equipped Slumas Card ── */
#profileEquipCard {
  border: 1px solid rgba(34,197,94,0.12);
  border-radius: 14px;
  background: rgba(34,197,94,0.04);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#profileEquipTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #86efac;
  letter-spacing: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(34,197,94,0.1);
}

#profileEquipList {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-equip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.profile-equip-portrait {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-equip-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.profile-equip-fallback {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.profile-equip-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.profile-equip-name {
  font-weight: 700;
  font-size: 0.7rem;
  color: #e2e8f0;
}

.profile-equip-level {
  font-size: 0.6rem;
  color: #4ade80;
  font-weight: 600;
}

.profile-equip-variant-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.profile-equip-variant-badge.shiny {
  color: #fbbf24;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.25);
}

.profile-equip-variant-badge.ultra {
  color: #a78bfa;
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.25);
}

.profile-equip-empty {
  color: rgba(255,255,255,0.2);
  font-size: 0.65rem;
  text-align: center;
  padding: 8px 0;
  font-style: italic;
}

/* ── Active Sluma Card ── */
#profileActiveSlumaCard {
  border: 1px solid rgba(129,140,248,0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(129,140,248,0.08) 0%, rgba(10,14,24,0.4) 100%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#profileActiveSlumaTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #c4b5fd;
  letter-spacing: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(129,140,248,0.1);
}

#profileActiveSlumaContent {
  display: flex;
  align-items: center;
  gap: 12px;
}

#profileActiveSlumaPortrait {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid rgba(129,140,248,0.3);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

#profileActiveSlumaImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

#profileActiveSlumaFallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #a78bfa;
}

#profileActiveSlumaInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#profileActiveSlumaName {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: #e2e8f0;
  letter-spacing: 0.3px;
}

#profileActiveSlumaLevel {
  font-size: 0.65rem;
  color: #4ade80;
  font-weight: 700;
}

.profile-variant-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: #fbbf24;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.25);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  #profileHudBody {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  #profileHudPanel {
    width: 100%;
    border-radius: 14px;
  }
  #profileCollectionGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  #bottomActionBar {
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 56px;
    border-radius: 12px;
    padding: 6px 8px;
  }

  #chatWindow {
    left: 10px;
    bottom: 68px;
    width: 220px;
    height: 180px;
  }

  #chatBubble {
    left: 10px;
    bottom: 68px;
  }

  #captureHudPanel {
    left: 10px;
    right: 10px;
    bottom: 70px;
    width: auto;
    min-width: 0;
    max-height: 36vh;
  }

  .action-btn {
    height: 34px;
    min-width: 92px;
    font-size: 0.85rem;
  }

  .action-btn.has-nav-icon {
    flex-basis: 46px;
    width: 46px;
    min-width: 46px;
    height: 40px;
    padding: 2px;
  }

  .action-btn.has-nav-icon .action-btn-icon {
    width: 34px;
    height: 34px;
  }

  #areasHudOverlay {
    padding: 12px;
  }

  #areasHudPanel {
    width: 100%;
    height: min(590px, 84vh);
  }

  #slumasHudOverlay {
    padding: 12px;
  }

  #slumasHudPanel {
    width: 100%;
    height: min(620px, 86vh);
  }

  #inventoryHudOverlay {
    padding: 12px;
  }

  #inventoryHudPanel {
    width: 100%;
    height: min(620px, 86vh);
  }

  #inventoryHudBody {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  #inventorySlotsPane {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #slumasHudBody {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  #slumaDetailStats {
    grid-template-columns: 1fr;
  }

  #profileHudOverlay {
    padding: 12px;
  }

  #profileHudPanel {
    width: 100%;
  }

  #areasHudBody {
    padding: 12px;
  }

  #areasListPane {
    width: 100%;
  }

  #areaDetailHud {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 10px;
    display: none;
  }

  #areaDetailHud.is-open {
    display: block;
  }

  #areaDetailPane {
    width: 100%;
  }

  #areaGoBtn {
    width: 100%;
    align-self: stretch;
  }
}

/* ════════════════════════════════════════════
   HUD — CRIATURA (esquina superior izquierda)
   PROFESSIONAL REDESIGN
   ════════════════════════════════════════════ */

#hudCreature {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 11px;

  background: rgba(8, 8, 20, 0.82);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 12px 16px 12px 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.62), 0 0 20px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.08);
  min-width: 370px;
  width: 370px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  /* entrada suave */
  animation: hudSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#hudCreature::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

#hudCreature > * {
  position: relative;
  z-index: 1;
}

@keyframes hudSlideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Retrato ── */
#hudPortrait {
  position: relative;
  flex-shrink: 0;
  width: 54px;
}

#hudPortraitInner {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#hudSpriteImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  flex-shrink: 0;
}

/* Fallback bolita cuando no hay sprite */
#hudSpriteFallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px currentColor;
  flex-shrink: 0;
}

/* ── Info derecha ── */
#hudInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

#hudTopRow {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

#hudCreatureName {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #f0f0f0;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hudNameLevel {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #22c55e;
  text-shadow: 0 0 7px rgba(34,197,94,0.45);
  white-space: nowrap;
  flex-shrink: 0;
}

#hudOwnerName {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Element Icons Row ── */
#hudElementRow {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.hud-element-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 3px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.04);
}

.hud-element-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
}

/* ── Barra de vida ── */
#hudHpRow {
  display: flex;
  align-items: center;
}

#hudHpBarWrap {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

#hudHpBar {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 60%, #86efac 100%);
  transition: width 0.4s ease, background 0.4s ease;
  position: relative;
}

#hudHpBar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  animation: hudBarShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hudBarShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Brillo interno de la barra */
#hudHpShine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 60%);
  border-radius: 99px;
  pointer-events: none;
}

#hudHpText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* ── Barra de experiencia ── */
#hudExpRow {
  display: flex;
  align-items: center;
}

#hudExpBarWrap {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

#hudExpBar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 55%, #93c5fd 100%);
  transition: width 0.4s ease;
  position: relative;
}

#hudExpBar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  animation: hudBarShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}

#hudExpShine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 60%);
  border-radius: 99px;
  pointer-events: none;
}

#hudExpText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* ── Estado de la criatura ── */
#hudStatusRow {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

.dot-ok      { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.dot-wander  { background: #facc15; box-shadow: 0 0 6px #facc15; }
.dot-pause   { background: #60a5fa; box-shadow: 0 0 6px #60a5fa; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

#hudStatusLabel {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.3px;
}

/* ════════════════════════════════════════════════════
   GLOBAL MARKET + PLAYER MAIL
   ════════════════════════════════════════════════════ */

#marketHudOverlay,
#mailHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.10), transparent 38%),
    rgba(2, 6, 15, 0.88);
  backdrop-filter: blur(9px);
}

#mailHudOverlay { z-index: 71; }

#marketHudPanel,
#mailHudPanel {
  --market-line: rgba(148, 163, 184, 0.16);
  --market-blue: #38bdf8;
  --market-green: #4ade80;
  position: relative;
  width: min(1480px, calc(100vw - 40px));
  height: min(860px, calc(100vh - 40px));
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, 0.30);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(17, 25, 39, 0.985), rgba(5, 10, 19, 0.99));
  color: #e2e8f0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: marketHudEnter 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

#marketHudPanel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

#marketHudPanel::before,
#mailHudPanel::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 460px;
  height: 360px;
  top: -210px;
  left: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.16), transparent 70%);
  pointer-events: none;
}

#marketHudPanel > *,
#mailHudPanel > * { position: relative; z-index: 1; }

@keyframes marketHudEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#marketHudHeader,
#mailHudHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 104px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--market-line);
  background: linear-gradient(90deg, rgba(14, 116, 144, 0.09), rgba(15, 23, 42, 0.34));
}

.market-title-block,
#mailHudHeader > div:first-child { min-width: 0; }

.market-eyebrow,
.mail-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #7dd3fc;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.47rem;
  letter-spacing: 1.7px;
}

.market-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#marketHudTitle,
#mailHudTitle {
  margin: 0;
  color: #f8fafc;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.9rem, 1.5vw, 1.25rem);
  line-height: 1.35;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.16);
}

#marketHudHeader p,
#mailHudHeader p {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 0.74rem;
}

#marketLiveBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(74, 222, 128, 0.27);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  color: #86efac;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.8px;
}

#marketLiveBadge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #22c55e;
  animation: marketLivePulse 1.8s ease-in-out infinite;
}

@keyframes marketLivePulse { 50% { opacity: 0.38; transform: scale(0.78); } }

.market-header-actions,
.mail-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}

#marketMoneyPill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 122px;
  padding: 9px 12px;
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 11px;
  background: rgba(34, 197, 94, 0.07);
}

#marketMoneyPill span { color: #64748b; font-size: 0.57rem; text-transform: uppercase; letter-spacing: 0.7px; }
#marketMoneyPill b { margin-top: 3px; color: #4ade80; font-size: 1rem; }

#marketRefreshBtn,
#mailRefreshBtn,
#marketHudClose,
#mailHudClose {
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.68);
  color: #cbd5e1;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#marketRefreshBtn,
#mailRefreshBtn { padding: 0 14px; font-size: 0.68rem; }

#marketHudClose,
#mailHudClose {
  width: 38px;
  padding: 0;
  color: #94a3b8;
  font-size: 1.45rem;
  line-height: 1;
}

#marketRefreshBtn:hover,
#mailRefreshBtn:hover { border-color: rgba(56, 189, 248, 0.56); background: rgba(14, 116, 144, 0.18); color: #e0f2fe; }
#marketHudClose:hover,
#mailHudClose:hover { border-color: rgba(248, 113, 113, 0.55); background: rgba(127, 29, 29, 0.28); color: #fecaca; transform: rotate(3deg); }

#marketTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--market-line);
  background: rgba(2, 6, 15, 0.45);
}

.market-tab {
  position: relative;
  min-height: 54px;
  padding: 9px 14px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.market-tab b,
.market-tab span { display: block; }
.market-tab b { color: #94a3b8; font-size: 0.72rem; }
.market-tab span { margin-top: 4px; font-size: 0.58rem; }
.market-tab:hover { border-color: rgba(56, 189, 248, 0.17); background: rgba(56, 189, 248, 0.05); }
.market-tab.is-active { border-color: rgba(56, 189, 248, 0.34); background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(37, 99, 235, 0.05)); color: #7dd3fc; }
.market-tab.is-active b { color: #e0f2fe; }
.market-tab.is-active::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #38bdf8, #818cf8); box-shadow: 0 0 10px rgba(56, 189, 248, 0.6); }

#marketHudBody { min-height: 0; overflow: hidden; }
.market-pane { display: none; height: 100%; min-height: 0; }
.market-pane.is-active { display: block; }

#marketBrowseLayout,
#marketSellLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 14px;
}

#marketBrowseMain,
#marketSellAssets {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#marketFilters {
  display: grid;
  grid-template-columns: minmax(180px, 1.8fr) repeat(5, minmax(92px, 0.7fr));
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--market-line);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.48);
}

#marketFilters label,
#marketCreatePanel label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: #64748b;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

#marketFilters input,
#marketFilters select,
#marketSellSearch,
#marketCreatePanel input {
  width: 100%;
  height: 36px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  outline: none;
  background: rgba(2, 6, 15, 0.72);
  color: #e2e8f0;
  font-size: 0.67rem;
}

#marketFilters input:focus,
#marketFilters select:focus,
#marketSellSearch:focus,
#marketCreatePanel input:focus { border-color: rgba(56, 189, 248, 0.63); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.08); }

.market-results-heading,
.market-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 49px;
  padding: 8px 4px;
}

.market-results-heading > div,
.market-section-title > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.market-results-heading b,
.market-section-title b { color: #e2e8f0; font-size: 0.74rem; }
.market-results-heading span,
.market-section-title span,
.market-results-heading small,
.market-section-title small { color: #64748b; font-size: 0.57rem; }

#marketListingsGrid,
#marketSellAssetsGrid,
#marketMyListings,
#mailList {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.28) transparent;
}

#marketListingsGrid::-webkit-scrollbar,
#marketSellAssetsGrid::-webkit-scrollbar,
#marketMyListings::-webkit-scrollbar,
#mailList::-webkit-scrollbar { width: 6px; }
#marketListingsGrid::-webkit-scrollbar-thumb,
#marketSellAssetsGrid::-webkit-scrollbar-thumb,
#marketMyListings::-webkit-scrollbar-thumb,
#mailList::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(56, 189, 248, 0.25); }

#marketListingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-auto-rows: max-content;
  gap: 9px;
  padding: 1px 3px 8px 1px;
}

.market-listing-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 96px auto auto auto;
  min-width: 0;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.68), rgba(7, 12, 22, 0.92));
  color: #cbd5e1;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.market-listing-card:hover { transform: translateY(-2px); border-color: rgba(56, 189, 248, 0.48); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34); }
.market-listing-card.is-selected { border-color: #38bdf8; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.22), 0 0 22px rgba(14, 165, 233, 0.10); }
.market-listing-card.is-shiny { border-color: rgba(250, 204, 21, 0.42); }
.market-listing-card.is-ultra { border-color: rgba(192, 132, 252, 0.55); }

.market-card-top { display: flex; align-items: center; justify-content: space-between; color: #64748b; font-size: 0.48rem; font-weight: 900; letter-spacing: 0.7px; }
.market-card-top b { padding: 2px 5px; border-radius: 999px; background: rgba(168, 85, 247, 0.17); color: #d8b4fe; }
.market-listing-card.is-shiny .market-card-top b { background: rgba(234, 179, 8, 0.15); color: #fde68a; }
.market-card-visual { display: grid; place-items: center; min-height: 0; }
.market-card-visual img { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.52)); }
.market-card-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.market-card-copy strong { overflow: hidden; color: #f1f5f9; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.market-card-copy span { overflow: hidden; color: #64748b; font-size: 0.56rem; text-overflow: ellipsis; white-space: nowrap; }
.market-card-copy .market-card-breeding {
  overflow: hidden;
  color: #a7f3d0;
  font-size: 0.47rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profileTitlesCard {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(192, 132, 252, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(7, 25, 28, 0.96), rgba(9, 14, 27, 0.98));
  overflow: hidden;
}

.profile-titles-intro {
  margin: 8px 0 12px;
  color: #82969a;
  font-size: 11px;
  line-height: 1.5;
}

#profileTitlesList {
  display: grid;
  gap: 8px;
}

.profile-title-option {
  --title-color: #38bdf8;
  --title-rgb: 56, 189, 248;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  color: #dbe9ec;
  text-align: left;
  border: 1px solid rgba(var(--title-rgb), 0.24);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(var(--title-rgb), 0.1), rgba(8, 17, 25, 0.76));
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.profile-title-option:not(:disabled):hover {
  transform: translateX(3px);
  border-color: rgba(var(--title-rgb), 0.72);
  box-shadow: 0 0 18px rgba(var(--title-rgb), 0.12);
}

.profile-title-option.is-equipped {
  border-color: var(--title-color);
  box-shadow: inset 3px 0 var(--title-color), 0 0 16px rgba(var(--title-rgb), 0.16);
}

.profile-title-option.is-locked {
  opacity: 0.42;
  filter: saturate(0.35);
  cursor: not-allowed;
}

.profile-title-rank {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--title-color);
  border: 1px solid rgba(var(--title-rgb), 0.4);
  border-radius: 8px;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  background: rgba(var(--title-rgb), 0.09);
}

.profile-title-copy strong,
.profile-title-copy small {
  display: block;
}

.profile-title-copy strong {
  color: var(--title-color);
  font-size: 12px;
}

.profile-title-copy small {
  margin-top: 4px;
  color: #829397;
  font-size: 9px;
  line-height: 1.35;
}

.profile-title-state {
  color: #829397;
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
}

.profile-title-option.is-equipped .profile-title-state { color: var(--title-color); }

.profile-equipped-title-badge {
  --title-color: #38bdf8;
  --title-rgb: 56, 189, 248;
  align-self: flex-start;
  padding: 5px 7px;
  color: var(--title-color);
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(var(--title-rgb), 0.44);
  border-radius: 5px;
  background: rgba(var(--title-rgb), 0.1);
  box-shadow: 0 0 12px rgba(var(--title-rgb), 0.12);
}

.profile-title-unequip {
  width: 100%;
  margin-top: 9px;
  padding: 8px;
  color: #92a5a8;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  cursor: pointer;
}

.profile-title-loading {
  padding: 16px;
  color: #789093;
  text-align: center;
  font-size: 10px;
}

.ranking-player-title {
  display: block;
  margin: 4px 0 2px;
  color: var(--ranking-title, #38bdf8);
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px currentColor;
}

#captureHudMinimize {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 8px;
  background: rgba(15, 38, 52, 0.86);
  color: #bae6fd;
  cursor: pointer;
  font: 800 16px/1 var(--font-body);
}

#captureHudMinimize:hover {
  border-color: rgba(125, 211, 252, 0.62);
  background: rgba(14, 58, 78, 0.95);
}

#captureHudPanel.is-minimized {
  width: min(360px, 42vw);
  min-width: 300px;
  max-height: none;
}

#captureHudPanel.is-minimized #captureLogFilters,
#captureHudPanel.is-minimized #captureDefeatLogList {
  display: none;
}

.pvp-nav-btn.is-locked {
  filter: grayscale(.82) brightness(.58);
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .05) !important;
}

.pvp-nav-btn.is-locked::after {
  content: 'LV5';
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 2px 3px;
  border-radius: 4px;
  background: #111827;
  color: #fbbf24;
  font: 700 5px/1 var(--font-game);
  border: 1px solid rgba(251, 191, 36, .45);
}
#inventoryUseBtn[hidden] { display: none !important; }
.market-card-seller { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(148, 163, 184, 0.09); color: #475569; font-size: 0.53rem; }
.market-card-seller b { color: #94a3b8; }
.market-card-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 7px; }
.market-card-price span { color: #64748b; font-size: 0.52rem; }
.market-card-price b { color: #4ade80; font-size: 0.83rem; }

#marketListingDetail,
#marketCreatePanel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--market-line);
  border-radius: 14px;
  background: linear-gradient(170deg, rgba(15, 23, 42, 0.72), rgba(3, 7, 15, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.market-detail-empty,
.mail-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 240px;
  padding: 28px;
  color: #475569;
  text-align: center;
}

/* The JS swaps these two views with the HTML hidden attribute.  Because the
   empty state uses an explicit flex display, it must also explicitly honor
   hidden or it remains painted over the purchase/listing controls. */
.market-detail-empty[hidden],
.mail-detail-empty[hidden] { display: none !important; }

.market-detail-empty > span,
.mail-detail-empty > span { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 15px; border: 1px dashed rgba(56, 189, 248, 0.28); border-radius: 17px; background: rgba(14, 165, 233, 0.055); color: #38bdf8; font-family: 'Press Start 2P', monospace; font-size: 0.42rem; }
.market-detail-empty b,
.mail-detail-empty b { color: #94a3b8; font-size: 0.76rem; }
.market-detail-empty p,
.mail-detail-empty p { max-width: 240px; margin: 7px 0 0; color: #475569; font-size: 0.62rem; line-height: 1.55; }

.market-detail-content,
.market-create-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px;
}

.market-detail-content[hidden],
.market-create-content[hidden],
.mail-detail-content[hidden],
#mailRewardCard[hidden],
#mailClaimBtn[hidden] { display: none !important; }

#marketDetailVisual,
#marketCreatePreview {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px solid rgba(56, 189, 248, 0.12);
  border-radius: 13px;
  background: radial-gradient(circle at 50% 42%, rgba(56, 189, 248, 0.13), transparent 66%);
}

#marketDetailVisual img,
#marketCreatePreview img { width: 138px; height: 138px; object-fit: contain; filter: drop-shadow(0 13px 10px rgba(0, 0, 0, 0.55)); }
.market-detail-identity { padding: 14px 2px 10px; }
.market-detail-identity > span { color: #38bdf8; font-size: 0.5rem; font-weight: 900; letter-spacing: 1px; }
.market-detail-identity h4,
#marketCreateName { margin: 6px 0 3px; color: #f8fafc; font-size: 1.02rem; }
.market-detail-identity p,
#marketCreateMeta { margin: 0; color: #64748b; font-size: 0.63rem; }
#marketDetailFacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#marketDetailFacts > div { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 8px; background: rgba(2, 6, 15, 0.46); }
#marketDetailFacts span { color: #475569; font-size: 0.5rem; text-transform: uppercase; }
#marketDetailFacts b { color: #cbd5e1; font-size: 0.65rem; }
#marketDetailFacts .market-stat-fact { gap: 5px; }
#marketDetailFacts .market-stat-fact > b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#marketDetailFacts .market-stat-fact > b > strong {
  color: #e2e8f0;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}
#marketDetailFacts .market-stat-rarity {
  display: inline-grid;
  place-items: center;
  min-width: 27px;
  min-height: 21px;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.47rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
#marketDetailFacts .market-stat-rarity.rarity-F { color: #d1d5db; border-color: rgba(209,213,219,0.40); background: rgba(209,213,219,0.07); }
#marketDetailFacts .market-stat-rarity.rarity-E { color: #bae6fd; border-color: rgba(186,230,253,0.48); background: rgba(186,230,253,0.08); }
#marketDetailFacts .market-stat-rarity.rarity-D { color: #93c5fd; border-color: rgba(147,197,253,0.48); background: rgba(147,197,253,0.09); }
#marketDetailFacts .market-stat-rarity.rarity-C { color: #86efac; border-color: rgba(134,239,172,0.48); background: rgba(134,239,172,0.09); }
#marketDetailFacts .market-stat-rarity.rarity-B { color: #facc15; border-color: rgba(250,204,21,0.50); background: rgba(250,204,21,0.10); }
#marketDetailFacts .market-stat-rarity.rarity-A { color: #f97316; border-color: rgba(249,115,22,0.52); background: rgba(249,115,22,0.11); }
#marketDetailFacts .market-stat-rarity.rarity-S { color: #fb7185; border-color: rgba(251,113,133,0.54); background: rgba(251,113,133,0.11); }
#marketDetailFacts .market-stat-rarity.rarity-SS { color: #c084fc; border-color: rgba(192,132,252,0.56); background: rgba(192,132,252,0.12); }
#marketDetailFacts .market-stat-rarity.rarity-SSS { color: #22d3ee; border-color: rgba(34,211,238,0.56); background: rgba(34,211,238,0.12); }
#marketDetailFacts .market-stat-rarity.rarity-M {
  color: #facc15;
  border-color: rgba(250,204,21,0.70);
  background: rgba(250,204,21,0.13);
  text-shadow: 0 0 7px rgba(250,204,21,0.52);
}
.market-detail-price { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 13px 2px 9px; }
.market-detail-price span { color: #64748b; font-size: 0.62rem; }
.market-detail-price b { color: #4ade80; font-size: 1.2rem; }

#marketBuyBtn,
#marketCreateBtn,
#mailClaimBtn {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(74, 222, 128, 0.48);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.84), rgba(5, 150, 105, 0.86));
  color: #ecfdf5;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#marketBuyBtn:hover,
#marketCreateBtn:hover,
#mailClaimBtn:hover { filter: brightness(1.12); }
#marketBuyBtn:disabled,
#marketCreateBtn:disabled,
#mailClaimBtn:disabled { opacity: 0.52; cursor: wait; filter: grayscale(0.25); }

#marketBuyStatus,
#marketCreateStatus,
#mailClaimStatus { min-height: 26px; padding: 6px 1px; color: #94a3b8; font-size: 0.58rem; line-height: 1.4; }
#marketBuyStatus.is-success,
#marketCreateStatus.is-success,
#mailClaimStatus.is-success { color: #4ade80; }
#marketBuyStatus.is-error,
#marketCreateStatus.is-error,
#mailClaimStatus.is-error { color: #f87171; }

#marketSellTypeFilters { display: flex; flex-flow: row wrap; justify-content: flex-end; gap: 4px; }
#marketSellTypeFilters button {
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.58);
  color: #64748b;
  font-size: 0.54rem;
  cursor: pointer;
}
#marketSellTypeFilters button.is-active { border-color: rgba(56, 189, 248, 0.42); background: rgba(14, 165, 233, 0.12); color: #bae6fd; }
.market-sell-search { display: block; margin-bottom: 9px; }
#marketSellAssetsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: max-content; gap: 8px; padding: 1px 3px 8px 1px; }
.market-sell-asset { display: grid; grid-template-rows: 82px auto auto; gap: 4px; min-width: 0; padding: 8px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 11px; background: rgba(15, 23, 42, 0.52); color: #cbd5e1; text-align: left; cursor: pointer; }
.market-sell-asset:hover,
.market-sell-asset.is-selected { border-color: rgba(56, 189, 248, 0.55); background: rgba(14, 116, 144, 0.10); }
.market-sell-asset > div { display: grid; place-items: center; }
.market-sell-asset img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.48)); }
.market-sell-asset strong,
.market-sell-asset span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-sell-asset strong { color: #e2e8f0; font-size: 0.67rem; }
.market-sell-asset span { color: #64748b; font-size: 0.53rem; }
.market-sell-asset .market-sell-breeding {
  overflow: hidden;
  color: #a7f3d0;
  font-size: 0.46rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#marketCreatePanel label { margin-top: 12px; }
.market-price-input { position: relative; }
.market-price-input i { position: absolute; z-index: 2; top: 50%; left: 10px; color: #4ade80; font-style: normal; font-weight: 900; transform: translateY(-50%); }
.market-price-input input { padding-left: 24px !important; }
.market-delivery-note { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 10px; border: 1px solid rgba(56, 189, 248, 0.14); border-radius: 9px; background: rgba(14, 165, 233, 0.055); }
.market-delivery-note b { color: #7dd3fc; font-size: 0.64rem; }
.market-delivery-note span { color: #64748b; font-size: 0.56rem; line-height: 1.45; }

.market-mine-heading { padding: 14px 18px 9px; }
#marketMyListings { height: calc(100% - 68px); padding: 0 15px 15px; }
.market-own-listing { display: grid; grid-template-columns: 68px minmax(180px, 1fr) 110px auto 120px; gap: 12px; align-items: center; min-height: 82px; margin-bottom: 8px; padding: 8px 12px; border: 1px solid rgba(148, 163, 184, 0.13); border-radius: 12px; background: rgba(15, 23, 42, 0.53); }
.market-own-visual { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 10px; background: rgba(2, 6, 15, 0.48); }
.market-own-visual img { width: 58px; height: 58px; object-fit: contain; }
.market-own-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.market-own-copy > span { color: #38bdf8; font-size: 0.47rem; font-weight: 900; letter-spacing: 0.8px; }
.market-own-copy b { overflow: hidden; color: #e2e8f0; font-size: 0.71rem; text-overflow: ellipsis; white-space: nowrap; }
.market-own-copy small,
.market-own-note { color: #64748b; font-size: 0.54rem; }
.market-own-price { display: flex; flex-direction: column; gap: 3px; }
.market-own-price span { color: #64748b; font-size: 0.51rem; }
.market-own-price b { color: #4ade80; font-size: 0.76rem; }
.market-listing-status { justify-self: center; padding: 5px 8px; border: 1px solid; border-radius: 999px; font-size: 0.5rem; font-weight: 900; text-transform: uppercase; }
.market-listing-status.is-active { border-color: rgba(56, 189, 248, 0.30); background: rgba(14, 165, 233, 0.08); color: #7dd3fc; }
.market-listing-status.is-sold { border-color: rgba(74, 222, 128, 0.30); background: rgba(34, 197, 94, 0.08); color: #86efac; }
.market-listing-status.is-cancelled { border-color: rgba(148, 163, 184, 0.22); background: rgba(100, 116, 139, 0.08); color: #94a3b8; }
.market-cancel-listing { min-height: 34px; padding: 0 10px; border: 1px solid rgba(248, 113, 113, 0.30); border-radius: 8px; background: rgba(127, 29, 29, 0.17); color: #fca5a5; font-size: 0.57rem; font-weight: 800; cursor: pointer; }
.market-cancel-listing:hover { border-color: rgba(248, 113, 113, 0.58); background: rgba(153, 27, 27, 0.28); }
.market-empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 28px; border: 1px dashed rgba(148, 163, 184, 0.14); border-radius: 12px; color: #64748b; text-align: center; }
.market-empty-state > span { margin-bottom: 8px; color: #38bdf8; font-family: 'Press Start 2P', monospace; font-size: 0.48rem; }
.market-empty-state b { color: #94a3b8; font-size: 0.75rem; }
.market-empty-state p { margin: 6px 0 0; font-size: 0.6rem; }
.market-empty-state.is-error b,
.market-empty-state.is-error p { color: #f87171; }
.is-loading { opacity: 0.56; cursor: wait; }

/* Market Exchange expansion: live prices, escrow and buy orders */
#marketHudPanel {
  --market-blue: #34d399;
  --market-green: #a3e635;
  --market-gold: #fbbf24;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border-color: rgba(163, 230, 53, 0.34);
  background:
    radial-gradient(circle at 88% -12%, rgba(251, 191, 36, 0.10), transparent 32%),
    radial-gradient(circle at 4% 0%, rgba(52, 211, 153, 0.13), transparent 36%),
    linear-gradient(155deg, rgba(8, 24, 23, 0.992), rgba(3, 10, 15, 0.995));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.82), 0 0 48px rgba(52, 211, 153, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#marketHudPanel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  pointer-events: none;
  background-image: linear-gradient(rgba(52, 211, 153, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 211, 153, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

#marketHudHeader { background: linear-gradient(90deg, rgba(6, 78, 59, 0.22), rgba(15, 23, 42, 0.18), rgba(120, 53, 15, 0.10)); }
#marketHudPanel .market-eyebrow { color: #bef264; }
#marketHudPanel #marketLiveBadge { border-color: rgba(163, 230, 53, 0.30); background: rgba(77, 124, 15, 0.13); color: #bef264; }
#marketHudPanel #marketMoneyPill { border-color: rgba(251, 191, 36, 0.30); background: linear-gradient(135deg, rgba(120, 53, 15, 0.17), rgba(77, 124, 15, 0.10)); }
#marketHudPanel #marketMoneyPill b { color: #fcd34d; }

#marketTabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#marketHudPanel .market-tab:hover { border-color: rgba(163, 230, 53, 0.22); background: rgba(77, 124, 15, 0.08); }
#marketHudPanel .market-tab.is-active { border-color: rgba(163, 230, 53, 0.36); background: linear-gradient(135deg, rgba(77, 124, 15, 0.18), rgba(6, 95, 70, 0.08)); color: #bef264; }
#marketHudPanel .market-tab.is-active::after { background: linear-gradient(90deg, #a3e635, #34d399, #fbbf24); box-shadow: 0 0 12px rgba(163, 230, 53, 0.55); }

#marketExchangeStrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vw, 84px);
  min-height: 27px;
  padding: 5px 16px;
  border-bottom: 1px solid rgba(163, 230, 53, 0.12);
  background: rgba(2, 10, 12, 0.66);
  color: #52665f;
  font-size: 0.47rem;
  font-weight: 900;
  letter-spacing: 0.9px;
}
#marketExchangeStrip span:first-child { color: #86efac; }
#marketExchangeStrip i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 9px #22c55e; }

.market-price-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 13px;
}
.market-price-insights > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  background: rgba(2, 10, 14, 0.58);
}
.market-price-insights span { color: #64748b; font-size: 0.48rem; font-weight: 900; text-transform: uppercase; }
.market-price-insights b { overflow: hidden; color: #e2e8f0; font-size: 0.72rem; text-overflow: ellipsis; }
.market-price-insights small { overflow: hidden; color: #52616f; font-size: 0.46rem; line-height: 1.35; }
.market-price-insights .is-bid { border-color: rgba(74, 222, 128, 0.24); background: rgba(20, 83, 45, 0.14); }
.market-price-insights .is-bid b { color: #86efac; }
.market-sell-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
#marketInstantSellBtn,
#marketCreateOrderBtn {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(251, 191, 36, 0.52);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.88), rgba(161, 98, 7, 0.84));
  color: #fffbeb;
  font-size: 0.65rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.16), inset 0 1px 0 rgba(255,255,255,0.13);
}
#marketInstantSellBtn:hover:not(:disabled),
#marketCreateOrderBtn:hover:not(:disabled) { filter: brightness(1.13); transform: translateY(-1px); }
#marketInstantSellBtn:disabled,
#marketCreateOrderBtn:disabled { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.5); }
#marketCreateStatus.is-warning,
#marketOrderStatus.is-warning { color: #fbbf24; }

#marketOrdersLayout {
  display: grid;
  grid-template-columns: minmax(330px, 1.05fr) minmax(300px, 0.82fr) minmax(360px, 1.1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 12px;
}
#marketOrderCatalogPanel,
#marketOrderComposer,
#marketOwnOrdersPanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(10, 28, 29, 0.78), rgba(3, 9, 15, 0.90));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
#marketOrderCatalogPanel .market-section-title,
#marketOwnOrdersPanel .market-section-title { padding: 11px 13px 7px; }
.market-order-filters { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 6px; padding: 0 10px 9px; }
.market-order-filters input,
.market-order-filters select,
#marketOrderComposer input,
#marketOrderComposer select {
  width: 100%;
  height: 36px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 8px;
  outline: none;
  background: rgba(2, 8, 13, 0.76);
  color: #e2e8f0;
  font-size: 0.63rem;
}
.market-order-filters input:focus,
.market-order-filters select:focus,
#marketOrderComposer input:focus,
#marketOrderComposer select:focus { border-color: rgba(163, 230, 53, 0.52); box-shadow: 0 0 0 2px rgba(163, 230, 53, 0.07); }
#marketOrderCatalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  gap: 6px;
  min-height: 0;
  padding: 0 9px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(163, 230, 53, 0.30) transparent;
}
.market-order-asset {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.42);
  color: #cbd5e1;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.market-order-asset:hover,
.market-order-asset.is-selected { border-color: rgba(163, 230, 53, 0.50); background: rgba(77, 124, 15, 0.11); transform: translateY(-1px); }
.market-order-asset > div { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: rgba(2, 6, 15, 0.45); }
.market-order-asset img { width: 53px; height: 53px; object-fit: contain; }
.market-order-asset > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.market-order-asset b,
.market-order-asset small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-order-asset b { color: #e2e8f0; font-size: 0.6rem; }
.market-order-asset small { color: #64748b; font-size: 0.48rem; text-transform: uppercase; }

.market-order-content { display: flex; flex-direction: column; min-height: 100%; padding: 13px; overflow-y: auto; }
.market-order-content[hidden] { display: none !important; }
#marketOrderPreview { display: grid; place-items: center; min-height: 112px; border: 1px solid rgba(163, 230, 53, 0.15); border-radius: 12px; background: radial-gradient(circle, rgba(77, 124, 15, 0.15), transparent 66%); }
#marketOrderPreview img { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.52)); }
#marketOrderName { margin: 11px 0 3px; color: #f8fafc; font-size: 0.9rem; }
#marketOrderMeta { min-height: 26px; margin: 0 0 3px; color: #64748b; font-size: 0.55rem; line-height: 1.45; }
#marketOrderComposer label { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; color: #64748b; font-size: 0.49rem; font-weight: 900; letter-spacing: .45px; text-transform: uppercase; }
.market-order-market-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.market-order-market-data span { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 7px; border: 1px solid rgba(148,163,184,.10); border-radius: 8px; background: rgba(2,6,15,.45); color: #52616f; font-size: .45rem; }
.market-order-market-data b { overflow: hidden; color: #cbd5e1; font-size: .6rem; text-overflow: ellipsis; }
.market-escrow-total { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: end; margin-top: 9px; padding: 10px; border: 1px solid rgba(251,191,36,.25); border-radius: 9px; background: rgba(120,53,15,.11); }
.market-escrow-total span { color: #94a3b8; font-size: .54rem; font-weight: 800; }
.market-escrow-total b { color: #fcd34d; font-size: .88rem; }
.market-escrow-total small { grid-column: 1 / -1; color: #665b4b; font-size: .46rem; line-height: 1.35; }
#marketOrderStatus { min-height: 31px; padding: 7px 1px; color: #94a3b8; font-size: .54rem; line-height: 1.4; }
#marketOrderStatus.is-success { color: #4ade80; }
#marketOrderStatus.is-error { color: #f87171; }

#marketOwnOrders { min-height: 0; padding: 0 9px 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(163,230,53,.25) transparent; }
.market-own-order { display: grid; grid-template-columns: 60px minmax(0, 1fr) 92px auto; gap: 8px; align-items: center; margin-bottom: 7px; padding: 7px; border: 1px solid rgba(148,163,184,.11); border-radius: 10px; background: rgba(15,23,42,.46); }
.market-own-order.is-active { border-left: 2px solid #a3e635; }
.market-own-order-visual { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 8px; background: rgba(2,6,15,.48); }
.market-own-order-visual img { width: 55px; height: 55px; object-fit: contain; }
.market-own-order-copy,
.market-own-order-price { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.market-own-order-copy > span { color: #86efac; font-size: .43rem; font-weight: 900; text-transform: uppercase; }
.market-own-order-copy b { overflow: hidden; color: #e2e8f0; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.market-own-order-copy small,
.market-own-order-price span,
.market-own-order-price small { color: #64748b; font-size: .46rem; }
.market-own-order-price b { color: #fcd34d; font-size: .65rem; }
.market-own-order .market-listing-status { justify-self: start; }
.market-listing-status.is-filled { border-color: rgba(74,222,128,.30); background: rgba(34,197,94,.08); color: #86efac; }
.market-cancel-order { grid-column: 2 / -1; min-height: 30px; border: 1px solid rgba(248,113,113,.27); border-radius: 7px; background: rgba(127,29,29,.15); color: #fca5a5; font-size: .52rem; font-weight: 900; cursor: pointer; }
.market-cancel-order:hover { border-color: rgba(248,113,113,.52); background: rgba(153,27,27,.25); }

@media (max-width: 1120px) {
  #marketOrdersLayout { grid-template-columns: minmax(300px, 1fr) minmax(280px, .85fr); }
  #marketOwnOrdersPanel { grid-column: 1 / -1; max-height: 230px; }
  #marketOwnOrders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
}

@media (max-width: 760px) {
  #marketTabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #marketExchangeStrip { display: none; }
  #marketHudPanel { grid-template-rows: auto auto minmax(0, 1fr); }
  #marketOrdersLayout { grid-template-columns: 1fr; overflow-y: auto; }
  #marketOrderCatalogPanel,
  #marketOrderComposer,
  #marketOwnOrdersPanel { min-height: 380px; }
  #marketOwnOrders { display: block; }
  .market-price-insights { grid-template-columns: 1fr; }
  .market-sell-actions { grid-template-columns: 1fr; }
}

/* Mail */
#mailHudPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, calc(100vw - 40px));
  height: min(720px, calc(100vh - 40px));
}

#mailClaimableSummary { padding: 7px 10px; border: 1px solid rgba(74, 222, 128, 0.20); border-radius: 999px; background: rgba(34, 197, 94, 0.07); color: #86efac; font-size: 0.56rem; }
#mailHudBody { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 0; }
#mailSidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--market-line); background: rgba(2, 6, 15, 0.38); }
#mailFilters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.11); }
#mailFilters button { min-height: 34px; padding: 5px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #64748b; font-size: 0.53rem; font-weight: 800; cursor: pointer; }
#mailFilters button span { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; border-radius: 999px; background: rgba(148, 163, 184, 0.10); font-size: 0.47rem; }
#mailFilters button.is-active { border-color: rgba(56, 189, 248, 0.35); background: rgba(14, 165, 233, 0.10); color: #bae6fd; }
#mailList { flex: 1; padding: 8px; }
.mail-list-entry { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; min-height: 62px; margin-bottom: 6px; padding: 8px; border: 1px solid rgba(148, 163, 184, 0.10); border-radius: 10px; background: rgba(15, 23, 42, 0.43); color: #cbd5e1; text-align: left; cursor: pointer; }
.mail-list-entry:hover,
.mail-list-entry.is-selected { border-color: rgba(56, 189, 248, 0.42); background: rgba(14, 116, 144, 0.10); }
.mail-list-entry.is-unread { border-left: 3px solid #38bdf8; background: rgba(14, 165, 233, 0.07); }
.mail-sender-mark { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid rgba(56, 189, 248, 0.28); border-radius: 9px; background: rgba(14, 165, 233, 0.08); color: #7dd3fc; font-family: 'Press Start 2P', monospace; font-size: 0.48rem; }
.mail-sender-mark.is-admin { border-color: rgba(192, 132, 252, 0.32); background: rgba(147, 51, 234, 0.09); color: #d8b4fe; }
.mail-sender-mark.is-market { border-color: rgba(74, 222, 128, 0.28); background: rgba(34, 197, 94, 0.08); color: #86efac; }
.mail-list-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mail-list-copy b,
.mail-list-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-list-copy b { color: #cbd5e1; font-size: 0.64rem; }
.mail-list-copy small { color: #64748b; font-size: 0.52rem; }
.mail-attachment { padding: 4px 6px; border: 1px solid rgba(74, 222, 128, 0.26); border-radius: 999px; background: rgba(34, 197, 94, 0.08); color: #86efac; font-size: 0.47rem; font-style: normal; font-weight: 900; }
.mail-attachment.is-claimed { border-color: rgba(148, 163, 184, 0.16); background: rgba(100, 116, 139, 0.06); color: #64748b; }
.mail-list-empty { display: grid; place-items: center; min-height: 180px; padding: 20px; color: #475569; font-size: 0.62rem; text-align: center; }
#mailDetail { min-width: 0; min-height: 0; overflow-y: auto; }
.mail-detail-content { display: flex; flex-direction: column; min-height: 100%; padding: 24px 28px; }
.mail-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); }
#mailDetailSenderType { padding: 4px 7px; border: 1px solid rgba(56, 189, 248, 0.24); border-radius: 999px; color: #7dd3fc; font-size: 0.49rem; font-weight: 900; text-transform: uppercase; }
#mailDetailDate { color: #475569; font-size: 0.54rem; }
#mailDetailSubject { margin: 22px 0 6px; color: #f1f5f9; font-size: 1.14rem; }
#mailDetailSender { color: #64748b; font-size: 0.61rem; }
#mailDetailBody { color: #94a3b8; font-size: 0.72rem; line-height: 1.65; white-space: pre-wrap; }
#mailRewardCard { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 3px 13px; align-items: center; margin: 14px 0; padding: 12px; border: 1px solid rgba(74, 222, 128, 0.22); border-radius: 13px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.09), rgba(14, 165, 233, 0.04)); }
.mail-reward-label { grid-column: 2; color: #4ade80; font-size: 0.49rem; font-weight: 900; letter-spacing: 0.8px; }
#mailRewardVisual { grid-row: 1 / 3; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 11px; background: rgba(2, 6, 15, 0.55); color: #4ade80; font-size: 1.3rem; font-weight: 900; }
#mailRewardVisual img { width: 70px; height: 70px; object-fit: contain; }
#mailRewardCard > div:last-child { display: flex; flex-direction: column; gap: 4px; }
#mailRewardName { color: #e2e8f0; font-size: 0.75rem; }
#mailRewardMeta { color: #64748b; font-size: 0.57rem; }
#mailExpiryNotice { margin-top: auto; padding: 9px 0; color: #64748b; font-size: 0.55rem; }
#mailDetailActions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.11); }
#mailClaimBtn { min-width: 150px; }
#mailDeleteBtn { min-height: 40px; padding: 0 13px; border: 1px solid rgba(248, 113, 113, 0.28); border-radius: 9px; background: rgba(127, 29, 29, 0.14); color: #fca5a5; font-size: 0.62rem; font-weight: 800; cursor: pointer; }
#mailDeleteBtn:hover { border-color: rgba(248, 113, 113, 0.55); background: rgba(153, 27, 27, 0.26); }

@media (max-width: 1100px) {
  #marketFilters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .market-search-field { grid-column: span 2; }
  #marketBrowseLayout,
  #marketSellLayout { grid-template-columns: minmax(0, 1fr) 290px; }
  .market-own-listing { grid-template-columns: 60px minmax(150px, 1fr) 95px auto; }
  .market-own-listing > :last-child { grid-column: 2 / -1; justify-self: end; }
}

@media (max-width: 760px) {
  #marketHudOverlay,
  #mailHudOverlay { padding: 8px; }
  #marketHudPanel,
  #mailHudPanel { width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 15px; }
  #marketHudHeader,
  #mailHudHeader { min-height: 84px; padding: 12px; }
  #marketHudHeader p,
  #mailHudHeader p,
  #marketMoneyPill,
  #marketRefreshBtn,
  #mailClaimableSummary,
  #mailRefreshBtn { display: none; }
  #marketTabs { gap: 4px; padding: 7px; }
  .market-tab { min-height: 43px; padding: 7px; text-align: center; }
  .market-tab span { display: none; }
  #marketBrowseLayout,
  #marketSellLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    padding: 8px;
  }
  #marketBrowseMain,
  #marketSellAssets { min-height: 0; }
  #marketListingDetail,
  #marketCreatePanel {
    display: block;
    max-height: min(44vh, 390px);
  }
  #marketListingDetail.is-empty,
  #marketCreatePanel.is-empty { display: none; }
  #marketFilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-search-field { grid-column: 1 / -1; }
  #marketListingsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mailHudBody { grid-template-columns: 1fr; }
  #mailSidebar:has(.mail-list-entry.is-selected) { display: none; }
  #mailDetail { display: none; }
  #mailDetail:not(.is-empty) { display: block; }
  .mail-detail-content { padding: 16px; }
}

@media (max-width: 450px) {
  #marketListingsGrid,
  #marketSellAssetsGrid { grid-template-columns: 1fr; }
  #marketFilters { grid-template-columns: 1fr 1fr; }
  .market-card-visual { height: 82px; }
  .market-listing-card { grid-template-rows: auto 82px auto auto auto; }
}

/* Compact live skill status shown on the right side of all three Sluma cards. */
.compact-hud-skills {
  width: 112px;
  min-width: 112px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin-left: 1px;
  padding-left: 9px;
  border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.compact-hud-skills-title {
  color: rgba(191, 219, 254, 0.62);
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  letter-spacing: 0.45px;
  line-height: 1;
  text-transform: uppercase;
}

.compact-hud-skills-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.compact-hud-skill {
  --compact-skill-accent: #93c5fd;
  min-width: 0;
  padding: 3px 4px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 5px;
  background: rgba(2, 6, 12, 0.42);
}

.compact-hud-skill-row {
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.compact-hud-skill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 5px rgba(74, 222, 128, 0.7);
}

.compact-hud-skill-name {
  min-width: 0;
  overflow: hidden;
  color: #e2e8f0;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-hud-skill-state {
  color: #4ade80;
  font: 800 6px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: -0.15px;
  white-space: nowrap;
}

.compact-hud-skill-track {
  height: 2px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.13);
}

.compact-hud-skill-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fb923c;
  box-shadow: 0 0 5px rgba(251, 146, 60, 0.55);
  transition: width 0.08s linear;
}

.compact-hud-skill.is-cooling {
  border-color: rgba(251, 146, 60, 0.22);
}

.compact-hud-skill.is-cooling .compact-hud-skill-dot,
.compact-hud-skill.is-cooling .compact-hud-skill-fill {
  background: #fb923c;
  box-shadow: 0 0 5px rgba(251, 146, 60, 0.55);
}

.compact-hud-skill.is-cooling .compact-hud-skill-state { color: #fb923c; }

.compact-hud-skill.is-casting {
  border-color: color-mix(in srgb, var(--compact-skill-accent) 48%, transparent);
  background: color-mix(in srgb, var(--compact-skill-accent) 9%, rgba(2, 6, 12, 0.55));
}

.compact-hud-skill.is-casting .compact-hud-skill-dot,
.compact-hud-skill.is-casting .compact-hud-skill-fill {
  background: var(--compact-skill-accent);
  box-shadow: 0 0 6px var(--compact-skill-accent);
}

.compact-hud-skill.is-casting .compact-hud-skill-state { color: var(--compact-skill-accent); }

.compact-hud-skills-empty {
  padding: 6px 3px;
  color: rgba(148, 163, 184, 0.52);
  font-size: 7px;
  text-align: center;
}

/* ── Passive Bonus Badge ── */
#hudPassiveBadge {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(167, 139, 250, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.15);
  font-size: 7px;
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: 0.2px;
  margin-top: 1px;
}

#deployedMiniHudStack {
  position: absolute;
  top: 124px;
  left: 14px;
  z-index: 19;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

/* ── Deployed cards: identical to #hudCreature ── */
.deployed-hud-card {
  display: flex;
  pointer-events: auto;
  cursor: pointer;
  align-items: center;
  gap: 11px;
  background: rgba(8, 8, 20, 0.78);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px 16px 10px 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  min-width: 350px;
  width: 350px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  animation: hudSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.deployed-hud-portrait {
  position: relative;
  flex-shrink: 0;
  width: 54px;
}

.deployed-hud-portrait-inner {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.deployed-hud-sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  flex-shrink: 0;
}

.deployed-hud-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px currentColor;
  flex-shrink: 0;
}

.deployed-hud-level-badge {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold, #ffd700);
  color: #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
  white-space: nowrap;
  line-height: 1.3;
}

.deployed-hud-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.deployed-hud-top-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.deployed-hud-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #f0f0f0;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deployed-hud-name-level {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #22c55e;
  text-shadow: 0 0 7px rgba(34,197,94,0.45);
  white-space: nowrap;
  flex-shrink: 0;
}

.deployed-hud-owner {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deployed-hud-hp-row,
.deployed-hud-exp-row {
  display: flex;
  align-items: center;
}

.deployed-hud-hp-wrap,
.deployed-hud-exp-wrap {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.deployed-hud-exp-wrap {
  height: 14px;
}

.deployed-hud-hp-bar {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #22c55e 0%, #4ade80 60%, #86efac 100%);
  transition: width 0.4s ease, background 0.4s ease;
  position: relative;
}

.deployed-hud-exp-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 55%, #93c5fd 100%);
  transition: width 0.4s ease;
}

.deployed-hud-hp-shine,
.deployed-hud-exp-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 60%);
  border-radius: 99px;
  pointer-events: none;
}

.deployed-hud-hp-text,
.deployed-hud-exp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: rgba(255,255,255,0.90);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.deployed-hud-status-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.deployed-hud-status-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.3px;
}

@media (max-width: 700px) {
  #deployedMiniHudStack {
    top: 114px;
  }

  .deployed-hud-card {
    min-width: 0;
    width: min(350px, calc(100vw - 28px));
    padding: 8px 12px 8px 8px;
  }

  #hudCreature {
    min-width: 0;
    width: min(370px, calc(100vw - 28px));
  }

  .compact-hud-skills {
    width: 96px;
    min-width: 96px;
    padding-left: 7px;
  }

  .deployed-hud-portrait-inner {
    width: 46px;
    height: 46px;
  }

  .deployed-hud-name {
    font-size: 8px;
  }

  .deployed-hud-name-level,
  .deployed-hud-owner,
  .deployed-hud-status-label {
    font-size: 9px;
  }

  .deployed-hud-hp-text,
  .deployed-hud-exp-text {
    font-size: 5px;
  }
}

/* ════════════════════════════════════════════
   HUD ENEMIGO (esquina superior derecha)
   ════════════════════════════════════════════ */

#enemyHudStack {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 21;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

#enemyHud {
  position: static;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 11px;
  pointer-events: none;

  background: rgba(20, 8, 10, 0.82);
  border: 2px solid rgba(255, 123, 123, 0.30);
  border-radius: 14px;
  padding: 10px 16px 10px 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  min-width: 220px;

  animation: enemyHudSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.enemy-hud-extra {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(20, 8, 10, 0.82);
  border: 2px solid rgba(255, 123, 123, 0.30);
  border-radius: 14px;
  padding: 10px 16px 10px 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  min-width: 220px;
  animation: enemyHudSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.enemy-hud-extra-portrait {
  position: relative;
  flex-shrink: 0;
}

.enemy-hud-extra-portrait-inner {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 2px solid rgba(255,123,123,0.45);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#enemySpriteImg2,
#enemySpriteImg3 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

#enemySpriteFallback2,
#enemySpriteFallback3 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,0.75);
}

.enemy-hud-extra-level {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: #ef4444;
  color: #fff5f5;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
  white-space: nowrap;
  line-height: 1.3;
}

.enemy-hud-extra-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.enemy-hud-extra-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

#enemyName2,
#enemyName3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #ffd4d4;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enemy-hud-extra-hp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.enemy-hud-extra-hp-wrap {
  flex: 1;
  height: 9px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.enemy-hud-extra-hp-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 60%, #fca5a5 100%);
  transition: width 0.35s ease;
}

.enemy-hud-extra-hp-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, transparent 60%);
  border-radius: 99px;
  pointer-events: none;
}

#enemyHpText2,
#enemyHpText3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: rgba(255,245,245,0.8);
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes enemyHudSlideIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}

#enemyPortrait {
  position: relative;
  flex-shrink: 0;
}

#enemyPortraitInner {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 2px solid rgba(255,123,123,0.45);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#enemySpriteImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

#enemySpriteFallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,0.75);
}

#enemyLevelBadge {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: #ef4444;
  color: #fff5f5;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
  white-space: nowrap;
  line-height: 1.3;
}

#enemyInfo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

#enemyTopRow {
  display: flex;
  align-items: baseline;
}

#enemyName {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #fee2e2;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#enemyHpRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

#enemyHpBarWrap {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.10);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid rgba(255,123,123,0.24);
  position: relative;
}

#enemyHpBar {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7f1d1d 0%, #dc2626 54%, #f87171 100%);
  transition: width 0.25s ease;
}

#enemyHpShine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, transparent 60%);
  border-radius: 99px;
}

#enemyHpText {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: rgba(255,238,238,0.88);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════
   STORAGE HUD
   ════════════════════════════════════════════════════ */

#storageHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 37;
  background: rgba(4, 6, 14, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#storageHudPanel {
  width: min(860px, 96vw);
  height: min(560px, 88vh);
  background: linear-gradient(160deg, rgba(15,18,32,0.98) 0%, rgba(10,12,24,0.99) 100%);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hudSlideIn 0.32s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Header ── */
#storageHudHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

#storageHudHeader h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #e2e8f0;
  letter-spacing: 1px;
  margin: 0;
  flex: 1;
}

#storageCountLabel {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
  margin-right: 6px;
}

#storageHudClose {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
#storageHudClose:hover { background: rgba(239,68,68,0.25); color: #fca5a5; }

/* ── Body: grid left + detail right ── */
#storageHudBody {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Left: scrollable grid ── */
#storageGridWrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
#storageGridWrap::-webkit-scrollbar { width: 5px; }
#storageGridWrap::-webkit-scrollbar-track { background: transparent; }
#storageGridWrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

#storageGrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

/* ── Slot cell ── */
.storage-slot {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.storage-slot:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.07);
  transform: scale(1.05);
}
.storage-slot.storage-slot-selected {
  border-color: #60a5fa;
  background: rgba(96,165,250,0.14);
  box-shadow: 0 0 0 2px rgba(96,165,250,0.35);
}
.storage-slot.storage-slot-empty {
  cursor: default;
}
.storage-slot.storage-slot-empty:hover {
  transform: none;
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.storage-slot img,
.storage-slot-fallback {
  width: 76%;
  height: 76%;
  object-fit: contain;
  image-rendering: auto;
  border-radius: 50%;
}

.storage-slot.storage-slot-egg {
  border-color: rgba(244,114,182,0.42);
  background: radial-gradient(circle at 50% 40%, rgba(244,114,182,0.2), rgba(49,18,57,0.82));
  box-shadow: inset 0 0 14px rgba(244,114,182,0.08);
}
.storage-slot.storage-slot-egg.storage-slot-selected {
  border-color: #f472b6;
  box-shadow: 0 0 0 2px rgba(244,114,182,0.34), 0 0 14px rgba(236,72,153,0.25);
}
.storage-slot img.storage-egg-image {
  width: 66%;
  height: 66%;
  margin-top: -10px;
  transform: none;
  border-radius: 0;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,0.5));
  animation: storageEggFloat 2.2s ease-in-out infinite;
}
.storage-egg-label {
  position: absolute;
  top: 3px;
  color: #fbcfe8;
  font-family: 'Press Start 2P', monospace;
  font-size: 4.5px;
  letter-spacing: 0.04em;
}
.storage-egg-timer {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 3px;
  color: #fff1f8;
  font-family: 'Press Start 2P', monospace;
  font-size: 4.8px;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}
@keyframes storageEggFloat { 50% { transform: translateY(-3px) scale(1.03); } }

.storage-slot-level {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #ffd700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
}

.storage-slot-elements {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  gap: 1px;
  pointer-events: none;
}

.storage-slot .storage-slot-element-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

/* ── Right: detail panel ── */
#storageDetailPane {
  width: 210px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.07);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
#storageDetailPane.storage-detail-empty {
  justify-content: center;
  align-items: center;
  color: rgba(255,255,255,0.2);
  font-size: 11px;
  text-align: center;
}

#storageDetailPortraitWrap {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  flex-shrink: 0;
  overflow: hidden;
}
#storageDetailSprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
#storageDetailFallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
#storageDetailLevelBadge {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold, #ffd700);
  color: #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
  white-space: nowrap;
  line-height: 1.4;
}

#storageDetailMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
#storageDetailName {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  color: #f0f0f0;
  text-align: center;
  line-height: 1.5;
}
#storageDetailLevel,
#storageDetailExp {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-align: center;
}

/* stat cards inside storage detail — reuse existing .sluma-stat-card */
#storageDetailStats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

#storageDetailElement .storage-detail-element-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

.storage-swap-elements {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}

.storage-swap-element-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

.storage-equip-btn,
.storage-release-btn {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.storage-equip-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,0.4);
}
.storage-equip-btn:hover   { opacity: 0.88; transform: translateY(-1px); }
.storage-equip-btn:active  { transform: translateY(0); opacity: 1; }

.storage-release-btn {
  background: rgba(239,68,68,0.14);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
}
.storage-release-btn:hover  { background: rgba(239,68,68,0.26); }
.storage-release-btn:active { opacity: 0.8; }

/* ── Capture btn when storage full ── */
.capture-btn-full {
  background: rgba(100,116,139,0.22) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(100,116,139,0.3) !important;
  cursor: not-allowed !important;
  font-size: 9px !important;
}

/* ════════════════════════════════════════════════════
   STORAGE SWAP MODAL
   ════════════════════════════════════════════════════ */

#storageSwapOverlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(4,6,14,0.80);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#storageSwapPanel {
  width: min(400px, 92vw);
  background: linear-gradient(160deg, rgba(15,18,32,0.99) 0%, rgba(10,12,24,0.99) 100%);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: hudSlideIn 0.25s cubic-bezier(0.22,1,0.36,1) both;
}

#storageSwapHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}
#storageSwapHeader h4 {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #e2e8f0;
  margin: 0;
  flex: 1;
  line-height: 1.6;
}
#storageSwapClose {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: #94a3b8;
  width: 26px;
  height: 26px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
#storageSwapClose:hover { background: rgba(239,68,68,0.25); color: #fca5a5; }

#storageSwapSubtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.5;
}

#storageSwapSlots {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.swap-slot-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.swap-slot-btn:not([disabled]):hover {
  border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.10);
}

.swap-slot-portrait {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.swap-slot-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.swap-slot-fallback {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.swap-slot-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.swap-slot-name {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swap-slot-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
}
.swap-slot-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #fb923c;
  margin-top: 2px;
}


/* ╠════════════════════════════════════════════════════
   SLUMADEX HUD v2
   ╠════════════════════════════════════════════════════ */

/* Legacy Slumadex theme retained for reference and disabled. */
@media not all {
#slumadexOverlay {
  position: absolute;
  inset: 0;
  z-index: 38;
  background: rgba(2, 3, 10, 0.88);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

#slumadexPanel {
  width: min(1100px, 98vw);
  height: min(700px, 93vh);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(139,92,246,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(59,130,246,0.07) 0%, transparent 48%),
    linear-gradient(160deg, rgba(13,16,32,0.99) 0%, rgba(6,8,18,0.99) 100%);
  border: 1.5px solid rgba(139,92,246,0.22);
  border-radius: 22px;
  box-shadow:
    0 36px 90px rgba(0,0,0,0.80),
    0 0 0 1px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hudSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

/* ── Header ── */
#slumadexHeader {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(139,92,246,0.18);
  background: linear-gradient(90deg, rgba(139,92,246,0.10) 0%, transparent 55%);
  flex-shrink: 0;
}

#slumadexTitleRow {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

#slumadexIcon {
  font-size: 18px;
  color: #a78bfa;
  text-shadow: 0 0 14px rgba(167,139,250,0.8);
  line-height: 1;
}

#slumadexTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #e2e8f0 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#slumadexProgressWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#slumadexProgressBarTrack {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}

#slumadexProgressFill {
  height: 100%;
  background: linear-gradient(90deg, #6d28d9, #a78bfa, #818cf8);
  border-radius: 99px;
  width: 0%;
  transition: width 0.55s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 8px rgba(167,139,250,0.55);
}

#slumadexProgress {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: rgba(167,139,250,0.65);
  letter-spacing: 0.5px;
}

#slumadexClose {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px;
  color: #94a3b8;
  width: 30px;
  height: 30px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
#slumadexClose:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.35);
  color: #fca5a5;
}

/* ── Body ── */
#slumadexBody {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Left: grid ── */
#slumadexGridWrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139,92,246,0.25) transparent;
}
#slumadexGridWrap::-webkit-scrollbar { width: 5px; }
#slumadexGridWrap::-webkit-scrollbar-track { background: transparent; }
#slumadexGridWrap::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 4px; }

#slumadexGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 10px;
}

/* ── Dex card ── */
.dex-card {
  aspect-ratio: 1 / 1.28;
  border-radius: 13px;
  border: 1.5px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 5px 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  gap: 3px;
}

/* Seen card */
.dex-card-seen {
  border-color: color-mix(in srgb, var(--dex-color) 42%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dex-color) 13%, rgba(8,10,20,1)) 0%,
    rgba(6,8,18,1) 100%
  );
}
.dex-card-seen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}
.dex-card-seen:hover {
  transform: translateY(-3px) scale(1.045);
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--dex-color) 38%, transparent),
    0 0 0 1px color-mix(in srgb, var(--dex-color) 65%, transparent);
  border-color: color-mix(in srgb, var(--dex-color) 80%, transparent);
}

/* Unknown card */
.dex-card-unknown {
  border-color: rgba(255,255,255,0.04);
  background: rgba(4,5,12,0.92);
  cursor: default;
}
.dex-card-unknown:hover { transform: none; }

/* Selected */
.dex-card-selected {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
  box-shadow: 0 0 22px rgba(167,139,250,0.32);
}

.dex-card-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 5.5px;
  color: rgba(255,255,255,0.18);
  align-self: flex-start;
  line-height: 1;
  flex-shrink: 0;
}
.dex-card-seen .dex-card-num {
  color: color-mix(in srgb, var(--dex-color) 60%, rgba(255,255,255,0.35));
}

.dex-card-img-wrap {
  width: 66%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  margin: 2px 0;
}
.dex-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
}

/* Butlermi has a very wide source frame, so a square contain-box makes it
   appear much smaller than the other Slumas. Give only its Dex portraits a
   wider presentation while preserving the original proportions. */
.dex-card-img-wrap img[data-sluma-id="butlermi"] {
  width: 148%;
  max-width: none;
  height: 116%;
}
.dex-card-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.dex-card-emoji {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 11px;
  line-height: 1;
  opacity: 0.65;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

.dex-card-question {
  font-family: 'Press Start 2P', monospace;
  font-size: 24px;
  color: rgba(255,255,255,0.07);
  line-height: 1;
}

.dex-card-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 5.5px;
  color: rgba(255,255,255,0.62);
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
  width: 100%;
  padding: 0 3px;
}
.dex-card-unknown .dex-card-name { color: rgba(255,255,255,0.10); }

.dex-card-element-bar {
  width: 55%;
  height: 2.5px;
  border-radius: 99px;
  background: var(--dex-color);
  margin-top: auto;
  opacity: 0.55;
  flex-shrink: 0;
}

/* When the element bar holds element icons (rendered in renderDexGrid),
   it becomes a tiny flex row instead of a solid bar. */
.dex-card-element-bar .dex-card-element-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: auto;
  display: inline-block;
  opacity: 0.92;
}
.dex-card-element-bar:not(:empty) {
  height: auto;
  background: transparent;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-bottom: 2px;
}

/* Element icons in the slumadex detail badge */
#slumadexDetailElement .dex-detail-element-icon,
#slumaDetailElement .sluma-detail-element-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
#slumadexDetailElement {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#slumadexDetailElement .dex-detail-element-label {
  text-transform: capitalize;
  letter-spacing: 0.3px;
  font-size: 1.1em;
}

/* Element icons on the sluma slot cards (Slumas HUD) */
.sluma-slot-element {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
}
.sluma-slot-element .sluma-slot-element-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* ── Right: detail panel ── */
#slumadexDetail {
  width: 310px;
  flex-shrink: 0;
  border-left: 1px solid rgba(139,92,246,0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(0,0,0,0.18);
}

/* Empty state */
#slumadexDetailEmpty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px;
  text-align: center;
}
#slumadexDetailEmptyIcon {
  font-family: 'Press Start 2P', monospace;
  font-size: 48px;
  color: rgba(255,255,255,0.04);
  text-shadow: 0 0 40px rgba(139,92,246,0.18);
}
#slumadexDetailEmpty p {
  font-size: 10.5px;
  color: rgba(255,255,255,0.18);
  line-height: 1.75;
  margin: 0;
}

/* Detail content */
#slumadexDetailContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Portrait section */
#slumadexPortraitSection {
  width: 100%;
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#slumadexPortraitBg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 65%, var(--portrait-color, #8b5cf6) 0%, transparent 70%);
  opacity: 0.16;
  transition: background 0.35s ease;
}
#slumadexDetailSprite,
#slumadexDetailFallback {
  width: 112px;
  height: 112px;
  object-fit: contain;
  image-rendering: auto;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.65));
}
#slumadexDetailSprite[data-sluma-id="butlermi"] {
  width: 188px;
  height: 136px;
  max-width: none;
}
#slumadexDexNumBadge {
  position: absolute;
  bottom: 9px;
  left: 13px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: rgba(255,255,255,0.28);
  z-index: 3;
  letter-spacing: 0.5px;
}

/* Variant toggle buttons (Shiny / Ultra) */
#slumadexVariantBtns {
  position: absolute;
  top: 9px;
  right: 9px;
  display: flex;
  gap: 5px;
  z-index: 4;
}
.dex-variant-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #cbd5e1;
  background: rgba(15,23,42,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  -webkit-user-select: none;
  user-select: none;
}
.dex-variant-btn:hover {
  transform: translateY(-1px);
  background: rgba(30,41,59,0.92);
}
.dex-variant-shiny.is-active {
  color: #fef9c3;
  border-color: #eab308;
  background: rgba(234,179,8,0.20);
  box-shadow: 0 0 12px rgba(234,179,8,0.45);
}
.dex-variant-ultra.is-active {
  color: #ede9fe;
  border-color: #8b5cf6;
  background: rgba(139,92,246,0.22);
  box-shadow: 0 0 12px rgba(139,92,246,0.45);
}

/* Info scroll area */
#slumadexInfoScroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.07) transparent;
}
#slumadexInfoScroll::-webkit-scrollbar { width: 3px; }
#slumadexInfoScroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 4px; }

/* Name row */
#slumadexNameRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 16px 9px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#slumadexDetailName {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #f1f5f9;
  margin: 0;
  line-height: 1.5;
}
#slumadexDetailElement {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

/* Description */
#slumadexDetailDesc {
  margin: 0;
  padding: 11px 16px 10px;
  font-size: 10px;
  color: rgba(255,255,255,0.48);
  line-height: 1.7;
  font-style: italic;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Sections */
.dex-section {
  padding: 11px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dex-section:last-child { border-bottom: none; }
.dex-section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: rgba(255,255,255,0.28);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Stat bars */
.dex-stat-row {
  display: grid;
  grid-template-columns: 60px 1fr 48px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.dex-stat-label {
  font-size: 9.5px;
  color: rgba(255,255,255,0.38);
}
.dex-stat-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.dex-stat-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
}
.dex-stat-val {
  font-size: 9px;
  color: #e2e8f0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Location tags */
#slumadexDetailLocationList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dex-loc-tag {
  font-size: 9.5px;
  font-weight: 600;
  padding: 4px 11px;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.22);
  color: #4ade80;
  border-radius: 20px;
}
.dex-loc-none {
  font-size: 9.5px;
  color: rgba(255,255,255,0.25);
  font-style: italic;
}

/* Passive section */
.dex-passive-name {
  font-size: 11px;
  font-weight: 700;
  color: #a78bfa;
  margin-bottom: 4px;
}
.dex-passive-desc {
  font-size: 9.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

/* Capture count rows */
.dex-count-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
}
.dex-count-icon { font-size: 13px; flex-shrink: 0; }
.dex-count-label {
  flex: 1;
  font-size: 10px;
  color: rgba(255,255,255,0.42);
}
.dex-count-val {
  color: #a78bfa;
  font-weight: 700;
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
}
}

/* Shared element artwork used by the Slumas companion HUD. */
#slumaDetailElement .sluma-detail-element-icon,
.sluma-slot-element .sluma-slot-element-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.sluma-slot-element {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
}


/* ════════════════════════════════════════════════════
   VIEWER PROFILE MODAL (chat click)
   ════════════════════════════════════════════════════ */

#viewerProfileOverlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(4, 6, 14, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#viewerProfilePanel {
  width: min(420px, 94vw);
  max-height: 80vh;
  border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(18, 24, 32, 0.97) 0%, rgba(12, 16, 24, 0.97) 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hudSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

#viewerProfileHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#viewerProfileTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: #cbd5e1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#viewerProfileClose {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#viewerProfileClose:hover {
  background: rgba(239,68,68,0.25);
  color: #fca5a5;
}

#viewerProfileBody {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

#viewerProfileAvatarSection {
  display: flex;
  align-items: center;
  gap: 16px;
}

#viewerProfileAvatarWrap {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

#viewerProfileAvatarFallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #a78bfa;
}

#viewerProfileBasicInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#viewerProfileUsername {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.2px;
}

#viewerProfilePlayerLevel {
  font-weight: 700;
  font-size: 0.82rem;
  color: #86efac;
}

#viewerProfileStatsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

#viewerProfileSlumasSection {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#viewerProfileSlumasTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.56rem;
  color: #94a3b8;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

#viewerProfileSlumasList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.viewer-equip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}

.viewer-equip-portrait {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.viewer-equip-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.viewer-equip-fallback {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.viewer-equip-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.viewer-equip-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: #e2e8f0;
}

.viewer-equip-level {
  font-size: 0.7rem;
  color: #86efac;
  font-weight: 600;
}

.viewer-equip-variant-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  margin-left: auto;
}

.viewer-equip-variant-badge.shiny {
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
}

.viewer-equip-variant-badge.ultra {
  color: #a78bfa;
  background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.3);
}

.viewer-equip-empty {
  color: rgba(255,255,255,0.25);
  font-size: 0.78rem;
  text-align: center;
  padding: 12px 0;
  font-style: italic;
}

/* ════════════════════════════════════════════════════
   ACTIVE PASSIVES PANEL (inside Slumas HUD)
   ════════════════════════════════════════════════════ */

#passivesPanel {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#passivesPanelHeader {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

#passivesPanelTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #a5b4fc;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#passivesPanelCount {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
}

#passivesList {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#passivesList::-webkit-scrollbar {
  width: 5px;
}

#passivesList::-webkit-scrollbar-track {
  background: transparent;
}

#passivesList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}

#passivesEmpty {
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  line-height: 1.5;
  padding: 6px 0;
}

/* ── Individual passive row ── */
.passive-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  transition: border-color 0.2s, background 0.2s;
}
.passive-row:hover {
  border-color: rgba(167,139,250,0.45);
  background: rgba(167,139,250,0.06);
}

/* Portrait */
.passive-portrait-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.passive-sluma-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  object-fit: contain;
  image-rendering: auto;
  display: block;
}

.passive-fallback {
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.14);
}

.passive-stack-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: #fbbf24;
  color: #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
  line-height: 1.3;
  z-index: 2;
}

/* Info */
.passive-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.passive-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #e2e8f0;
  letter-spacing: 0.3px;
  line-height: 1.5;
}

.passive-desc {
  font-size: 10px;
  color: rgba(203,213,225,0.55);
  line-height: 1.4;
}

.passive-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

/* Micro passive build panel */
#microPassivesPanel {
  border: 1px solid rgba(56, 189, 248, 0.20);
  border-radius: 13px;
  padding: 13px 14px;
  background:
    radial-gradient(circle at 92% 0%, rgba(56, 189, 248, 0.10), transparent 36%),
    linear-gradient(145deg, rgba(12, 20, 31, 0.94), rgba(7, 11, 18, 0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

#microPassivesHeader,
#microPassiveActions,
#microPassivePickerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#microPassivesHeader h4 {
  margin: 3px 0 0;
  color: #e0f2fe;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#microPassivesEyebrow {
  color: #38bdf8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

#microPassivesPower {
  padding: 4px 8px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.10);
  color: #7dd3fc;
  font-size: 9px;
  font-weight: 800;
}

#microPassiveSlots {
  display: grid;
  grid-template-columns: repeat(5, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.micro-passive-slot {
  position: relative;
  min-width: 0;
  min-height: 100px;
  padding: 8px 6px 7px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(2, 6, 12, 0.42);
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.16s, border-color 0.16s, background 0.16s;
}

.micro-passive-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.48);
  background: rgba(14, 165, 233, 0.07);
}

.micro-passive-slot.is-equipped {
  border-style: solid;
  border-color: color-mix(in srgb, var(--micro-color) 52%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--micro-color) 12%, transparent), rgba(2, 6, 12, 0.48));
}

.micro-passive-slot-number {
  position: absolute;
  top: 5px;
  left: 6px;
  color: rgba(148, 163, 184, 0.52);
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
}

.micro-passive-slot-plus {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 50%;
  color: #64748b;
  font-size: 20px;
}

.micro-passive-slot-portrait {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px;
  background: rgba(255,255,255,0.035);
}

.micro-passive-slot-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.micro-passive-slot strong {
  max-width: 100%;
  overflow: hidden;
  color: #f1f5f9;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.micro-passive-slot small {
  max-width: 100%;
  overflow: hidden;
  color: #94a3b8;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.micro-passive-power-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
  font-size: 7px;
  font-weight: 900;
}

#microPassiveActions {
  margin-top: 9px;
}

#microPassiveEquipBtn,
#microPassiveRemoveBtn {
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(56, 189, 248, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.20), rgba(37, 99, 235, 0.16));
  color: #bae6fd;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

#microPassiveEquipBtn:hover:not(:disabled) { filter: brightness(1.2); }
#microPassiveEquipBtn:disabled { opacity: 0.48; cursor: default; }

#microPassiveStatus {
  min-height: 13px;
  color: #86efac;
  font-size: 9px;
  text-align: right;
}

#microPassiveStatus.is-error { color: #fca5a5; }

#microPassiveEffectsSection {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

#microPassiveEffectsTitle {
  margin-bottom: 7px;
  color: #94a3b8;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

#microPassiveEffects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.micro-passive-effect {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--micro-color) 28%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--micro-color) 6%, rgba(2, 6, 12, 0.58));
}

.micro-passive-effect img,
.micro-passive-effect-fallback {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
}

.micro-passive-effect-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.micro-passive-effect-copy strong { color: #e2e8f0; font-size: 9px; }
.micro-passive-effect-copy small { color: #86efac; font-size: 8px; }

.micro-passive-effect-tag {
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.10);
  color: #7dd3fc;
  font-size: 6px;
  font-weight: 900;
}

#microPassiveEffectsEmpty {
  color: rgba(148, 163, 184, 0.56);
  font-size: 9px;
  line-height: 1.45;
}

#microPassiveEffectsEmpty[hidden] { display: none; }

#microPassivePicker {
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 12, 0.74);
  backdrop-filter: blur(5px);
}

#microPassivePicker[hidden] { display: none; }

#microPassivePickerCard {
  width: min(720px, 94vw);
  max-height: min(620px, 86vh);
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid rgba(56, 189, 248, 0.30);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(17, 26, 39, 0.99), rgba(7, 11, 18, 0.99));
  box-shadow: 0 24px 70px rgba(0,0,0,0.68);
}

#microPassivePickerHeader > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#microPassivePickerHeader span {
  color: #e0f2fe;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}

#microPassivePickerHeader small { color: #7dd3fc; font-size: 10px; }

#microPassivePickerClose {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  font-size: 18px;
  cursor: pointer;
}

#microPassivePickerRules {
  margin: 10px 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.07);
  color: #94a3b8;
  font-size: 9px;
}

#microPassiveStorageList {
  min-height: 120px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-right: 3px;
}

.micro-passive-storage-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
}

.micro-passive-storage-card:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.46);
  background: rgba(14, 165, 233, 0.08);
}

.micro-passive-storage-card.is-blocked { opacity: 0.38; cursor: not-allowed; }

.micro-passive-storage-portrait {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
}

.micro-passive-storage-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.micro-passive-storage-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.micro-passive-storage-copy strong { color: #f8fafc; font-size: 10px; }
.micro-passive-storage-copy strong small { color: #94a3b8; font-weight: 600; }
.micro-passive-storage-copy > span { color: #7dd3fc; font-size: 9px; font-weight: 800; }
.micro-passive-storage-copy > small { color: #64748b; font-size: 8px; line-height: 1.35; }

.micro-passive-storage-value {
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.11);
  color: #86efac;
  font-size: 9px;
  font-weight: 900;
}

.micro-passive-storage-empty {
  grid-column: 1 / -1;
  padding: 38px 14px;
  color: #64748b;
  font-size: 10px;
  text-align: center;
}

#microPassiveRemoveBtn {
  align-self: flex-start;
  margin-top: 10px;
  border-color: rgba(248, 113, 113, 0.30);
  background: rgba(239, 68, 68, 0.10);
  color: #fecaca;
}

@media (max-width: 720px) {
  #microPassiveSlots { grid-template-columns: repeat(3, minmax(82px, 1fr)); }
  #microPassiveEffects,
  #microPassiveStorageList { grid-template-columns: 1fr; }
}

/* ─── Editor Mode ─── */
body.editor-clean-mode {
  overflow: hidden;
  touch-action: none;
}

#captureHudPanel.is-dragging {
  opacity: .94;
  box-shadow: 0 18px 42px rgba(0,0,0,.58), 0 0 0 1px rgba(125,211,252,.24);
}

body.editor-clean-mode #appContainer > :not(#gameScreen),
body.editor-clean-mode #gameScreen > :not(#gameCanvas),
body.editor-clean-mode > :not(#appContainer):not(#editorToolbar):not(#editorCustomCursor) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.editor-clean-mode #gameScreen,
body.editor-clean-mode #gameCanvas,
body.editor-clean-mode #editorToolbar,
body.editor-clean-mode #editorCustomCursor {
  visibility: visible !important;
}

body.editor-clean-mode #gameCanvas {
  pointer-events: auto !important;
}

body.editor-clean-mode #editorToolbar {
  bottom: 20px;
  max-height: calc(100vh - 40px);
  opacity: 1 !important;
  pointer-events: auto !important;
}

#editorModeBtn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1000;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
  transition: all 0.2s ease;
  display: none;
}

#editorModeBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

#editorModeBtn.active {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

#editorToolbar {
  position: fixed;
  bottom: 140px;
  right: 20px;
  z-index: 1000;
  width: min(520px, calc(100vw - 40px));
  max-height: calc(100vh - 170px);
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgba(34, 197, 94, 0.13), transparent 34%),
    rgba(6, 18, 18, 0.97);
  border: 1px solid rgba(74, 222, 128, 0.24);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
}

.editor-navigation-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 9px;
  background: rgba(2, 12, 20, 0.68);
  color: #94a3b8;
  font: 600 9px/1.55 system-ui, sans-serif;
}

.editor-navigation-hint b {
  flex: 0 0 auto;
  color: #67e8f9;
  font: 8px/1.7 'Press Start 2P', monospace;
}

.editor-toolbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-toolbar-header span {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #f0f0f0;
  letter-spacing: 0.5px;
}

.editor-toolbar-header button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.editor-toolbar-header button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.editor-toolbar-items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  max-height: clamp(180px, calc(100vh - 410px), 340px);
  padding: 3px 6px 3px 3px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #22c55e rgba(255,255,255,.06);
  scrollbar-width: thin;
}

.editor-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 84px;
  padding: 8px 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.editor-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.editor-item.selected {
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
}

.editor-item-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: auto;
}

.editor-item-name {
  font-family: 'Press Start 2P', monospace;
  max-width: 100%;
  overflow: hidden;
  font-size: 6px;
  line-height: 1.35;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e0e0e0;
}

.editor-scale-section,
.editor-rotation-section {
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.editor-rotation-section {
  display: grid;
  gap: 8px;
}

.editor-rotation-slider {
  background: linear-gradient(90deg, rgba(56,189,248,.28), rgba(168,85,247,.35));
}

.editor-rotation-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.editor-rotation-quick button {
  padding: 7px 5px;
  border: 1px solid rgba(56,189,248,.2);
  border-radius: 7px;
  color: #bae6fd;
  background: rgba(14,116,144,.12);
  font: 700 6px/1 'Press Start 2P', monospace;
  cursor: pointer;
  transition: .18s ease;
}

.editor-rotation-quick button:hover {
  border-color: rgba(56,189,248,.55);
  color: #fff;
  background: rgba(14,116,144,.28);
}

.editor-object-settings {
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 12px;
  background: rgba(3,15,22,.72);
}

.editor-collision-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.editor-collision-row > span {
  display: grid;
  gap: 5px;
}

.editor-collision-row small {
  max-width: 330px;
  overflow: hidden;
  color: #67e8f9;
  font: 700 6px/1.35 'Press Start 2P', monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-collision-row strong {
  color: #f8fafc;
  font: 700 9px/1.2 'Press Start 2P', monospace;
}

.editor-object-settings p {
  margin: 9px 0 0;
  color: #94a3b8;
  font: 600 11px/1.4 Arial, sans-serif;
}

.editor-object-settings p.is-visual-only {
  color: #7dd3fc;
}

.editor-switch {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 28px;
  cursor: pointer;
}

.editor-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.editor-switch i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(148,163,184,.3);
  border-radius: 999px;
  background: #17202b;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
  transition: .2s ease;
}

.editor-switch i::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: .2s ease;
}

.editor-switch input:checked + i {
  border-color: rgba(74,222,128,.65);
  background: rgba(22,163,74,.45);
  box-shadow: 0 0 15px rgba(34,197,94,.22);
}

.editor-switch input:checked + i::after {
  left: 30px;
  background: #4ade80;
}

.editor-switch input:disabled + i {
  cursor: not-allowed;
  opacity: .78;
  box-shadow: 0 0 18px rgba(239,68,68,.24);
}

@media (max-width: 680px) {
  #editorToolbar {
    right: 10px;
    width: calc(100vw - 20px);
  }

  .editor-toolbar-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.editor-scale-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #facc15;
  display: block;
  margin-bottom: 6px;
}

.editor-scale-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.15);
  outline: none;
}

.editor-scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #facc15;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(250,204,21,0.5);
}

.editor-scale-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #facc15;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 6px rgba(250,204,21,0.5);
}

.editor-toolbar-actions {
  display: flex;
  gap: 8px;
}

.editor-action-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.editor-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.editor-save-btn {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.editor-save-btn:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* Editor Custom Cursor */
#editorCustomCursor {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  display: none;
  transform: translate(-50%, -50%);
  opacity: 0.85;
}

#editorCustomCursor img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

/* Drop Log */
#dropLog {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: min(520px, calc(100vw - 32px));
  pointer-events: none;
  transition: top 0.2s ease;
}

.storage-egg-sealed {
  padding: 12px 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid rgba(244,114,182,0.25);
  border-radius: 9px;
  background: rgba(131,24,67,0.1);
  text-align: center;
}
.storage-egg-sealed b { color: #f9a8d4; font-size: 0.52rem; letter-spacing: 0.06em; }
.storage-egg-sealed span { color: #95889e; font-size: 0.57rem; line-height: 1.45; }

body:has(#activeEffectsHud.is-visible) #dropLog {
  top: 78px;
}

.drop-log-entry {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(9, 20, 17, 0.96), rgba(7, 12, 20, 0.96));
  color: #fde68a;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.45;
  padding: 10px 18px 10px 20px;
  border: 1px solid rgba(74, 222, 128, 0.48);
  border-radius: 12px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(34, 197, 94, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  transform-origin: top center;
  animation: dropLogEnter 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.drop-log-entry::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, #86efac, #22c55e);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
}

@keyframes dropLogEnter {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.drop-log-entry.fade-out {
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
}

@media (max-width: 700px) {
  #dropLog {
    top: 12px;
    width: calc(100vw - 24px);
  }

  body:has(#activeEffectsHud.is-visible) #dropLog {
    top: 72px;
  }

  .drop-log-entry {
    font-size: 7px;
    padding: 9px 13px 9px 16px;
  }
}

/* Hunt Analyzer */
#huntAnalyzerToggle {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 37;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(56, 189, 248, 0.48);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(9, 24, 39, 0.96), rgba(7, 13, 24, 0.96));
  color: #e0f2fe;
  box-shadow: 0 10px 30px rgba(0,0,0,0.48), 0 0 16px rgba(14,165,233,0.14);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  cursor: pointer;
}

#huntAnalyzerToggle[hidden],
#huntAnalyzerPanel[hidden] { display: none; }

.hunt-analyzer-toggle-mark,
.hunt-analyzer-heading-mark {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 17%, #38bdf8 17% 32%, transparent 32% 42%, #a78bfa 42% 59%, transparent 59% 69%, #4ade80 69% 88%, transparent 88%),
    linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.28);
}

#huntAnalyzerPanel {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 37;
  width: min(390px, calc(100vw - 28px));
  max-height: calc(100vh - 92px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(11, 19, 32, 0.98), rgba(6, 11, 20, 0.98));
  box-shadow:
    0 18px 52px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.025) inset,
    0 0 24px rgba(14,165,233,0.08);
  backdrop-filter: blur(13px);
  color: #e2e8f0;
  animation: huntAnalyzerEnter 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#huntAnalyzerPanel.is-dragging {
  user-select: none;
  box-shadow: 0 22px 60px rgba(0,0,0,0.75), 0 0 28px rgba(56,189,248,0.16);
}

@keyframes huntAnalyzerEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#huntAnalyzerHeader {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px 9px 13px;
  border-bottom: 1px solid rgba(148,163,184,0.13);
  background: linear-gradient(90deg, rgba(14,165,233,0.09), transparent 60%);
  cursor: move;
  touch-action: none;
  flex-shrink: 0;
}

.hunt-analyzer-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.hunt-analyzer-heading-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.hunt-analyzer-heading h3 {
  margin: 0;
  color: #f8fafc;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.3;
}

.hunt-analyzer-heading small {
  display: block;
  max-width: 190px;
  margin-top: 3px;
  overflow: hidden;
  color: #64748b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hunt-analyzer-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hunt-analyzer-actions button {
  height: 28px;
  min-width: 28px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 7px;
  background: rgba(148,163,184,0.07);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

#huntAnalyzerReset { font-size: 8px; }
#huntAnalyzerReset:hover { border-color: rgba(250,204,21,0.45); color: #fde68a; }
#huntAnalyzerCollapse:hover { border-color: rgba(56,189,248,0.42); color: #bae6fd; }
#huntAnalyzerClose:hover { border-color: rgba(248,113,113,0.48); color: #fca5a5; background: rgba(239,68,68,0.12); }

#huntAnalyzerBody {
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.22) transparent;
}

#huntAnalyzerBody::-webkit-scrollbar { width: 5px; }
#huntAnalyzerBody::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.24); border-radius: 9px; }
#huntAnalyzerPanel.is-collapsed #huntAnalyzerBody { display: none; }
#huntAnalyzerPanel.is-collapsed { width: min(390px, calc(100vw - 28px)); }

.hunt-analyzer-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.hunt-analyzer-summary-card {
  min-width: 0;
  min-height: 57px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid rgba(96,165,250,0.16);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(15,28,46,0.72), rgba(8,15,27,0.72));
}

.hunt-analyzer-card-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #e0f2fe;
  background: rgba(56,189,248,0.1);
  font: 900 8px ui-monospace, SFMono-Regular, Consolas, monospace;
  box-shadow: inset 0 0 10px rgba(56,189,248,0.1);
}

.hunt-analyzer-card-icon.is-combat { color: #fecaca; background: rgba(239,68,68,0.11); }
.hunt-analyzer-card-icon.is-time { color: #e2e8f0; background: rgba(148,163,184,0.11); }
.hunt-analyzer-card-icon.is-exp { color: #fde68a; background: rgba(250,204,21,0.11); }
.hunt-analyzer-card-icon.is-loot { color: #86efac; background: rgba(34,197,94,0.11); font-size: 13px; }
.hunt-analyzer-card-icon.is-supply { color: #fca5a5; background: rgba(239,68,68,0.11); font-size: 13px; }
.hunt-analyzer-card-icon.is-rate { color: #c4b5fd; background: rgba(139,92,246,0.11); }

.hunt-analyzer-summary-card div { min-width: 0; }
.hunt-analyzer-summary-card strong {
  display: block;
  overflow: hidden;
  color: #f8fafc;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hunt-analyzer-summary-card small { display: block; margin-top: 3px; color: #64748b; font-size: 9px; }

.hunt-analyzer-balance {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 11px;
  background: rgba(148,163,184,0.06);
}

.hunt-analyzer-balance div { display: flex; flex-direction: column; gap: 3px; }
.hunt-analyzer-balance small { color: #94a3b8; font-size: 9px; font-weight: 700; }
.hunt-analyzer-balance strong { font-family: 'Press Start 2P', monospace; font-size: 13px; }
.hunt-analyzer-balance > span { padding: 4px 7px; border-radius: 6px; font: 800 10px ui-monospace, monospace; }
.hunt-analyzer-balance.is-profit { border-color: rgba(74,222,128,0.4); background: rgba(34,197,94,0.1); }
.hunt-analyzer-balance.is-profit strong, .hunt-analyzer-balance.is-profit > span { color: #4ade80; }
.hunt-analyzer-balance.is-loss { border-color: rgba(248,113,113,0.42); background: rgba(239,68,68,0.1); }
.hunt-analyzer-balance.is-loss strong, .hunt-analyzer-balance.is-loss > span { color: #f87171; }
.hunt-analyzer-balance.is-neutral strong, .hunt-analyzer-balance.is-neutral > span { color: #cbd5e1; }

.hunt-analyzer-section { margin-top: 12px; }
.hunt-analyzer-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 6px;
  border-bottom: 1px solid rgba(148,163,184,0.12);
}
.hunt-analyzer-section-title span { color: #94a3b8; font-family: 'Press Start 2P', monospace; font-size: 7px; text-transform: uppercase; }
.hunt-analyzer-section-title small { color: #475569; font-size: 8px; }
.hunt-analyzer-list { display: flex; flex-direction: column; }

.hunt-analyzer-row {
  min-height: 41px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 3px;
  border-bottom: 1px solid rgba(148,163,184,0.08);
}
.hunt-analyzer-row:last-child { border-bottom: 0; }
.hunt-analyzer-row > img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.hunt-analyzer-row-badge {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 8px;
  color: #7dd3fc;
  background: rgba(56,189,248,0.08);
  font: 900 9px ui-monospace, monospace;
}
.hunt-analyzer-row-main { min-width: 0; flex: 1; }
.hunt-analyzer-row-main > div { display: flex; align-items: baseline; gap: 6px; }
.hunt-analyzer-row-main strong { display: block; overflow: hidden; color: #dbeafe; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hunt-analyzer-row-main small { display: block; margin-top: 2px; color: #64748b; font-size: 8px; white-space: nowrap; }
.hunt-analyzer-row > b { flex: 0 0 auto; color: #4ade80; font: 800 9px ui-monospace, monospace; white-space: nowrap; }
.hunt-analyzer-item-row.is-supply > b { color: #f87171; }
.hunt-analyzer-row-quantity { color: #94a3b8; font: 700 9px ui-monospace, monospace; white-space: nowrap; }
.hunt-analyzer-mini-track { display: block; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: rgba(148,163,184,0.1); }
.hunt-analyzer-mini-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #8b5cf6); box-shadow: 0 0 6px rgba(56,189,248,0.45); }
.hunt-analyzer-empty { padding: 13px 6px 8px; color: #475569; font-size: 9px; text-align: center; }

@media (max-width: 700px) {
  #huntAnalyzerPanel {
    right: 10px;
    bottom: 68px;
    width: min(370px, calc(100vw - 20px));
    max-height: calc(100vh - 82px);
  }
  #huntAnalyzerToggle { right: 10px; bottom: 68px; }
  .hunt-analyzer-heading small { max-width: 145px; }
  .hunt-analyzer-summary-card { min-height: 52px; padding: 7px; gap: 7px; }
  .hunt-analyzer-summary-card strong { font-size: 8px; }
}

/* Automation HUD */
#autoHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(2, 3, 10, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

#autoHudPanel {
  width: min(620px, 96vw);
  max-height: min(780px, 92vh);
  background: linear-gradient(135deg, rgba(20, 25, 35, 0.95) 0%, rgba(15, 20, 30, 0.95) 100%);
  border: 1.5px solid rgba(34, 197, 94, 0.25);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  animation: hudSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
  display: flex;
  flex-direction: column;
}

#autoHudHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.10) 0%, transparent 60%);
}

#autoHudTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #22c55e;
  letter-spacing: 1px;
}

#autoHudClose {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

#autoHudClose:hover {
  background: rgba(255, 80, 80, 0.2);
  color: #fca5a5;
}

#autoHudBody {
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 197, 94, 0.35) transparent;
}

.auto-section {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: rgba(5, 10, 19, 0.42);
}

.auto-section + .auto-section {
  margin-top: 14px;
}

.auto-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.auto-section-heading h4 {
  margin: 3px 0 0;
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.2;
}

.auto-section-kicker {
  display: block;
  color: #22c55e;
  font: 700 8px 'Press Start 2P', monospace;
  letter-spacing: 1px;
}

.auto-section-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 9px;
  background: rgba(34, 197, 94, 0.08);
  color: #4ade80;
  font: 800 19px/1 sans-serif;
}

.auto-capture-icon::before {
  content: '';
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 -5px 0 rgba(74, 222, 128, 0.2);
}

.auto-section-description {
  margin: -3px 0 13px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.55;
}

.auto-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.auto-row:last-child {
  margin-bottom: 0;
}

.auto-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
}

.auto-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #22c55e;
  cursor: pointer;
}

.auto-label {
  color: #94a3b8;
  font-size: 11px;
  white-space: nowrap;
  min-width: fit-content;
}

.auto-select {
  flex: 1;
  background: rgba(15, 20, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #e2e8f0;
  padding: 6px 10px;
  font-size: 11px;
  outline: none;
  cursor: pointer;
}

.auto-select:focus {
  border-color: rgba(34, 197, 94, 0.5);
}

.auto-range {
  flex: 1;
  accent-color: #22c55e;
  cursor: pointer;
}

.auto-range-val {
  color: #22c55e;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  min-width: 36px;
  text-align: right;
}

.auto-info {
  color: #64748b;
  font-size: 10px;
  font-family: 'Press Start 2P', monospace;
}

#autoHealConfig,
#autoHealThresholdRow {
  display: none;
}

#autoHealConfig.active,
#autoHealThresholdRow.active {
  display: flex;
}

.auto-capture-card {
  --auto-accent: #94a3b8;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--auto-accent) 24%, transparent);
  border-radius: 12px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--auto-accent) 7%, transparent), rgba(2, 6, 13, 0.34) 58%);
  transition: border-color 0.18s, box-shadow 0.18s, opacity 0.18s;
}

.auto-capture-card + .auto-capture-card { margin-top: 10px; }
.auto-capture-card.auto-capture-shiny { --auto-accent: #facc15; }
.auto-capture-card.auto-capture-ultra { --auto-accent: #c084fc; }

.auto-capture-card.is-enabled {
  border-color: color-mix(in srgb, var(--auto-accent) 52%, transparent);
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--auto-accent) 5%, transparent);
}

.auto-capture-card-head,
.auto-capture-title-group {
  display: flex;
  align-items: center;
}

.auto-capture-card-head {
  justify-content: space-between;
  gap: 12px;
}

.auto-capture-title-group { gap: 10px; min-width: 0; }

.auto-capture-title-group > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.auto-capture-title-group strong { color: #e5e7eb; font-size: 11px; }
.auto-capture-title-group small { color: #64748b; font-size: 9px; }

.auto-capture-mark {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--auto-accent) 38%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--auto-accent) 10%, transparent);
  color: var(--auto-accent);
  font: 700 9px 'Press Start 2P', monospace;
}

.auto-switch { position: relative; flex: 0 0 36px; width: 36px; height: 20px; cursor: pointer; }
.auto-switch input { position: absolute; opacity: 0; pointer-events: none; }
.auto-switch span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 99px;
  background: #111827;
  transition: 0.18s;
}
.auto-switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #64748b;
  transition: 0.18s;
}
.auto-switch input:checked + span {
  border-color: color-mix(in srgb, var(--auto-accent) 62%, transparent);
  background: color-mix(in srgb, var(--auto-accent) 18%, #111827);
}
.auto-switch input:checked + span::after {
  left: 19px;
  background: var(--auto-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--auto-accent) 58%, transparent);
}

.auto-capture-config {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
}

.auto-capture-card.is-enabled .auto-capture-config { display: grid; }
.auto-capture-shiny .auto-capture-config,
.auto-capture-ultra .auto-capture-config { grid-template-columns: 1fr; }

.auto-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.auto-field > span {
  color: #94a3b8;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}
.auto-field .auto-select { width: 100%; min-width: 0; }

.auto-capture-status {
  display: block;
  margin-top: 9px;
  color: #64748b;
  font: 700 7px 'Press Start 2P', monospace;
  line-height: 1.45;
}
.auto-capture-card.is-enabled .auto-capture-status { color: var(--auto-accent); }

@media (max-width: 560px) {
  #autoHudOverlay { padding: 10px; }
  #autoHudPanel { max-height: 94vh; }
  #autoHudBody { padding: 11px; }
  .auto-section { padding: 11px; }
  .auto-capture-config { grid-template-columns: 1fr; }
  .auto-capture-title-group small { white-space: normal; }
}

/* ══════════════════════════════════════════════════
   SHOP HUD v2 — PROFESSIONAL REDESIGN
   ══════════════════════════════════════════════════ */

#shopHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(2, 3, 10, 0.88);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#shopHudPanel {
  width: min(680px, 96vw);
  height: min(620px, 88vh);
  background: linear-gradient(155deg, rgba(18, 22, 36, 0.995) 0%, rgba(10, 13, 24, 0.995) 100%);
  border: 2px solid rgba(234, 179, 8, 0.22);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: hudSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
#shopHudHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(234, 179, 8, 0.12);
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.10) 0%, transparent 55%);
  flex-shrink: 0;
  min-width: 0;
}

#shopHudTitleGroup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#shopHudTitleIcon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.35));
}

#shopHudTitleText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#shopHudTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  color: #facc15;
  letter-spacing: 2.5px;
  text-shadow: 0 0 14px rgba(234, 179, 8, 0.3);
}

#shopHudSubtitle {
  font-size: 0.6rem;
  color: rgba(148, 163, 184, 0.6);
  margin-top: 1px;
  letter-spacing: 0.5px;
}

#shopHudHeaderRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#shopHudMoneyDisplay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 10px;
  background: rgba(234, 179, 8, 0.10);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.5px;
  color: #facc15;
}

#shopHudMoneyLabel {
  font-size: 0.85rem;
  line-height: 1;
}

#shopHudMoneyValue {
  color: #fef08a;
  font-weight: normal;
}

#shopHudClose {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
  flex-shrink: 0;
}

#shopHudClose:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

/* ── Tabs ── */
#shopTabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.shop-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0 12px;
  position: relative;
}

.shop-tab:hover {
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.03);
}

.shop-tab.is-active {
  color: #facc15;
  border-bottom-color: #facc15;
  background: rgba(234, 179, 8, 0.06);
}

.shop-tab-icon {
  font-size: 16px;
  line-height: 1;
}

.shop-tab-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.shop-tab-sub {
  display: none;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.3);
  margin-left: 2px;
}

@media (min-width: 580px) {
  .shop-tab-sub {
    display: inline;
  }
}

/* ── Toolbar (Search + Category Filters) ── */
#shopToolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

#shopSearchWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

#shopSearchWrap:focus-within {
  border-color: rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.04);
}

#shopSearchIcon {
  font-size: 13px;
  opacity: 0.5;
  flex-shrink: 0;
}

#shopSearchInput {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #e2e8f0;
  font-size: 0.78rem;
  font-family: inherit;
}

#shopSearchInput::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

#shopSearchClear {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#shopSearchClear:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

#shopCategoryFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.shop-cat-btn {
  padding: 4px 10px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(148, 163, 184, 0.7);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.shop-cat-btn:hover {
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.2);
}

.shop-cat-btn.is-active {
  color: #facc15;
  border-color: rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.10);
}

/* ── Body ── */
#shopHudBody {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  padding: 14px;
  gap: 14px;
}

/* ── Panes (Buy / Sell) ── */
.shop-pane {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
  gap: 4px;
  padding-right: 2px;
}

.shop-pane::-webkit-scrollbar { width: 5px; }
.shop-pane::-webkit-scrollbar-track { background: transparent; }
.shop-pane::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 4px; }

.shop-pane.is-active {
  display: flex;
}

/* ── Sell Header ── */
#shopSellHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
  flex-shrink: 0;
}

#shopSellTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48rem;
  color: rgba(148, 163, 184, 0.7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#shopSellCount {
  font-size: 0.65rem;
  color: rgba(148, 163, 184, 0.5);
}

/* ── Empty state ── */
.shop-empty-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.20);
  font-size: 0.7rem;
  line-height: 1.6;
}

.shop-empty-icon {
  font-size: 36px;
  opacity: 0.3;
}

/* ── Item Cards - Buy ── */
#shopItemsList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-item-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  color: #e2e8f0;
  font-family: inherit;
  min-height: 58px;
}

.shop-item-card:hover {
  background: rgba(234, 179, 8, 0.07);
  border-color: rgba(234, 179, 8, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.shop-item-card:active {
  transform: translateY(0);
}

.shop-item-card.cant-afford {
  opacity: 0.45;
}

.shop-item-card.cant-afford:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.18);
  box-shadow: none;
}

.shop-item-card.is-selected {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.10);
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.18);
}

.shop-item-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.shop-item-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.shop-item-rarity-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
}

.shop-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.shop-item-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-item-rarity-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.38rem;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  line-height: 1.3;
  text-transform: uppercase;
}

.shop-item-rarity-tag.common { color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }
.shop-item-rarity-tag.uncommon { color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.shop-item-rarity-tag.rare { color: #a78bfa; border: 1px solid rgba(167,139,250,0.35); }
.shop-item-rarity-tag.epic { color: #fbbf24; border: 1px solid rgba(251,191,36,0.35); }
.shop-item-rarity-tag.legendary { color: #fb923c; border: 1px solid rgba(251,146,60,0.4); box-shadow: 0 0 8px rgba(251,146,60,0.15); }
.shop-item-rarity-tag.mythic { color: #f472b6; border: 1px solid rgba(244,114,182,0.45); box-shadow: 0 0 8px rgba(244,114,182,0.18); }

.shop-item-desc {
  font-size: 0.65rem;
  color: rgba(148, 163, 184, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-item-price {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.52rem;
  color: #facc15;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 8px;
}

.shop-sell-price {
  color: #86efac !important;
}

/* ── Item Cards - Sell ── */
#shopSellList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#shopSellList .shop-item-card {
  grid-template-columns: 48px 1fr auto;
}

.shop-item-qty-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  color: rgba(148, 163, 184, 0.6);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: 5px;
  margin-left: 6px;
}

.shop-item-qty-badge span {
  font-weight: 700;
  color: #86efac;
}

/* ── Transaction Panel ── */
#shopTxPanel {
  width: 260px;
  flex-shrink: 0;
  background: rgba(234, 179, 8, 0.04);
  border: 1px solid rgba(234, 179, 8, 0.15);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow-y: auto;
  animation: txPanelIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes txPanelIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.shop-tx-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.12s;
}

.shop-tx-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

#shopTxIconWrap {
  width: 80px;
  height: 80px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

#shopTxIcon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

#shopTxRarityBadge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.38rem;
  letter-spacing: 0.4px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid;
}

#shopTxInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

#shopTxItemName {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f1f5f9;
}

#shopTxItemDesc {
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.7);
  line-height: 1.4;
}

#shopTxDetails {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shop-tx-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-tx-detail-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.shop-tx-detail-value {
  font-size: 0.7rem;
  font-weight: 700;
  color: #e2e8f0;
  text-transform: capitalize;
}

.shop-tx-detail-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.shop-tx-total-row {
  margin-top: 4px;
}

#shopTxTotal {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #facc15;
  font-weight: 700;
}

#shopTxQtyControls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shop-qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  font-family: inherit;
  line-height: 1;
}

.shop-qty-btn:hover {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.35);
  color: #facc15;
}

#shopTxQuantity {
  width: 52px;
  height: 28px;
  background: rgba(10, 14, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #e2e8f0;
  padding: 0 4px;
  font-size: 0.72rem;
  outline: none;
  font-family: inherit;
  text-align: center;
}

#shopTxQuantity:focus {
  border-color: rgba(234, 179, 8, 0.4);
}

#shopTxStatus {
  font-size: 0.65rem;
  font-weight: 600;
  min-height: 18px;
  text-align: center;
  line-height: 1.3;
}

#shopTxConfirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
  border: none;
  border-radius: 10px;
  color: #1a1a2e;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.52rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: auto;
}

#shopTxConfirm:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.35);
}

#shopTxConfirm:active:not(:disabled) {
  transform: translateY(0);
}

#shopTxConfirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#shopTxSellAll {
  min-height: 38px;
  margin-top: auto;
  padding: 8px 16px;
  border: 1px solid rgba(248, 113, 113, 0.6);
  border-radius: 10px;
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s;
}

#shopTxSellAll:hover:not(:disabled) {
  border-color: #f87171;
  background: rgba(185, 28, 28, 0.5);
  transform: translateY(-1px);
}

#shopTxSellAll:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#shopTxSellAll:not([hidden]) + #shopTxConfirm {
  margin-top: 8px;
}

#shopTxConfirmIcon {
  font-size: 0.7rem;
  transition: transform 0.15s;
}

#shopTxConfirm:hover:not(:disabled) #shopTxConfirmIcon {
  transform: translateX(3px);
}

/* ── Footer ── */
#shopHudFooter {
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  text-align: center;
}

#shopHudFooterNote {
  font-size: 0.55rem;
  color: rgba(148, 163, 184, 0.35);
  letter-spacing: 0.3px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  #shopHudOverlay { padding: 8px; }

  #shopHudPanel {
    width: 100%;
    height: min(560px, 92vh);
    border-radius: 14px;
  }

  #shopHudBody {
    flex-direction: column;
    padding: 10px;
    gap: 10px;
  }

  #shopTxPanel {
    width: 100%;
    max-height: 220px;
    flex-shrink: 0;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px;
    order: -1;
  }

  #shopTxIconWrap { display: none; }
  #shopTxInfo { flex: 1; text-align: left; min-width: 0; }
  #shopTxItemName { font-size: 0.82rem; }
  #shopTxItemDesc { font-size: 0.62rem; }

  #shopTxDetails {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .shop-tx-detail-row { flex: 1; min-width: 100px; }
  .shop-tx-detail-divider { display: none; }
  .shop-tx-total-row { flex: 0 0 auto; }

  #shopTxConfirm { width: 100%; margin-top: 4px; }
  #shopTxStatus { width: 100%; }

  .shop-item-card { min-height: 50px; padding: 8px 10px; gap: 8px; }
  #shopToolbar { padding: 8px 10px; gap: 6px; }
  .shop-tab { height: 38px; }
  .shop-tab-label { font-size: 0.48rem; }
}

/* ── Global Chat Window ── */
#chatWindow {
  position: absolute;
  left: 16px;
  bottom: 80px;
  z-index: 25;
  width: 280px;
  height: 220px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.14);
  background: rgba(12, 17, 24, 0.88);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

#chatWindow.hidden {
  display: none;
}

#chatWindow.park-chat-mode {
  border-color: rgba(45, 212, 191, 0.48);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48), 0 0 22px rgba(20, 184, 166, 0.13);
}

#chatWindow.park-chat-mode #chatHeader {
  background: linear-gradient(110deg, rgba(6, 78, 72, 0.94), rgba(9, 32, 37, 0.94));
  border-bottom-color: rgba(94, 234, 212, 0.24);
}

#chatWindow.park-chat-mode #chatTitle {
  color: #99f6e4;
}

#chatWindow.park-chat-mode #chatRoomBtn:disabled {
  border-color: rgba(94, 234, 212, 0.28);
  background: rgba(13, 148, 136, 0.18);
  color: #5eead4;
  cursor: default;
}

/* ── Chat Room Selector ── */
#chatRoomBtn {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(40, 50, 65, 0.7);
  color: #93c5fd;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#chatRoomBtn:hover {
  background: rgba(59, 130, 246, 0.3);
}

#chatRoomList {
  display: none;
  flex-direction: column;
  max-height: 180px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

#chatRoomList.open {
  display: flex;
}

#chatRoomList::-webkit-scrollbar {
  width: 4px;
}

#chatRoomList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}

.chat-room-item {
  padding: 6px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.chat-room-item:hover {
  background: rgba(59, 130, 246, 0.12);
  color: #e2e8f0;
}

.chat-room-item.active {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.18);
}

/* ── Chat Bubble (minimized) ── */
#chatBubble {
  position: absolute;
  left: 16px;
  bottom: 80px;
  z-index: 25;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.45);
  background: rgba(12, 17, 24, 0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

#chatBubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

#chatBubble.visible {
  display: flex;
}

#chatBubbleIcon {
  font-size: 20px;
  color: #93c5fd;
  line-height: 1;
}

#chatBubbleBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}

#chatBubbleBadge.visible {
  display: flex;
}

#chatHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(30, 38, 50, 0.9);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  cursor: grab;
}

#chatHeader:active {
  cursor: grabbing;
}

#chatTitle {
  font-size: 0.72rem;
  font-weight: 700;
  color: #93c5fd;
  flex: 1;
}

#chatOnlineCount {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 600;
}

#chatToggleBtn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(40, 50, 65, 0.7);
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chatToggleBtn:hover {
  background: rgba(60, 70, 85, 0.9);
  color: #e2e8f0;
}

#chatBody {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#chatBody::-webkit-scrollbar {
  width: 4px;
}

#chatBody::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}

#chatMessages {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
}

.chat-msg {
  font-size: 0.68rem;
  line-height: 1.35;
  word-break: break-word;
}

.chat-msg .chat-user {
  font-weight: 700;
  color: #93c5fd;
}

.chat-msg .chat-level {
  font-size: 0.58rem;
  font-weight: 700;
  color: #22c55e;
  margin-left: 3px;
  vertical-align: middle;
}

.chat-msg .chat-text {
  color: #cbd5e1;
}

.chat-msg-system {
  color: #64748b;
  font-style: italic;
  font-size: 0.62rem;
  text-align: center;
  padding: 2px 0;
}

.chat-msg-ultra-capture {
  position: relative;
  margin: 5px 2px;
  padding: 7px 8px;
  border: 1px solid rgba(250, 204, 21, 0.46);
  border-radius: 8px;
  color: #fde68a;
  background:
    linear-gradient(110deg, rgba(113, 63, 18, 0.34), rgba(88, 28, 135, 0.22)),
    rgba(15, 23, 42, 0.88);
  box-shadow: inset 0 0 12px rgba(250, 204, 21, 0.08), 0 0 12px rgba(168, 85, 247, 0.12);
  animation: ultraChatPulse 1.3s ease-in-out infinite alternate;
}
.chat-ultra-badge {
  display: inline-flex;
  margin-right: 5px;
  padding: 2px 4px;
  border-radius: 4px;
  color: #1c1917;
  background: linear-gradient(135deg, #fef08a, #f59e0b);
  font: 0.42rem/1 "Press Start 2P", monospace;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}
.chat-msg-ultra-capture .chat-ultra-user,
.chat-msg-ultra-capture .chat-ultra-text {
  color: #fde68a;
  text-shadow: 0 0 7px rgba(250, 204, 21, 0.44);
}
@keyframes ultraChatPulse {
  from { border-color: rgba(250, 204, 21, 0.34); }
  to { border-color: rgba(250, 204, 21, 0.78); }
}

.chat-msg-shared-asset {
  display: block;
  padding: 3px 0;
}
.chat-asset-link {
  appearance: none;
  margin: 0;
  padding: 1px 3px;
  border: 0;
  color: #7dd3fc;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 0 7px rgba(56, 189, 248, .38);
  cursor: help;
}
.chat-asset-link:hover,
.chat-asset-link:focus-visible {
  color: #e0f2fe;
  outline: 1px solid rgba(56, 189, 248, .45);
  border-radius: 3px;
  background: rgba(14, 116, 144, .18);
}
.chat-asset-link.is-equipment { color: #fbbf24; text-shadow: 0 0 7px rgba(251, 191, 36, .4); }
.chat-asset-link.is-shiny { color: #fde047; text-shadow: 0 0 8px rgba(250, 204, 21, .58); }
.chat-asset-link.is-ultra {
  color: #f0abfc;
  text-shadow: 0 0 9px rgba(217, 70, 239, .72);
  animation: chatAssetUltra 1.2s ease-in-out infinite alternate;
}
@keyframes chatAssetUltra {
  to { color: #fde68a; text-shadow: 0 0 12px rgba(250, 204, 21, .75); }
}

.chat-share-tooltip {
  --share-accent: #38bdf8;
  position: fixed;
  z-index: 40000;
  width: min(320px, calc(100vw - 20px));
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(.97);
  border: 1px solid color-mix(in srgb, var(--share-accent) 42%, transparent);
  border-radius: 12px;
  color: #dbeafe;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--share-accent) 9%, transparent), transparent 50%),
    rgba(3, 15, 20, .98);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .68), 0 0 22px color-mix(in srgb, var(--share-accent) 14%, transparent);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.chat-share-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.chat-share-tooltip.is-equipment { --share-accent: #f59e0b; }
.chat-share-tooltip.is-shiny { --share-accent: #facc15; }
.chat-share-tooltip.is-ultra { --share-accent: #d946ef; }
.chat-share-tooltip-header {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 11px;
}
.chat-share-tooltip-portrait {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--share-accent) 36%, transparent);
  border-radius: 10px;
  background: rgba(2, 6, 23, .72);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--share-accent) 8%, transparent);
}
.chat-share-tooltip-portrait img {
  width: 64px;
  height: 64px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--share-accent) 48%, transparent));
}
.chat-share-tooltip-portrait i {
  display: none;
  place-items: center;
  color: var(--share-accent);
  font: .8rem/1 "Press Start 2P", monospace;
}
.chat-share-tooltip-header > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chat-share-tooltip-header small {
  color: var(--share-accent);
  font: .44rem/1.2 "Press Start 2P", monospace;
  text-transform: uppercase;
}
.chat-share-tooltip-header strong {
  overflow: hidden;
  color: #f8fafc;
  font: .72rem/1.35 "Press Start 2P", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-share-tooltip-header em {
  color: #94a3b8;
  font-size: .68rem;
  font-style: normal;
  text-transform: capitalize;
}
.chat-share-tooltip-elements {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}
.chat-share-tooltip-elements span,
.chat-share-tooltip-details span {
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--share-accent) 28%, transparent);
  border-radius: 5px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, .035);
  font-size: .56rem;
  font-weight: 800;
  text-transform: uppercase;
}
.chat-share-tooltip-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.chat-share-tooltip-stat {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .035);
}
.chat-share-tooltip-stat small {
  overflow: hidden;
  color: #64748b;
  font-size: .52rem;
  text-overflow: ellipsis;
}
.chat-share-tooltip-stat b {
  color: #f8fafc;
  font-size: .62rem;
}
.chat-share-tooltip-stat i {
  color: var(--share-accent);
  font: .46rem/1 "Press Start 2P", monospace;
  font-style: normal;
}
.chat-share-tooltip > p {
  margin: 10px 2px 3px;
  color: #aebdca;
  font-size: .66rem;
  line-height: 1.55;
}
.chat-share-tooltip-details {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.global-capture-announcement {
  --capture-accent: #67e8f9;
  --capture-accent-rgb: 103, 232, 249;
  position: fixed;
  z-index: 30000;
  inset: 0;
  display: grid;
  place-items: start center;
  padding-top: clamp(76px, 9vh, 132px);
  pointer-events: none;
  visibility: hidden;
}
.global-capture-announcement.is-shiny {
  --capture-accent: #facc15;
  --capture-accent-rgb: 250, 204, 21;
}
.global-capture-announcement.is-ultra {
  --capture-accent: #f0abfc;
  --capture-accent-rgb: 240, 171, 252;
}
.global-capture-announcement.is-visible,
.global-capture-announcement.is-leaving {
  visibility: visible;
}
.global-capture-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 22%, rgba(var(--capture-accent-rgb), .27), transparent 43%);
}
.global-capture-announcement.is-ultra.is-visible .global-capture-flash {
  animation: globalUltraFlash 1.15s ease-out both;
}
.global-capture-card {
  position: relative;
  width: min(620px, calc(100vw - 30px));
  min-height: 154px;
  display: grid;
  grid-template-columns: 155px 1fr;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-42px) scale(.88);
  border: 1px solid rgba(var(--capture-accent-rgb), .68);
  border-radius: 18px;
  background:
    linear-gradient(112deg, rgba(var(--capture-accent-rgb), .11), transparent 43%),
    radial-gradient(circle at 18% 50%, rgba(var(--capture-accent-rgb), .16), transparent 31%),
    rgba(2, 13, 13, .96);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, .62),
    0 0 32px rgba(var(--capture-accent-rgb), .22),
    inset 0 0 32px rgba(var(--capture-accent-rgb), .06);
}
.global-capture-announcement.is-visible .global-capture-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .34s ease, transform .48s cubic-bezier(.16, 1.3, .36, 1);
}
.global-capture-announcement.is-ultra.is-visible .global-capture-card {
  animation: globalUltraImpact .62s cubic-bezier(.16, 1.4, .36, 1) both, globalUltraGlow 1.1s .62s ease-in-out infinite alternate;
}
.global-capture-announcement.is-leaving .global-capture-card {
  opacity: 0;
  transform: translateY(-20px) scale(.96);
  transition: opacity .38s ease, transform .38s ease;
}
.global-capture-rarity {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 13px 8px 18px;
  border-bottom-left-radius: 12px;
  color: #071312;
  background: linear-gradient(135deg, #fff, var(--capture-accent));
  font: .48rem/1 "Press Start 2P", monospace;
  letter-spacing: .5px;
  box-shadow: 0 0 16px rgba(var(--capture-accent-rgb), .5);
}
.global-capture-sprite-stage {
  position: relative;
  width: 126px;
  height: 126px;
  margin-left: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--capture-accent-rgb), .18), rgba(0, 0, 0, .18) 58%, transparent 60%);
}
.global-capture-orbit {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(var(--capture-accent-rgb), .36);
  border-radius: 50%;
  animation: globalCaptureOrbit 4s linear infinite;
}
.global-capture-orbit::before,
.global-capture-orbit::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--capture-accent);
  box-shadow: 0 0 10px var(--capture-accent);
  transform: rotate(45deg);
}
.global-capture-orbit::before { top: 6px; left: 18px; }
.global-capture-orbit::after { right: 10px; bottom: 15px; }
.global-capture-orbit.orbit-two {
  inset: 17px;
  animation-direction: reverse;
  animation-duration: 2.8s;
  opacity: .62;
}
.global-capture-sprite,
.global-capture-sprite-fallback {
  position: relative;
  z-index: 2;
  width: 104px;
  height: 104px;
}
.global-capture-sprite {
  display: block;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 14px rgba(var(--capture-accent-rgb), .7));
}
.global-capture-sprite.is-frame-changing {
  animation: globalCaptureSpriteTurn .32s ease-out;
}
.global-capture-sprite-fallback {
  display: none;
  place-items: center;
  color: var(--capture-accent);
  font: 1.4rem/1 "Press Start 2P", monospace;
}
.global-capture-copy {
  min-width: 0;
  padding: 30px 30px 25px 10px;
}
.global-capture-kicker {
  display: block;
  margin-bottom: 9px;
  color: var(--capture-accent);
  font: .48rem/1.2 "Press Start 2P", monospace;
  letter-spacing: 1.8px;
}
.global-capture-title {
  display: block;
  color: #f8fafc;
  font: clamp(.78rem, 1.7vw, 1.08rem)/1.45 "Press Start 2P", monospace;
  text-shadow: 0 0 14px rgba(var(--capture-accent-rgb), .4);
}
.global-capture-copy p {
  margin: 11px 0 0;
  color: #cbd5e1;
  font-size: .82rem;
}
.global-capture-player { color: #fff; }
.global-capture-sluma {
  color: var(--capture-accent);
  text-shadow: 0 0 9px rgba(var(--capture-accent-rgb), .5);
}
.global-capture-timer {
  position: absolute;
  right: 15px;
  bottom: 10px;
  left: 15px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
}
.global-capture-timer i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--capture-accent));
  box-shadow: 0 0 8px var(--capture-accent);
  transform-origin: left;
  animation: globalCaptureTimer 5s linear both;
}
@keyframes globalCaptureOrbit { to { transform: rotate(360deg); } }
@keyframes globalCaptureSpriteTurn {
  from { opacity: .46; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes globalCaptureTimer { to { transform: scaleX(0); } }
@keyframes globalUltraFlash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes globalUltraImpact {
  0% { opacity: 0; transform: translateY(-60px) scale(.72); }
  58% { opacity: 1; transform: translateY(4px) scale(1.035); }
  75% { transform: translateX(-4px) scale(1); }
  86% { transform: translateX(4px) scale(1); }
  100% { opacity: 1; transform: translate(0) scale(1); }
}
@keyframes globalUltraGlow {
  from { box-shadow: 0 22px 70px rgba(0,0,0,.62), 0 0 28px rgba(240,171,252,.24), inset 0 0 32px rgba(240,171,252,.07); }
  to { box-shadow: 0 22px 70px rgba(0,0,0,.62), 0 0 55px rgba(250,204,21,.32), inset 0 0 40px rgba(240,171,252,.13); }
}
@media (max-width: 620px) {
  .global-capture-card {
    grid-template-columns: 112px 1fr;
    min-height: 132px;
  }
  .global-capture-sprite-stage {
    width: 98px;
    height: 98px;
    margin-left: 8px;
  }
  .global-capture-sprite,
  .global-capture-sprite-fallback {
    width: 82px;
    height: 82px;
  }
  .global-capture-copy { padding: 34px 14px 23px 5px; }
}

#chatInputRow {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

#chatInput {
  flex: 1;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(20, 25, 31, 0.92);
  color: #f8fafc;
  font-size: 0.72rem;
  padding: 0 8px;
  outline: none;
}

#chatInput:focus {
  border-color: rgba(59, 130, 246, 0.5);
}

#chatSendBtn {
  width: 32px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chatSendBtn:hover {
  background: rgba(59, 130, 246, 0.35);
}

.shop-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Professional Crafting Forge */
#craftBtn {
  border-color: rgba(34,211,238,0.35);
  background: linear-gradient(180deg, rgba(8,47,73,0.9), rgba(12,30,45,0.9));
  color: #a5f3fc;
}
#craftBtn:hover { border-color: rgba(103,232,249,0.72); background: rgba(14,116,144,0.3); }

#craftHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 51;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2,6,15,0.88);
  backdrop-filter: blur(9px);
}

#craftHudPanel {
  width: min(920px, 96vw);
  height: min(660px, 88vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(34,211,238,0.3);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(13,25,38,0.99), rgba(6,13,24,0.99));
  box-shadow: 0 28px 80px rgba(0,0,0,0.78), 0 0 48px rgba(6,182,212,0.08), inset 0 1px rgba(255,255,255,0.06);
  animation: hudSlideIn 0.25s cubic-bezier(0.22,1,0.36,1) both;
}

#craftHudHeader {
  min-height: 76px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(34,211,238,0.15);
  background: radial-gradient(circle at 12% 0%, rgba(6,182,212,0.17), transparent 52%);
}
#craftHudHeader > div { display: flex; flex-direction: column; gap: 6px; }
#craftHudEyebrow { color: #67e8f9; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.18em; }
#craftHudHeader h3 { margin: 0; color: #ecfeff; font-family: 'Press Start 2P', monospace; font-size: 0.78rem; letter-spacing: 0.04em; }
#craftHudClose {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(248,113,113,0.28);
  border-radius: 9px;
  background: rgba(248,113,113,0.08);
  color: #fca5a5;
  cursor: pointer;
}
#craftHudClose:hover { border-color: rgba(248,113,113,0.6); background: rgba(248,113,113,0.18); }

#craftHudBody {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(0,1fr);
}

#craftRecipesPane {
  min-height: 0;
  padding: 17px;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.018);
}

.craft-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.craft-section-heading > span { color: #a5f3fc; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.11em; }
.craft-section-heading > small { color: #64748b; font-size: 0.58rem; }
#craftRecipeList { display: flex; flex-direction: column; gap: 10px; }

.craft-recipe-card {
  position: relative;
  min-height: 96px;
  padding: 10px;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  grid-template-rows: 1fr auto;
  gap: 4px 11px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(30,41,59,0.62), rgba(12,20,32,0.75));
  color: #cbd5e1;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.craft-recipe-card::after { content: ''; position: absolute; width: 110px; height: 110px; left: -22px; top: -28px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,0.13), transparent 68%); pointer-events: none; }
.craft-recipe-card:hover { transform: translateY(-2px); border-color: rgba(103,232,249,0.4); }
.craft-recipe-card.is-selected { border-color: rgba(34,211,238,0.75); box-shadow: 0 0 0 1px rgba(34,211,238,0.14), 0 10px 26px rgba(0,0,0,0.3); }
.craft-recipe-card.can-craft .craft-recipe-count { border-color: rgba(74,222,128,0.3); background: rgba(34,197,94,0.1); color: #86efac; }
.craft-recipe-image { grid-row: 1 / 3; width: 72px; height: 72px; display: grid; place-items: center; }
.craft-recipe-image img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,0.45)); }
.craft-recipe-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.craft-recipe-copy strong { color: #f8fafc; font-size: 0.76rem; }
.craft-recipe-copy small { color: #67e8f9; font-size: 0.48rem; font-weight: 800; letter-spacing: 0.08em; }
.craft-recipe-count { width: fit-content; padding: 3px 7px; border: 1px solid rgba(148,163,184,0.16); border-radius: 999px; color: #64748b; font-size: 0.55rem; font-weight: 800; }

#craftDetailPane { min-height: 0; padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
#craftItemHero {
  min-height: 150px;
  padding: 14px;
  display: grid;
  grid-template-columns: 130px minmax(0,1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(34,211,238,0.14);
  border-radius: 14px;
  background: radial-gradient(circle at 14% 48%, rgba(6,182,212,0.13), transparent 34%), rgba(255,255,255,0.018);
}
#craftItemImageWrap { width: 130px; height: 130px; display: grid; place-items: center; }
#craftItemImage { width: 122px; height: 122px; object-fit: contain; filter: drop-shadow(0 13px 16px rgba(0,0,0,0.48)); }
#craftItemIdentity { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
#craftItemTier { color: #22d3ee; font-size: 0.53rem; font-weight: 900; letter-spacing: 0.12em; }
#craftItemName { margin: 0; color: #f8fafc; font-size: 1.15rem; }
#craftItemDescription { margin: 0; color: #94a3b8; font-size: 0.75rem; line-height: 1.5; }
#craftMaxLabel { padding: 5px 9px; border: 1px solid rgba(248,113,113,0.22); border-radius: 7px; background: rgba(127,29,29,0.1); color: #fca5a5; font-size: 0.62rem; font-weight: 800; }
#craftMaxLabel.has-materials { border-color: rgba(74,222,128,0.3); background: rgba(21,128,61,0.11); color: #86efac; }

#craftRequirementsSection { flex: 1; min-height: 0; }
#craftRequirementsList { display: grid; gap: 7px; }
.craft-requirement {
  min-height: 58px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(248,113,113,0.17);
  border-radius: 10px;
  background: rgba(127,29,29,0.055);
}
.craft-requirement.has-enough { border-color: rgba(74,222,128,0.17); background: rgba(20,83,45,0.07); }
.craft-requirement-image { width: 44px; height: 44px; display: grid; place-items: center; }
.craft-requirement-image img { width: 42px; height: 42px; object-fit: contain; }
.craft-requirement-name { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.craft-requirement-name strong { color: #e2e8f0; font-size: 0.68rem; }
.craft-requirement-name small { color: #64748b; font-size: 0.55rem; }
.craft-requirement-amount { min-width: 76px; color: #fca5a5; font-size: 0.67rem; font-weight: 800; text-align: right; }
.craft-requirement.has-enough .craft-requirement-amount { color: #86efac; }
.craft-requirement-amount b { color: #f8fafc; }

#craftControls {
  display: grid;
  grid-template-columns: auto 150px minmax(130px,1fr);
  gap: 10px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
#craftControls > label { color: #94a3b8; font-size: 0.66rem; font-weight: 800; }
#craftQuantityControls { display: grid; grid-template-columns: 36px 1fr 36px; }
#craftQuantityControls button, #craftQuantity {
  height: 36px;
  border: 1px solid rgba(34,211,238,0.22);
  background: rgba(8,20,33,0.94);
  color: #cffafe;
  text-align: center;
}
#craftQuantityControls button { cursor: pointer; font-size: 1rem; }
#craftQuantityMinus { border-radius: 8px 0 0 8px; }
#craftQuantityPlus { border-radius: 0 8px 8px 0; }
#craftQuantity { min-width: 0; border-left: 0; border-right: 0; outline: 0; }
#craftQuantity::-webkit-inner-spin-button { appearance: none; }
#craftStatus { grid-column: 1 / 3; min-height: 18px; color: #94a3b8; font-size: 0.64rem; line-height: 1.35; }
#craftStatus.is-success { color: #86efac; }
#craftStatus.is-error { color: #fca5a5; }
#craftStatus.is-working { color: #67e8f9; }
#craftConfirmBtn {
  grid-column: 3;
  grid-row: 1 / 3;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(34,211,238,0.52);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(8,145,178,0.42), rgba(14,116,144,0.28));
  color: #ecfeff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,0.07);
}
#craftConfirmBtn:hover:not(:disabled) { background: linear-gradient(180deg, rgba(6,182,212,0.54), rgba(8,145,178,0.36)); }
#craftConfirmBtn:disabled { border-color: rgba(148,163,184,0.15); background: rgba(51,65,85,0.22); color: #64748b; cursor: not-allowed; box-shadow: none; }

@media (max-width: 720px) {
  #craftHudOverlay { padding: 10px; }
  #craftHudPanel { width: 100%; height: min(720px, 94vh); }
  #craftHudBody { grid-template-columns: 1fr; overflow-y: auto; }
  #craftRecipesPane { min-height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
  #craftRecipeList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .craft-recipe-card { grid-template-columns: 56px minmax(0,1fr); min-height: 80px; }
  .craft-recipe-image { width: 56px; height: 56px; }
  .craft-recipe-image img { width: 54px; height: 54px; }
  #craftDetailPane { overflow: visible; }
}

@media (max-width: 480px) {
  #craftRecipeList { grid-template-columns: 1fr; }
  #craftItemHero { grid-template-columns: 86px minmax(0,1fr); min-height: 112px; gap: 10px; }
  #craftItemImageWrap { width: 86px; height: 86px; }
  #craftItemImage { width: 82px; height: 82px; }
  #craftControls { grid-template-columns: auto 1fr; }
  #craftStatus { grid-column: 1 / -1; }
  #craftConfirmBtn { grid-column: 1 / -1; grid-row: auto; }
}

/* Breeding Sanctuary */
#breedingBtn {
  border-color: rgba(244,114,182,0.42);
  background: linear-gradient(180deg, rgba(88,28,74,0.92), rgba(48,18,58,0.94));
}
#breedingBtn:hover { border-color: rgba(251,207,232,0.8); background: rgba(157,23,77,0.38); }
#breedingBtn .action-btn-icon { filter: drop-shadow(0 0 7px rgba(244,114,182,0.55)); }

#breedingHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 64;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 15%, rgba(157,23,77,0.2), transparent 38%), rgba(5,3,13,0.9);
  backdrop-filter: blur(10px);
}

#breedingHudPanel {
  position: relative;
  width: min(1120px, 97vw);
  height: min(720px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(244,114,182,0.45);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(30,13,40,0.99), rgba(9,13,29,0.995) 58%, rgba(12,31,39,0.99));
  box-shadow: 0 32px 100px rgba(0,0,0,0.82), 0 0 65px rgba(236,72,153,0.11), inset 0 1px rgba(255,255,255,0.08);
  animation: hudSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

#breedingHudPanel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 17% 33%, rgba(244,114,182,0.08), transparent 28%), radial-gradient(circle at 70% 60%, rgba(45,212,191,0.055), transparent 35%);
}

#breedingHudHeader {
  position: relative;
  z-index: 1;
  min-height: 88px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(244,114,182,0.18);
  background: linear-gradient(90deg, rgba(157,23,77,0.16), transparent 50%, rgba(13,148,136,0.08));
}
.breeding-title-block { display: flex; flex-direction: column; gap: 5px; }
.breeding-title-block > span { color: #f9a8d4; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.18em; }
.breeding-title-block h3 { margin: 0; color: #fff1f8; font-family: 'Press Start 2P', monospace; font-size: 0.84rem; }
.breeding-title-block p { margin: 0; color: #a89cb1; font-size: 0.67rem; }
.breeding-header-actions { display: flex; align-items: center; gap: 12px; }
#breedingLovePill { min-width: 138px; height: 46px; padding: 4px 11px 4px 5px; display: grid; grid-template-columns: 38px 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 7px; border: 1px solid rgba(244,114,182,0.28); border-radius: 12px; background: rgba(88,28,74,0.32); }
#breedingLovePill img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; }
#breedingLovePill span { align-self: end; color: #fbcfe8; font-size: 0.53rem; font-weight: 800; }
#breedingLovePill b { grid-column: 3; grid-row: 1 / 3; color: #fff; font-size: 0.98rem; }
#breedingHudClose { width: 38px; height: 38px; border: 1px solid rgba(251,113,133,0.3); border-radius: 10px; background: rgba(159,18,57,0.1); color: #fda4af; font-size: 1.15rem; cursor: pointer; }
#breedingHudClose:hover { background: rgba(190,24,93,0.25); border-color: rgba(251,113,133,0.65); }

#breedingHudBody { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 350px; }
#breedingPairPane { min-width: 0; min-height: 0; padding: 20px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; }
#breedingCollectionPane { min-height: 0; padding: 18px; display: flex; flex-direction: column; border-left: 1px solid rgba(244,114,182,0.13); background: rgba(255,255,255,0.018); }
.breeding-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.breeding-section-title > div { display: flex; flex-direction: column; gap: 4px; }
.breeding-section-title span { color: #f9a8d4; font-size: 0.52rem; font-weight: 900; letter-spacing: 0.14em; }
.breeding-section-title b { color: #f8fafc; font-size: 0.75rem; }
.breeding-section-title small { color: #7c7087; font-size: 0.57rem; }

#breedingParentSlots { min-height: 278px; display: grid; grid-template-columns: minmax(0,1fr) 92px minmax(0,1fr); align-items: center; gap: 10px; }
.breeding-parent-slot { min-width: 0; height: 262px; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(244,114,182,0.32); border-radius: 18px; background: linear-gradient(160deg, rgba(131,24,67,0.18), rgba(21,15,36,0.82)); box-shadow: inset 0 1px rgba(255,255,255,0.045); }
.breeding-parent-slot[data-role="mother"] { border-color: rgba(45,212,191,0.3); background: linear-gradient(160deg, rgba(13,148,136,0.13), rgba(21,15,36,0.82)); }
.breeding-parent-slot.is-empty::before { content: '+'; width: 82px; height: 82px; display: grid; place-items: center; border: 1px dashed rgba(244,114,182,0.42); border-radius: 50%; color: #f472b6; font-size: 2rem; background: rgba(244,114,182,0.04); }
.breeding-parent-slot[data-role="mother"].is-empty::before { border-color: rgba(45,212,191,0.42); color: #5eead4; }
.breeding-parent-slot.is-empty::after { content: attr(data-empty-label); color: #8e8098; font-size: 0.63rem; }
.breeding-parent-role { color: #f9a8d4; font-size: 0.54rem; font-weight: 900; letter-spacing: 0.13em; }
.breeding-parent-slot[data-role="mother"] .breeding-parent-role { color: #5eead4; }
.breeding-parent-sprite { width: 116px; height: 104px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 12px 13px rgba(0,0,0,0.55)); }
.breeding-parent-name { color: #fff; font-size: 0.82rem; font-weight: 900; }
.breeding-parent-meta { color: #a89cb1; font-size: 0.58rem; }
.breeding-parent-inheritance { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.breeding-parent-inheritance span { padding: 4px 7px; border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; color: #cbd5e1; font-size: 0.55rem; }
.breeding-parent-remove { margin-top: 3px; border: 0; background: transparent; color: #fb7185; font-size: 0.55rem; cursor: pointer; }
#breedingHeartCore { display: flex; flex-direction: column; align-items: center; gap: 7px; }
#breedingHeartCore img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(244,114,182,0.5)); animation: breedingHeartPulse 1.9s ease-in-out infinite; }
#breedingHeartCore span { color: #8e8098; font-size: 0.43rem; font-weight: 900; letter-spacing: 0.1em; text-align: center; }
@keyframes breedingHeartPulse { 50% { transform: scale(1.08); filter: drop-shadow(0 0 27px rgba(244,114,182,0.72)); } }

#breedingRules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#breedingRules > div:not(.breeding-odds) { padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; border: 1px solid rgba(244,114,182,0.13); border-radius: 10px; background: rgba(255,255,255,0.022); }
#breedingRules span { color: #8e8098; font-size: 0.5rem; }
#breedingRules b { color: #fce7f3; font-size: 0.62rem; }
#breedingRules .breeding-odds { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; }
.breeding-odds i { padding: 6px; color: #94a3b8; font-size: 0.55rem; font-style: normal; text-align: center; background: rgba(255,255,255,0.018); }
.breeding-odds i:nth-child(2) { color: #fbcfe8; border-inline: 1px solid rgba(255,255,255,0.07); background: rgba(244,114,182,0.07); }

#breedingActionBar { margin-top: auto; min-height: 62px; padding-top: 13px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border-top: 1px solid rgba(255,255,255,0.07); }
#breedingStatus { color: #9d91a7; font-size: 0.64rem; line-height: 1.4; }
#breedingStatus.is-error { color: #fda4af; }
#breedingStatus.is-ready { color: #5eead4; }
#breedingStatus.is-working { color: #f9a8d4; }
#breedingConfirmBtn { min-width: 230px; height: 48px; padding: 0 15px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(244,114,182,0.62); border-radius: 11px; background: linear-gradient(180deg, rgba(219,39,119,0.5), rgba(157,23,77,0.36)); color: #fff1f8; font-weight: 900; cursor: pointer; box-shadow: 0 9px 25px rgba(131,24,67,0.25), inset 0 1px rgba(255,255,255,0.1); }
#breedingConfirmBtn img { width: 32px; height: 32px; object-fit: contain; }
#breedingConfirmBtn:disabled { border-color: rgba(148,163,184,0.13); background: rgba(51,65,85,0.18); color: #62596a; cursor: not-allowed; box-shadow: none; }

#breedingCandidateGrid { min-height: 0; margin-top: 13px; padding-right: 4px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; overflow-y: auto; scrollbar-color: rgba(244,114,182,0.42) transparent; }
.breeding-candidate { min-height: 168px; padding: 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid rgba(148,163,184,0.13); border-radius: 12px; background: rgba(20,17,35,0.75); color: #d8d1df; cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease; }
.breeding-candidate:hover { transform: translateY(-2px); border-color: rgba(244,114,182,0.42); background: rgba(88,28,74,0.18); }
.breeding-candidate.is-selected { border-color: #f472b6; box-shadow: inset 0 0 0 1px rgba(244,114,182,0.24); }
.breeding-candidate.is-incompatible { opacity: 0.48; }
.breeding-candidate.is-locked { opacity: 0.58; cursor: not-allowed; filter: saturate(.7); }
.breeding-candidate.is-locked:hover { transform: none; border-color: rgba(148,163,184,0.13); background: rgba(20,17,35,0.75); }
.breeding-candidate img { position: relative; z-index: 1; width: 76px; height: 70px; flex: 0 0 70px; object-fit: contain; image-rendering: auto; }
.breeding-candidate-name {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  min-height: 15px;
  flex: 0 0 15px;
  overflow: hidden;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0,0,0,.95), 0 0 8px rgba(244,114,182,.22);
}
.breeding-candidate-meta { position: relative; z-index: 2; flex-shrink: 0; color: #82768d; font-size: 0.51rem; }
.breeding-gender { position: relative; z-index: 2; flex-shrink: 0; padding: 3px 6px; border-radius: 999px; background: rgba(59,130,246,0.12); color: #93c5fd; font-size: 0.5rem; font-weight: 900; }
.breeding-gender.female { background: rgba(236,72,153,0.13); color: #f9a8d4; }
.breeding-gender.genderless { border:1px solid rgba(251,113,133,.24); background:rgba(127,29,29,.18); color:#fda4af; }
.breeding-use-counter { position:relative; z-index:2; min-width:72px; padding:3px 6px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(45,212,191,.2); border-radius:6px; background:rgba(13,148,136,.08); color:#99f6e4; font-size:.44rem; line-height:1; }
.breeding-use-counter b { font-size:.42rem; letter-spacing:.05em; }
.breeding-use-counter i { color:#f8fafc; font-size:.49rem; font-style:normal; font-weight:900; }
.breeding-use-counter.is-exhausted { border-color:rgba(148,163,184,.18); background:rgba(71,85,105,.12); color:#94a3b8; }
.breeding-use-counter.is-mythic { border-color:rgba(192,132,252,.35); background:rgba(126,34,206,.13); color:#e9d5ff; box-shadow:0 0 10px rgba(168,85,247,.12); }
.breeding-use-counter.is-legendary { border-color:rgba(251,113,133,.4); background:linear-gradient(90deg,rgba(127,29,29,.25),rgba(225,29,72,.16)); color:#fecdd3; box-shadow:0 0 12px rgba(244,63,94,.14); }
.breeding-parent-slot .breeding-use-counter { margin-top:1px; }
.breeding-card-rarities { position: relative; z-index: 2; display: flex; flex-shrink: 0; gap: 3px; }
.breeding-card-rarities i { min-width: 25px; padding: 2px 3px; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; background: rgba(255,255,255,0.055); color: #a89cb1; font-size: 0.45rem; font-style: normal; text-align: center; }
.breeding-rarity.rarity-F { --breeding-rarity-color: #d1d5db; }
.breeding-rarity.rarity-E { --breeding-rarity-color: #bae6fd; }
.breeding-rarity.rarity-D { --breeding-rarity-color: #93c5fd; }
.breeding-rarity.rarity-C { --breeding-rarity-color: #86efac; }
.breeding-rarity.rarity-B { --breeding-rarity-color: #facc15; }
.breeding-rarity.rarity-A { --breeding-rarity-color: #f97316; }
.breeding-rarity.rarity-S { --breeding-rarity-color: #fb7185; }
.breeding-rarity.rarity-SS { --breeding-rarity-color: #c084fc; }
.breeding-rarity.rarity-SSS { --breeding-rarity-color: #22d3ee; }
.breeding-rarity.rarity-M { --breeding-rarity-color: #facc15; }
.breeding-card-rarities i.breeding-rarity,
.breeding-parent-inheritance span.breeding-rarity,
.breeding-result-stat b.breeding-rarity {
  color: var(--breeding-rarity-color, #d1d5db);
  border-color: color-mix(in srgb, var(--breeding-rarity-color, #d1d5db) 48%, transparent);
  background: color-mix(in srgb, var(--breeding-rarity-color, #d1d5db) 11%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--breeding-rarity-color, #d1d5db) 32%, transparent);
}
.breeding-result-stat b.breeding-rarity { min-width: 34px; padding: 3px 8px; border: 1px solid; border-radius: 7px; text-align: center; }
.breeding-collection-empty { grid-column: 1 / -1; padding: 35px 10px; color: #74697d; font-size: 0.64rem; line-height: 1.5; text-align: center; }

#breedingResult { position: absolute; z-index: 5; inset: 0; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(244,114,182,0.25), transparent 31%), rgba(8,5,17,0.97); }
#breedingResult[hidden] { display: none; }
#breedingResult.is-revealing { animation: breedingReveal 0.5s ease both; }
@keyframes breedingReveal { from { opacity: 0; transform: scale(1.04); } }
.breeding-result-glow { position: absolute; width: 410px; height: 410px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(244,114,182,0.2), transparent, rgba(45,212,191,0.18), transparent); animation: breedingSpin 9s linear infinite; }
@keyframes breedingSpin { to { transform: rotate(360deg); } }
.breeding-result-kicker, #breedingResultPortrait, #breedingResultName, #breedingResultGender, #breedingResultStats, #breedingResultClose { position: relative; z-index: 1; }
.breeding-result-kicker { color: #f9a8d4; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.2em; }
#breedingResultPortrait img { width: 190px; height: 180px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 0 27px rgba(244,114,182,0.6)); animation: breedingChildFloat 2.2s ease-in-out infinite; }
@keyframes breedingChildFloat { 50% { transform: translateY(-8px); } }
#breedingResultName { margin: 0; color: #fff; font-family: 'Press Start 2P', monospace; font-size: 1rem; }
#breedingResultGender { margin: 0; color: #d8b4fe; font-size: 0.66rem; }
#breedingResultStats { display: grid; grid-template-columns: repeat(3,130px); gap: 8px; margin: 10px 0; }
.breeding-result-stat { padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid rgba(244,114,182,0.2); border-radius: 10px; background: rgba(255,255,255,0.035); }
.breeding-result-stat span { color: #8e8098; font-size: 0.5rem; }
.breeding-result-stat b { color: #fff; font-size: 1rem; }
.breeding-result-stat small { font-size: 0.49rem; text-transform: uppercase; }
.breeding-result-stat small.upgraded { color: #5eead4; }
.breeding-result-stat small.downgraded { color: #fb7185; }
.breeding-result-stat small.inherited { color: #f9a8d4; }
#breedingResultClose { min-width: 230px; height: 42px; border: 1px solid rgba(45,212,191,0.46); border-radius: 10px; background: rgba(13,148,136,0.18); color: #ccfbf1; font-weight: 900; cursor: pointer; }

@media (max-width: 850px) {
  #breedingHudPanel { height: 95vh; }
  #breedingHudBody { grid-template-columns: 1fr; overflow-y: auto; }
  #breedingPairPane { overflow: visible; }
  #breedingCollectionPane { min-height: 300px; border-left: 0; border-top: 1px solid rgba(244,114,182,0.13); }
  #breedingCandidateGrid { overflow: visible; grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  #breedingHudOverlay { padding: 7px; }
  #breedingHudHeader { padding: 12px; }
  .breeding-title-block p, #breedingLovePill span { display: none; }
  #breedingLovePill { min-width: 72px; grid-template-columns: 38px auto; }
  #breedingLovePill b { grid-column: 2; }
  #breedingParentSlots { grid-template-columns: 1fr 48px 1fr; }
  .breeding-parent-slot { height: 235px; padding: 8px; }
  .breeding-parent-sprite { width: 88px; height: 82px; }
  #breedingHeartCore img { width: 48px; height: 48px; }
  #breedingRules { grid-template-columns: 1fr; }
  #breedingRules .breeding-odds { grid-column: 1; }
  #breedingActionBar { grid-template-columns: 1fr; }
  #breedingConfirmBtn { width: 100%; }
  #breedingCandidateGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #breedingResultStats { grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
}

/* Friends HUD */
.friends-nav-btn {
  position: relative;
}

#friendsNavBadge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #ef4444;
  border: 2px solid #111827;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}

#friendsHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 62;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 4, 12, 0.8);
  backdrop-filter: blur(6px);
}

#friendsHudPanel {
  width: min(760px, 96vw);
  height: min(560px, 86vh);
  border: 2px solid rgba(99,102,241,0.28);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(16,18,34,0.99), rgba(9,11,22,0.99));
  box-shadow: 0 24px 70px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: hudSlideIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}

#friendsHudHeader {
  height: 58px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(99,102,241,0.18);
  background: linear-gradient(90deg, rgba(99,102,241,0.13), transparent 65%);
}

#friendsHudTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #a5b4fc;
  text-shadow: 0 0 12px rgba(99,102,241,0.4);
}

#friendsHudClose {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  cursor: pointer;
}

#friendsHudClose:hover {
  color: #fca5a5;
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.22);
}

#friendsHudBody {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 270px 1fr;
}

#friendsSidebar {
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid rgba(99,102,241,0.14);
  background: rgba(5,8,18,0.36);
}

#friendAddForm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(99,102,241,0.16);
  border-radius: 10px;
  background: rgba(99,102,241,0.06);
}

#friendAddForm label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.46rem;
  letter-spacing: 0.7px;
  color: #a5b4fc;
}

#friendAddRow {
  display: flex;
  gap: 5px;
}

#friendUsernameInput,
#friendMessageInput {
  min-width: 0;
  flex: 1;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 7px;
  outline: none;
  background: rgba(9,13,25,0.9);
  color: #e2e8f0;
}

#friendUsernameInput {
  height: 31px;
  padding: 0 8px;
  font-size: 0.72rem;
}

#friendUsernameInput:focus,
#friendMessageInput:focus {
  border-color: rgba(129,140,248,0.65);
}

#friendAddBtn,
#friendMessageSend {
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 7px;
  background: rgba(99,102,241,0.22);
  color: #c7d2fe;
  font-weight: 800;
  cursor: pointer;
}

#friendAddBtn {
  padding: 0 10px;
}

#friendAddStatus {
  min-height: 13px;
  font-size: 0.62rem;
  color: #94a3b8;
}

#friendAddStatus.is-error { color: #fca5a5; }
#friendAddStatus.is-success { color: #86efac; }

#friendsTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.friends-tab {
  height: 31px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 7px;
  background: rgba(255,255,255,0.025);
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.friends-tab.is-active {
  color: #c7d2fe;
  border-color: rgba(99,102,241,0.35);
  background: rgba(99,102,241,0.14);
}

#friendRequestsBadge {
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  background: rgba(239,68,68,0.85);
  color: #fff;
  font-size: 9px;
}

.friends-list-view {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.friends-list-view.is-active { display: block; }

#friendsList,
#friendRequestsList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.friend-list-row,
.friend-request-row {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
}

.friend-list-row {
  cursor: pointer;
}

.friend-list-row:hover,
.friend-list-row.is-active {
  border-color: rgba(99,102,241,0.35);
  background: rgba(99,102,241,0.09);
}

.friend-presence-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #475569;
}

.friend-presence-dot.is-online {
  background: #4ade80;
  box-shadow: 0 0 7px rgba(74,222,128,0.65);
}

.friend-row-info {
  min-width: 0;
  flex: 1;
}

.friend-row-name {
  overflow: hidden;
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-row-meta {
  margin-top: 2px;
  color: #64748b;
  font-size: 0.6rem;
}

.friend-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #6366f1;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.friend-profile-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid rgba(129,140,248,0.25);
  border-radius: 7px;
  background: rgba(129,140,248,0.09);
  color: #c7d2fe;
  cursor: pointer;
  font-size: 0.75rem;
}

.friend-profile-btn:hover {
  border-color: rgba(129,140,248,0.5);
  background: rgba(129,140,248,0.2);
}

.friend-request-actions {
  display: flex;
  gap: 4px;
}

.friend-request-actions button {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  cursor: pointer;
}

.friend-request-accept {
  border: 1px solid rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.15);
  color: #86efac;
}

.friend-request-reject {
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.12);
  color: #fca5a5;
}

.friends-empty-list {
  padding: 18px 8px;
  color: rgba(148,163,184,0.45);
  font-size: 0.68rem;
  line-height: 1.5;
  text-align: center;
}

#friendConversationPane {
  min-width: 0;
  min-height: 0;
  background: radial-gradient(circle at 50% 100%, rgba(99,102,241,0.07), transparent 55%);
}

#friendConversationEmpty {
  height: 100%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(148,163,184,0.45);
  text-align: center;
}

#friendConversationEmpty span { font-size: 2rem; opacity: 0.55; }
#friendConversationEmpty p { max-width: 250px; font-size: 0.76rem; line-height: 1.5; }

#friendConversation {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#friendConversationHeader {
  min-height: 58px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

#friendConversationHeader > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#friendConversationName { color: #e2e8f0; font-size: 0.82rem; }
#friendConversationPresence { color: #64748b; font-size: 0.62rem; }
#friendConversationPresence.is-online { color: #4ade80; }

#friendRemoveBtn {
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: 7px;
  padding: 6px 8px;
  background: rgba(239,68,68,0.08);
  color: #fca5a5;
  font-size: 0.6rem;
  cursor: pointer;
}

#friendMessages {
  flex: 1;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
}

.friend-message {
  max-width: 78%;
  padding: 8px 10px;
  border-radius: 11px 11px 11px 3px;
  align-self: flex-start;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.07);
}

.friend-message.is-mine {
  align-self: flex-end;
  border-radius: 11px 11px 3px 11px;
  border-color: rgba(99,102,241,0.22);
  background: rgba(99,102,241,0.19);
}

.friend-message-body {
  color: #e2e8f0;
  font-size: 0.74rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.friend-message-time {
  margin-top: 4px;
  color: rgba(148,163,184,0.45);
  font-size: 0.54rem;
  text-align: right;
}

#friendMessageForm {
  padding: 10px;
  display: flex;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

#friendMessageInput {
  height: 36px;
  padding: 0 11px;
  font-size: 0.75rem;
}

#friendMessageSend {
  width: 38px;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  #friendsHudBody { grid-template-columns: 220px 1fr; }
}

@media (max-width: 540px) {
  #friendsHudOverlay { padding: 8px; }
  #friendsHudPanel { width: 100%; height: 92vh; }
  #friendsHudBody { grid-template-columns: 1fr; grid-template-rows: 44% 56%; }
  #friendsSidebar { border-right: 0; border-bottom: 1px solid rgba(99,102,241,0.14); }
}

/* Public chat profile mirrors the player's own profile HUD. */
#viewerProfileOverlay {
  background: rgba(2, 4, 12, 0.78);
  backdrop-filter: blur(6px);
  padding: 20px;
}

#viewerProfilePanel {
  width: min(560px, 96vw);
  max-height: 85vh;
  border-radius: 18px;
  border: 2px solid rgba(99,102,241,0.25);
  background: linear-gradient(160deg, rgba(16,18,34,0.99) 0%, rgba(10,12,24,0.99) 100%);
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.07);
}

#viewerProfileHeader {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(99,102,241,0.18);
  background: linear-gradient(90deg, rgba(99,102,241,0.12) 0%, transparent 60%);
}

#viewerProfileTitle {
  font-size: 0.7rem;
  color: #a5b4fc;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(99,102,241,0.4);
}

#viewerProfileClose {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}

#viewerProfileBody {
  flex: 1;
  padding: 0;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,0.25) transparent;
}

#viewerProfileContent {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  min-width: 0;
}

#viewerProfileLeftCol,
#viewerProfileRightCol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#viewerProfileAvatarCard {
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(10,14,24,0.6) 100%);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

#viewerProfileAvatarCard::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.06) 0%, transparent 50%);
  pointer-events: none;
}

#viewerProfileAvatarBadge {
  display: flex;
  align-items: center;
  gap: 14px;
}

#viewerProfileAvatarWrap {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  border: 2px solid rgba(99,102,241,0.3);
  background: rgba(255,255,255,0.04);
}

#viewerProfileAvatarFallback {
  width: 38px;
  height: 38px;
}

#viewerProfileNameRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#viewerProfileUsername {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: #e2e8f0;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

#viewerProfilePlayerLevel {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

#viewerProfileExpSection {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#viewerProfileFriendBtn {
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 7px;
  background: rgba(99,102,241,0.16);
  color: #c7d2fe;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.46rem;
  cursor: pointer;
}

#viewerProfileFriendBtn:hover:not(:disabled) {
  border-color: rgba(129,140,248,0.65);
  background: rgba(99,102,241,0.28);
}

#viewerProfileFriendBtn:disabled {
  opacity: 0.6;
  cursor: default;
}

#viewerProfileTradeBtn {
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34,197,94,0.38);
  border-radius: 7px;
  background: rgba(34,197,94,0.13);
  color: #86efac;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.46rem;
  cursor: pointer;
}

#viewerProfileTradeBtn:hover:not(:disabled) {
  border-color: rgba(74,222,128,0.65);
  background: rgba(34,197,94,0.24);
}

#viewerProfileTradeBtn:disabled { opacity: 0.55; cursor: default; }

/* Professional player trade */
#tradeRequestOverlay,
#tradeHudOverlay {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(2,4,12,0.82);
  backdrop-filter: blur(7px);
}

#tradeRequestOverlay { z-index: 92; }
#tradeHudOverlay { z-index: 88; padding: 16px; }

#tradeNotice[hidden] { display: none; }
#tradeNotice {
  --trade-notice-color: #f87171;
  --trade-notice-rgb: 248,113,113;
  position: absolute;
  z-index: 110;
  top: 18px;
  left: 50%;
  width: min(470px, calc(100% - 28px));
  min-height: 76px;
  padding: 13px 46px 13px 13px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--trade-notice-rgb),0.5);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20,26,38,0.98), rgba(8,13,23,0.98));
  box-shadow: 0 18px 48px rgba(0,0,0,0.58), 0 0 24px rgba(var(--trade-notice-rgb),0.1), inset 0 1px rgba(255,255,255,0.06);
  transform: translateX(-50%);
  animation: tradeNoticeIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
#tradeNotice.is-rejected { --trade-notice-color: #fb923c; --trade-notice-rgb: 251,146,60; }
#tradeNotice.is-info { --trade-notice-color: #60a5fa; --trade-notice-rgb: 96,165,250; }
#tradeNotice.is-success { --trade-notice-color: #4ade80; --trade-notice-rgb: 74,222,128; }
#tradeNoticeIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--trade-notice-rgb),0.5);
  border-radius: 12px;
  background: rgba(var(--trade-notice-rgb),0.13);
  color: var(--trade-notice-color);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255,255,255,0.06);
}
#tradeNoticeCopy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#tradeNoticeTitle { color: #f8fafc; font-size: 0.82rem; }
#tradeNoticeMessage { color: #aebed1; font-size: 0.72rem; line-height: 1.42; }
#tradeNoticeClose {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  cursor: pointer;
}
#tradeNoticeClose:hover { background: rgba(255,255,255,0.1); color: #f8fafc; }
#tradeNoticeProgress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--trade-notice-color);
  transform-origin: left center;
  animation: tradeNoticeProgress 6.5s linear forwards;
}
@keyframes tradeNoticeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes tradeNoticeProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

#tradeRequestPanel {
  width: min(390px, 92vw);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 2px solid rgba(74,222,128,0.3);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(15,27,31,0.99), rgba(8,13,22,0.99));
  box-shadow: 0 24px 70px rgba(0,0,0,0.75), 0 0 30px rgba(34,197,94,0.08);
  text-align: center;
  animation: hudSlideIn 0.25s cubic-bezier(0.22,1,0.36,1) both;
}

.trade-request-icon { font-size: 2.2rem; color: #4ade80; text-shadow: 0 0 18px rgba(74,222,128,0.45); }
#tradeRequestPanel h3 { margin: 0; font-family: 'Press Start 2P', monospace; font-size: 0.72rem; color: #86efac; letter-spacing: 1px; }
#tradeRequestPanel p { margin: 5px 0 0; color: #cbd5e1; font-size: 0.82rem; }
#tradeRequestCountdown { color: #64748b; font-size: 0.66rem; }
#tradeRequestActions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 7px; }
#tradeRequestActions button { height: 38px; border-radius: 9px; font-weight: 800; cursor: pointer; }
#tradeRequestReject { border: 1px solid rgba(239,68,68,0.35); background: rgba(239,68,68,0.12); color: #fca5a5; }
#tradeRequestAccept { border: 1px solid rgba(34,197,94,0.4); background: rgba(34,197,94,0.2); color: #86efac; }

#tradeHudPanel {
  width: min(980px, 98vw);
  height: min(680px, 94vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid rgba(74,222,128,0.22);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(13,20,30,0.995), rgba(7,11,20,0.995));
  box-shadow: 0 28px 80px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: hudSlideIn 0.25s cubic-bezier(0.22,1,0.36,1) both;
}

#tradeHudHeader {
  min-height: 62px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(74,222,128,0.13);
  background: linear-gradient(90deg, rgba(34,197,94,0.1), transparent 62%);
}

#tradeHudHeader > div { display: flex; flex-direction: column; gap: 5px; }
#tradeHudTitle { font-family: 'Press Start 2P', monospace; font-size: 0.7rem; color: #86efac; letter-spacing: 1.5px; }
#tradeHudSubtitle { color: #64748b; font-size: 0.67rem; }
#tradeHudClose { width: 34px; height: 34px; border: 1px solid rgba(239,68,68,0.25); border-radius: 8px; background: rgba(239,68,68,0.08); color: #fca5a5; cursor: pointer; }

#tradeHudBody {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 1.05fr) minmax(330px, 0.95fr);
}

#tradeAssetPicker {
  min-height: 0;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.07);
}

.trade-section-title { font-family: 'Press Start 2P', monospace; font-size: 0.52rem; color: #a7f3d0; letter-spacing: 1px; }
.trade-picker-block { padding: 9px; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; background: rgba(255,255,255,0.025); }
.trade-picker-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: #cbd5e1; font-size: 0.68rem; font-weight: 750; }
.trade-picker-heading small { color: #64748b; font-weight: 500; }

#tradeAvailableSlumas {
  max-height: 178px;
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 6px;
  overflow-y: auto;
}

.trade-sluma-option {
  position: relative;
  min-width: 0;
  padding: 7px 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: #94a3b8;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.trade-sluma-option::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 22%, transparent), transparent 64%);
  opacity: 0.68;
}
.trade-sluma-option:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 58%, transparent); }
.trade-sluma-option.is-selected { border-color: rgba(74,222,128,0.72); background: rgba(34,197,94,0.14); box-shadow: inset 0 0 0 1px rgba(74,222,128,0.18), 0 5px 16px rgba(0,0,0,0.25); }
.trade-sluma-option.is-shiny { border-color: rgba(250,204,21,0.42); }
.trade-sluma-option.is-ultra { border-color: rgba(167,139,250,0.52); }
.trade-sluma-option-portrait { position: relative; width: 54px; height: 54px; display: grid; place-items: center; flex-shrink: 0; }
.trade-sluma-option-portrait.has-fallback::before,
.trade-offer-sluma-portrait.has-fallback::before { content: '?'; color: var(--trade-sluma-color, #94a3b8); font-weight: 900; font-size: 1.3rem; }
.trade-sluma-option img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.45)); }
.trade-sluma-selected-mark { position: absolute; top: 5px; right: 5px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #22c55e; color: #052e16; font-size: 0.62rem; font-weight: 950; opacity: 0; transform: scale(0.7); transition: opacity 0.16s ease, transform 0.16s ease; }
.trade-sluma-option.is-selected .trade-sluma-selected-mark { opacity: 1; transform: scale(1); }
.trade-sluma-option-name { max-width: 100%; overflow: hidden; color: #e2e8f0; font-size: 0.61rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.trade-sluma-option-meta { color: #64748b; font-size: 0.55rem; }

.trade-sluma-variant-badge { position: absolute; z-index: 2; left: 50%; bottom: -1px; translate: -50% 0; padding: 2px 5px; border: 1px solid; border-radius: 999px; font-size: 0.43rem; line-height: 1; font-weight: 950; letter-spacing: 0.7px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.48); }
.trade-sluma-variant-badge.is-shiny { border-color: rgba(253,224,71,0.78); background: linear-gradient(135deg, #713f12, #ca8a04); color: #fef9c3; text-shadow: 0 1px 2px #422006; }
.trade-sluma-variant-badge.is-ultra { border-color: rgba(216,180,254,0.82); background: linear-gradient(135deg, #312e81, #7e22ce 55%, #be185d); color: #faf5ff; text-shadow: 0 1px 2px #1e1b4b; }

#tradeAvailableItems { display: flex; flex-direction: column; gap: 5px; }
.trade-item-option { min-height: 34px; padding: 4px 7px; display: grid; grid-template-columns: 23px 1fr 70px; gap: 6px; align-items: center; border-radius: 7px; background: rgba(255,255,255,0.025); }
.trade-item-option-icon { width: 30px; height: 30px; display: grid; place-items: center; }
.trade-item-option-icon img, .trade-offer-item-image { width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; }
.trade-item-option-name { color: #cbd5e1; font-size: 0.66rem; }
.trade-item-option-name small { display: block; margin-top: 2px; color: #64748b; }
.trade-item-quantity { width: 70px; height: 27px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; background: rgba(7,11,20,0.9); color: #e2e8f0; text-align: center; }

#tradeMoneyField { padding: 9px; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; border: 1px solid rgba(250,204,21,0.13); border-radius: 9px; background: rgba(250,204,21,0.035); color: #fde68a; font-size: 0.68rem; font-weight: 700; }
#tradeMoneyField small { color: #78716c; font-weight: 500; }
#tradeMoneyInput { grid-column: 1 / -1; height: 31px; padding: 0 9px; border: 1px solid rgba(250,204,21,0.2); border-radius: 7px; outline: none; background: rgba(7,11,20,0.9); color: #fde68a; }
#tradeUpdateOfferBtn { min-height: 36px; border: 1px solid rgba(59,130,246,0.38); border-radius: 8px; background: rgba(59,130,246,0.16); color: #93c5fd; font-weight: 800; cursor: pointer; }

#tradeOffersPane { min-height: 0; padding: 13px; display: grid; grid-template-rows: 1fr auto 1fr; gap: 8px; }
.trade-offer-card { min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; background: rgba(255,255,255,0.025); }
.trade-offer-card.is-accepted { border-color: rgba(74,222,128,0.4); box-shadow: 0 0 18px rgba(34,197,94,0.07); }
.trade-offer-head { min-height: 38px; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.06); }
.trade-offer-head strong { color: #e2e8f0; font-size: 0.7rem; }
.trade-accept-state { padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,0.04); color: #64748b; font-size: 0.56rem; }
.trade-accept-state.is-accepted { background: rgba(34,197,94,0.13); color: #86efac; }
.trade-offer-content { flex: 1; min-height: 0; padding: 9px; overflow-y: auto; }
.trade-offer-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: #475569; font-size: 0.65rem; text-align: center; }
.trade-offer-group { margin-bottom: 8px; }
.trade-offer-group-title { margin-bottom: 4px; color: #64748b; font-size: 0.57rem; font-weight: 800; text-transform: uppercase; }
.trade-offer-entry { padding: 4px 6px; display: flex; align-items: center; justify-content: space-between; gap: 7px; border-radius: 6px; color: #cbd5e1; font-size: 0.65rem; background: rgba(255,255,255,0.025); }
.trade-offer-entry + .trade-offer-entry { margin-top: 3px; }
.trade-offer-money { color: #fde68a; }
.trade-offer-sluma-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.trade-offer-sluma {
  position: relative;
  min-width: 0;
  min-height: 88px;
  padding: 7px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 35%, transparent);
  border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 10%, rgba(8,13,23,0.96)), rgba(7,11,20,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 5px 14px rgba(0,0,0,0.2);
  cursor: help;
  outline: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.trade-offer-sluma:hover,
.trade-offer-sluma:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 72%, white); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 9px 22px rgba(0,0,0,0.34); }
.trade-offer-sluma::after { content: ''; position: absolute; width: 94px; height: 94px; left: -12px; top: -4px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 25%, transparent), transparent 70%); }
.trade-offer-sluma.is-shiny { border-color: rgba(250,204,21,0.58); box-shadow: inset 0 0 20px rgba(250,204,21,0.05), 0 5px 14px rgba(0,0,0,0.24); }
.trade-offer-sluma.is-ultra { border-color: rgba(192,132,252,0.68); box-shadow: inset 0 0 24px rgba(168,85,247,0.08), 0 5px 16px rgba(88,28,135,0.22); }
.trade-offer-sluma-portrait { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.trade-offer-sluma-portrait img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 7px 6px rgba(0,0,0,0.52)); }
.trade-offer-sluma-portrait .trade-sluma-variant-badge { bottom: 0; }
.trade-offer-sluma-details { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.trade-offer-sluma-details strong { max-width: 100%; overflow: hidden; color: #f8fafc; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.trade-offer-sluma-details > span { color: #94a3b8; font-size: 0.58rem; }
.trade-offer-element { max-width: 100%; padding: 2px 6px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 13%, transparent); color: color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 80%, white); font-size: 0.48rem; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

#tradeSlumaTooltip {
  position: fixed;
  z-index: 120;
  width: 260px;
  padding: 11px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 58%, #334155);
  border-radius: 13px;
  background: linear-gradient(155deg, rgba(17,25,39,0.985), rgba(5,9,17,0.99));
  box-shadow: 0 18px 48px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.07);
  transform: translateY(5px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
#tradeSlumaTooltip::before { content: ''; position: absolute; z-index: -1; width: 170px; height: 150px; left: -35px; top: -55px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 25%, transparent), transparent 72%); }
#tradeSlumaTooltip.is-visible { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
#tradeSlumaTooltip.is-shiny { border-color: rgba(250,204,21,0.72); box-shadow: 0 18px 50px rgba(0,0,0,0.74), 0 0 24px rgba(250,204,21,0.09); }
#tradeSlumaTooltip.is-ultra { border-color: rgba(192,132,252,0.78); box-shadow: 0 18px 50px rgba(0,0,0,0.74), 0 0 28px rgba(168,85,247,0.14); }
.trade-tooltip-header { min-height: 66px; display: grid; grid-template-columns: 64px 1fr; gap: 9px; align-items: center; }
.trade-tooltip-portrait { width: 64px; height: 64px; display: grid; place-items: center; }
.trade-tooltip-portrait img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.55)); }
.trade-tooltip-identity { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.trade-tooltip-identity strong { max-width: 100%; overflow: hidden; color: #f8fafc; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.trade-tooltip-identity > span { color: #94a3b8; font-size: 0.58rem; }
.trade-tooltip-variant { padding: 2px 6px; border: 1px solid; border-radius: 999px; font-size: 0.45rem; font-weight: 900; letter-spacing: 0.8px; }
.trade-tooltip-variant.is-shiny { border-color: rgba(250,204,21,0.62); background: rgba(202,138,4,0.18); color: #fde68a; }
.trade-tooltip-variant.is-ultra { border-color: rgba(192,132,252,0.66); background: rgba(126,34,206,0.2); color: #e9d5ff; }

/* =====================================================
   PUBLIC LANDING PAGE
   ===================================================== */
body.landing-active {
  display: block;
  min-height: 100vh;
  overflow-y: auto;
  background: #04110d;
}

body.landing-active .container {
  display: block;
  min-height: 100vh;
  padding: 0;
}

body.landing-active > .particles { display: none; }

.landing-page {
  --landing-header-height: 82px;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  color: #effff3;
  background: #06130f;
}

.landing-page::before {
  content: '';
  position: fixed;
  inset: var(--landing-header-height) 0 0;
  z-index: -3;
  background-image: url('/imagenes/fondo.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.landing-page::after {
  content: '';
  position: fixed;
  inset: var(--landing-header-height) 0 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,8,7,0.18) 0%, rgba(1,8,7,0.05) 25%, rgba(1,8,7,0.38) 58%, rgba(1,8,7,0.96) 100%),
    linear-gradient(90deg, rgba(1,9,7,0.68) 0%, rgba(1,9,7,0.12) 55%, rgba(1,9,7,0.22) 100%);
}

.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 35;
  width: 100%;
  min-height: var(--landing-header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 10px max(24px, calc((100vw - 1180px) / 2));
  border: 0;
  border-bottom: 1px solid rgba(134,239,172,0.28);
  border-radius: 0;
  background: linear-gradient(90deg, #03120f, #06251f 50%, #03120f);
  box-shadow: 0 18px 55px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(250,204,21,0.05);
  backdrop-filter: blur(14px);
  box-sizing: border-box;
}

.landing-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f8fffa;
  text-decoration: none;
}

.landing-brand > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.landing-brand strong { font: 700 10px/1.2 var(--font-game); letter-spacing: .7px; }
.landing-brand small { color: #4ade80; font: 700 7px/1 var(--font-game); letter-spacing: 3px; }

.landing-brand-gem,
.auth-pixel-gem {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border: 2px solid #d9f99d;
  background: linear-gradient(135deg, #facc15 0 48%, #22c55e 49% 100%);
  box-shadow: 0 0 0 3px rgba(5,46,22,0.85), 0 0 18px rgba(74,222,128,0.55);
}

.landing-brand-gem::after,
.auth-pixel-gem::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.22);
}

.landing-nav { display: flex; align-items: center; gap: 4px; }
.landing-nav-link {
  position: relative;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a7bfb5;
  padding: 12px 16px;
  font: 700 9px var(--font-game);
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.landing-nav-link:hover,
.landing-nav-link.is-active { color: #ecfccb; background: rgba(74,222,128,0.08); }
.landing-nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74,222,128,0.7);
}

.landing-create-account {
  margin-left: 5px;
  border: 1px solid rgba(74,222,128,0.38);
  background: rgba(34,197,94,0.08);
  color: #bbf7d0;
}
.landing-create-account:hover {
  border-color: rgba(190,242,100,0.72);
  background: rgba(74,222,128,0.14);
  color: #f7fee7;
}

.landing-header-play {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-width: 132px;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid #facc15;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(113,63,18,0.78), rgba(66,32,6,0.9));
  color: #fef3c7;
  font: 700 9px var(--font-game);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04), 0 0 20px rgba(250,204,21,0.1);
}
.landing-header-play i { color: #4ade80; font: 700 22px/0 sans-serif; }
.landing-header-play:hover { filter: brightness(1.17); transform: translateY(-1px); }

.landing-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-discord-link {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(129,140,248,.62);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(88,101,242,.2), rgba(46,52,134,.18));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.025), 0 0 18px rgba(88,101,242,.14);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.landing-discord-link img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(88,101,242,.55));
}
.landing-discord-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04), 0 0 24px rgba(88,101,242,.32);
}

.landing-hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: clamp(380px, 49vh, 520px) max(28px, calc((100vw - 1120px) / 2)) 72px;
}

.landing-hero-copy {
  width: min(700px, 92vw);
  padding: 28px 30px;
  border-left: 3px solid #4ade80;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(1,15,12,0.88), rgba(2,17,15,0.66) 72%, rgba(2,17,15,0.1));
  box-shadow: -18px 0 45px rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  animation: landingCopyIn .65s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes landingCopyIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
  color: #bef264;
  font: 700 8px var(--font-game);
  letter-spacing: 1.5px;
}
.landing-eyebrow i { display: inline-block; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, #bef264); }
.landing-eyebrow i:last-child { transform: scaleX(-1); }
.landing-hero h1 { color: #fff; font: 800 clamp(25px, 3.2vw, 46px)/1.17 var(--font-body); letter-spacing: -1.5px; text-shadow: 0 3px 18px rgba(0,0,0,.72); }
.landing-hero h1 em { color: #facc15; font-style: normal; }
.landing-hero-copy > p { max-width: 650px; margin-top: 15px; color: #d5e7de; font-size: 14px; line-height: 1.75; text-shadow: 0 2px 6px #000; }
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.landing-cta {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  color: #fff;
  font: 700 8px var(--font-game);
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s, filter .15s, border-color .15s;
}
.landing-cta:hover { transform: translateY(-2px); filter: brightness(1.12); }
.landing-cta-primary { border: 2px solid #facc15; background: linear-gradient(180deg,#a16207,#713f12); box-shadow: 4px 4px 0 rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.13); }
.landing-cta-primary i { margin-left: 15px; color: #d9f99d; font: 700 18px sans-serif; }
.landing-cta-secondary { border: 1px solid rgba(134,239,172,.42); background: rgba(4,32,26,.78); color: #dcfce7; }
.landing-live-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #8da69b; font-size: 10px; letter-spacing: .4px; }
.landing-live-note > span { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 9px #4ade80; animation: landingPulse 1.8s ease-in-out infinite; }
@keyframes landingPulse { 50% { opacity: .42; } }

.landing-pillars {
  position: relative;
  z-index: 2;
  padding: 36px max(24px, calc((100vw - 1180px) / 2)) 55px;
  border-top: 1px solid rgba(134,239,172,.14);
  background: linear-gradient(180deg, rgba(1,11,9,.96), rgba(1,8,7,.99));
}
.landing-section-title { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; }
.landing-section-title span { width: min(140px, 18vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(250,204,21,.55)); }
.landing-section-title span:last-child { transform: scaleX(-1); }
.landing-section-title p { color: #facc15; font: 700 8px var(--font-game); letter-spacing: 1.2px; text-align: center; }
.landing-pillar-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.landing-pillar-grid article {
  position: relative;
  min-height: 205px;
  padding: 24px 20px 20px;
  overflow: hidden;
  border: 1px solid rgba(134,239,172,.14);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(8,35,28,.78), rgba(2,18,15,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.landing-pillar-grid article::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#4ade80,transparent); opacity:.4; }
.landing-pillar-number { position: absolute; top: 10px; right: 12px; color: rgba(190,242,100,.18); font: 700 18px var(--font-game); }
.landing-pillar-icon { display:grid; place-items:center; width:46px; height:42px; margin-bottom:17px; border:1px solid rgba(250,204,21,.32); border-radius:9px; background:rgba(113,63,18,.18); color:#fde68a; font:700 7px var(--font-game); box-shadow:inset 0 0 14px rgba(250,204,21,.06); }
.landing-pillar-grid h2 { margin-bottom: 10px; color: #effff3; font-size: 14px; line-height: 1.35; }
.landing-pillar-grid p { color: #8fa89d; font-size: 11px; line-height: 1.65; }
.landing-footer { display:flex; align-items:center; justify-content:center; gap:13px; min-height:80px; border-top:1px solid rgba(255,255,255,.05); background:#010806; color:#d9f99d; font:700 8px var(--font-game); letter-spacing:.6px; }
.landing-footer .landing-brand-gem { width:13px; height:13px; }
.landing-footer small { color:#526b60; font:600 7px var(--font-game); }

.landing-dialog-overlay,
.auth-portal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(1,8,7,.82);
  backdrop-filter: blur(13px);
}
.landing-dialog { width:min(680px,95vw); max-height:88vh; overflow:hidden; border:1px solid rgba(250,204,21,.4); border-radius:16px; background:linear-gradient(155deg,#09251d,#04120f); box-shadow:0 28px 90px rgba(0,0,0,.72); }
.landing-dialog-head { display:flex; align-items:center; justify-content:space-between; padding:14px 17px; border-bottom:1px solid rgba(250,204,21,.18); color:#bef264; font:700 8px var(--font-game); letter-spacing:1px; }
.landing-dialog-head button,
.auth-portal-close { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(255,255,255,.04); color:#d6e5dc; font-size:21px; cursor:pointer; }
.landing-dialog-head button:hover,
.auth-portal-close:hover { border-color:#f87171; color:#fecaca; }
.landing-dialog-body { padding:26px; overflow-y:auto; }
.landing-dialog-kicker { color:#4ade80; font:700 7px var(--font-game); letter-spacing:1px; }
.landing-dialog-body h2 { margin:9px 0 22px; color:#fff; font-size:25px; }
.landing-dialog-body ol { list-style:none; display:grid; gap:10px; counter-reset:rule; }
.landing-dialog-body li { counter-increment:rule; display:grid; grid-template-columns:38px 1fr; gap:3px 12px; padding:12px; border:1px solid rgba(134,239,172,.1); border-radius:9px; background:rgba(255,255,255,.025); }
.landing-dialog-body li::before { content:'0' counter(rule); grid-row:1/3; color:#facc15; font:700 9px var(--font-game); padding-top:3px; }
.landing-dialog-body li strong { color:#eaffef; font-size:12px; }
.landing-dialog-body li span { color:#87a096; font-size:11px; line-height:1.55; }

/* Pixel-art authentication portal */
.auth-portal { z-index: 2050; overflow-y:auto; }
.auth-portal-close { position:fixed; top:24px; right:24px; z-index:2; }
.auth-stage { width:100%; display:flex; align-items:center; justify-content:center; padding:35px 0; }
.auth-portal .auth-card {
  width:min(450px,94vw);
  max-width:none;
  padding:32px 31px 28px;
  border:3px solid #d9f99d;
  border-radius:4px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(155deg,rgba(6,35,28,.99),rgba(2,15,13,.995));
  background-size:12px 12px,12px 12px,auto;
  box-shadow: 8px 8px 0 #020806, 0 0 0 3px #14532d, 0 0 45px rgba(74,222,128,.15);
  clip-path: polygon(0 12px,12px 12px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px));
}
.auth-portal .logo { margin-bottom:25px; }
.auth-portal .logo-icon { height:38px; margin-bottom:15px; font-size:0; }
.auth-portal .auth-pixel-gem { width:25px; height:25px; }
.auth-portal .logo h1 { color:#f7fee7; font-size:16px; line-height:1.6; text-shadow:3px 3px 0 #052e16; }
.auth-portal .logo h1 span { color:#4ade80; letter-spacing:5px; }
.auth-portal .subtitle { color:#7fa094; font-style:normal; font-size:11px; letter-spacing:1px; }
.auth-portal .input-group { margin-bottom:16px; }
.auth-portal .input-group label { color:#d9f99d; font:700 7px var(--font-game); letter-spacing:.5px; text-transform:uppercase; }
.auth-portal .label-icon { display:inline-grid; place-items:center; min-width:27px; height:18px; border:1px solid rgba(250,204,21,.35); background:rgba(113,63,18,.2); color:#fde68a; font:700 5px var(--font-game); }
.auth-portal .input-group input { height:45px; border:2px solid #1b5e3a; border-radius:2px; background:#020d0b; color:#ecfccb; font-family:var(--font-body); box-shadow:inset 3px 3px 0 rgba(0,0,0,.38); }
.auth-portal .input-group input:focus { border-color:#84cc16; box-shadow:inset 3px 3px 0 rgba(0,0,0,.38),0 0 0 2px rgba(132,204,22,.14); }
.auth-portal .toggle-password { top:31px; right:7px; width:auto; color:#86efac; font:700 5px var(--font-game); opacity:.72; }
.auth-portal .btn-primary { min-height:48px; border:2px solid #facc15; border-radius:2px; background:linear-gradient(180deg,#4d7c0f,#285a16); color:#f7fee7; font:700 8px var(--font-game); box-shadow:4px 4px 0 #020806; }
.auth-portal .btn-primary:hover { background:linear-gradient(180deg,#65a30d,#34721b); box-shadow:6px 6px 0 #020806; }
.auth-portal .switch-text { color:#729084; font-size:11px; }
.auth-portal .switch-text a,
.auth-portal .terms a { color:#bef264; }
.auth-portal .terms { color:#8ba398; font-size:11px; }
.auth-portal .char-counter { color:#638075; font:600 7px var(--font-game); }

/* Ranking/profile overlays can be opened from the public landing page. */
#gameScreen.public-overlay-host {
  display: block !important;
  z-index: 1900;
  pointer-events: none;
  background: transparent;
}
#gameScreen.public-overlay-host > :not(#rankingHudOverlay):not(#viewerProfileOverlay) { display:none !important; }
#gameScreen.public-overlay-host #rankingHudOverlay,
#gameScreen.public-overlay-host #viewerProfileOverlay { pointer-events:auto; }
#rankingHudOverlay.is-public-view .ranking-summary-card { display:none; }
#rankingHudOverlay.is-public-view #rankingSummaryBar { justify-content:flex-end; }

@media (max-width: 900px) {
  .landing-header { grid-template-columns:auto 1fr auto; }
  .landing-brand strong { font-size:8px; }
  .landing-brand small { font-size:6px; }
  .landing-pillar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .landing-page { --landing-header-height:66px; }
  .landing-header { top:0; width:100%; min-height:var(--landing-header-height); padding:8px 6px; gap:4px; }
  .landing-brand > span:last-child { display:none; }
  .landing-nav { justify-self:center; gap:0; }
  .landing-nav-link { padding:11px 4px; font-size:5px; }
  .landing-create-account { margin-left:2px; }
  .landing-nav-link.is-active::after { left:9px; right:9px; }
  .landing-header-actions { gap:4px; }
  .landing-discord-link { width:32px; height:32px; border-radius:8px; }
  .landing-discord-link img { width:19px; height:19px; }
  .landing-header-play { min-width:64px; padding:10px 6px; gap:5px; font-size:6px; }
  .landing-header-play i { font-size:17px; }
  .landing-hero { min-height:100svh; padding:340px 14px 36px; }
  .landing-hero-copy { width:100%; padding:21px 18px; border-left-width:2px; }
  .landing-eyebrow { font-size:6px; letter-spacing:.6px; }
  .landing-eyebrow i { width:18px; }
  .landing-hero h1 { font-size:27px; letter-spacing:-.7px; }
  .landing-hero-copy > p { font-size:12px; line-height:1.65; }
  .landing-hero-actions { flex-direction:column; }
  .landing-cta { width:100%; }
  .landing-live-note { font-size:8px; line-height:1.5; }
  .landing-pillars { padding:30px 14px 40px; }
  .landing-pillar-grid { grid-template-columns:1fr; }
  .landing-pillar-grid article { min-height:0; }
  .landing-footer { padding:20px; text-align:center; line-height:1.6; }
  .landing-footer small { display:block; margin-top:6px; }
  .auth-portal { padding:10px; align-items:flex-start; }
  .auth-portal-close { top:12px; right:12px; }
  .auth-stage { padding:58px 0 22px; }
  .auth-portal .auth-card { padding:27px 20px 23px; }
  .landing-dialog-body { padding:19px 15px; }
}
.trade-tooltip-section-title { margin: 9px 0 5px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.075); color: #64748b; font-size: 0.49rem; font-weight: 900; letter-spacing: 1px; }
.trade-tooltip-stats { display: flex; flex-direction: column; gap: 4px; }
.trade-tooltip-stat { min-height: 31px; padding: 4px 6px; display: grid; grid-template-columns: 28px 1fr auto 30px; gap: 6px; align-items: center; border: 1px solid rgba(255,255,255,0.045); border-radius: 7px; background: rgba(255,255,255,0.028); }
.trade-tooltip-stat-short { color: color-mix(in srgb, var(--trade-sluma-color, #94a3b8) 80%, white); font-size: 0.48rem; font-weight: 900; }
.trade-tooltip-stat-name { color: #94a3b8; font-size: 0.57rem; }
.trade-tooltip-stat strong { color: #f1f5f9; font-size: 0.65rem; font-variant-numeric: tabular-nums; }
.trade-tooltip-rarity { min-width: 26px; padding: 2px 3px; border: 1px solid currentColor; border-radius: 5px; background: rgba(255,255,255,0.035); font-size: 0.48rem; font-weight: 950; text-align: center; }
.trade-tooltip-footer { margin-top: 7px; color: #475569; font-size: 0.5rem; line-height: 1.35; text-align: center; }
.trade-direction-arrow { color: #4ade80; font-size: 1.3rem; text-align: center; opacity: 0.7; }

#tradeHudFooter { min-height: 88px; padding: 9px 14px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center; flex-shrink: 0; border-top: 1px solid rgba(74,222,128,0.1); background: rgba(4,8,15,0.62); }
#tradeSecurityNotice { color: #64748b; font-size: 0.62rem; }
#tradeHudStatus { min-height: 16px; color: #93c5fd; font-size: 0.64rem; }
#tradeHudStatus.is-error { color: #fca5a5; }
#tradeHudStatus.is-success { color: #86efac; }
#tradeFooterActions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 7px; }
#tradeFooterActions button { height: 38px; padding: 0 14px; border-radius: 8px; font-weight: 800; cursor: pointer; }
#tradeCancelBtn { border: 1px solid rgba(239,68,68,0.28); background: rgba(239,68,68,0.09); color: #fca5a5; }
#tradeAcceptOfferBtn { border: 1px solid rgba(34,197,94,0.42); background: rgba(34,197,94,0.19); color: #86efac; }
#tradeAcceptOfferBtn:disabled, #tradeUpdateOfferBtn:disabled { opacity: 0.5; cursor: default; }

.trade-inline-action {
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(34,197,94,0.28);
  border-radius: 7px;
  background: rgba(34,197,94,0.1);
  color: #86efac;
  font-size: 0.6rem;
  font-weight: 750;
  cursor: pointer;
}

@media (max-width: 760px) {
  #tradeHudBody { grid-template-columns: 1fr; overflow-y: auto; }
  #tradeAssetPicker { overflow: visible; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
  #tradeOffersPane { min-height: 420px; }
  #tradeAvailableSlumas { grid-template-columns: repeat(3, 1fr); }
  .trade-offer-sluma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  #tradeHudOverlay { padding: 5px; }
  #tradeHudPanel { width: 100%; height: 97vh; border-radius: 12px; }
  #tradeHudFooter { grid-template-columns: 1fr; }
  #tradeFooterActions { grid-column: 1; grid-row: auto; }
  #tradeFooterActions button { flex: 1; }
  .trade-offer-sluma-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   PLAYER TRADE TERMINAL · PROFESSIONAL REDESIGN
   ===================================================== */
#tradeRequestOverlay,
#tradeHudOverlay {
  --trade-green: #4ade80;
  --trade-lime: #bef264;
  --trade-gold: #facc15;
  --trade-cyan: #22d3ee;
  --trade-ink: #020b0a;
  background:
    radial-gradient(circle at 50% 24%, rgba(74,222,128,.11), transparent 32%),
    linear-gradient(rgba(1,10,8,.76), rgba(1,7,6,.92));
  backdrop-filter: blur(13px) saturate(.78);
}

#tradeRequestPanel {
  position: relative;
  width: min(470px, 94vw);
  padding: 0 26px 25px;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(190,242,100,.4);
  border-radius: 18px;
  background:
    linear-gradient(rgba(74,222,128,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,.025) 1px, transparent 1px),
    linear-gradient(155deg, rgba(7,31,25,.99), rgba(2,13,12,.995));
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: 0 36px 95px rgba(0,0,0,.82), 0 0 0 1px rgba(250,204,21,.06), 0 0 48px rgba(74,222,128,.1), inset 0 1px rgba(255,255,255,.06);
  animation: tradeTerminalEnter .42s cubic-bezier(.16,1,.3,1) both;
}

#tradeRequestPanel::after {
  content: '';
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #bef264, #facc15, transparent);
  box-shadow: 0 0 16px rgba(190,242,100,.65);
}

.trade-request-topline {
  width: calc(100% + 52px);
  min-height: 46px;
  margin: 0 -26px 20px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(190,242,100,.16);
  background: rgba(1,14,11,.72);
  color: #a7c7b8;
  font: 700 6px var(--font-game);
  letter-spacing: .8px;
}
.trade-request-topline > span { display: inline-flex; align-items: center; gap: 8px; }
.trade-request-topline i,
#tradeLiveSession i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: tradeLivePulse 1.55s ease-in-out infinite;
}
.trade-request-topline b { color: #bef264; font-weight: 700; }

.trade-request-players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 1px 0 18px;
}
.trade-request-players > span {
  width: 61px;
  height: 61px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34,211,238,.48);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(8,47,73,.76), rgba(3,22,31,.92));
  color: #cffafe;
  font: 700 14px var(--font-game);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 9px 24px rgba(0,0,0,.35), 0 0 18px rgba(34,211,238,.08);
}
.trade-request-players > span.is-you {
  border-color: rgba(190,242,100,.45);
  background: linear-gradient(145deg, rgba(54,83,20,.7), rgba(16,35,12,.92));
  color: #ecfccb;
  font-size: 7px;
}
.trade-request-link { display: flex; align-items: center; gap: 7px; color: #bef264; }
.trade-request-link i { width: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(190,242,100,.62)); }
.trade-request-link i:last-child { transform: scaleX(-1); }
.trade-request-link b { font-size: 1.1rem; text-shadow: 0 0 13px rgba(190,242,100,.7); animation: tradeExchangePulse 1.9s ease-in-out infinite; }

.trade-request-kicker { color: #4ade80; font: 700 6px var(--font-game); letter-spacing: 1.4px; }
#tradeRequestPanel h3 { margin-top: 8px; color: #f7fee7; font-size: 1rem; line-height: 1.45; text-shadow: 0 0 20px rgba(74,222,128,.12); }
#tradeRequestPanel > p { max-width: 340px; margin: 10px auto 18px; color: #91aa9f; font-size: .76rem; line-height: 1.55; }
#tradeRequestPanel > p strong { color: #fef08a; }

#tradeRequestTimer {
  width: 100%;
  padding: 11px 12px 10px;
  border: 1px solid rgba(34,211,238,.15);
  border-radius: 10px;
  background: rgba(3,18,20,.72);
}
#tradeRequestTimer > div:first-child { display: flex; align-items: center; justify-content: space-between; }
#tradeRequestTimer span { color: #63827b; font: 700 5px var(--font-game); letter-spacing: .8px; }
#tradeRequestCountdown { color: #a5f3fc; font: 700 6px var(--font-game); }
#tradeRequestProgress { height: 4px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.055); }
#tradeRequestProgressBar { width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #4ade80, #bef264); box-shadow: 0 0 10px rgba(74,222,128,.45); transition: width .3s linear; }
.trade-request-security { width: 100%; margin-top: 10px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(250,204,21,.12); border-radius: 9px; background: rgba(113,63,18,.075); text-align: left; }
.trade-request-security > span { color: #facc15; font-size: .65rem; }
.trade-request-security p { color: #8c8877; font-size: .6rem; line-height: 1.4; }
#tradeRequestActions { margin-top: 16px; gap: 10px; }
#tradeRequestActions button { height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 9px; font: 700 6px var(--font-game); letter-spacing: .3px; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
#tradeRequestActions button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.15); }
#tradeRequestReject { border-color: rgba(248,113,113,.3); background: rgba(127,29,29,.16); color: #fca5a5; }
#tradeRequestAccept { border-color: rgba(190,242,100,.5); background: linear-gradient(180deg, rgba(77,124,15,.82), rgba(39,74,12,.92)); color: #f7fee7; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.28); }
#tradeRequestAccept span { color: #facc15; font: 800 16px/0 sans-serif; }

#tradeHudOverlay { padding: 12px; }
#tradeHudPanel {
  position: relative;
  width: min(1220px, 98vw);
  height: min(770px, 96vh);
  border: 1px solid rgba(190,242,100,.33);
  border-radius: 17px;
  background:
    linear-gradient(rgba(74,222,128,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,.018) 1px, transparent 1px),
    linear-gradient(155deg, rgba(4,23,18,.995), rgba(2,12,12,.997));
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: 0 40px 105px rgba(0,0,0,.86), 0 0 0 1px rgba(250,204,21,.045), 0 0 52px rgba(74,222,128,.075), inset 0 1px rgba(255,255,255,.05);
  animation: tradeTerminalEnter .38s cubic-bezier(.16,1,.3,1) both;
}
#tradeHudPanel::before {
  content: '';
  position: absolute;
  z-index: 5;
  top: 0;
  left: 9%;
  right: 9%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4ade80, #facc15, #4ade80, transparent);
  opacity: .75;
  box-shadow: 0 0 16px rgba(74,222,128,.55);
}

#tradeHudHeader {
  min-height: 78px;
  padding: 0 18px 0 20px;
  border-bottom-color: rgba(190,242,100,.16);
  background: linear-gradient(90deg, rgba(22,101,52,.14), rgba(5,46,22,.04) 55%, transparent);
}
.trade-hud-heading { display: flex !important; flex-direction: row !important; align-items: center; gap: 13px !important; }
.trade-hud-emblem {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(190,242,100,.45);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(77,124,15,.28), rgba(5,46,22,.48));
  color: #d9f99d;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 20px rgba(74,222,128,.08);
}
.trade-hud-emblem i { font: 800 1.3rem/1 sans-serif; text-shadow: 0 0 12px rgba(190,242,100,.7); }
.trade-hud-heading > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.trade-hud-kicker { color: #4ade80; font: 700 5px var(--font-game); letter-spacing: 1.5px; }
#tradeHudTitle { color: #f7fee7; font: 700 13px/1.2 var(--font-game); letter-spacing: .4px; text-transform: uppercase; }
#tradeHudSubtitle { color: #7c9a8c; font-size: .64rem; }
.trade-hud-header-actions { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; }
#tradeLiveSession { height: 31px; padding: 0 11px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(74,222,128,.18); border-radius: 999px; background: rgba(22,101,52,.12); color: #86efac; font: 700 5px var(--font-game); letter-spacing: .6px; }
#tradeHudClose { width: 38px; height: 38px; border-color: rgba(248,113,113,.22); border-radius: 9px; background: rgba(127,29,29,.11); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
#tradeHudClose:hover { transform: rotate(4deg); border-color: rgba(248,113,113,.5); background: rgba(127,29,29,.24); }

#tradeHudBody { grid-template-columns: minmax(360px, .82fr) minmax(600px, 1.48fr); }
#tradeAssetPicker {
  padding: 16px;
  gap: 12px;
  overflow: hidden;
  border-right-color: rgba(190,242,100,.12);
  background: linear-gradient(180deg, rgba(3,28,22,.54), rgba(2,15,14,.34));
}
.trade-builder-heading,
.trade-review-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.trade-builder-heading > div,
.trade-review-heading > div { display: flex; flex-direction: column; gap: 5px; }
.trade-builder-heading span,
.trade-review-heading span { color: #4ade80; font: 700 5px var(--font-game); letter-spacing: 1px; }
.trade-builder-heading h4,
.trade-review-heading h4 { margin: 0; color: #eefdf2; font-size: .9rem; }
.trade-builder-heading > small,
.trade-review-heading > small { color: #607a6f; font-size: .57rem; }

#tradeAssetTabs { min-height: 44px; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border: 1px solid rgba(255,255,255,.055); border-radius: 10px; background: rgba(1,12,11,.65); }
#tradeAssetTabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 7px; background: transparent; color: #658076; font: 700 5px var(--font-game); cursor: pointer; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
#tradeAssetTabs button b { min-width: 19px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,.055); color: #829d92; font: 800 8px var(--font-body); }
#tradeAssetTabs button.is-active { background: linear-gradient(180deg, rgba(74,222,128,.15), rgba(22,101,52,.13)); color: #dcfce7; box-shadow: inset 0 0 0 1px rgba(74,222,128,.22), 0 5px 12px rgba(0,0,0,.18); }
#tradeAssetTabs button.is-active b { background: rgba(190,242,100,.14); color: #d9f99d; }

#tradeAssetPanels { flex: 1; min-height: 0; }
.trade-asset-panel { height: 100%; padding: 11px; overflow-y: auto; border: 1px solid rgba(255,255,255,.065); border-radius: 11px; background: rgba(1,13,12,.52); animation: tradePanelReveal .2s ease both; }
.trade-asset-panel[hidden] { display: none !important; }
.trade-picker-heading { margin-bottom: 10px; color: #d8e8df; }
.trade-picker-heading small { color: #688279; }
#tradeAvailableSlumas { max-height: none; grid-template-columns: repeat(3, minmax(80px, 1fr)); gap: 8px; }
.trade-sluma-option { min-height: 112px; padding: 8px 6px 7px; border-color: rgba(134,239,172,.1); border-radius: 10px; background: linear-gradient(145deg, rgba(9,30,26,.92), rgba(3,16,15,.94)); }
.trade-sluma-option:hover { box-shadow: 0 8px 22px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.04); }
.trade-sluma-option.is-selected { border-color: rgba(190,242,100,.72); background: linear-gradient(145deg, rgba(54,83,20,.34), rgba(5,46,22,.5)); box-shadow: inset 0 0 0 1px rgba(190,242,100,.14), 0 0 18px rgba(74,222,128,.07); }
.trade-sluma-option-portrait { width: 61px; height: 61px; }
.trade-sluma-option img { width: 59px; height: 59px; image-rendering: auto; }
.trade-sluma-option-name { font-size: .64rem; }
.trade-sluma-option-meta { font-size: .52rem; }

#tradeAvailableItems { gap: 7px; }
.trade-item-option { min-height: 48px; padding: 6px 8px; grid-template-columns: 38px 1fr 76px; border: 1px solid rgba(134,239,172,.075); border-radius: 9px; background: linear-gradient(90deg, rgba(8,31,26,.74), rgba(3,17,15,.66)); transition: border-color .15s ease, background .15s ease; }
.trade-item-option:focus-within { border-color: rgba(34,211,238,.34); background: rgba(8,47,73,.13); }
.trade-item-option-icon { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.055); border-radius: 8px; background: rgba(0,0,0,.2); }
.trade-item-option-icon img { width: 32px; height: 32px; image-rendering: auto; }
.trade-item-quantity { height: 32px; border-color: rgba(34,211,238,.17); background: #020c0c; color: #cffafe; }

#tradeMoneyField { min-height: 104px; padding: 15px; grid-template-columns: 54px 1fr; gap: 10px; border-color: rgba(250,204,21,.22); border-radius: 12px; background: linear-gradient(145deg, rgba(113,63,18,.12), rgba(42,25,4,.08)); }
.trade-money-symbol { grid-row: 1 / span 2; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(250,204,21,.35); border-radius: 12px; background: rgba(161,98,7,.16); color: #fde68a; font: 800 1.2rem var(--font-body); box-shadow: inset 0 1px rgba(255,255,255,.05); }
#tradeMoneyField > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
#tradeMoneyField > span:nth-child(2) b { color: #fef3c7; font-size: .75rem; }
#tradeMoneyInput { grid-column: 1 / -1; height: 40px; padding: 0 12px; border-color: rgba(250,204,21,.28); background: #100d04; color: #fde68a; font-size: .9rem; font-weight: 800; }
.trade-money-note { margin-top: 10px; color: #756e58; font-size: .58rem; line-height: 1.5; }

#tradeOfferDraftSummary { min-height: 48px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid rgba(134,239,172,.09); border-radius: 10px; background: rgba(1,12,10,.68); }
#tradeOfferDraftSummary > span { padding: 7px 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#tradeOfferDraftSummary > span + span { border-left: 1px solid rgba(255,255,255,.055); }
#tradeOfferDraftSummary small { color: #587068; font: 700 4px var(--font-game); }
#tradeOfferDraftSummary b { color: #e7f9ed; font-size: .72rem; font-variant-numeric: tabular-nums; }
#tradeDraftMoney { color: #fde68a !important; }
#tradeUpdateOfferBtn { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 15px; border-color: rgba(34,211,238,.35); border-radius: 9px; background: linear-gradient(180deg, rgba(14,116,144,.38), rgba(8,47,73,.6)); color: #cffafe; font: 700 6px var(--font-game); letter-spacing: .5px; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 7px 18px rgba(0,0,0,.25); transition: transform .15s ease, filter .15s ease; }
#tradeUpdateOfferBtn i { color: #bef264; font: 800 18px/0 sans-serif; }
#tradeUpdateOfferBtn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.15); }
#tradeUpdateOfferBtn.is-dirty { border-color: rgba(190,242,100,.5); background: linear-gradient(180deg, rgba(77,124,15,.46), rgba(39,74,12,.66)); color: #ecfccb; box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 18px rgba(74,222,128,.08); }

#tradeOffersPane { padding: 16px; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 13px 8px; background: rgba(1,12,11,.18); }
.trade-review-heading { grid-column: 1 / -1; }
.trade-offer-card { border-radius: 13px; background: linear-gradient(155deg, rgba(7,27,24,.86), rgba(2,14,13,.9)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.2); }
.trade-offer-card.is-self { border-color: rgba(34,211,238,.2); }
.trade-offer-card.is-partner { border-color: rgba(250,204,21,.18); }
.trade-offer-card.is-accepted { border-color: rgba(74,222,128,.66); box-shadow: inset 0 0 30px rgba(74,222,128,.035), 0 0 25px rgba(74,222,128,.075); }
.trade-offer-head { min-height: 64px; padding: 9px 10px; border-bottom-color: rgba(134,239,172,.08); background: rgba(0,0,0,.13); }
.trade-party-identity { min-width: 0; display: flex; align-items: center; gap: 8px; }
.trade-party-identity > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(34,211,238,.35); border-radius: 9px; background: rgba(8,47,73,.38); color: #a5f3fc; font: 700 7px var(--font-game); }
.is-partner .trade-party-identity > span { border-color: rgba(250,204,21,.3); background: rgba(113,63,18,.2); color: #fde68a; }
.trade-party-identity > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trade-party-identity small { color: #557169; font: 700 4px var(--font-game); letter-spacing: .55px; }
.trade-party-identity strong { max-width: 150px; overflow: hidden; color: #eefdf2; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.trade-accept-state { padding: 5px 7px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; background: rgba(255,255,255,.03); color: #6f8b80; font-size: .5rem; white-space: nowrap; }
.trade-accept-state i { width: 6px; height: 6px; border-radius: 50%; background: #64748b; }
.trade-accept-state.is-accepted { border-color: rgba(74,222,128,.28); background: rgba(22,101,52,.2); color: #bbf7d0; }
.trade-accept-state.is-accepted i { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.trade-offer-content { padding: 10px; }
.trade-offer-empty { position: relative; flex-direction: column; gap: 8px; color: #506c62; }
.trade-offer-empty::before { content: '◇'; color: #395a4d; font-size: 1.65rem; }
.trade-offer-group-title { color: #6d897d; font: 700 5px var(--font-game); letter-spacing: .6px; }
.trade-offer-entry { min-height: 38px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.045); background: rgba(255,255,255,.022); }
.trade-offer-sluma-grid { grid-template-columns: 1fr; gap: 8px; }
.trade-offer-sluma { min-height: 94px; grid-template-columns: 78px minmax(0,1fr); border-radius: 11px; }
.trade-offer-sluma-portrait { width: 76px; height: 76px; }
.trade-offer-sluma-portrait img { width: 74px; height: 74px; image-rendering: auto; }
.trade-direction-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #bef264; opacity: 1; }
.trade-direction-arrow i { width: 1px; flex: 1; background: linear-gradient(transparent, rgba(190,242,100,.28), transparent); }
.trade-direction-arrow span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(190,242,100,.3); border-radius: 50%; background: #071d15; color: #bef264; font-size: 1rem; box-shadow: 0 0 17px rgba(74,222,128,.08); animation: tradeExchangePulse 2.1s ease-in-out infinite; }

#tradeHudFooter { min-height: 98px; padding: 10px 16px; grid-template-columns: minmax(0,1fr) auto; gap: 13px; border-top-color: rgba(190,242,100,.12); background: linear-gradient(90deg, rgba(3,25,20,.92), rgba(1,12,11,.96)); }
#tradeFooterInfo { min-width: 0; display: grid; grid-template-columns: auto minmax(280px,1fr); gap: 7px 20px; align-items: center; }
#tradeSecurityNotice { display: flex; align-items: center; gap: 9px; }
#tradeSecurityNotice > span { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(250,204,21,.23); border-radius: 8px; background: rgba(113,63,18,.12); color: #facc15; }
#tradeSecurityNotice p { display: flex; flex-direction: column; gap: 3px; }
#tradeSecurityNotice strong { color: #dcece4; font-size: .64rem; }
#tradeSecurityNotice small { color: #60766d; font-size: .53rem; }
#tradeConfirmationTrack { display: flex; align-items: center; justify-content: flex-end; }
#tradeConfirmationTrack > span { display: flex; align-items: center; gap: 5px; color: #536d63; font-size: .5rem; white-space: nowrap; }
#tradeConfirmationTrack span i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; background: #071410; color: #587068; font-size: .52rem; font-style: normal; }
#tradeConfirmationTrack span.is-complete { color: #bbf7d0; }
#tradeConfirmationTrack span.is-complete i { border-color: rgba(74,222,128,.36); background: rgba(22,101,52,.28); color: #86efac; box-shadow: 0 0 10px rgba(74,222,128,.06); }
#tradeConfirmationTrack em { width: clamp(12px,2.5vw,38px); height: 1px; margin: 0 5px; background: rgba(255,255,255,.08); }
#tradeHudStatus { grid-column: 1 / -1; min-height: 15px; padding-left: 38px; color: #7dd3fc; font-size: .58rem; }
#tradeHudStatus::before { content: '•'; margin-right: 6px; color: currentColor; }
#tradeHudStatus:empty::before { display: none; }
#tradeFooterActions { grid-column: 2; grid-row: 1; align-self: stretch; align-items: center; }
#tradeFooterActions button { height: 45px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; font: 700 5.5px var(--font-game); letter-spacing: .25px; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
#tradeFooterActions button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.15); }
#tradeCancelBtn { border-color: rgba(248,113,113,.26); background: rgba(127,29,29,.14); color: #fecaca; }
#tradeAcceptOfferBtn { min-width: 158px; border-color: rgba(190,242,100,.5); background: linear-gradient(180deg, rgba(77,124,15,.78), rgba(39,74,12,.92)); color: #f7fee7; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.25); }
#tradeAcceptOfferBtn i { color: #facc15; font: 900 15px/0 sans-serif; }
#tradeAcceptOfferBtn:disabled,
#tradeUpdateOfferBtn:disabled { filter: grayscale(.35); opacity: .48; }

@keyframes tradeTerminalEnter {
  from { opacity: 0; transform: translateY(18px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tradePanelReveal {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tradeLivePulse { 50% { opacity: .42; transform: scale(.82); } }
@keyframes tradeExchangePulse { 50% { transform: scale(1.08); filter: brightness(1.25); } }

@media (max-width: 1040px) {
  #tradeHudPanel { width: min(970px, 98vw); }
  #tradeHudBody { grid-template-columns: minmax(330px,.85fr) minmax(480px,1.15fr); }
  #tradeOffersPane { grid-template-columns: 1fr; grid-template-rows: auto minmax(210px,1fr) 30px minmax(210px,1fr); overflow-y: auto; }
  .trade-review-heading { grid-column: 1; }
  .trade-direction-arrow { flex-direction: row; min-height: 30px; }
  .trade-direction-arrow i { height: 1px; width: auto; }
  .trade-direction-arrow span { width: 30px; height: 30px; }
  #tradeFooterInfo { grid-template-columns: 1fr; }
  #tradeConfirmationTrack { justify-content: flex-start; }
  #tradeHudStatus { padding-left: 0; }
}

@media (max-width: 780px) {
  #tradeHudPanel { height: 97vh; }
  #tradeHudBody { display: block; overflow-y: auto; }
  #tradeAssetPicker { min-height: 560px; overflow: visible; }
  #tradeAssetPanels { min-height: 330px; }
  #tradeOffersPane { min-height: 680px; overflow: visible; }
  #tradeHudFooter { grid-template-columns: 1fr; }
  #tradeFooterActions { grid-column: 1; grid-row: auto; }
  #tradeFooterActions button { flex: 1; }
}

@media (max-width: 540px) {
  #tradeHudOverlay { padding: 3px; }
  #tradeHudPanel { width: 100%; border-radius: 11px; }
  #tradeHudHeader { min-height: 68px; padding: 0 10px; }
  .trade-hud-emblem { width: 38px; height: 38px; }
  #tradeHudTitle { font-size: 10px; }
  #tradeLiveSession { display: none; }
  #tradeAvailableSlumas { grid-template-columns: repeat(2,minmax(80px,1fr)); }
  .trade-builder-heading > small,
  .trade-review-heading > small { display: none; }
  #tradeConfirmationTrack span b { display: none; }
  #tradeConfirmationTrack em { flex: 1; }
  #tradeFooterActions button { padding: 0 8px; font-size: 5px; }
  #tradeRequestPanel { padding-left: 17px; padding-right: 17px; }
  .trade-request-topline { width: calc(100% + 34px); margin-left: -17px; margin-right: -17px; }
}

#viewerProfileExpBar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

#viewerProfileExpFill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #22d3ee, #818cf8, #a78bfa);
  transition: width 0.4s cubic-bezier(0.22,1,0.36,1);
  width: 0%;
  box-shadow: 0 0 8px rgba(129,140,248,0.4);
}

#viewerProfileExpText {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: rgba(148,163,184,0.6);
  letter-spacing: 0.3px;
}

#viewerProfileCreatedRow,
#viewerProfilePlaytimeRow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.7rem;
}

#viewerProfileCreatedAt,
#viewerProfilePlayTime {
  color: #e2e8f0;
  font-weight: 700;
  margin-left: auto;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
}

#viewerProfileCollectionCard {
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(10,14,24,0.4) 100%);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#viewerProfileCollectionTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #a5b4fc;
  letter-spacing: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(99,102,241,0.1);
}

#viewerProfileCollectionGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

#viewerProfileSlumasSection {
  border: 1px solid rgba(34,197,94,0.12);
  border-radius: 14px;
  background: rgba(34,197,94,0.04);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#viewerProfileSlumasTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: #86efac;
  letter-spacing: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(34,197,94,0.1);
}

#viewerProfileSlumasList {
  gap: 5px;
}

/* Public profile micro-passive build (shared by Ranking, Chat and Friends). */
#viewerMicroPassivesSection {
  grid-column: 1 / -1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(192, 132, 252, 0.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 85% -20%, rgba(236, 72, 153, 0.16), transparent 48%),
    linear-gradient(145deg, rgba(88, 28, 135, 0.12), rgba(10, 14, 24, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#viewerMicroPassivesSection::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, #c084fc, #f472b6, transparent);
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.55);
}

#viewerMicroPassivesHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding: 0 1px 8px;
  border-bottom: 1px solid rgba(192, 132, 252, 0.14);
}

#viewerMicroPassivesHeader span {
  color: #e9d5ff;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  line-height: 1.45;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

#viewerMicroPassivesHeader span::before {
  content: '✦';
  margin-right: 7px;
  color: #f472b6;
  text-shadow: 0 0 9px rgba(244, 114, 182, 0.72);
}

#viewerMicroPassivesHeader small {
  color: rgba(216, 180, 254, 0.58);
  font-size: 0.62rem;
  line-height: 1.35;
  text-align: right;
}

#viewerMicroPassivesList {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.viewer-micro-passive-slot {
  --micro-color: #a78bfa;
  min-width: 0;
  min-height: 108px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 11px;
  background: rgba(5, 8, 18, 0.58);
  text-align: center;
}

.viewer-micro-passive-slot::after {
  content: '';
  position: absolute;
  inset: auto 14% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--micro-color), transparent);
  opacity: 0;
}

.viewer-micro-passive-slot.is-active {
  border-color: color-mix(in srgb, var(--micro-color) 52%, transparent);
  background:
    radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--micro-color) 18%, transparent), transparent 54%),
    rgba(5, 8, 18, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 0 15px color-mix(in srgb, var(--micro-color) 9%, transparent);
}

.viewer-micro-passive-slot.is-active::after { opacity: 0.72; }

.viewer-micro-passive-slot.is-empty {
  min-height: 108px;
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.13);
  background: rgba(15, 23, 42, 0.25);
}

.viewer-micro-slot-number {
  position: absolute;
  top: 7px;
  left: 8px;
  color: rgba(216, 180, 254, 0.48);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.42rem;
}

.viewer-micro-slot-number::before {
  content: 'S';
  margin-right: 1px;
  color: rgba(244, 114, 182, 0.5);
}

.viewer-micro-empty-label {
  color: rgba(148, 163, 184, 0.38);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.43rem;
  line-height: 1.5;
}

.viewer-micro-empty-label::before {
  content: '+';
  display: grid;
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, 0.15);
  border-radius: 50%;
  color: rgba(216, 180, 254, 0.3);
  font-size: 0.75rem;
}

.viewer-micro-portrait {
  width: 48px;
  height: 42px;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
}

.viewer-micro-portrait::before {
  content: '';
  position: absolute;
  inset: 8px 7px 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--micro-color) 18%, transparent);
  filter: blur(5px);
}

.viewer-micro-portrait img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
}

.viewer-micro-passive-slot strong {
  width: 100%;
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.67rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-micro-passive-slot small {
  width: 100%;
  overflow: hidden;
  color: rgba(203, 213, 225, 0.57);
  font-size: 0.56rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-micro-power {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 4px;
  border: 1px solid color-mix(in srgb, var(--micro-color) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--micro-color) 12%, rgba(5, 8, 18, 0.9));
  color: color-mix(in srgb, var(--micro-color) 75%, white);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.35rem;
  line-height: 1.4;
}

.viewer-micro-passive-slot.is-shiny {
  box-shadow: inset 0 0 16px rgba(250, 204, 21, 0.07), 0 0 14px rgba(250, 204, 21, 0.07);
}

.viewer-micro-passive-slot.is-ultra {
  box-shadow: inset 0 0 18px rgba(168, 85, 247, 0.11), 0 0 16px rgba(168, 85, 247, 0.1);
}

/* =====================================================
   NEW PLAYER WELCOME + INTERACTIVE FIELD GUIDE
   ===================================================== */
.new-player-welcome {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: none;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background: #010504;
  color: #f7fee7;
}

.new-player-welcome-bg {
  position: absolute;
  inset: -20px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.88)),
    url('/imagenes/fondo.png') center / cover no-repeat;
  filter: blur(5px) saturate(.72);
  transform: scale(1.04);
  opacity: 0;
  transition: opacity .65s ease;
}

.new-player-welcome-card {
  position: relative;
  width: min(680px, 94vw);
  padding: 48px 30px 40px;
  text-align: center;
  opacity: 0;
  transform: scale(.88) translateY(24px);
}

.new-player-welcome-card::before,
.new-player-welcome-card::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #bef264, #facc15, #bef264, transparent);
  box-shadow: 0 0 20px rgba(190,242,100,.45);
}
.new-player-welcome-card::before { top: 0; }
.new-player-welcome-card::after { bottom: 0; }

.new-player-welcome.is-active .new-player-welcome-bg { opacity: 1; }
.new-player-welcome.is-active .new-player-welcome-card {
  animation: newPlayerWelcomeIn .8s cubic-bezier(.2,.9,.25,1) forwards;
}
.new-player-welcome.is-leaving { animation: newPlayerWelcomeOut .65s ease forwards; }

.new-player-welcome-kicker {
  display: block;
  margin-bottom: 18px;
  color: #bef264;
  font: 700 8px/1.4 var(--font-game);
  letter-spacing: 2.5px;
  text-shadow: 0 0 14px rgba(190,242,100,.55);
}

#newPlayerWelcomeSprite {
  width: 170px;
  height: 145px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 18px 15px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(190,242,100,.24));
  animation: newPlayerSpriteFloat 1.9s ease-in-out infinite;
}

.new-player-welcome h2 {
  margin: 18px 0 13px;
  color: #fff;
  font: 700 clamp(17px, 3vw, 28px)/1.5 var(--font-game);
  letter-spacing: 1px;
  text-shadow: 0 4px 0 #020b08, 0 0 22px rgba(255,255,255,.12);
}
.new-player-welcome h2 em { color: #facc15; font-style: normal; }
.new-player-welcome p { color: #a7bfb5; font-size: 14px; letter-spacing: .4px; }

.new-player-welcome-loader {
  width: min(320px, 75%);
  height: 4px;
  margin: 28px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.new-player-welcome-loader span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #bef264, #facc15);
  box-shadow: 0 0 14px rgba(190,242,100,.7);
}
.new-player-welcome.is-active .new-player-welcome-loader span { animation: newPlayerLoader 2.65s .12s linear forwards; }

.game-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 49000;
  display: none;
  pointer-events: none;
  font-family: var(--font-body);
}

.game-tutorial-spotlight {
  position: fixed;
  border: 2px solid #bef264;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,4,4,.78), 0 0 24px rgba(190,242,100,.9), inset 0 0 15px rgba(190,242,100,.18);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
  animation: gameTutorialPulse 1.3s ease-in-out infinite;
}

.game-tutorial-card {
  position: fixed;
  padding: 20px 21px 18px;
  border: 1px solid rgba(190,242,100,.66);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(2,20,17,.98), rgba(2,8,11,.98));
  color: #ecfdf5;
  box-shadow: 0 22px 55px rgba(0,0,0,.62), inset 0 0 0 3px rgba(74,222,128,.04), 0 0 28px rgba(34,197,94,.15);
}

.game-tutorial-card::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(190,242,100,.66);
  border-bottom: 1px solid rgba(190,242,100,.66);
  background: #020b0b;
}
.game-tutorial-card.is-below::after {
  top: -8px;
  bottom: auto;
  border: 0;
  border-left: 1px solid rgba(190,242,100,.66);
  border-top: 1px solid rgba(190,242,100,.66);
}

.game-tutorial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(134,239,172,.13);
}
.game-tutorial-head span { color: #facc15; font: 700 7px/1 var(--font-game); }
.game-tutorial-head strong { color: #86efac; font: 700 7px/1 var(--font-game); letter-spacing: 1.4px; }
.game-tutorial-card h2 { margin: 0 0 9px; color: #f7fee7; font: 700 13px/1.45 var(--font-game); }
.game-tutorial-card p { margin: 0; color: #a7bfb5; font-size: 13px; line-height: 1.55; }
.game-tutorial-action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  color: #d9f99d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
}
.game-tutorial-action span {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #facc15;
  box-shadow: 0 0 10px rgba(250,204,21,.8);
  animation: gameTutorialDiamond .85s ease-in-out infinite alternate;
}

.game-tutorial-target { outline: 2px solid #d9f99d !important; outline-offset: 3px; filter: brightness(1.24); }
.game-tutorial-target.is-confirmed { outline-color: #facc15 !important; filter: brightness(1.5); }

@keyframes newPlayerWelcomeIn {
  from { opacity: 0; transform: scale(.88) translateY(24px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes newPlayerWelcomeOut { to { opacity: 0; visibility: hidden; } }
@keyframes newPlayerSpriteFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@keyframes newPlayerLoader { to { width: 100%; } }
@keyframes gameTutorialPulse {
  50% { border-color: #facc15; box-shadow: 0 0 0 9999px rgba(0,4,4,.78), 0 0 34px rgba(250,204,21,.95), inset 0 0 18px rgba(250,204,21,.2); }
}
@keyframes gameTutorialDiamond { to { transform: rotate(45deg) scale(1.35); } }

/* These three PNGs still store their pixels upside down even though Windows
   displays their orientation metadata correctly. Keep the correction scoped
   to the normal Pigoi evolution line; shiny and ultra files are already upright. */
img[src*="/Slumas/Pigoi/pigoi.png"],
img[src*="/Slumas/Pigoi/pigonso.png"],
img[src*="/Slumas/Pigoi/Pirogon.png"] {
  transform: rotate(180deg);
}

/* The Slumadex hover lift also writes to transform. Preserve the pixel
   correction above while its normal Pigoi portraits are being previewed. */
.dex-card-seen:hover .dex-card-img-wrap img[src*="/Slumas/Pigoi/pigoi.png"],
.dex-card-seen:hover .dex-card-img-wrap img[src*="/Slumas/Pigoi/pigonso.png"],
.dex-card-seen:hover .dex-card-img-wrap img[src*="/Slumas/Pigoi/Pirogon.png"] {
  transform: translateY(-2px) rotate(180deg) scale(1.06);
}

/* The static portraits for the Verdant evolution line are stored upside
   down. Correct DOM portraits only; directional combat sprites stay intact. */
img[src*="/Slumas/verdant/leafby.png"],
img[src*="/Slumas/verdant/verdrac.png"],
img[src*="/Slumas/verdant/verdrake.png"] {
  rotate: 180deg;
}

@media (max-width: 640px) {
  .new-player-welcome { padding: 14px; }
  .new-player-welcome-card { padding: 36px 12px 32px; }
  #newPlayerWelcomeSprite { width: 145px; height: 125px; }
  .new-player-welcome h2 { font-size: 17px; }
  .new-player-welcome p { font-size: 12px; }
  .game-tutorial-card { padding: 17px 16px 15px; }
  .game-tutorial-card h2 { font-size: 10px; }
  .game-tutorial-card p { font-size: 12px; }
  .game-tutorial-action { font-size: 8px; line-height: 1.4; }
}

@media (max-width: 640px) {
  #viewerProfileContent {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  #viewerProfilePanel {
    width: 100%;
    border-radius: 14px;
  }

  #viewerMicroPassivesSection {
    grid-column: 1;
    padding: 10px;
  }

  #viewerMicroPassivesHeader {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  #viewerMicroPassivesHeader small { text-align: left; }

  #viewerMicroPassivesList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .viewer-micro-passive-slot,
  .viewer-micro-passive-slot.is-empty {
    min-height: 102px;
  }
}

/* Game navigation bar - landing page visual language */
#bottomActionBar {
  --hud-lime: #bef264;
  --hud-gold: #facc15;
  height: 72px;
  bottom: 12px;
  gap: 8px;
  padding: 9px 12px;
  overflow-y: hidden;
  border: 1px solid rgba(190, 242, 100, 0.48);
  border-top-color: rgba(250, 204, 21, 0.62);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% -90%, rgba(190, 242, 100, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(7, 37, 30, 0.95), rgba(2, 14, 11, 0.96));
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(2, 8, 6, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -8px 22px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px) saturate(1.18);
}

#bottomActionBar::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--hud-lime), var(--hud-gold), var(--hud-lime), transparent);
  opacity: 0.72;
}

#bottomActionBar .action-btn {
  --nav-accent: #bef264;
  --nav-rgb: 190, 242, 100;
  position: relative;
  isolation: isolate;
  height: 52px;
  border: 1px solid rgba(var(--nav-rgb), 0.43);
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 32%, rgba(var(--nav-rgb), 0.20), transparent 58%),
    linear-gradient(180deg, rgba(7, 31, 26, 0.96), rgba(2, 12, 10, 0.98));
  color: #f7fee7;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -5px 11px rgba(var(--nav-rgb), 0.055);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#bottomActionBar .action-btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: var(--nav-accent);
  box-shadow: 0 0 8px rgba(var(--nav-rgb), 0.75);
  opacity: 0.78;
  transition: left 0.18s ease, right 0.18s ease, opacity 0.18s ease;
}

#bottomActionBar .action-btn:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--nav-rgb), 0.92);
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--nav-rgb), 0.32), transparent 62%),
    linear-gradient(180deg, rgba(10, 44, 35, 0.98), rgba(3, 17, 13, 0.99));
  box-shadow:
    0 9px 18px rgba(0, 0, 0, 0.42),
    0 0 14px rgba(var(--nav-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

#bottomActionBar .action-btn:hover::after {
  left: 7px;
  right: 7px;
  opacity: 1;
}

#bottomActionBar .action-btn:active {
  transform: translateY(-1px) scale(0.96);
}

#bottomActionBar .action-btn.has-nav-icon {
  flex: 0 0 56px;
  width: 56px;
  min-width: 56px;
  height: 52px;
  padding: 3px;
}

#bottomActionBar .action-btn-icon {
  width: 44px;
  height: 44px;
  filter:
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 5px rgba(var(--nav-rgb), 0.34));
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.18s ease;
}

#bottomActionBar .action-btn.has-nav-icon:hover .action-btn-icon {
  transform: translateY(-1px) scale(1.11);
  filter:
    drop-shadow(0 4px 3px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 9px rgba(var(--nav-rgb), 0.72));
}

/* A distinct accent for every destination. */
#bottomActionBar #areasBtn     { --nav-accent: #bef264; --nav-rgb: 190, 242, 100; }
#bottomActionBar #houseBtn     { --nav-accent: #86efac; --nav-rgb: 134, 239, 172; min-width: 88px; font: 700 8px/1 var(--font-game); text-transform: uppercase; }
#bottomActionBar #pvpBtn       { --nav-accent: #fb7185; --nav-rgb: 251, 113, 133; }
#bottomActionBar #profileBtn   { --nav-accent: #38bdf8; --nav-rgb: 56, 189, 248; }
#bottomActionBar #rankingBtn   { --nav-accent: #facc15; --nav-rgb: 250, 204, 21; }
#bottomActionBar #slumasBtn    { --nav-accent: #c084fc; --nav-rgb: 192, 132, 252; }
#bottomActionBar #inventoryBtn { --nav-accent: #f59e0b; --nav-rgb: 245, 158, 11; }
#bottomActionBar #shopBtn      { --nav-accent: #fb923c; --nav-rgb: 251, 146, 60; }
#bottomActionBar #marketBtn    { --nav-accent: #2dd4bf; --nav-rgb: 45, 212, 191; }
#bottomActionBar #breedingBtn  { --nav-accent: #f472b6; --nav-rgb: 244, 114, 182; }
#bottomActionBar #craftBtn     { --nav-accent: #22d3ee; --nav-rgb: 34, 211, 238; }
#bottomActionBar #storageBtn   { --nav-accent: #60a5fa; --nav-rgb: 96, 165, 250; }
#bottomActionBar #slumadexBtn  { --nav-accent: #818cf8; --nav-rgb: 129, 140, 248; }
#bottomActionBar #friendsBtn   { --nav-accent: #0ea5e9; --nav-rgb: 14, 165, 233; }
#bottomActionBar #automaticBtn { --nav-accent: #cbd5e1; --nav-rgb: 203, 213, 225; }
#bottomActionBar #mailBtn      { --nav-accent: #fbbf24; --nav-rgb: 251, 191, 36; }

/* Small separators keep navigation, collection and social actions readable. */
#slumasBtn,
#friendsBtn {
  margin-left: 7px;
}

#slumasBtn::before,
#friendsBtn::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(190, 242, 100, 0.38), transparent);
}

#bottomActionBar #breedingBtn {
  border-color: rgba(var(--nav-rgb), 0.48);
  background:
    radial-gradient(circle at 50% 32%, rgba(var(--nav-rgb), 0.22), transparent 58%),
    linear-gradient(180deg, rgba(39, 16, 33, 0.96), rgba(16, 8, 19, 0.98));
}

#bottomActionBar #friendsNavBadge,
#bottomActionBar #mailNavBadge {
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border: 2px solid #03120f;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.65);
}

#bottomActionBar #gameLogoutBtn {
  height: 52px;
  min-width: 104px;
  padding: 0 16px;
  border: 1px solid rgba(248, 113, 113, 0.62);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.74), rgba(55, 14, 14, 0.94));
  color: #fecaca;
  font: 700 8px/1 var(--font-game);
  letter-spacing: 0.4px;
  box-shadow: 0 5px 11px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.08);
}

#bottomActionBar #gameLogoutBtn:hover {
  transform: translateY(-3px);
  border-color: #fca5a5;
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.84), rgba(87, 18, 18, 0.98));
  color: #fff;
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.42), 0 0 12px rgba(239, 68, 68, 0.2);
}

#captureHudPanel {
  bottom: 96px;
}

@media (max-width: 700px) {
  #bottomActionBar {
    height: 62px;
    bottom: 8px;
    padding: 6px 8px;
    gap: 6px;
  }

  #bottomActionBar .action-btn.has-nav-icon {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
    height: 46px;
  }

  #bottomActionBar .action-btn-icon {
    width: 38px;
    height: 38px;
  }

  #bottomActionBar #gameLogoutBtn {
    height: 46px;
    min-width: 86px;
    padding: 0 11px;
    font-size: 7px;
  }

  #captureHudPanel {
    bottom: 78px;
  }
}

/* =====================================================
   ZONES HUD — EXPEDITION BOARD
   ===================================================== */
#areasHudOverlay {
  --zones-ink: #07110f;
  --zones-panel: #0a1714;
  position: absolute;
  inset: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.4vw, 34px);
  background:
    radial-gradient(circle at 50% 18%, rgba(163,230,53,.12), transparent 34%),
    linear-gradient(150deg, rgba(2,10,8,.82), rgba(1,5,8,.92));
  backdrop-filter: blur(8px) saturate(.82);
  animation: zonesOverlayIn .24s ease-out both;
}

#areasHudPanel {
  --detail-accent: #9bdc45;
  --detail-rgb: 155,220,69;
  --detail-cover: url('/suelo/liroforest.png');
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: minmax(285px, 34%) minmax(0, 1fr);
  grid-template-rows: 92px minmax(0, 1fr);
  width: min(1160px, 96vw);
  height: min(720px, 90vh);
  overflow: hidden;
  border: 1px solid rgba(190,242,100,.31);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(7,22,17,.985) 0 34%, rgba(5,14,16,.985) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 48px rgba(132,204,22,.08),
    inset 0 1px rgba(255,255,255,.08);
  animation: zonesPanelIn .42s cubic-bezier(.2,.9,.2,1.08) both;
}

#areasHudPanel[data-area-id="apasiwo-forest"] {
  --detail-accent: #34d399;
  --detail-rgb: 52,211,153;
  --detail-cover: url('/suelo/apasiwo%20forest.png');
}

#areasHudPanel[data-area-id="ambiro-forest"] {
  --detail-accent: #4ade80;
  --detail-rgb: 74,222,128;
  --detail-cover: url('/suelo/apasiwo%20forest.png');
  background:
    radial-gradient(circle at 76% 16%, rgba(74,222,128,.16), transparent 31%),
    linear-gradient(90deg, rgba(7,35,23,.99) 0 34%, rgba(4,21,17,.99) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.74),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 58px rgba(74,222,128,.14),
    inset 0 1px rgba(255,255,255,.08);
}

#areasHudPanel[data-area-id="high-mountains"] {
  --detail-accent: #67e8f9;
  --detail-rgb: 103,232,249;
  --detail-cover: url('/suelo/high%20mountains.png');
}

#areasHudPanel[data-area-id="lyro-sea"] {
  --detail-accent: #22d3ee;
  --detail-rgb: 34,211,238;
  --detail-cover: url('/suelo/lyro-sea.svg');
  background:
    radial-gradient(circle at 76% 16%, rgba(34,211,238,.15), transparent 31%),
    linear-gradient(90deg, rgba(5,38,59,.99) 0 34%, rgba(4,24,43,.99) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 60px rgba(34,211,238,.15),
    inset 0 1px rgba(255,255,255,.08);
}

#areasHudPanel[data-area-id="burning-cave"] {
  --detail-accent: #fb5a1f;
  --detail-rgb: 251,90,31;
  --detail-cover: url('/suelo/burning-cave.svg');
  background:
    radial-gradient(circle at 76% 17%, rgba(239,68,68,.07), transparent 28%),
    linear-gradient(90deg, rgba(31,13,10,.99) 0 34%, rgba(18,8,10,.99) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.74),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 52px rgba(239,68,68,.12),
    inset 0 1px rgba(255,255,255,.07);
}

#areasHudPanel[data-area-id="robust-cave"] {
  --detail-accent: #d6a76f;
  --detail-rgb: 214,167,111;
  --detail-cover: url('/suelo/caverobust.png');
  background:
    radial-gradient(circle at 76% 17%, rgba(214,167,111,.13), transparent 30%),
    linear-gradient(90deg, rgba(35,28,22,.99) 0 34%, rgba(20,17,16,.99) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.76),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 58px rgba(214,167,111,.14),
    inset 0 1px rgba(255,255,255,.08);
}

#areasHudPanel[data-area-id="illuminated-cave"] {
  --detail-accent: #fbbf24;
  --detail-rgb: 251,191,36;
  --detail-cover: url('/suelo/caverobust.png');
  background:
    radial-gradient(circle at 76% 17%, rgba(251,191,36,.17), transparent 31%),
    linear-gradient(90deg, rgba(42,29,13,.99) 0 34%, rgba(24,17,10,.99) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.76),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 62px rgba(251,191,36,.15),
    inset 0 1px rgba(255,255,255,.08);
}

#areasHudPanel[data-area-id="frozen-forest"] {
  --detail-accent: #7dd3fc;
  --detail-rgb: 125,211,252;
  --detail-cover: url('/suelo/frozen-forest.svg');
  background:
    radial-gradient(circle at 77% 15%, rgba(125,211,252,.10), transparent 31%),
    linear-gradient(90deg, rgba(7,24,34,.99) 0 34%, rgba(5,15,27,.99) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.76),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 58px rgba(56,189,248,.14),
    inset 0 1px rgba(255,255,255,.08);
}

#areasHudPanel[data-area-id="magic-forest"] {
  --detail-accent: #a855f7;
  --detail-rgb: 168,85,247;
  --detail-cover: url('/imagenes/muscu forest.png');
  background:
    radial-gradient(circle at 77% 15%, rgba(168,85,247,.16), transparent 31%),
    linear-gradient(90deg, rgba(25,10,38,.99) 0 34%, rgba(10,8,24,.99) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.76),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 62px rgba(168,85,247,.16),
    inset 0 1px rgba(255,255,255,.08);
}

#areasHudPanel[data-area-id="spectral-area"] {
  --detail-accent: #8b5cf6;
  --detail-rgb: 139,92,246;
  --detail-cover: url('/suelo/forest3.png');
  background:
    radial-gradient(circle at 77% 15%, rgba(139,92,246,.20), transparent 31%),
    linear-gradient(90deg, rgba(16,8,37,.99) 0 34%, rgba(8,6,20,.99) 34% 100%);
  box-shadow:
    0 36px 100px rgba(0,0,0,.78),
    0 0 58px rgba(139,92,246,.17),
    inset 0 1px rgba(255,255,255,.08);
}

#areasHudPanel[data-area-id="arctic-heart"] {
  --detail-accent: #38bdf8;
  --detail-rgb: 56,189,248;
  --detail-cover: url('/suelo/frozenforest.png');
  background:
    radial-gradient(circle at 77% 15%, rgba(56,189,248,.16), transparent 31%),
    linear-gradient(90deg, rgba(6,28,43,.99) 0 34%, rgba(4,15,28,.99) 34% 100%);
}

#areasHudPanel[data-area-id="bitter-ashes"] {
  --detail-accent: #fb7185;
  --detail-rgb: 251,113,133;
  --detail-cover: url('/suelo/burning%20cave.png');
  background:
    radial-gradient(circle at 76% 17%, rgba(251,113,133,.13), transparent 30%),
    linear-gradient(90deg, rgba(36,14,12,.99) 0 34%, rgba(22,8,11,.99) 34% 100%);
}

#areasHudPanel[data-area-id="magic-zone"] {
  --detail-accent: #c084fc;
  --detail-rgb: 192,132,252;
  --detail-cover: url('/suelo/magicfores.png');
  background:
    radial-gradient(circle at 77% 15%, rgba(192,132,252,.17), transparent 31%),
    linear-gradient(90deg, rgba(29,12,43,.99) 0 34%, rgba(11,8,27,.99) 34% 100%);
}

#areasHudPanel[data-area-id="dark-area"] {
  --detail-accent: #a78bfa;
  --detail-rgb: 167,139,250;
  --detail-cover: url('/suelo/spectral%20area.png');
  background:
    radial-gradient(circle at 77% 15%, rgba(167,139,250,.20), transparent 31%),
    linear-gradient(90deg, rgba(15,8,36,.99) 0 34%, rgba(7,5,20,.99) 34% 100%);
}

#areasHudPanel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(90deg, transparent 25%, #000 58%, transparent 100%);
}

#areasHudPanel::after {
  content: '';
  position: absolute;
  left: 34%;
  top: 92px;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(var(--detail-rgb),.46) 12%, rgba(var(--detail-rgb),.16) 84%, transparent);
  box-shadow: 0 0 18px rgba(var(--detail-rgb),.18);
  transition: background .35s ease, box-shadow .35s ease;
}

#areasHudHeader {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 4;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto 38px;
  align-items: center;
  gap: 14px;
  padding: 15px 18px 14px;
  border: 0;
  border-bottom: 1px solid rgba(190,242,100,.16);
  background: linear-gradient(90deg, rgba(11,35,25,.98), rgba(5,19,17,.97) 54%, rgba(5,16,19,.97));
  box-shadow: 0 8px 26px rgba(0,0,0,.2);
}

#areasHudHeader::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  opacity: .7;
  background: linear-gradient(90deg, transparent, #bef264 18%, rgba(var(--detail-rgb),.9) 67%, transparent);
  transform: scaleX(.35);
  animation: zonesHeaderLine 1.1s .18s ease-out both;
}

.areas-header-emblem {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(190,242,100,.44);
  border-radius: 14px 4px 14px 4px;
  transform: rotate(45deg) scale(.72);
  background: linear-gradient(145deg, rgba(190,242,100,.2), rgba(20,83,45,.2));
  box-shadow: 0 0 24px rgba(163,230,53,.15), inset 0 0 12px rgba(190,242,100,.1);
}

.areas-header-emblem::before,
.areas-header-emblem::after,
.areas-header-emblem span {
  content: '';
  position: absolute;
  border: 2px solid #bef264;
  border-radius: 50% 0 50% 0;
}

.areas-header-emblem::before { width: 18px; height: 9px; transform: rotate(-45deg) translate(-3px,-3px); }
.areas-header-emblem::after { width: 18px; height: 9px; transform: rotate(135deg) translate(-3px,-3px); }
.areas-header-emblem span { width: 7px; height: 7px; border-radius: 50%; background: #d9f99d; box-shadow: 0 0 12px #a3e635; }

.areas-header-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.areas-header-kicker {
  color: #a3e635;
  font: 700 7px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 1.5px;
}
#areasHudHeader h3 {
  margin: 0;
  color: #f5f8ee;
  font: 700 clamp(12px, 1.4vw, 17px)/1.15 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .25px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.areas-header-copy p { margin: 0; color: #799087; font-size: 11px; }

.areas-header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(74,222,128,.16);
  border-radius: 999px;
  background: rgba(16,185,129,.055);
  color: #91aa9f;
  font-size: 10px;
}
.areas-header-status i,
.area-route-open i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #22c55e;
  animation: zonesStatusPulse 1.4s ease-in-out infinite;
}

#areasHudClose {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
  color: #9fb0a9;
  font-size: 16px;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
#areasHudClose:hover {
  transform: rotate(90deg);
  color: #fff;
  border-color: rgba(248,113,113,.58);
  background: rgba(127,29,29,.35);
}

#areasHudBody {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: block;
  padding: 18px 16px 20px 18px;
  overflow: hidden;
}

#areasListPane {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 5px 0 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(163,230,53,.38) transparent;
}

#areasCategoryTabs {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 0 8px;
  background: linear-gradient(180deg, rgba(7,22,17,.99) 0 78%, transparent);
}

.areas-category-tab {
  --category-accent: #a3e635;
  --category-rgb: 163,230,53;
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 8px 7px;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(15,29,26,.94), rgba(5,16,16,.96));
  color: #758a82;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

.areas-category-tab::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  opacity: 0;
  background: var(--category-accent);
  box-shadow: 0 0 12px var(--category-accent);
  transform: scaleX(.3);
  transition: opacity .2s ease, transform .2s ease;
}

.areas-category-tab > i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(var(--category-rgb),.18);
  border-radius: 7px;
  background: rgba(var(--category-rgb),.06);
  color: var(--category-accent);
  font: normal 6px/1 var(--font-game, 'Press Start 2P', monospace);
}

.areas-category-tab > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.areas-category-tab strong {
  overflow: hidden;
  color: #b8c6c0;
  font: 700 7px/1 var(--font-game, 'Press Start 2P', monospace);
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.areas-category-tab small {
  overflow: hidden;
  color: #5f746c;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.areas-category-tab:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--category-rgb),.35);
  color: var(--category-accent);
}
.areas-category-tab.is-active {
  border-color: rgba(var(--category-rgb),.55);
  background: linear-gradient(145deg, rgba(var(--category-rgb),.15), rgba(6,20,18,.98));
  box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.04);
}
.areas-category-tab.is-active::after { opacity: 1; transform: scaleX(1); }
.areas-category-tab.is-active strong { color: #f4fff8; }
.areas-category-tab.is-active small { color: rgba(var(--category-rgb),.82); }
.areas-category-tab:focus-visible { outline: 2px solid var(--category-accent); outline-offset: 2px; }

#areasListPane[data-active-category="zones"] .area-item:not([data-area-section="zones"]),
#areasListPane[data-active-category="boss"] .area-item:not([data-area-section="boss"]),
#areasListPane[data-active-category="park"] .area-item:not([data-area-section="park"]),
#areasListPane[data-active-category="mythic"] .area-item:not([data-area-section="mythic"]) {
  display: none;
}

#areasListPane[data-active-category="zones"] .area-item[data-area-section="zones"],
#areasListPane[data-active-category="boss"] .area-item[data-area-section="boss"],
#areasListPane[data-active-category="park"] .area-item[data-area-section="park"],
#areasListPane[data-active-category="mythic"] .area-item[data-area-section="mythic"] {
  animation: zonesCategoryCardIn .3s cubic-bezier(.2,.8,.2,1) both;
}

#mythicDungeonHud {
  --mythic-accent: #e879f9;
  position: fixed;
  z-index: 140;
  top: 18px;
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(232,121,249,.46);
  border-radius: 17px;
  background:
    radial-gradient(circle at 12% 50%, rgba(232,121,249,.15), transparent 36%),
    linear-gradient(135deg, rgba(29,12,35,.96), rgba(5,15,22,.97));
  box-shadow: 0 18px 50px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.05);
  color: #fdf4ff;
  pointer-events: auto;
  backdrop-filter: blur(14px);
}

.mythic-dungeon-hud__sigil {
  position: relative;
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border: 1px solid rgba(232,121,249,.5);
  border-radius: 13px;
  background: rgba(126,34,206,.16);
  box-shadow: inset 0 0 18px rgba(232,121,249,.16);
}
.mythic-dungeon-hud__sigil::before,
.mythic-dungeon-hud__sigil::after,
.mythic-dungeon-hud__sigil i {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid #f0abfc;
  animation: mythicDungeonSigil 2.8s linear infinite;
}
.mythic-dungeon-hud__sigil::before { width: 25px; height: 25px; }
.mythic-dungeon-hud__sigil::after { width: 12px; height: 12px; animation-direction: reverse; }
.mythic-dungeon-hud__sigil i { width: 4px; height: 4px; background: #fff; box-shadow: 0 0 13px #e879f9; }

.mythic-dungeon-hud__copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}
.mythic-dungeon-hud__copy > span {
  color: #e879f9;
  font: 700 7px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 1.4px;
}
.mythic-dungeon-hud__copy > strong {
  overflow: hidden;
  color: #fff;
  font: 700 13px/1.2 var(--font-game, 'Press Start 2P', monospace);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mythic-dungeon-hud__copy > small {
  overflow: hidden;
  color: #c4b5d0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mythic-dungeon-hud__track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.mythic-dungeon-hud__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a855f7, #f0abfc, #22d3ee);
  box-shadow: 0 0 12px rgba(232,121,249,.75);
  transition: width .25s ease;
}
#mythicDungeonExit {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(240,171,252,.5);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(168,85,247,.28), rgba(88,28,135,.28));
  color: #fff;
  font: 700 7px/1 var(--font-game, 'Press Start 2P', monospace);
  cursor: pointer;
}
#mythicDungeonExit:hover { transform: translateY(-1px); border-color: #f0abfc; }
#mythicDungeonExit[hidden] { display: none; }
@keyframes mythicDungeonSigil {
  to { transform: rotate(360deg); }
}

.areas-list-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1px 2px 4px;
}
.areas-list-heading div { display: flex; flex-direction: column; gap: 5px; }
.areas-list-heading span,
.area-creatures-heading span {
  color: #779086;
  font: 700 7px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 1.25px;
}
.areas-list-heading strong,
.area-creatures-heading strong { color: #dfe8e2; font-size: 13px; }
.areas-list-heading > b {
  color: rgba(190,242,100,.72);
  font: 700 18px/1 var(--font-game, 'Press Start 2P', monospace);
}

.area-item {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 96px minmax(0,1fr) 26px;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  padding: 9px 10px 9px 9px;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 15px;
  background: linear-gradient(115deg, rgba(15,31,26,.9), rgba(6,18,17,.94));
  color: #f1f5f0;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 20px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035);
  transform: translateZ(0);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.area-item::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 18%, rgba(var(--area-accent-rgb),.10), transparent 78%);
  transform: translateX(-70%);
  transition: opacity .25s ease;
}
.area-item:hover {
  transform: translateX(4px) translateY(-2px);
  border-color: rgba(var(--area-accent-rgb),.4);
  background: linear-gradient(115deg, rgba(var(--area-accent-rgb),.09), rgba(7,20,18,.96));
  box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 18px rgba(var(--area-accent-rgb),.07);
}
.area-item:hover::before { opacity: 1; animation: zonesCardSheen 1s ease-out; }
.area-item.is-selected {
  transform: translateX(7px);
  border-color: rgba(var(--area-accent-rgb),.72);
  background: linear-gradient(115deg, rgba(var(--area-accent-rgb),.16), rgba(7,23,20,.98));
  box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 22px rgba(var(--area-accent-rgb),.12), inset 3px 0 var(--area-accent);
}
.area-item:focus-visible { outline: 2px solid var(--area-accent); outline-offset: 2px; }

.area-item-cover {
  position: relative;
  align-self: stretch;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid rgba(var(--area-accent-rgb),.24);
  border-radius: 11px;
  background-image: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,8,6,.78)), var(--area-cover);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -20px 28px rgba(0,0,0,.45);
}
.area-item-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .38;
  background: radial-gradient(circle at 55% 30%, rgba(var(--area-accent-rgb),.38), transparent 50%);
  transition: opacity .25s ease, transform .35s ease;
}
.area-item:hover .area-item-cover::after,
.area-item.is-selected .area-item-cover::after { opacity: .72; transform: scale(1.15); }
.area-item-cover > i {
  position: absolute;
  left: 8px;
  bottom: 7px;
  z-index: 1;
  color: var(--area-accent);
  font: 700 10px/1 var(--font-game, 'Press Start 2P', monospace);
  font-style: normal;
  text-shadow: 0 2px 4px #000;
}

.area-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.area-item-copy > small { color: var(--area-accent); font: 700 6px/1 var(--font-game, 'Press Start 2P', monospace); letter-spacing: .8px; }
.area-item-copy > strong { overflow: hidden; color: #f4f8f5; font: 700 10px/1.35 var(--font-game, 'Press Start 2P', monospace); text-overflow: ellipsis; white-space: nowrap; }
.area-item-copy > span { display: flex; flex-wrap: wrap; gap: 6px 9px; align-items: center; }
.area-item-copy > span b { padding: 4px 6px; border: 1px solid rgba(var(--area-accent-rgb),.2); border-radius: 5px; background: rgba(var(--area-accent-rgb),.08); color: #cbd9d1; font-size: 9px; }
.area-item-copy > span i { color: #71857c; font-size: 9px; font-style: normal; }
.area-item-arrow { color: #587069; font-size: 28px; line-height: 1; transition: transform .24s ease, color .24s ease; }
.area-item:hover .area-item-arrow,
.area-item.is-selected .area-item-arrow { color: var(--area-accent); transform: translateX(3px); text-shadow: 0 0 12px var(--area-accent); }

#areaDetailHud {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  grid-column: 2;
  grid-row: 2;
  width: auto;
  max-height: none;
  min-width: 0;
  min-height: 0;
  display: block;
  z-index: 2;
  padding: 18px 20px 20px;
  overflow: hidden;
}

.area-detail-empty {
  position: absolute;
  inset: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed rgba(190,242,100,.16);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, rgba(163,230,53,.06), transparent 35%);
  text-align: center;
  transition: opacity .22s ease, transform .22s ease;
}
.area-detail-empty > span { color: #9bbf53; font: 700 7px/1 var(--font-game, 'Press Start 2P', monospace); letter-spacing: 1px; }
.area-detail-empty > strong { color: #dce5de; font-size: 15px; }
.area-detail-empty > p { max-width: 390px; margin: 0; color: #667d73; font-size: 11px; line-height: 1.65; }
.area-detail-compass {
  position: relative;
  width: 92px;
  height: 92px;
  margin-bottom: 8px;
  border: 1px solid rgba(190,242,100,.22);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(163,230,53,.07), inset 0 0 24px rgba(163,230,53,.04);
  animation: zonesCompassSpin 16s linear infinite;
}
.area-detail-compass::before,
.area-detail-compass::after { content: ''; position: absolute; inset: 14px; border: 1px dashed rgba(190,242,100,.22); border-radius: 50%; }
.area-detail-compass::after { inset: 34px; border-style: solid; background: rgba(163,230,53,.15); box-shadow: 0 0 16px rgba(163,230,53,.2); }
.area-detail-compass i::before,
.area-detail-compass i::after { content: ''; position: absolute; left: 45px; top: 8px; width: 2px; height: 76px; background: linear-gradient(#bef264, transparent 45%, transparent 55%, #58772b); transform: rotate(45deg); }
.area-detail-compass i::after { transform: rotate(135deg); }

#areaDetailPane {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--detail-rgb),.24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,22,21,.97), rgba(5,14,17,.98));
  box-shadow: 0 16px 40px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(.985);
}
#areaDetailHud.is-open .area-detail-empty { opacity: 0; pointer-events: none; transform: scale(.98); }
#areaDetailHud.is-open #areaDetailPane {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  animation: zonesDetailIn .38s cubic-bezier(.2,.85,.2,1) both;
}

.area-detail-hero {
  position: relative;
  min-height: 225px;
  overflow: hidden;
  padding: 24px 26px 19px;
  border-bottom: 1px solid rgba(var(--detail-rgb),.18);
  background:
    linear-gradient(90deg, rgba(4,17,15,.96) 0%, rgba(4,17,15,.78) 58%, rgba(4,17,15,.42)),
    linear-gradient(0deg, rgba(4,17,15,.96), transparent 68%),
    var(--detail-cover) center / cover;
}
.area-detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .2;
  pointer-events: none;
  background: radial-gradient(circle at 80% 22%, rgba(var(--detail-rgb),.7), transparent 28%);
  animation: zonesHeroGlow 3.8s ease-in-out infinite alternate;
}
.area-detail-hero::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--detail-accent);
  box-shadow: 0 0 18px var(--detail-accent);
}
.area-detail-hero-grid {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.area-detail-route-tag { position: relative; display: flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--detail-accent); font: 700 7px/1 var(--font-game, 'Press Start 2P', monospace); letter-spacing: 1px; }
.area-detail-route-tag i { width: 18px; height: 1px; background: var(--detail-accent); box-shadow: 0 0 8px var(--detail-accent); }
#areaDetailName { position: relative; margin: 0 0 10px; color: #fff; font: 700 clamp(15px,2vw,22px)/1.2 var(--font-game, 'Press Start 2P', monospace); text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 18px rgba(var(--detail-rgb),.2); }
#areaDetailDescription { position: relative; max-width: 500px; min-height: 34px; margin: 0 0 18px; color: #aebeb7; font-size: 11px; line-height: 1.55; }
.area-detail-hero-meta { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 520px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(2,12,10,.56); backdrop-filter: blur(8px); }
.area-detail-hero-meta > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-right: 1px solid rgba(255,255,255,.08); }
.area-detail-hero-meta > div:last-child { border-right: 0; }
.area-detail-hero-meta span { color: #637a70; font: 700 6px/1 var(--font-game, 'Press Start 2P', monospace); }
.area-detail-hero-meta strong { display: flex; align-items: center; gap: 5px; color: #dbe7df; font-size: 10px; white-space: nowrap; }
.area-detail-hero-meta strong b { color: var(--detail-accent); font-weight: 900; }
.area-route-open { color: #6ee7a0 !important; }

#areaCreaturesCard {
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 18px 20px 14px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.area-creatures-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.area-creatures-heading > div { display: flex; flex-direction: column; gap: 5px; }
.area-creatures-heading > small { color: #5e746a; font-size: 9px; }
#areaDetailCreatures { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--detail-rgb),.4) transparent; }
.area-sluma-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.area-sluma-item {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 8px 10px 8px 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px;
  background: linear-gradient(125deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  animation: zonesCreatureIn .36s ease-out both;
}
.area-sluma-item:nth-child(2) { animation-delay: .045s; }
.area-sluma-item:nth-child(3) { animation-delay: .09s; }
.area-sluma-item:nth-child(4) { animation-delay: .135s; }
.area-sluma-item:hover { transform: translateY(-2px); border-color: rgba(var(--detail-rgb),.28); background: rgba(var(--detail-rgb),.055); }
.area-sluma-item.is-rare { border-color: rgba(96,165,250,.2); }
.area-sluma-item.is-epic { border-color: rgba(192,132,252,.22); }
.area-sluma-item.is-legendary { border-color: rgba(250,204,21,.25); }
.area-sluma-item.is-mythic { border-color: rgba(244,114,182,.28); }
.area-sluma-item.is-divine {
  border-color: rgba(103,232,249,.42);
  background: linear-gradient(125deg, rgba(103,232,249,.08), rgba(216,180,254,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 16px rgba(103,232,249,.08);
}
.area-sluma-item.is-legendary::after,
.area-sluma-item.is-mythic::after,
.area-sluma-item.is-divine::after {
  content: '';
  position: absolute;
  inset: -60% -25%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.13) 50%, transparent 60%);
  transform: translateX(-50%);
  animation: zonesRareShine 3.2s 1s ease-in-out infinite;
}
.area-sluma-portrait { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(var(--detail-rgb),.15); border-radius: 10px; background: radial-gradient(circle, rgba(var(--detail-rgb),.14), rgba(0,0,0,.12) 70%); }
.area-sluma-sprite { --area-sprite-rotation: 0deg; width: 46px; height: 46px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 5px 5px rgba(0,0,0,.55)); transition: transform .22s ease; }
.area-sluma-sprite[src*="/Slumas/Pigoi/pigoi.png"],
.area-sluma-sprite[src*="/Slumas/Pigoi/pigonso.png"],
.area-sluma-sprite[src*="/Slumas/Pigoi/Pirogon.png"] { --area-sprite-rotation: 180deg; }
.area-sluma-item:hover .area-sluma-sprite { transform: translateY(-2px) rotate(var(--area-sprite-rotation)) scale(1.08); }
.area-sluma-meta { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px 8px; }
.area-sluma-title { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.area-sluma-name { overflow: hidden; color: #eaf1ec; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.area-sluma-title small { color: #70877d; font: 700 5px/1 var(--font-game, 'Press Start 2P', monospace); letter-spacing: .45px; }
.area-sluma-item.is-common .area-sluma-title small { color: #94a3b8; }
.area-sluma-item.is-rare .area-sluma-title small { color: #60a5fa; }
.area-sluma-item.is-epic .area-sluma-title small { color: #c084fc; text-shadow: 0 0 7px rgba(192,132,252,.38); }
.area-sluma-item.is-legendary .area-sluma-title small { color: #facc15; text-shadow: 0 0 8px rgba(250,204,21,.42); }
.area-sluma-item.is-mythic .area-sluma-title small { color: #f472b6; text-shadow: 0 0 9px rgba(244,114,182,.58); }
.area-sluma-item.is-divine .area-sluma-title small {
  color: #cffafe;
  text-shadow: 0 0 5px #22d3ee, 0 0 11px rgba(216,180,254,.72);
}
.area-sluma-chance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.area-sluma-rate { color: var(--detail-accent); font: 800 11px/1 var(--font-game, 'Press Start 2P', monospace); }
.area-sluma-chance small { color: #5a7066; font-size: 8px; }
.area-sluma-rate-track { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.07); }
.area-sluma-rate-track i { display: block; width: var(--encounter-rate); height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--detail-rgb),.55), var(--detail-accent)); box-shadow: 0 0 8px rgba(var(--detail-rgb),.55); animation: zonesRateGrow .65s .12s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; }

.area-travel-footer {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(2,11,11,.62);
}
.area-travel-note { min-width: 0; display: flex; align-items: center; gap: 10px; color: #71867c; }
.area-travel-note > i { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(var(--detail-rgb),.26); border-radius: 50%; background: rgba(var(--detail-rgb),.07); color: var(--detail-accent); font-style: normal; font-weight: 900; }
.area-travel-note > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.area-travel-note strong { color: #aebdb5; font-size: 10px; }
.area-travel-note small { color: #5f746a; font-size: 9px; }
.area-travel-actions {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.area-entry-requirement {
  min-width: 205px;
  height: 52px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 5px 11px 5px 6px;
  border: 1px solid rgba(var(--detail-rgb),.34);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(var(--detail-rgb),.13), rgba(2,12,13,.82)), rgba(3,17,17,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 7px 18px rgba(0,0,0,.22);
  transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.area-entry-requirement[hidden] { display: none !important; }
.area-entry-requirement.has-item {
  border-color: rgba(var(--detail-rgb),.62);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 7px 18px rgba(0,0,0,.22), 0 0 17px rgba(var(--detail-rgb),.1);
}
.area-entry-requirement.is-missing {
  --entry-state-rgb: 248,113,113;
  border-color: rgba(var(--entry-state-rgb),.38);
  opacity: .76;
}
.area-entry-requirement-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--detail-rgb),.26);
  border-radius: 9px;
  background: radial-gradient(circle, rgba(var(--detail-rgb),.22), rgba(0,0,0,.22) 72%);
}
.area-entry-requirement-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.55));
}
.area-entry-requirement-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.area-entry-requirement-copy > small {
  color: var(--detail-accent);
  font: 700 5px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .45px;
}
.area-entry-requirement-copy > strong {
  overflow: hidden;
  color: #f1f8f4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.area-entry-requirement-copy > span {
  color: #71877c;
  font-size: 8px;
  white-space: nowrap;
}
.area-entry-requirement-copy > span b {
  color: var(--detail-accent);
  font-size: 9px;
}
.area-entry-requirement.is-missing .area-entry-requirement-copy > span b:first-child { color: rgb(var(--entry-state-rgb)); }
.area-entry-requirement-copy > span i {
  margin: 0 3px;
  color: rgba(var(--detail-rgb),.5);
  font-style: normal;
}
#areaGoBtn {
  position: relative;
  align-self: center;
  min-width: 174px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  overflow: hidden;
  padding: 0 17px;
  border: 1px solid rgba(var(--detail-rgb),.72);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(var(--detail-rgb),.34), rgba(var(--detail-rgb),.17));
  color: #f5fff8;
  font: 700 8px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .35px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.25), 0 0 18px rgba(var(--detail-rgb),.08), inset 0 1px rgba(255,255,255,.12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#areaGoBtn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 47%, transparent 72%); transform: translateX(-120%); }
#areaGoBtn:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(var(--detail-rgb),.48), rgba(var(--detail-rgb),.24)); box-shadow: 0 12px 28px rgba(0,0,0,.34), 0 0 25px rgba(var(--detail-rgb),.2); }
#areaGoBtn:hover::before { animation: zonesTravelSheen .72s ease-out; }
#areaGoBtn > i { color: var(--detail-accent); font-size: 24px; font-style: normal; line-height: 0; transition: transform .2s ease; }
#areaGoBtn:hover > i { transform: translateX(4px); }

@keyframes zonesOverlayIn { from { opacity: 0; } }
@keyframes zonesPanelIn { from { opacity: 0; transform: translateY(20px) scale(.965); } }
@keyframes zonesHeaderLine { to { transform: scaleX(1); } }
@keyframes zonesStatusPulse { 50% { opacity: .42; transform: scale(.72); } }
@keyframes zonesCardSheen { to { transform: translateX(90%); } }
@keyframes zonesDetailIn { from { opacity: 0; transform: translateX(22px) scale(.98); } }
@keyframes zonesCompassSpin { to { transform: rotate(360deg); } }
@keyframes zonesHeroGlow { to { opacity: .36; transform: scale(1.08); } }
@keyframes zonesCreatureIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes zonesCategoryCardIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes zonesRareShine { 0%,55% { transform: translateX(-55%); } 85%,100% { transform: translateX(65%); } }
@keyframes zonesRateGrow { from { transform: scaleX(0); } }
@keyframes zonesTravelSheen { to { transform: translateX(120%); } }

@media (max-width: 900px) {
  #areasHudPanel { grid-template-columns: minmax(255px, 38%) minmax(0,1fr); }
  #areasHudPanel::after { left: 38%; }
  .areas-header-status { display: none; }
  #areasHudHeader { grid-template-columns: 50px minmax(0,1fr) 38px; }
  .area-item { grid-template-columns: 72px minmax(0,1fr) 20px; min-height: 98px; }
  .area-item-cover { min-height: 78px; }
  .area-item-copy > strong { font-size: 8px; }
  .area-detail-hero { min-height: 210px; padding: 20px; }
  .area-detail-hero-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .area-detail-hero-meta > div:nth-child(3) { display: none; }
  .area-sluma-list { grid-template-columns: 1fr; }
  #areasHudPanel[data-area-id="mythic-dungeon"] .area-travel-note { display: none; }
  #areasHudPanel[data-area-id="mythic-dungeon"] .area-travel-actions { width: 100%; }
}

@media (max-width: 680px) {
  #areasHudOverlay { align-items: flex-start; padding: 8px; }
  #areasHudPanel {
    display: block;
    width: 100%;
    height: calc(100vh - 16px);
    overflow-y: auto;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(7,22,17,.99), rgba(5,14,16,.99));
  }
  #areasHudPanel::after { display: none; }
  #areasHudHeader { position: sticky; top: 0; grid-template-columns: 42px minmax(0,1fr) 36px; min-height: 78px; padding: 11px 12px; }
  .areas-header-emblem { width: 40px; height: 40px; }
  .areas-header-copy p { display: none; }
  #areasHudHeader h3 { font-size: 10px; }
  #areasHudBody { padding: 13px 12px; overflow: visible; }
  #areasListPane { height: auto; overflow: visible; }
  #areasCategoryTabs { position: static; }
  .areas-category-tab { min-height: 52px; grid-template-columns: 18px minmax(0,1fr); padding: 7px 5px; }
  .areas-category-tab > i { width: 18px; height: 18px; font-size: 5px; }
  .areas-category-tab strong { font-size: 6px; }
  .areas-category-tab small { display: none; }
  .area-item { min-height: 88px; grid-template-columns: 70px minmax(0,1fr) 18px; }
  .area-item-cover { min-height: 68px; }
  #areaDetailHud { position: static; width: auto; min-height: 430px; margin: 0; padding: 0 12px 14px; overflow: visible; }
  .area-detail-empty { position: relative; inset: auto; min-height: 310px; }
  #areaDetailHud.is-open .area-detail-empty { display: none; }
  #areaDetailPane { height: auto; min-height: 0; grid-template-rows: auto auto auto; }
  .area-detail-hero { min-height: 215px; padding: 19px 16px 16px; }
  #areaDetailName { font-size: 14px; }
  .area-detail-hero-meta { grid-template-columns: 1fr 1fr; }
  #areaCreaturesCard { padding: 15px 14px; }
  #areaDetailCreatures { overflow: visible; }
  .area-sluma-list { grid-template-columns: 1fr; }
  .area-travel-footer { align-items: stretch; flex-direction: column; padding: 13px 14px 15px; }
  .area-travel-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .area-entry-requirement { width: 100%; }
  #areaGoBtn { width: 100%; align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  #areasHudOverlay,
  #areasHudPanel,
  #areasHudHeader::after,
  .area-detail-compass,
  .areas-header-status i,
  .area-route-open i,
  .area-sluma-item,
  .area-sluma-rate-track i,
  .area-sluma-item.is-legendary::after,
  .area-sluma-item.is-mythic::after,
  .area-sluma-item.is-divine::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL PARK GATE
   ═══════════════════════════════════════════════════════════════════════════ */
#parkGateOverlay {
  position: fixed;
  inset: 0;
  z-index: 12030;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 45%, rgba(22, 101, 52, .22), transparent 48%), rgba(2, 10, 9, .84);
  backdrop-filter: blur(9px);
}

#parkGateShell {
  width: min(1080px, 96vw);
  height: min(680px, 90vh);
  overflow: hidden;
  color: #e8fff8;
  border: 1px solid rgba(45, 212, 191, .44);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(3, 26, 22, .985), rgba(8, 18, 31, .985));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .72), 0 0 45px rgba(45, 212, 191, .10), inset 0 1px rgba(255,255,255,.04);
  font-family: Inter, Arial, sans-serif;
}

.park-gate-header {
  height: 105px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(45, 212, 191, .25);
  background: linear-gradient(90deg, rgba(13, 78, 61, .36), rgba(4, 20, 25, .1));
}

.park-gate-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  transform: rotate(45deg);
  border: 1px solid #2dd4bf;
  border-radius: 17px;
  background: linear-gradient(145deg, #115e59, #052e2b);
  box-shadow: 0 0 25px rgba(45, 212, 191, .22);
}
.park-gate-emblem span { transform: rotate(-45deg); color: #99f6e4; font: 900 22px/1 'Press Start 2P', monospace; }
.park-gate-emblem i { position:absolute; inset:-5px; border:1px solid rgba(163,230,53,.2); border-radius:20px; animation: parkGatePulse 2.2s ease-in-out infinite; }
.park-gate-header > div:nth-child(2) > span,
.park-gate-create > div span,
.park-room-heading > div span { color: #5eead4; font: 700 9px/1.3 'Press Start 2P', monospace; letter-spacing: .1em; }
.park-gate-header h2 { margin: 7px 0 4px; color:#fff; font: 900 21px/1 'Press Start 2P', monospace; text-transform: uppercase; }
.park-gate-header p { margin:0; color:#8ca9a4; font-size:12px; }
#parkGateClose { margin-left:auto; width:42px; height:42px; color:#9cb4b1; border:1px solid rgba(148,163,184,.25); border-radius:12px; background:#0d1c20; font-size:25px; cursor:pointer; }
#parkGateClose:hover { color:#fff; border-color:#2dd4bf; transform:rotate(4deg); }

.park-gate-body { display:grid; grid-template-columns: 345px 1fr; height:calc(100% - 105px); }
.park-gate-hero { position:relative; overflow:hidden; padding:38px 30px; border-right:1px solid rgba(45,212,191,.18); background:linear-gradient(180deg, rgba(20,83,45,.50),rgba(4,22,22,.88)), url('/suelo/forest3.png') center/auto 120px; }
.park-gate-hero::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(150deg, transparent 45%,rgba(45,212,191,.11)); }
.park-gate-live { position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:7px 10px; color:#a7f3d0; border:1px solid rgba(52,211,153,.25); border-radius:999px; background:rgba(2,44,34,.72); font:700 8px 'Press Start 2P',monospace; }
.park-gate-live i,.park-room-copy small i,#parkWorldBadge>i { width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;animation:parkGatePulse 1.5s infinite; }
.park-gate-hero h3 { position:relative;z-index:1;margin:35px 0 18px;color:#fff;font:900 28px/1.45 'Press Start 2P',monospace; }
.park-gate-hero h3 em { color:#a3e635;font-style:normal; }
.park-gate-hero p { position:relative;z-index:1;color:#b5cac5;font-size:13px;line-height:1.7; }
.park-gate-hero ul { position:absolute;z-index:1;left:30px;right:30px;bottom:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none; }
.park-gate-hero li { min-width:0;padding:12px 5px;text-align:center;border:1px solid rgba(45,212,191,.16);border-radius:11px;background:rgba(3,22,22,.72); }
.park-gate-hero li b { display:block;color:#d9f99d;font:900 13px 'Press Start 2P',monospace; }
.park-gate-hero li span { display:block;margin-top:7px;color:#718d88;font-size:7px;font-weight:800;line-height:1.3; }

.park-gate-browser { min-width:0;padding:24px;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(circle at 80% 10%,rgba(45,212,191,.08),transparent 40%); }
.park-gate-create { display:grid;grid-template-columns:1fr 220px 150px;gap:14px;align-items:end;padding:15px;border:1px solid rgba(45,212,191,.18);border-radius:15px;background:rgba(5,30,30,.64); }
.park-gate-create strong,.park-room-heading strong { display:block;margin-top:7px;color:#effffb;font-size:14px; }
.park-gate-create label span { display:block;margin-bottom:7px;color:#78938e;font-size:8px;font-weight:900;letter-spacing:.08em; }
.park-gate-create input,.park-room-password { width:100%;height:38px;box-sizing:border-box;color:#dbfff7;border:1px solid rgba(45,212,191,.22);border-radius:9px;outline:none;background:#07191b;padding:0 11px; }
.park-gate-create input:focus,.park-room-password:focus { border-color:#2dd4bf;box-shadow:0 0 0 3px rgba(45,212,191,.1); }
#parkCreateBtn { height:39px;display:flex;align-items:center;justify-content:center;gap:10px;color:#052e2b;border:1px solid #99f6e4;border-radius:9px;background:linear-gradient(135deg,#5eead4,#a3e635);font:900 9px 'Press Start 2P',monospace;cursor:pointer;box-shadow:0 8px 25px rgba(45,212,191,.12); }
#parkCreateBtn:hover { filter:brightness(1.08);transform:translateY(-1px); }
#parkCreateBtn i { font-style:normal;font-size:18px; }
.park-room-heading { display:flex;align-items:center;justify-content:space-between;margin:22px 3px 12px; }
#parkRefreshBtn { width:35px;height:35px;color:#5eead4;border:1px solid rgba(45,212,191,.2);border-radius:9px;background:#07191b;font-size:18px;cursor:pointer; }
#parkRefreshBtn:hover { border-color:#5eead4;transform:rotate(45deg); }
#parkRoomList { min-height:0;overflow-y:auto;padding-right:5px;scrollbar-color:#2dd4bf #07191b; }
.park-room-card { position:relative;display:grid;grid-template-columns:45px minmax(0,1fr) 72px auto;align-items:center;gap:13px;min-height:84px;margin-bottom:9px;padding:11px 13px;border:1px solid rgba(148,163,184,.15);border-radius:13px;background:linear-gradient(90deg,rgba(10,28,34,.94),rgba(5,23,25,.75));transition:.2s ease; }
.park-room-card:hover { border-color:rgba(45,212,191,.48);transform:translateX(2px);box-shadow:0 9px 25px rgba(0,0,0,.2); }
.park-room-number { color:#3f6e68;font:900 11px 'Press Start 2P',monospace; }
.park-room-copy span { color:#5eead4;font:700 7px 'Press Start 2P',monospace; }
.park-room-copy strong { display:block;margin:7px 0 6px;color:#f1fff9;font-size:13px; }
.park-room-copy small { display:flex;align-items:center;gap:7px;color:#78938e;font-size:10px; }
.park-room-capacity { height:5px;overflow:hidden;border-radius:99px;background:#102d2b; }
.park-room-capacity span { display:block;width:var(--fill);height:100%;border-radius:inherit;background:linear-gradient(90deg,#2dd4bf,#a3e635); }
.park-room-join,.park-room-lock button { height:37px;color:#d9f99d;border:1px solid rgba(163,230,53,.4);border-radius:9px;background:#173522;padding:0 13px;font:900 8px 'Press Start 2P',monospace;cursor:pointer; }
.park-room-join:hover,.park-room-lock button:hover { color:#07190e;background:#a3e635; }
.park-room-join i { margin-left:5px;font-size:16px;font-style:normal; }
.park-room-lock { display:flex;width:200px;gap:7px; }
.park-room-lock input { min-width:0;height:37px; }
.park-room-lock button { padding:0 9px; }
.park-room-empty { display:grid;place-items:center;min-height:225px;text-align:center;color:#5e7974;border:1px dashed rgba(45,212,191,.18);border-radius:15px;background:rgba(5,25,26,.45); }
.park-room-empty span { color:#2dd4bf;font-size:38px; }.park-room-empty strong{color:#d9fff4}.park-room-empty p{margin-top:-25px;font-size:11px;}
#parkGateStatus { min-height:18px;padding:10px 3px 0;color:#78938e;font-size:10px; }
#parkGateStatus[data-kind="error"] { color:#fb7185; } #parkGateStatus[data-kind="success"] { color:#6ee7b7; }
#parkGateShell.is-pending { cursor:progress; } #parkGateShell.is-pending button { pointer-events:none;opacity:.65; }

#parkWorldBadge { position:fixed;z-index:8500;top:104px;right:16px;align-items:center;gap:10px;padding:10px 14px;color:#dffff8;border:1px solid rgba(45,212,191,.46);border-radius:12px;background:rgba(3,25,24,.88);box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 20px rgba(45,212,191,.10);backdrop-filter:blur(7px);pointer-events:none; }
#parkWorldBadge span { display:grid;gap:3px; } #parkWorldBadge b { color:#5eead4;font:900 9px 'Press Start 2P',monospace; } #parkWorldBadge small { color:#8fb4ad;font-size:8px;font-weight:800; }
#parkWorldBadge em { margin-left:8px;padding-left:12px;color:#d9f99d;border-left:1px solid rgba(45,212,191,.2);font:normal 7px 'Press Start 2P',monospace; }

@keyframes parkGatePulse { 0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)} }
@media (max-width: 820px) {
  .park-gate-body { grid-template-columns:1fr; }.park-gate-hero{display:none}.park-gate-create{grid-template-columns:1fr}.park-gate-create>div{display:none}.park-room-card{grid-template-columns:38px minmax(0,1fr) auto}.park-room-capacity{display:none}.park-room-lock{width:170px}#parkWorldBadge em{display:none}
}
@media (max-width: 540px) { #parkGateOverlay{padding:7px}#parkGateShell{height:94vh}.park-gate-header{height:84px;padding:12px}.park-gate-emblem{width:45px;height:45px;flex-basis:45px}.park-gate-header h2{font-size:15px}.park-gate-header p{display:none}.park-gate-body{height:calc(100% - 84px)}.park-gate-browser{padding:13px}.park-room-card{grid-template-columns:28px minmax(0,1fr);}.park-room-join,.park-room-lock{grid-column:2}.park-room-lock{width:100%} }

/* =========================================================
   HYDRAGOR LEGENDARY RAID
   ========================================================= */
.boss-raid-zone-entry { position: relative; overflow: hidden; }
.boss-raid-zone-entry::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.15) 48%, transparent 72%);
  transform: translateX(-120%);
  animation: bossZoneSweep 3.6s ease-in-out infinite;
}
.boss-raid-zone-entry .area-item-cover {
  background-size: 94% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #130718 !important;
}
.boss-zone-live {
  position: absolute;
  right: 31px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fecdd3;
  font: 5px 'Press Start 2P', monospace;
}
.boss-zone-live i { width: 5px; height: 5px; border-radius: 50%; background: #fb355c; box-shadow: 0 0 9px #fb355c; animation: bossLivePulse 1.2s ease-in-out infinite; }
@keyframes bossZoneSweep { 0%, 55% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
@keyframes bossLivePulse { 50% { opacity: .35; transform: scale(.7); } }

#bossRaidOverlay {
  position: fixed;
  z-index: 2200;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at 78% 18%, rgba(251,53,92,.15), transparent 30%),
    radial-gradient(circle at 18% 84%, rgba(250,204,21,.10), transparent 34%),
    rgba(1,5,12,.88);
  backdrop-filter: blur(13px) saturate(.8);
}
#bossRaidShell {
  --raid-red: #fb355c;
  --raid-gold: #facc15;
  --raid-cyan: #67e8f9;
  position: relative;
  width: min(1440px, 97vw);
  height: min(900px, 94vh);
  overflow: hidden;
  border: 1px solid rgba(251,53,92,.45);
  border-radius: 22px;
  color: #eef6ff;
  background: linear-gradient(145deg, rgba(5,15,27,.99), rgba(13,9,28,.99));
  box-shadow: 0 30px 100px rgba(0,0,0,.68), 0 0 46px rgba(251,53,92,.10), inset 0 1px rgba(255,255,255,.05);
  font-family: Inter, Arial, sans-serif;
}
#bossRaidShell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 65%);
}
#bossRaidHeader {
  position: relative;
  z-index: 2;
  height: 92px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(251,53,92,.28);
  background: linear-gradient(90deg, rgba(49,7,27,.94), rgba(4,25,31,.95) 58%, rgba(24,12,36,.96));
}
.boss-raid-emblem {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border: 1px solid rgba(250,204,21,.65);
  border-radius: 14px;
  background: rgba(16,9,29,.92);
  box-shadow: 0 0 24px rgba(250,204,21,.12);
}
.boss-raid-emblem span { transform: rotate(-45deg); color: #fef08a; font: 14px 'Press Start 2P', monospace; text-shadow: 0 0 12px #facc15; }
.boss-raid-emblem i { position: absolute; inset: 7px; border: 1px dashed rgba(251,53,92,.58); border-radius: 9px; animation: bossEmblemSpin 7s linear infinite; }
@keyframes bossEmblemSpin { to { transform: rotate(360deg); } }
.boss-raid-heading { min-width: 0; }
.boss-raid-heading > span, .boss-raid-panel-kicker, .boss-raid-ops-head span, .boss-lobby-title > span, .boss-lobby-target > span {
  color: #fb7185;
  font: 6px 'Press Start 2P', monospace;
  letter-spacing: 1.1px;
}
.boss-raid-heading h2 { margin: 6px 0 5px; font: 18px 'Press Start 2P', monospace; letter-spacing: .8px; color: #fff7ed; }
.boss-raid-heading p { margin: 0; color: rgba(226,232,240,.58); font-size: 11px; }
#bossRaidWindowStatus {
  margin-left: auto;
  min-width: 170px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(74,222,128,.22);
  border-radius: 11px;
  background: rgba(2,24,22,.64);
}
#bossRaidWindowStatus > i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px #22c55e; animation: bossLivePulse 1.25s infinite; }
#bossRaidWindowStatus span { color: rgba(167,243,208,.55); font: 5px 'Press Start 2P', monospace; }
#bossRaidWindowStatus strong { margin-top: 4px; color: #a7f3d0; font: 9px 'Press Start 2P', monospace; }
#bossRaidClose {
  width: 45px; height: 45px; flex: 0 0 45px; border: 1px solid rgba(251,113,133,.28); border-radius: 11px;
  color: #fecdd3; background: rgba(77,12,35,.38); font-size: 24px; cursor: pointer; transition: .2s ease;
}
#bossRaidClose:hover { transform: rotate(5deg); border-color: #fb7185; background: rgba(136,19,55,.52); }
.boss-raid-view { position: relative; z-index: 1; height: calc(100% - 92px); }

#bossRaidHub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 345px;
  grid-template-rows: 325px minmax(0, 1fr);
  grid-template-areas: 'hero create' 'rooms create';
  gap: 13px;
  padding: 14px;
}
#bossRaidHero {
  grid-area: hero;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 205px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(250,204,21,.2);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 48%, rgba(250,204,21,.14), transparent 28%),
    linear-gradient(112deg, rgba(45,11,34,.92), rgba(6,29,37,.90));
}
.boss-raid-sky-lines { position: absolute; inset: 0; opacity: .22; background: repeating-radial-gradient(ellipse at 20% 50%, transparent 0 38px, rgba(250,204,21,.16) 40px 41px); animation: bossSkyDrift 8s linear infinite; }
@keyframes bossSkyDrift { 50% { transform: translateX(16px) scale(1.04); opacity: .32; } }
#bossRaidBossPortrait { position: relative; z-index: 1; height: 270px; display: grid; place-items: center; }
#bossRaidBossPortrait img { position: relative; z-index: 2; width: 255px; height: 255px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 18px 20px rgba(0,0,0,.6)); animation: bossPortraitFloat 3.2s ease-in-out infinite; }
.boss-raid-boss-aura { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.15), rgba(250,204,21,.17) 26%, rgba(251,53,92,.08) 48%, transparent 70%); box-shadow: 0 0 44px rgba(250,204,21,.18); animation: bossAuraPulse 2s ease-in-out infinite; }
.boss-raid-boss-aura::before, .boss-raid-boss-aura::after { content: ''; position: absolute; inset: 12px; border: 1px dashed rgba(250,204,21,.42); border-radius: 50%; animation: bossEmblemSpin 11s linear infinite; }
.boss-raid-boss-aura::after { inset: 32px; border-style: solid; border-color: rgba(251,53,92,.25); animation-direction: reverse; animation-duration: 7s; }
@keyframes bossPortraitFloat { 50% { transform: translateY(-10px) scale(1.025); } }
@keyframes bossAuraPulse { 50% { transform: scale(1.08); opacity: .68; } }
.boss-raid-legendary-tag { position: absolute; z-index: 3; bottom: 13px; padding: 7px 13px; border: 1px solid #fb7185; border-radius: 7px; color: #fff; background: linear-gradient(90deg,#7f1d1d,#e11d48,#7f1d1d); background-size: 200%; font: 7px 'Press Start 2P', monospace; box-shadow: 0 0 18px rgba(251,53,92,.5); animation: bossTagShine 2s linear infinite; }
@keyframes bossTagShine { to { background-position: 200% 0; } }
.boss-raid-boss-copy { position: relative; z-index: 1; }
.boss-raid-boss-copy > span { color: #fde68a; font: 6px 'Press Start 2P', monospace; letter-spacing: 1px; }
.boss-raid-boss-copy h3 { margin: 11px 0 12px; color: #fff; font: 31px 'Press Start 2P', monospace; text-shadow: 0 0 22px rgba(251,53,92,.48); }
.boss-raid-boss-copy p { max-width: 570px; margin: 0; color: rgba(226,232,240,.65); font-size: 12px; line-height: 1.7; }
.boss-raid-boss-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 20px; }
.boss-raid-boss-meta > div { padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(2,8,18,.52); }
.boss-raid-boss-meta span { display: block; margin-bottom: 6px; color: rgba(148,163,184,.55); font: 5px 'Press Start 2P', monospace; }
.boss-raid-boss-meta strong { color: #fef08a; font: 7px 'Press Start 2P', monospace; }
.boss-raid-attempt-card { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; border: 1px solid rgba(251,53,92,.23); border-radius: 13px; background: rgba(20,6,24,.66); text-align: center; }
.boss-raid-attempt-card > span { color: #fda4af; font: 6px 'Press Start 2P', monospace; }
#bossRaidAttemptPips { display: flex; gap: 9px; margin: 20px 0 14px; }
#bossRaidAttemptPips i { width: 31px; height: 31px; transform: rotate(45deg); border: 1px solid rgba(148,163,184,.2); border-radius: 8px; background: rgba(15,23,42,.8); }
#bossRaidAttemptPips i.is-ready { border-color: #facc15; background: radial-gradient(circle,#fef08a,#e11d48); box-shadow: 0 0 15px rgba(250,204,21,.5); animation: bossAttemptFloat 1.7s ease-in-out infinite; }
#bossRaidAttemptPips i.is-spent { opacity: .34; }
#bossRaidAttemptPips i.is-spent::after { content: ''; display: block; width: 135%; height: 2px; margin: 14px 0 0 -5px; transform: rotate(-45deg); background: #64748b; }
@keyframes bossAttemptFloat { 50% { transform: rotate(45deg) translate(-2px,-2px); } }
.boss-raid-attempt-card > strong { color: #fff; font: 16px 'Press Start 2P', monospace; }
.boss-raid-attempt-card > small { margin-top: 12px; color: rgba(148,163,184,.58); font-size: 9px; line-height: 1.5; }

#bossRaidOperations { grid-area: rooms; min-height: 0; display: flex; flex-direction: column; border: 1px solid rgba(103,232,249,.12); border-radius: 16px; background: rgba(3,16,25,.66); overflow: hidden; }
.boss-raid-ops-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.boss-raid-ops-head h3 { margin: 5px 0 0; font: 11px 'Press Start 2P', monospace; }
#bossRaidRefresh { margin-left: auto; padding: 9px 11px; border: 1px solid rgba(103,232,249,.20); border-radius: 8px; color: #a5f3fc; background: rgba(8,47,73,.25); font: 6px 'Press Start 2P', monospace; cursor: pointer; }
#bossRaidRoomList { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; scrollbar-width: thin; scrollbar-color: rgba(251,53,92,.5) transparent; }
.boss-room-card { display: grid; grid-template-columns: 110px 170px minmax(120px,1fr) 90px 125px; align-items: center; gap: 12px; min-height: 76px; margin-bottom: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: linear-gradient(90deg,rgba(9,23,35,.88),rgba(29,10,30,.72)); transition: .2s ease; }
.boss-room-card:hover { transform: translateY(-1px); border-color: rgba(251,53,92,.38); box-shadow: 0 9px 24px rgba(0,0,0,.25); }
.boss-room-code span, .boss-room-commander span { display: block; margin-bottom: 6px; color: rgba(148,163,184,.52); font: 5px 'Press Start 2P', monospace; }
.boss-room-code strong { color: #fda4af; font: 8px 'Press Start 2P', monospace; }
.boss-room-commander strong { display: inline-block; max-width: 115px; overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; vertical-align: bottom; }
.boss-room-commander small { margin-left: 6px; color: #67e8f9; font-size: 9px; }
.boss-room-team { min-width: 0; display: flex; align-items: center; min-height: 51px; }
.boss-room-team img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; margin-right: -13px; filter: drop-shadow(0 5px 5px rgba(0,0,0,.62)); }
.boss-room-slots { text-align: center; }
.boss-room-slots span { display: block; color: #fef08a; font: 10px 'Press Start 2P', monospace; }
.boss-room-slots i { display: block; margin-top: 6px; color: rgba(148,163,184,.58); font: normal 5px 'Press Start 2P', monospace; }
.boss-room-card > button, #bossRaidCreate, #bossLobbyStart { min-height: 42px; border: 1px solid rgba(250,204,21,.62); border-radius: 9px; color: #fff7ed; background: linear-gradient(135deg,#854d0e,#be123c); box-shadow: inset 0 1px rgba(255,255,255,.12); font: 6px 'Press Start 2P', monospace; cursor: pointer; transition: .2s ease; }
.boss-room-card > button:hover, #bossRaidCreate:hover, #bossLobbyStart:hover { transform: translateY(-2px); filter: brightness(1.15); box-shadow: 0 8px 20px rgba(190,18,60,.25); }
.boss-room-empty { height: 100%; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(148,163,184,.5); }
.boss-room-empty > div { display: flex; gap: 7px; margin-bottom: 12px; }
.boss-room-empty i { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid rgba(251,53,92,.4); animation: bossLivePulse 1.5s infinite; }
.boss-room-empty i:nth-child(2) { animation-delay: .25s; }.boss-room-empty i:nth-child(3) { animation-delay: .5s; }
.boss-room-empty strong { color: #e2e8f0; font: 8px 'Press Start 2P', monospace; }.boss-room-empty span { margin-top: 8px; font-size: 10px; }

#bossRaidCreatePanel { grid-area: create; display: flex; flex-direction: column; padding: 22px; border: 1px solid rgba(251,53,92,.16); border-radius: 16px; background: linear-gradient(165deg,rgba(37,8,31,.87),rgba(3,24,31,.82)); }
#bossRaidCreatePanel h3 { margin: 11px 0 8px; font: 16px 'Press Start 2P', monospace; line-height: 1.5; }
#bossRaidCreatePanel p { margin: 0 0 25px; color: rgba(203,213,225,.6); font-size: 11px; line-height: 1.6; }
#bossRaidCreatePanel label { margin-bottom: 8px; color: #fda4af; font: 6px 'Press Start 2P', monospace; }
#bossRaidCreatePanel label small { color: rgba(148,163,184,.48); }
#bossRaidCreatePassword, #bossRaidJoinPassword { height: 46px; padding: 0 13px; border: 1px solid rgba(251,53,92,.20); border-radius: 9px; outline: none; color: #fff; background: rgba(2,8,18,.72); }
#bossRaidCreatePassword:focus, #bossRaidJoinPassword:focus { border-color: #fb7185; box-shadow: 0 0 0 3px rgba(251,53,92,.10); }
.boss-raid-create-note { display: flex; gap: 9px; margin-top: 16px; padding: 12px; border: 1px solid rgba(250,204,21,.14); border-radius: 9px; color: rgba(254,240,138,.65); background: rgba(113,63,18,.14); font-size: 9px; line-height: 1.5; }
.boss-raid-create-note i { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border: 1px solid rgba(250,204,21,.4); border-radius: 50%; font-style: normal; }
#bossRaidCreate { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; min-height: 54px; }
#bossRaidCreate:disabled, #bossLobbyStart:disabled { cursor: not-allowed; opacity: .35; filter: grayscale(1); }
#bossRaidJoinPrompt { position: absolute; z-index: 20; left: 50%; bottom: 30px; width: min(600px,90%); grid-template-columns: 1fr 190px auto auto; align-items: center; gap: 8px; transform: translateX(-50%); padding: 12px; border: 1px solid rgba(251,113,133,.48); border-radius: 12px; background: rgba(10,11,27,.98); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
#bossRaidJoinPrompt span { display: block; color: #fb7185; font: 5px 'Press Start 2P', monospace; }#bossRaidJoinPrompt strong { font-size: 12px; }
#bossRaidJoinConfirm, #bossRaidJoinCancel, #bossLobbyLeave { height: 40px; padding: 0 12px; border-radius: 8px; font: 6px 'Press Start 2P', monospace; cursor: pointer; }
#bossRaidJoinConfirm { border: 1px solid #facc15; color: #fff; background: #9f1239; }#bossRaidJoinCancel,#bossLobbyLeave { border: 1px solid rgba(148,163,184,.25); color: #cbd5e1; background: rgba(30,41,59,.48); }

#bossRaidLobby { gap: 13px; padding: 14px; }
.boss-lobby-main { min-width: 0; flex: 1; display: flex; flex-direction: column; padding: 20px; border: 1px solid rgba(103,232,249,.12); border-radius: 16px; background: rgba(3,16,25,.72); }
.boss-lobby-title h3 { margin: 8px 0 7px; font: 15px 'Press Start 2P', monospace; color: #fff; }.boss-lobby-title p { margin: 0; color: rgba(148,163,184,.63); font-size: 11px; }
#bossLobbyMembers { flex: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: center; }
.boss-lobby-member { position: relative; min-height: 390px; padding: 16px; overflow: hidden; border: 1px solid rgba(103,232,249,.17); border-radius: 14px; background: linear-gradient(160deg,rgba(7,31,41,.88),rgba(24,10,32,.82)); }
.boss-lobby-member.is-owner { border-color: rgba(250,204,21,.35); box-shadow: inset 0 0 30px rgba(250,204,21,.035); }
.boss-lobby-member-head { display: flex; justify-content: space-between; color: #67e8f9; font: 6px 'Press Start 2P', monospace; }
.boss-lobby-member-head i { width: 7px; height: 7px; border-radius: 50%; background: #64748b; }.boss-lobby-member-head i.online { background: #4ade80; box-shadow: 0 0 10px #22c55e; }
.boss-lobby-member h4 { margin: 14px 0 4px; font: 12px 'Press Start 2P', monospace; }.boss-lobby-member > small { color: rgba(148,163,184,.62); }
.boss-lobby-slumas { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 23px; }
.boss-lobby-sluma { min-width: 0; padding: 8px 4px; text-align: center; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: rgba(2,8,18,.55); }
.boss-lobby-sluma img { width: 77px; max-width: 100%; height: 77px; object-fit: contain; image-rendering: pixelated; }.boss-lobby-sluma span { display: block; overflow: hidden; color: #e2e8f0; font-size: 9px; font-weight: 700; text-overflow: ellipsis; }.boss-lobby-sluma b { display: block; margin-top: 4px; color: #67e8f9; font-size: 8px; }
.boss-lobby-member.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; border-style: dashed; color: rgba(148,163,184,.42); }.boss-lobby-empty-sigil { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 16px; border: 1px dashed rgba(103,232,249,.3); border-radius: 50%; font-size: 30px; }.boss-lobby-member.is-empty strong { font: 8px 'Press Start 2P', monospace; }.boss-lobby-member.is-empty span { margin-top: 8px; font-size: 9px; }
.boss-lobby-footer { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }.boss-lobby-footer > div { margin-left: auto; color: rgba(148,163,184,.62); font-size: 10px; }#bossLobbyStart { min-width: 180px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: space-between; }
.boss-lobby-target { width: 320px; flex: 0 0 320px; display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid rgba(251,53,92,.2); border-radius: 16px; background: linear-gradient(165deg,rgba(45,8,30,.82),rgba(6,20,30,.88)); }
.boss-lobby-target img { width: 205px; height: 205px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 15px 18px #000); animation: bossPortraitFloat 3s ease-in-out infinite; }.boss-lobby-target h3 { margin: 5px 0 20px; font: 17px 'Press Start 2P', monospace; }.boss-lobby-target > div { width: 100%; display: flex; justify-content: space-between; padding: 10px; border-top: 1px solid rgba(255,255,255,.06); }.boss-lobby-target > div span { color: rgba(148,163,184,.55); font: 5px 'Press Start 2P', monospace; }.boss-lobby-target > div strong { color: #fef08a; font: 8px 'Press Start 2P', monospace; }.boss-lobby-target ul { width: 100%; margin: 16px 0 0; padding: 13px 13px 13px 28px; border: 1px solid rgba(251,53,92,.12); border-radius: 9px; color: rgba(254,205,211,.65); font-size: 9px; line-height: 2; background: rgba(76,5,25,.18); }

#bossRaidBattle { background: #030712; }
#bossRaidArena { position: relative; flex: 1; min-width: 0; overflow: hidden; }
#bossRaidCanvas { display: block; width: 100%; height: 100%; }
#bossRaidCombatHud { width: 350px; flex: 0 0 350px; display: flex; flex-direction: column; gap: 9px; padding: 10px; border-left: 1px solid rgba(251,53,92,.2); background: rgba(3,10,20,.96); }
#bossRaidBossHud { padding: 14px; border: 1px solid rgba(251,53,92,.3); border-radius: 12px; background: linear-gradient(145deg,rgba(59,7,31,.72),rgba(8,25,33,.76)); }
#bossRaidBossHud > div:first-child { display: flex; justify-content: space-between; color: #fda4af; font: 5px 'Press Start 2P', monospace; }#bossRaidPhase { color: #fef08a; }
#bossRaidBossHud h3 { margin: 12px 0 11px; font: 14px 'Press Start 2P', monospace; }
.boss-raid-hp-track { height: 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: rgba(2,6,23,.9); }.boss-raid-hp-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#be123c,#fb355c,#facc15); box-shadow: 0 0 12px #fb355c; transition: width .22s linear; }
#bossRaidHpText { display: block; margin-top: 8px; color: #fff; font: 8px 'Press Start 2P', monospace; }#bossRaidThreatText { display: block; margin-top: 8px; color: rgba(254,240,138,.55); font-size: 9px; }
#bossRaidRoster { display: grid; gap: 6px; }.boss-roster-player { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid rgba(103,232,249,.10); border-radius: 8px; background: rgba(8,25,35,.62); }.boss-roster-player > i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 9px #22c55e; }.boss-roster-player.is-out > i { background: #64748b; box-shadow: none; }.boss-roster-player span { min-width: 0; }.boss-roster-player strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }.boss-roster-player small { color: #67e8f9; font-size: 8px; }.boss-roster-player.is-out small { color: #94a3b8; }
#bossRaidGroupChat { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(103,232,249,.12); border-radius: 10px; background: rgba(2,12,21,.78); }.boss-group-chat-head { display: flex; align-items: center; gap: 7px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.06); color: #a5f3fc; font: 6px 'Press Start 2P', monospace; }.boss-group-chat-head i { width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 8px #38bdf8; }.boss-group-chat-head b { margin-left: auto; color: #4ade80; }
#bossGroupMessages { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }.boss-group-empty { color: rgba(148,163,184,.42); font-size: 9px; }.boss-group-message { margin-bottom: 9px; }.boss-group-message span { color: #67e8f9; font-size: 9px; font-weight: 700; }.boss-group-message span b { color: #94a3b8; font-size: 7px; }.boss-group-message p { margin: 3px 0 0; color: #e2e8f0; font-size: 10px; line-height: 1.45; }
#bossGroupChatForm { display: flex; gap: 5px; padding: 7px; border-top: 1px solid rgba(255,255,255,.06); }#bossGroupChatInput { min-width: 0; flex: 1; height: 37px; padding: 0 10px; border: 1px solid rgba(103,232,249,.14); border-radius: 7px; outline: none; color: #fff; background: rgba(2,6,23,.8); }#bossGroupChatForm button { width: 39px; border: 1px solid rgba(103,232,249,.3); border-radius: 7px; color: #cffafe; background: #075985; font-size: 20px; cursor: pointer; }
#bossRaidCountdownCurtain, #bossRaidResult { position: absolute; z-index: 10; inset: 0; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle,rgba(55,15,44,.84),rgba(1,5,12,.96)); text-align: center; }.boss-raid-view #bossRaidCountdownCurtain span, #bossRaidResultKicker { color: #fda4af; font: 7px 'Press Start 2P', monospace; letter-spacing: 1.6px; }#bossRaidCountdownCurtain strong { margin: 20px 0; color: #fef08a; font: 72px 'Press Start 2P', monospace; text-shadow: 0 0 35px #facc15; animation: bossCountPulse 1s ease-in-out infinite; }#bossRaidCountdownCurtain small { color: rgba(203,213,225,.6); }
@keyframes bossCountPulse { 50% { transform: scale(1.12); opacity: .62; } }
#bossRaidResult { background: radial-gradient(circle,rgba(73,9,29,.88),rgba(1,5,12,.98)); }#bossRaidResult.is-victory { background: radial-gradient(circle,rgba(42,61,13,.78),rgba(1,8,12,.98)); }#bossRaidResult h3 { margin: 22px 0 14px; color: #fb7185; font: 42px 'Press Start 2P', monospace; text-shadow: 0 0 28px rgba(251,53,92,.6); }#bossRaidResult.is-victory h3 { color: #fef08a; text-shadow: 0 0 30px rgba(250,204,21,.72); }#bossRaidResult p { color: #e2e8f0; font-size: 14px; }#bossRaidResult > small { margin-top: 18px; color: rgba(148,163,184,.55); }
#bossRaidSpectator { position: absolute; z-index: 6; top: 14px; left: 50%; align-items: center; gap: 10px; transform: translateX(-50%); padding: 10px 15px; border: 1px solid rgba(148,163,184,.25); border-radius: 9px; background: rgba(2,6,23,.86); box-shadow: 0 10px 30px rgba(0,0,0,.35); }#bossRaidSpectator i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }#bossRaidSpectator span { color: #cbd5e1; font: 6px 'Press Start 2P', monospace; }#bossRaidSpectator strong { color: rgba(203,213,225,.62); font-size: 9px; }
#bossRaidCapturePhase {
  position: absolute;
  z-index: 12;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(250,204,21,.18), transparent 22%),
    radial-gradient(circle at 50% 55%, rgba(251,53,92,.17), transparent 45%),
    linear-gradient(150deg, rgba(2,8,18,.97), rgba(35,7,28,.96));
}
.boss-capture-rings { position: absolute; width: min(54vh,480px); aspect-ratio: 1; border: 1px solid rgba(250,204,21,.18); border-radius: 50%; animation: bossCapturePulse 2.4s ease-in-out infinite; }
.boss-capture-rings i { position: absolute; inset: 10%; border: 1px dashed rgba(251,113,133,.38); border-radius: 50%; animation: bossEmblemSpin 10s linear infinite; }
.boss-capture-rings i:nth-child(2) { inset: 23%; border-color: rgba(103,232,249,.27); animation-direction: reverse; animation-duration: 7s; }
.boss-capture-rings i:nth-child(3) { inset: 36%; border-style: solid; border-color: rgba(250,204,21,.42); animation-duration: 4s; }
#bossRaidCapturePhase > img { position: relative; z-index: 1; width: clamp(150px,22vh,235px); height: clamp(150px,22vh,235px); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 18px 20px #000) drop-shadow(0 0 16px rgba(250,204,21,.28)); animation: bossPortraitFloat 2.2s ease-in-out infinite; }
.boss-capture-kicker { position: relative; z-index: 1; margin-top: -8px; color: #fb7185; font: 7px 'Press Start 2P', monospace; letter-spacing: 1.6px; }
#bossRaidCapturePhase h3 { position: relative; z-index: 1; margin: 11px 0 8px; color: #fff7ed; font: clamp(17px,2vw,25px) 'Press Start 2P', monospace; text-shadow: 0 0 24px rgba(251,53,92,.55); }
#bossRaidCapturePhase > p { position: relative; z-index: 1; margin: 0; color: rgba(226,232,240,.68); font-size: 11px; }
#bossCaptureCountdown { position: relative; z-index: 1; margin: 13px 0; color: #fef08a; font: 31px 'Press Start 2P', monospace; text-shadow: 0 0 22px rgba(250,204,21,.7); }
#bossCaptureCountdown::after { content: ' SEC'; color: rgba(254,240,138,.5); font-size: 7px; }
.boss-capture-controls { position: relative; z-index: 1; width: min(510px,92%); display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 12px; border: 1px solid rgba(250,204,21,.22); border-radius: 12px; background: rgba(2,12,22,.88); box-shadow: 0 16px 38px rgba(0,0,0,.38); }
.boss-capture-controls label { color: #fde68a; font: 6px 'Press Start 2P', monospace; }
#bossCaptureItem { min-width: 0; height: 42px; padding: 0 10px; border: 1px solid rgba(103,232,249,.22); border-radius: 8px; outline: none; color: #e0f2fe; background: #071827; font-size: 11px; }
#bossCaptureChance { grid-column: 1 / 3; color: #67e8f9; font: 7px 'Press Start 2P', monospace; text-align: left; }
#bossCaptureThrow { grid-row: 1 / 3; grid-column: 3; min-width: 145px; height: 62px; border: 1px solid #fde047; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#a16207,#e11d48); font: 7px 'Press Start 2P', monospace; cursor: pointer; box-shadow: 0 0 20px rgba(250,204,21,.16); transition: .2s ease; }
#bossCaptureThrow:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.15); }
#bossCaptureThrow:disabled, #bossCaptureItem:disabled { opacity: .42; cursor: not-allowed; }
#bossCaptureStatus { position: relative; z-index: 1; min-height: 18px; margin-top: 12px; color: #cbd5e1; font-size: 10px; font-weight: 700; }
#bossCaptureStatus.is-captured { color: #86efac; text-shadow: 0 0 12px rgba(74,222,128,.45); }
#bossCaptureStatus.is-escaped { color: #fda4af; }
@keyframes bossCapturePulse { 50% { transform: scale(1.06); opacity: .62; } }
#bossRaidToast { position: absolute; z-index: 50; left: 50%; bottom: 18px; max-width: 560px; transform: translate(-50%,20px); padding: 11px 16px; border: 1px solid rgba(74,222,128,.4); border-radius: 9px; opacity: 0; pointer-events: none; color: #dcfce7; background: rgba(5,46,22,.96); box-shadow: 0 12px 32px rgba(0,0,0,.4); font-size: 11px; transition: .22s ease; }#bossRaidToast.is-visible { opacity: 1; transform: translate(-50%,0); }#bossRaidToast.is-error { border-color: rgba(251,113,133,.55); color: #ffe4e6; background: rgba(76,5,25,.96); }

@media (max-width: 1120px) {
  #bossRaidHub { grid-template-columns: 1fr 285px; }
  #bossRaidHero { grid-template-columns: 220px 1fr; }
  .boss-raid-attempt-card { display: none; }
  #bossRaidBossPortrait img { width: 205px; height: 205px; }
  .boss-room-card { grid-template-columns: 90px 135px 1fr 72px; }
  .boss-room-card > button { grid-column: 1 / -1; min-height: 34px; }
  #bossLobbyMembers { grid-template-columns: 1fr; overflow-y: auto; align-items: start; }
  .boss-lobby-member { min-height: 180px; }
  .boss-lobby-target { width: 270px; flex-basis: 270px; }
}
@media (max-width: 780px) {
  #bossRaidOverlay { padding: 4px; }
  #bossRaidShell { width: 100vw; height: 100vh; border-radius: 0; }
  #bossRaidHeader { height: 75px; padding: 8px; }
  .boss-raid-heading p, #bossRaidWindowStatus span, .boss-raid-emblem { display: none; }
  .boss-raid-heading h2 { font-size: 12px; }
  #bossRaidWindowStatus { min-width: 105px; padding: 7px; }
  .boss-raid-view { height: calc(100% - 75px); }
  #bossRaidHub { display: flex; flex-direction: column; overflow-y: auto; }
  #bossRaidHero { min-height: 510px; grid-template-columns: 1fr; text-align: center; }
  #bossRaidBossPortrait { height: 220px; }
  .boss-raid-boss-meta { grid-template-columns: 1fr; }
  #bossRaidCreatePanel { min-height: 350px; }
  #bossRaidOperations { min-height: 350px; }
  .boss-room-card { grid-template-columns: 1fr 1fr; }
  .boss-room-team { grid-column: 1 / -1; }
  #bossRaidLobby { overflow-y: auto; flex-direction: column; }
  .boss-lobby-main { min-height: 720px; }
  .boss-lobby-target { width: 100%; flex-basis: auto; }
  #bossRaidBattle { flex-direction: column; }
  #bossRaidArena { min-height: 55%; }
  #bossRaidCombatHud { width: 100%; flex: 1; border-left: 0; border-top: 1px solid rgba(251,53,92,.2); overflow-y: auto; }
  #bossRaidGroupChat { min-height: 170px; }
  .boss-capture-controls { grid-template-columns: 1fr; }
  .boss-capture-controls label { display: none; }
  #bossCaptureChance { grid-column: 1; text-align: center; }
  #bossCaptureThrow { grid-row: auto; grid-column: 1; width: 100%; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .boss-raid-zone-entry::after, .boss-raid-emblem i, .boss-raid-sky-lines, #bossRaidBossPortrait img, .boss-raid-boss-aura, .boss-raid-boss-aura::before, .boss-raid-boss-aura::after, .boss-raid-legendary-tag, #bossRaidAttemptPips i.is-ready, .boss-capture-rings, .boss-capture-rings i, #bossRaidCapturePhase > img { animation: none !important; }
}

/* =====================================================
   PUBLIC PLAYER IDENTITY + NICKNAME SETUP
   ===================================================== */
#bottomActionBar {
  display: grid;
  grid-template-columns: minmax(270px, 350px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

#bottomPlayerIdentity {
  position: relative;
  min-width: 0;
  height: 52px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 5px 12px 5px 7px;
  border: 1px solid rgba(190, 242, 100, 0.23);
  border-radius: 11px;
  background:
    radial-gradient(circle at 7% 45%, rgba(190, 242, 100, 0.15), transparent 24%),
    linear-gradient(100deg, rgba(12, 43, 31, 0.9), rgba(3, 20, 16, 0.72));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 5px 14px rgba(0, 0, 0, 0.2);
}

#bottomPlayerIdentity::after {
  content: '';
  position: absolute;
  left: 58px;
  right: 10px;
  bottom: 2px;
  height: 1px;
  opacity: 0.6;
  background: linear-gradient(90deg, #bef264, transparent);
}

#bottomPlayerSigil {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(190, 242, 100, 0.55);
  border-radius: 12px 4px 12px 4px;
  background: linear-gradient(145deg, rgba(190, 242, 100, 0.23), rgba(22, 101, 52, 0.18));
  color: #ecfccb;
  font: 700 11px/1 var(--font-game, monospace);
  box-shadow: 0 0 15px rgba(163, 230, 53, 0.12), inset 0 0 10px rgba(190, 242, 100, 0.07);
  transform: rotate(45deg) scale(0.82);
}

#bottomPlayerSigil span { transform: rotate(-45deg); text-shadow: 0 0 9px #a3e635; }
#bottomPlayerCopy { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
#bottomPlayerNameRow { min-width: 0; display: flex; align-items: center; gap: 7px; }
#bottomPlayerNameRow > span {
  flex: 0 0 auto;
  color: #6c8378;
  font: 700 6px/1 var(--font-game, monospace);
  letter-spacing: 0.8px;
}
#bottomPlayerNickname {
  min-width: 0;
  overflow: hidden;
  color: #f5f8ee;
  font: 700 10px/1.2 var(--font-game, monospace);
  text-overflow: ellipsis;
  text-shadow: 0 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
#bottomPlayerLevel {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 6px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 5px;
  background: rgba(14, 165, 233, 0.09);
  color: #7dd3fc;
  font: 700 7px/1 var(--font-game, monospace);
}
#bottomPlayerExperience { min-width: 0; display: grid; grid-template-columns: minmax(60px, 1fr) auto; align-items: center; gap: 8px; }
#bottomPlayerExpTrack { height: 5px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 99px; background: rgba(0, 0, 0, 0.36); }
#bottomPlayerExpFill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #a3e635, #facc15);
  box-shadow: 0 0 9px rgba(163, 230, 53, 0.6);
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#bottomPlayerExpText { color: #82958c; font-size: 8px; white-space: nowrap; }

#bottomActionNav {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 8px;
  padding: 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#bottomActionNav::-webkit-scrollbar { display: none; }

.nickname-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgba(34, 197, 94, 0.15), transparent 31%),
    linear-gradient(145deg, rgba(1, 8, 7, 0.88), rgba(2, 7, 12, 0.96));
  backdrop-filter: blur(14px) saturate(0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.nickname-setup-active { overflow: hidden; }
.nickname-setup-overlay.is-active { opacity: 1; }
.nickname-setup-overlay.is-complete { opacity: 0; }

.nickname-setup-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  padding: 34px 38px 25px;
  border: 1px solid rgba(190, 242, 100, 0.42);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(155deg, rgba(8, 31, 25, 0.99), rgba(4, 16, 17, 0.99));
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.72), 0 0 40px rgba(132, 204, 22, 0.09), inset 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(22px) scale(0.96);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.08);
}
.nickname-setup-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #bef264, #facc15, #38bdf8, transparent);
  box-shadow: 0 0 18px rgba(190, 242, 100, 0.45);
}
.nickname-setup-overlay.is-active .nickname-setup-card { transform: translateY(0) scale(1); }
.nickname-setup-overlay.is-complete .nickname-setup-card { transform: translateY(-14px) scale(1.03); }

.nickname-setup-orbit {
  position: relative;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  align-self: center;
  margin-bottom: 18px;
  border: 1px solid rgba(190, 242, 100, 0.25);
  border-radius: 50%;
  color: #ecfccb;
  font: 700 18px/1 var(--font-game, monospace);
  box-shadow: inset 0 0 22px rgba(163, 230, 53, 0.07), 0 0 24px rgba(163, 230, 53, 0.08);
}
.nickname-setup-orbit::before,
.nickname-setup-orbit::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(190, 242, 100, 0.36);
  border-radius: 50%;
  animation: nicknameOrbit 9s linear infinite;
}
.nickname-setup-orbit::after { inset: 22px; border-style: solid; background: rgba(163, 230, 53, 0.12); animation-direction: reverse; animation-duration: 5s; }
.nickname-setup-orbit i { position: absolute; z-index: 2; inset: 29px; border-radius: 50%; background: #a3e635; box-shadow: 0 0 18px #84cc16; }
.nickname-setup-orbit span { position: relative; z-index: 3; color: #07110f; font-size: 8px; }
.nickname-setup-kicker { color: #a3e635; font: 700 7px/1 var(--font-game, monospace); letter-spacing: 1.5px; text-align: center; }
.nickname-setup-card h2 { margin: 12px 0 10px; color: #f7fee7; font: 700 clamp(16px, 2.8vw, 22px)/1.35 var(--font-game, monospace); text-align: center; text-shadow: 0 3px rgba(0, 0, 0, 0.45); }
.nickname-setup-card > p { max-width: 430px; margin: 0 auto 25px; color: #91a69c; font-size: 12px; line-height: 1.65; text-align: center; }
.nickname-setup-card > label { margin-bottom: 8px; color: #84988e; font: 700 7px/1 var(--font-game, monospace); letter-spacing: 1px; }
#nicknameInputShell { position: relative; }
#nicknameInput {
  width: 100%;
  height: 54px;
  box-sizing: border-box;
  padding: 0 76px 0 16px;
  border: 1px solid rgba(190, 242, 100, 0.27);
  border-radius: 11px;
  outline: 0;
  background: rgba(1, 10, 9, 0.78);
  color: #f7fee7;
  font: 700 12px/1 var(--font-game, monospace);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.34);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#nicknameInput::placeholder { color: #4d6359; }
#nicknameInput:focus { border-color: rgba(190, 242, 100, 0.82); box-shadow: 0 0 0 3px rgba(163, 230, 53, 0.09), inset 0 2px 10px rgba(0, 0, 0, 0.34); }
#nicknameCharacterCount { position: absolute; right: 14px; top: 50%; color: #5f746a; font-size: 9px; transform: translateY(-50%); }
#nicknameAvailability { min-height: 18px; margin-top: 9px; color: #71857b; font-size: 10px; }
#nicknameAvailability[data-state="checking"] { color: #facc15; }
#nicknameAvailability[data-state="available"] { color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.35); }
#nicknameAvailability[data-state="taken"],
#nicknameAvailability[data-state="invalid"],
#nicknameAvailability[data-state="error"] { color: #fb7185; }
#nicknameRules { color: #53675e; font-size: 9px; line-height: 1.5; }
#nicknameSubmitBtn {
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(190, 242, 100, 0.8);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(101, 163, 13, 0.75), rgba(47, 94, 19, 0.92));
  color: #fff;
  font: 700 8px/1 var(--font-game, monospace);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(163, 230, 53, 0.1), inset 0 1px rgba(255, 255, 255, 0.16);
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
#nicknameSubmitBtn:not(:disabled):hover { transform: translateY(-3px); filter: brightness(1.15); }
#nicknameSubmitBtn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(0.5); }
#nicknameSubmitBtn i { color: #d9f99d; font-size: 22px; font-style: normal; }
#nicknameSubmitBtn.is-loading span { opacity: 0.45; }
.nickname-permanent-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; color: #6d8077; font-size: 9px; }
.nickname-permanent-note i { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgba(250, 204, 21, 0.24); border-radius: 50%; color: #facc15; font-style: normal; }

@keyframes nicknameOrbit { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  #bottomActionBar { grid-template-columns: minmax(185px, 30vw) minmax(0, 1fr); }
  #bottomPlayerIdentity { padding-right: 8px; }
  #bottomPlayerNameRow > span { display: none; }
  #bottomPlayerExpText { display: none; }
  #bottomPlayerExperience { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  #bottomActionBar { grid-template-columns: minmax(126px, 29vw) minmax(0, 1fr); gap: 5px; }
  #bottomPlayerIdentity { height: 46px; grid-template-columns: minmax(0, 1fr); padding: 5px 7px; }
  #bottomPlayerSigil { display: none; }
  #bottomPlayerIdentity::after { left: 7px; }
  #bottomPlayerCopy { gap: 6px; }
  #bottomPlayerNickname { font-size: 7px; }
  #bottomPlayerLevel { padding: 3px 4px; font-size: 6px; }
  #bottomActionNav { gap: 6px; }
  .nickname-setup-card { padding: 28px 22px 22px; border-radius: 17px; }
  .nickname-setup-card h2 { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .nickname-setup-overlay,
  .nickname-setup-card,
  .nickname-setup-orbit::before,
  .nickname-setup-orbit::after,
  #bottomPlayerExpFill { animation: none !important; transition: none !important; }
}

/* =====================================================
   BOTTOM DOCK: MINIMIZED CHAT + HUNT ANALYZER
   ===================================================== */
#bottomActionBar {
  grid-template-columns: minmax(270px, 350px) auto minmax(0, 1fr);
}

#bottomUtilityDock {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

#bottomUtilityDock #chatBubble,
#bottomUtilityDock #huntAnalyzerToggle {
  position: relative;
  inset: auto;
  z-index: 2;
  width: auto;
  min-width: 46px;
  height: 43px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 11px;
  border-radius: 10px;
  font: 700 6px/1 var(--font-game, monospace);
  letter-spacing: 0.25px;
  text-transform: uppercase;
  transform: none;
  animation: bottomUtilityArrive 0.24s cubic-bezier(0.2, 0.85, 0.25, 1.15);
}

#bottomUtilityDock #chatBubble {
  border: 1px solid rgba(56, 189, 248, 0.52);
  background: linear-gradient(150deg, rgba(14, 58, 86, 0.88), rgba(5, 25, 38, 0.95));
  color: #bae6fd;
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 0 15px rgba(56,189,248,0.1);
}

#bottomUtilityDock #huntAnalyzerToggle {
  border: 1px solid rgba(167, 139, 250, 0.52);
  background: linear-gradient(150deg, rgba(61, 42, 98, 0.9), rgba(19, 17, 42, 0.96));
  color: #ddd6fe;
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 0 15px rgba(139,92,246,0.11);
}

#bottomUtilityDock #chatBubble:hover,
#bottomUtilityDock #huntAnalyzerToggle:hover {
  filter: brightness(1.18);
  transform: translateY(-2px);
}

#bottomUtilityDock #chatBubbleIcon {
  position: relative;
  width: 17px;
  height: 13px;
  flex: 0 0 17px;
  border: 2px solid #7dd3fc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 0;
}

#bottomUtilityDock #chatBubbleIcon::after {
  content: '';
  position: absolute;
  left: 2px;
  bottom: -5px;
  width: 5px;
  height: 5px;
  border-left: 2px solid #7dd3fc;
  transform: skewY(-35deg);
}

#bottomUtilityDock #chatBubbleBadge {
  top: -5px;
  right: -5px;
}

@keyframes bottomUtilityArrive {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  #bottomActionBar { grid-template-columns: minmax(185px, 30vw) auto minmax(0, 1fr); }
}

@media (max-width: 700px) {
  #bottomActionBar { grid-template-columns: minmax(126px, 29vw) auto minmax(0, 1fr); gap: 5px; }
  #bottomUtilityDock { gap: 4px; }
  #bottomUtilityDock #chatBubble,
  #bottomUtilityDock #huntAnalyzerToggle { min-width: 38px; width: 38px; height: 40px; padding: 0; }
  #bottomUtilityDock .bottom-utility-label,
  #bottomUtilityDock #huntAnalyzerToggle > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #bottomUtilityDock #chatBubble,
  #bottomUtilityDock #huntAnalyzerToggle { animation: none !important; transition: none !important; }
}

/* =====================================================
   HYDRAGOR RAID WORLD — full game-zone presentation
   ===================================================== */
#bossRaidWorldLayer {
  position: absolute;
  z-index: 32;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  pointer-events: none;
}

#bossRaidShell > #bossRaidCountdownCurtain {
  z-index: 80;
  border-radius: inherit;
}

#bossRaidShell > #bossRaidCountdownCurtain span {
  color: #fda4af;
  font: 7px 'Press Start 2P', monospace;
  letter-spacing: 1.6px;
}

#bossRaidWorldLayer::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(253, 224, 71, 0.12), transparent 30%),
    linear-gradient(to bottom, rgba(3, 22, 20, 0.11), transparent 20%, transparent 72%, rgba(1, 10, 8, 0.28));
}

#bossRaidWorldLayer::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 110px rgba(1, 9, 8, 0.38);
}

#bossRaidWorldLayer #bossRaidArena {
  position: absolute;
  z-index: 3;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

#bossRaidWorldLayer #bossRaidCanvas {
  display: none !important;
}

#bossRaidWorldLayer #bossRaidCombatHud {
  position: static;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

#bossRaidWorldLayer #bossRaidBossHud {
  position: absolute;
  z-index: 8;
  top: 13px;
  left: 50%;
  width: min(570px, 46vw);
  box-sizing: border-box;
  padding: 12px 16px;
  transform: translateX(-50%);
  border-color: rgba(251, 53, 92, 0.58);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0, rgba(250, 204, 21, 0.14), transparent 45%),
    linear-gradient(135deg, rgba(42, 7, 25, 0.91), rgba(3, 24, 27, 0.91));
  box-shadow: 0 12px 34px rgba(0,0,0,.42), 0 0 24px rgba(251,53,92,.13), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(9px) saturate(1.2);
  pointer-events: auto;
}

#bossRaidWorldLayer #bossRaidBossHud h3 {
  display: inline-block;
  margin: 8px 14px 8px 0;
  font-size: 12px;
}

#bossRaidWorldLayer .boss-raid-hp-track { height: 10px; }
#bossRaidWorldLayer #bossRaidHpText { display: inline-block; margin-top: 7px; }
#bossRaidWorldLayer #bossRaidThreatText { float: right; margin-top: 7px; }

#bossRaidSkillCooldowns {
  clear: both;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding-top: 10px;
}

.boss-skill-cooldown {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 8px;
  background: rgba(2, 10, 20, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.boss-skill-cooldown > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, .78);
}

.boss-skill-cooldown > span {
  overflow: hidden;
  color: #dbeafe;
  font: 5px var(--font-game, 'Press Start 2P', monospace);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-skill-cooldown > b {
  grid-column: 1 / -1;
  color: #7dd3fc;
  font: 5px var(--font-game, 'Press Start 2P', monospace);
  text-align: right;
}

.boss-skill-cooldown.is-ready { border-color: rgba(74, 222, 128, .34); }
.boss-skill-cooldown.is-ready > i { background: #4ade80; box-shadow: 0 0 9px #22c55e; }
.boss-skill-cooldown.is-ready > b { color: #86efac; }
.boss-skill-cooldown.is-casting { border-color: rgba(250, 204, 21, .55); background: rgba(67, 42, 5, .75); }
.boss-skill-cooldown.is-casting > i { background: #facc15; box-shadow: 0 0 11px #f59e0b; animation: bossSkillCastPulse .55s ease-in-out infinite alternate; }
.boss-skill-cooldown.is-casting > b { color: #fef08a; }
.boss-skill-cooldown.is-cooling { opacity: .78; }

@keyframes bossSkillCastPulse {
  to { transform: scale(1.35); opacity: .55; }
}

#bossRaidWorldLayer #bossRaidRoster {
  position: absolute;
  z-index: 8;
  top: 18px;
  left: 15px;
  width: min(245px, 23vw);
  gap: 5px;
  pointer-events: auto;
}

#bossRaidWorldLayer .boss-own-team-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 5px;
  color: #a5f3fc;
  font: 6px var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .8px;
}

#bossRaidWorldLayer .boss-own-team-heading b { color: #86efac; }

#bossRaidWorldLayer .boss-own-sluma-card {
  --raid-hp: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 9px;
  min-height: 76px;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(103,232,249,.28);
  border-radius: 11px;
  background: linear-gradient(105deg, rgba(3,25,24,.94), rgba(5,19,30,.90));
  box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(9px);
}

#bossRaidWorldLayer .boss-own-sluma-card.is-fallen { opacity: .42; filter: grayscale(.8); }
#bossRaidWorldLayer .boss-own-sluma-portrait { display: grid; place-items: center; border: 1px solid rgba(103,232,249,.2); border-radius: 9px; background: rgba(2,12,22,.68); }
#bossRaidWorldLayer .boss-own-sluma-portrait img { width: 50px; height: 50px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 5px 7px rgba(0,0,0,.55)); }
#bossRaidWorldLayer .boss-own-sluma-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
#bossRaidWorldLayer .boss-own-sluma-copy > div:first-child { display: flex; align-items: center; gap: 6px; }
#bossRaidWorldLayer .boss-own-sluma-copy strong { overflow: hidden; color: #f8fafc; font: 7px var(--font-game, 'Press Start 2P', monospace); text-overflow: ellipsis; white-space: nowrap; }
#bossRaidWorldLayer .boss-own-sluma-copy > div:first-child b { margin-left: auto; color: #4ade80; font: 6px var(--font-game, 'Press Start 2P', monospace); }
#bossRaidWorldLayer .boss-own-hp-track { height: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 5px; background: rgba(2,6,23,.88); }
#bossRaidWorldLayer .boss-own-hp-track i { display: block; width: var(--raid-hp); height: 100%; background: linear-gradient(90deg,#16a34a,#4ade80,#bbf7d0); box-shadow: 0 0 8px rgba(74,222,128,.4); transition: width .2s linear; }
#bossRaidWorldLayer .boss-own-sluma-copy small { color: rgba(203,213,225,.72); font-size: 8px; font-weight: 700; }
#bossRaidWorldLayer .boss-own-skills { display: flex; flex-wrap: wrap; gap: 3px; }
#bossRaidWorldLayer .boss-own-skill { min-width: 0; display: inline-flex; align-items: center; gap: 3px; padding: 3px 4px; border: 1px solid rgba(74,222,128,.18); border-radius: 4px; color: #d1fae5; background: rgba(20,83,45,.22); font-size: 6px; }
#bossRaidWorldLayer .boss-own-skill > i { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 5px #4ade80; }
#bossRaidWorldLayer .boss-own-skill b { margin-left: auto; color: #4ade80; font-size: 5px; }
#bossRaidWorldLayer .boss-own-skill.is-cooling { border-color: rgba(148,163,184,.12); color: #94a3b8; background: rgba(30,41,59,.44); }
#bossRaidWorldLayer .boss-own-skill.is-cooling > i { background: #64748b; box-shadow: none; }
#bossRaidWorldLayer .boss-own-skill.is-cooling b { color: #cbd5e1; }

#bossRaidWorldLayer .boss-roster-player {
  min-height: 39px;
  box-sizing: border-box;
  padding: 7px 9px;
  border-color: rgba(103,232,249,.23);
  background: linear-gradient(105deg, rgba(3,25,24,.91), rgba(5,19,30,.80));
  box-shadow: 0 8px 22px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(8px);
}

#bossRaidWorldLayer #bossRaidGroupChat {
  position: absolute;
  z-index: 8;
  right: 16px;
  bottom: 94px;
  width: min(290px, 26vw);
  height: min(250px, 31vh);
  min-height: 170px;
  border-color: rgba(56,189,248,.36);
  background: linear-gradient(155deg, rgba(3,24,25,.89), rgba(3,13,25,.93));
  box-shadow: 0 18px 42px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

#bossRaidWorldLayer #bossRaidSpectator {
  top: 106px;
  z-index: 10;
}

#bossRaidWorldLayer #bossRaidResult,
#bossRaidWorldLayer #bossRaidCapturePhase {
  z-index: 30;
  bottom: 0;
  pointer-events: auto;
}

#bossRaidWorldLayer #bossRaidToast { bottom: 92px; }

#bossRaidWorldNameplate {
  position: absolute;
  z-index: 9;
  top: 18px;
  right: 17px;
  min-width: 205px;
  padding: 11px 14px;
  border: 1px solid rgba(190,242,100,.28);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(3,31,23,.87), rgba(5,18,28,.84));
  box-shadow: 0 10px 28px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(9px);
  pointer-events: none;
}

#bossRaidWorldNameplate > span { display: block; color: #bef264; font: 5px/1 var(--font-game, 'Press Start 2P', monospace); letter-spacing: 1px; }
#bossRaidWorldNameplate > strong { display: block; margin: 8px 0 7px; color: #f7fee7; font: 8px/1.3 var(--font-game, 'Press Start 2P', monospace); }
#bossRaidWorldNameplate > small { color: rgba(203,213,225,.68); font-size: 9px; }
#bossRaidWorldNameplate b { color: #fef08a; }

#bossRaidWorldWeather {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#bossRaidWorldWeather i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 0 12px #facc15;
  opacity: .42;
  animation: bossWorldMote 7s ease-in-out infinite;
}
#bossRaidWorldWeather i:nth-child(1) { left: 27%; top: 33%; }
#bossRaidWorldWeather i:nth-child(2) { left: 69%; top: 59%; animation-delay: -1.7s; }
#bossRaidWorldWeather i:nth-child(3) { left: 58%; top: 24%; animation-delay: -3.1s; }
#bossRaidWorldWeather i:nth-child(4) { left: 35%; top: 74%; animation-delay: -4.8s; }

@keyframes bossWorldMote {
  0%, 100% { transform: translate(0, 0) scale(.7); opacity: .18; }
  50% { transform: translate(25px, -42px) scale(1.5); opacity: .72; }
}

body.boss-raid-world-active #hudCreature,
body.boss-raid-world-active #deployedMiniHudStack,
body.boss-raid-world-active #enemyHudStack,
body.boss-raid-world-active #captureHudPanel,
body.boss-raid-world-active #chatWindow,
body.boss-raid-world-active #huntAnalyzerPanel { visibility: hidden !important; }

body.boss-raid-world-active #bottomActionBar { z-index: 65; }
body.boss-raid-world-active #autoHudOverlay,
body.boss-raid-world-active #inventoryHudOverlay { z-index: 90; }

@media (max-width: 980px) {
  #bossRaidWorldLayer #bossRaidBossHud { width: min(510px, 55vw); }
  #bossRaidWorldLayer #bossRaidRoster { top: 128px; width: 190px; }
  #bossRaidWorldNameplate { min-width: 165px; }
  #bossRaidWorldNameplate > strong { font-size: 6px; }
  #bossRaidWorldLayer #bossRaidGroupChat { width: 240px; }
}

@media (max-width: 700px) {
  #bossRaidWorldLayer #bossRaidBossHud { top: 7px; width: calc(100vw - 14px); padding: 9px; }
  #bossRaidWorldLayer #bossRaidBossHud h3 { font-size: 9px; }
  #bossRaidWorldLayer #bossRaidRoster { top: 158px; left: 7px; width: 150px; }
  #bossRaidWorldLayer .boss-roster-player { padding: 5px; }
  #bossRaidWorldNameplate { display: none; }
  #bossRaidWorldLayer #bossRaidGroupChat { right: 7px; bottom: 78px; width: 205px; height: 180px; }
  #bossRaidWorldLayer #bossRaidThreatText { display: none; }
  #bossRaidSkillCooldowns { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 7px; }
  .boss-skill-cooldown { padding: 5px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  #bossRaidWorldWeather i { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SLUMA SQUAD HUD — landing-page visual language
   ═══════════════════════════════════════════════════════════════ */

#slumasHudOverlay {
  padding: 18px;
  background:
    radial-gradient(circle at 50% 44%, rgba(132, 204, 22, 0.09), transparent 38%),
    linear-gradient(145deg, rgba(0, 13, 10, 0.72), rgba(2, 8, 12, 0.88));
  backdrop-filter: blur(9px) saturate(0.78);
}

#slumasHudPanel {
  position: relative;
  isolation: isolate;
  width: min(1180px, 97vw);
  height: min(760px, 92vh);
  border: 1px solid rgba(163, 230, 53, 0.46);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% -8%, rgba(34, 197, 94, 0.14), transparent 34%),
    radial-gradient(circle at 12% 110%, rgba(234, 179, 8, 0.08), transparent 30%),
    linear-gradient(155deg, rgba(4, 25, 20, 0.985), rgba(3, 13, 17, 0.99) 50%, rgba(5, 12, 16, 0.99));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.72),
    0 0 0 5px rgba(11, 30, 22, 0.72),
    0 0 42px rgba(132, 204, 22, 0.11),
    inset 0 1px rgba(255,255,255,0.055);
  animation: slumaSquadHudEnter 0.32s cubic-bezier(0.2, 0.82, 0.25, 1);
}

#slumasHudPanel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(134, 239, 172, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134, 239, 172, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

#slumasHudPanel::after {
  content: '';
  position: absolute;
  z-index: 4;
  left: 30px;
  right: 30px;
  top: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #a3e635 22%, #facc15 50%, #a3e635 78%, transparent);
  box-shadow: 0 0 14px rgba(163, 230, 53, 0.6);
}

#slumasHudHeader {
  position: relative;
  min-height: 82px;
  padding: 13px 18px 13px 20px;
  border-bottom: 1px solid rgba(163, 230, 53, 0.25);
  background: linear-gradient(90deg, rgba(8, 35, 25, 0.92), rgba(3, 20, 18, 0.76) 58%, rgba(11, 28, 18, 0.86));
  box-shadow: inset 0 -1px rgba(250, 204, 21, 0.055);
}

.slumas-hud-heading,
.slumas-hud-header-actions {
  display: flex;
  align-items: center;
}

.slumas-hud-heading { gap: 13px; }
.slumas-hud-header-actions { gap: 11px; }

.slumas-hud-emblem {
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(163, 230, 53, 0.48);
  border-radius: 14px 4px 14px 4px;
  background: linear-gradient(145deg, rgba(89, 145, 25, 0.3), rgba(8, 44, 29, 0.74));
  box-shadow: inset 0 0 18px rgba(163, 230, 53, 0.08), 0 0 18px rgba(132, 204, 22, 0.08);
  transform: rotate(45deg) scale(0.78);
}

.slumas-hud-emblem img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
  transform: rotate(-45deg) scale(1.15);
}

.slumas-hud-kicker,
.sluma-detail-kicker {
  display: block;
  color: #bef264;
  font: 700 6px/1.1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 1.25px;
}

#slumasHudHeader h3 {
  margin: 5px 0 0;
  color: #f8fafc;
  font: 700 clamp(15px, 1.6vw, 22px)/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 0.7px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.28);
}

#slumasHudHeader p {
  margin: 6px 0 0;
  color: #789187;
  font-size: 10px;
  letter-spacing: 0.1px;
}

#slumasHudTeamCount {
  padding: 8px 10px;
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.055);
  color: #d9f99d;
  font: 700 6px/1 var(--font-game, monospace);
  letter-spacing: 0.45px;
  white-space: nowrap;
}

#slumasHudClose {
  width: 38px;
  height: 38px;
  border-color: rgba(163, 230, 53, 0.24);
  border-radius: 11px;
  background: rgba(8, 34, 26, 0.8);
  color: #94a3b8;
  font-size: 21px;
}

#slumasHudClose:hover {
  border-color: rgba(248, 113, 113, 0.58);
  background: rgba(90, 22, 24, 0.55);
  color: #fecaca;
  transform: rotate(4deg);
}

#slumasHudBody {
  grid-template-columns: minmax(250px, 292px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

#slumasSlotsPane {
  gap: 9px;
  padding: 12px;
  border-color: rgba(163, 230, 53, 0.18);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(5, 29, 22, 0.88), rgba(3, 16, 17, 0.8)),
    rgba(0,0,0,0.22);
  box-shadow: inset 0 1px rgba(255,255,255,0.025), inset 0 0 30px rgba(0,0,0,0.18);
}

.sluma-slot-card {
  --slot-accent: #a3e635;
  position: relative;
  min-height: 86px;
  grid-template-columns: 18px 61px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 10px 9px 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--slot-accent) 18%, rgba(255,255,255,0.08));
  border-radius: 13px;
  background:
    radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--slot-accent) 8%, transparent), transparent 43%),
    linear-gradient(145deg, rgba(13, 30, 27, 0.9), rgba(6, 17, 19, 0.96));
  text-align: left;
  box-shadow: inset 0 1px rgba(255,255,255,0.025), 0 6px 18px rgba(0,0,0,0.12);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.sluma-slot-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;
  width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--slot-accent);
  box-shadow: 0 0 9px var(--slot-accent);
  opacity: 0.25;
}

.sluma-slot-card:hover:not(:disabled) {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--slot-accent) 52%, transparent);
  background:
    radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--slot-accent) 15%, transparent), transparent 46%),
    linear-gradient(145deg, rgba(15, 40, 31, 0.96), rgba(6, 20, 20, 0.98));
  box-shadow: 0 9px 23px rgba(0,0,0,0.25), 0 0 18px color-mix(in srgb, var(--slot-accent) 8%, transparent);
}

.sluma-slot-card.is-selected {
  border-color: color-mix(in srgb, var(--slot-accent) 78%, #f8fafc 4%);
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--slot-accent) 18%, transparent), transparent 50%),
    linear-gradient(145deg, rgba(21, 51, 34, 0.98), rgba(6, 24, 21, 0.98));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--slot-accent) 14%, transparent), 0 8px 24px rgba(0,0,0,0.25), 0 0 20px color-mix(in srgb, var(--slot-accent) 10%, transparent);
}

.sluma-slot-card.is-selected::after { opacity: 1; width: 3px; }

.sluma-slot-card.is-empty {
  background: linear-gradient(145deg, rgba(12, 23, 23, 0.62), rgba(5, 13, 16, 0.75));
}

.sluma-slot-card.is-empty:disabled { opacity: 0.45; }
.sluma-slot-card.is-empty:hover { background: linear-gradient(145deg, rgba(12, 23, 23, 0.62), rgba(5, 13, 16, 0.75)); }

.sluma-slot-number {
  align-self: start;
  padding-top: 3px;
  color: color-mix(in srgb, var(--slot-accent) 58%, #64748b);
  font: 700 6px/1 var(--font-game, monospace);
  letter-spacing: -0.3px;
}

.sluma-slot-portrait {
  width: 61px;
  height: 61px;
  border: 1px solid color-mix(in srgb, var(--slot-accent) 32%, rgba(255,255,255,0.1));
  border-radius: 12px;
  background: radial-gradient(circle, color-mix(in srgb, var(--slot-accent) 10%, transparent), rgba(2, 11, 14, 0.75) 72%);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.25);
}

.sluma-slot-portrait img {
  width: 108%;
  height: 108%;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.48));
}

.sluma-slot-copy { min-width: 0; }

.sluma-slot-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.sluma-slot-name {
  min-width: 0;
  overflow: hidden;
  color: #f8fafc;
  font: 700 9px/1.25 var(--font-game, 'Press Start 2P', monospace);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sluma-slot-status {
  flex: 0 0 auto;
  padding: 4px 5px;
  border: 1px solid rgba(100,116,139,0.22);
  border-radius: 999px;
  background: rgba(100,116,139,0.08);
  color: #77868a;
  font: 700 5px/1 var(--font-game, monospace);
}

.sluma-slot-card.is-deployed .sluma-slot-status {
  border-color: color-mix(in srgb, var(--slot-accent) 34%, transparent);
  background: color-mix(in srgb, var(--slot-accent) 10%, transparent);
  color: color-mix(in srgb, var(--slot-accent) 78%, white 12%);
}

.sluma-slot-sub {
  margin-top: 4px;
  color: #81968d;
  font: 700 8px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.sluma-slot-element { gap: 2px; margin-top: 4px; }
.sluma-slot-element .sluma-slot-element-icon { width: 23px; height: 23px; }

.sluma-hunt-panel {
  padding: 11px;
  gap: 9px;
  border-color: rgba(250, 204, 21, 0.2);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0, rgba(250, 204, 21, 0.09), transparent 42%),
    linear-gradient(145deg, rgba(28, 31, 17, 0.72), rgba(5, 17, 17, 0.92));
}

.sluma-hunt-heading { display: flex; align-items: center; gap: 8px; }
.sluma-hunt-heading > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 204, 21, 0.34);
  border-radius: 9px;
  background: rgba(250, 204, 21, 0.08);
  color: #fde047;
  font: 700 7px/1 var(--font-game, monospace);
}
.sluma-hunt-heading small { display: block; margin-bottom: 4px; color: #8a7f48; font: 700 5px/1 var(--font-game, monospace); letter-spacing: 0.8px; }
.sluma-hunt-title { color: #f4f4e5; font-size: 7px; }
.sluma-hunt-buttons { gap: 7px; }
.sluma-hunt-btn {
  height: 41px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 0 10px;
  border-color: rgba(148,163,184,0.16);
  border-radius: 9px;
  background: rgba(4, 15, 16, 0.75);
}
.sluma-hunt-btn strong { color: #dbe6df; font-size: 10px; }
.sluma-hunt-btn small { color: #647b71; font-size: 7px; }
.sluma-hunt-btn.is-active {
  border-color: rgba(163, 230, 53, 0.6);
  background: linear-gradient(145deg, rgba(65, 104, 24, 0.34), rgba(8, 36, 25, 0.9));
  box-shadow: inset 0 0 12px rgba(163,230,53,0.055), 0 0 12px rgba(163,230,53,0.06);
}
.sluma-hunt-btn.is-active strong { color: #ecfccb; }
.sluma-hunt-btn.is-active small { color: #a3c985; }
.sluma-hunt-note { color: #667b72; font-size: 8px; }

#slumasRightCol { gap: 10px; scrollbar-color: rgba(163, 230, 53, 0.24) transparent; }
#slumasRightCol::-webkit-scrollbar-thumb { background: rgba(163, 230, 53, 0.2); }

#slumaDetailPane,
#passivesPanel,
#microPassivesPanel {
  border-color: rgba(163, 230, 53, 0.16);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, rgba(34, 197, 94, 0.055), transparent 32%),
    linear-gradient(145deg, rgba(7, 25, 22, 0.82), rgba(4, 14, 18, 0.9));
  box-shadow: inset 0 1px rgba(255,255,255,0.025), 0 8px 24px rgba(0,0,0,0.1);
}

#slumaDetailPane { gap: 12px; padding: 13px; }

#slumaDetailTop {
  display: grid;
  grid-template-columns: 96px minmax(215px, 0.72fr) minmax(310px, 1.35fr);
  align-items: center;
  gap: 13px;
}

#slumaDetailPortraitWrap {
  position: relative;
  width: 92px;
  height: 92px;
  overflow: visible;
  border: 1px solid rgba(163, 230, 53, 0.38);
  border-radius: 22px 8px 22px 8px;
  background: radial-gradient(circle, rgba(163,230,53,0.1), rgba(2,12,14,0.78) 70%);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.34), 0 0 23px rgba(132,204,22,0.08);
  transform: rotate(2deg);
}

#slumaDetailPortraitWrap::before,
#slumaDetailPortraitWrap::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

#slumaDetailPortraitWrap::before {
  inset: 7px;
  border: 1px solid rgba(250, 204, 21, 0.14);
  border-radius: 16px 5px 16px 5px;
}

#slumaDetailPortraitWrap::after {
  width: 7px;
  height: 7px;
  right: -4px;
  top: 16px;
  border: 1px solid #d9f99d;
  background: #65a30d;
  box-shadow: 0 0 8px #a3e635;
  transform: rotate(45deg);
}

#slumaDetailSprite {
  position: relative;
  z-index: 1;
  width: 112%;
  height: 112%;
  margin: -6%;
  filter: drop-shadow(0 7px 7px rgba(0,0,0,0.5));
  transform: rotate(-2deg);
}

#slumaDetailMeta { min-width: 0; }
.sluma-detail-kicker { margin-bottom: 7px; color: #8eaa75; font-size: 5px; }

#slumaDetailName {
  overflow: hidden;
  color: #fff;
  font: 700 clamp(14px, 1.25vw, 18px)/1.25 var(--font-game, 'Press Start 2P', monospace);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#slumaDetailElement {
  min-height: 27px;
  border: 1px solid currentColor;
  border-radius: 999px !important;
  font-size: 9px !important;
  letter-spacing: 0.25px;
}

#slumaDetailLevel {
  display: inline-block;
  margin-top: 6px;
  color: #bef264;
  font: 700 8px/1 var(--font-game, monospace);
}

#slumaDetailExp {
  display: inline-block;
  margin-left: 7px;
  color: #75a99b;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

#slumaDetailActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.sluma-roster-action,
.sluma-deploy-btn {
  position: relative;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 6px 8px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(163, 230, 53, 0.5);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(79, 121, 24, 0.62), rgba(18, 61, 35, 0.94));
  color: #f7fee7;
  text-align: left;
  box-shadow: inset 0 1px rgba(255,255,255,0.09), 0 6px 16px rgba(0,0,0,0.18), 0 0 14px rgba(132,204,22,0.06);
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.sluma-roster-action::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.09) 48%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 0.42s ease;
}

.sluma-roster-action:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: inset 0 1px rgba(255,255,255,0.12), 0 9px 20px rgba(0,0,0,0.23), 0 0 18px rgba(132,204,22,0.11);
}
.sluma-roster-action:hover:not(:disabled)::after { transform: translateX(120%); }

.sluma-roster-action-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
  color: #d9f99d;
  font: 700 9px/1 var(--font-game, monospace);
}

.sluma-roster-action-icon img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.sluma-roster-action-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sluma-roster-action-copy strong { overflow: hidden; color: inherit; font: 700 6px/1 var(--font-game, monospace); text-overflow: ellipsis; white-space: nowrap; }
.sluma-roster-action-copy small { overflow: hidden; color: rgba(236,252,203,0.62); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

.sluma-storage-btn {
  border-color: rgba(34, 211, 238, 0.42);
  background: linear-gradient(145deg, rgba(8, 93, 104, 0.56), rgba(6, 42, 55, 0.95));
  color: #cffafe;
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.18), 0 0 14px rgba(34,211,238,0.055);
}
.sluma-storage-btn .sluma-roster-action-copy small { color: rgba(165,243,252,0.62); }

.sluma-deploy-btn.is-undeploy {
  border-color: rgba(250, 204, 21, 0.38);
  background: linear-gradient(145deg, rgba(113, 72, 12, 0.58), rgba(55, 37, 9, 0.95));
  color: #fef3c7;
}

.sluma-roster-action:disabled,
.sluma-deploy-btn:disabled {
  opacity: 0.5;
  filter: grayscale(0.45);
  cursor: not-allowed;
  transform: none;
}

#slumaEquipmentPanel {
  width: 100%;
  margin-left: 0;
  padding: 10px;
  border-color: rgba(34, 211, 238, 0.2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0, rgba(34,211,238,0.07), transparent 38%),
    linear-gradient(145deg, rgba(7, 27, 31, 0.92), rgba(3, 14, 18, 0.93));
}

#slumaEquipmentHeader { color: #a5f3fc; }
#slumaEquipmentActions button { border-color: rgba(34,211,238,0.28); background: rgba(8,145,178,0.1); color: #bae6fd; }

#slumaDetailStats { gap: 7px; }

.sluma-stat-card {
  --stat-accent: #a3e635;
  position: relative;
  min-height: 55px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--stat-accent) 20%, rgba(255,255,255,0.08));
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--stat-accent) 7%, transparent), transparent 48%),
    rgba(2, 13, 16, 0.66);
}
.sluma-stat-card::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--stat-accent); box-shadow: 0 0 8px var(--stat-accent); opacity: 0.68; }
.sluma-stat-card:nth-child(1) { --stat-accent: #fb7185; }
.sluma-stat-card:nth-child(2) { --stat-accent: #4ade80; }
.sluma-stat-card:nth-child(3) { --stat-accent: #60a5fa; }
.sluma-stat-card:nth-child(4) { --stat-accent: #facc15; }
.sluma-stat-name { color: #8fa49b; font-size: 9px; text-transform: uppercase; letter-spacing: 0.35px; }
.sluma-stat-value { color: #f8fafc; font: 700 13px/1 var(--font-game, monospace); }

#slumaSkillsPanel {
  border-color: rgba(163, 230, 53, 0.16);
  background: linear-gradient(145deg, rgba(4, 21, 18, 0.78), rgba(3, 13, 18, 0.82));
}
#slumaSkillsHeader { color: #d9f99d; }
.sluma-skill-card { border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--skill-accent) 9%, transparent), rgba(2, 12, 15, 0.78)); }

#passivesPanelTitle { color: #bef264; }
#passivesPanelHeader { border-bottom-color: rgba(163,230,53,0.1); }
.passive-row { border-color: rgba(163,230,53,0.1); background: rgba(3,17,17,0.54); }
.passive-row:hover { border-color: rgba(163,230,53,0.35); background: rgba(80,120,28,0.08); }

#microPassivesPanel { border-color: rgba(34, 211, 238, 0.16); }

@keyframes slumaSquadHudEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.975); filter: saturate(0.6); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); }
}

@media (max-width: 940px) {
  #slumasHudPanel { width: calc(100vw - 22px); height: calc(100vh - 22px); }
  #slumasHudBody { grid-template-columns: 240px minmax(0, 1fr); }
  #slumaDetailTop { grid-template-columns: 88px minmax(0, 1fr); }
  #slumaDetailPortraitWrap { width: 84px; height: 84px; }
  #slumaEquipmentPanel { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  #slumasHudOverlay { padding: 7px; }
  #slumasHudPanel { width: 100%; height: calc(100vh - 14px); border-radius: 14px; }
  #slumasHudHeader { min-height: 68px; padding: 10px 11px; }
  .slumas-hud-emblem { width: 42px; height: 42px; flex-basis: 42px; }
  .slumas-hud-emblem img { width: 37px; height: 37px; }
  #slumasHudHeader p,
  #slumasHudTeamCount { display: none; }
  #slumasHudHeader h3 { font-size: 13px; }
  #slumasHudBody { display: block; overflow-y: auto; padding: 8px; }
  #slumasSlotsPane { overflow: visible; }
  #slumasRightCol { margin-top: 9px; overflow: visible; }
  .sluma-slot-card { min-height: 76px; grid-template-columns: 16px 53px minmax(0, 1fr); }
  .sluma-slot-portrait { width: 53px; height: 53px; }
  #slumaDetailTop { grid-template-columns: 76px minmax(0, 1fr); }
  #slumaDetailPortraitWrap { width: 72px; height: 72px; }
  #slumaDetailActions { grid-template-columns: 1fr; }
  .sluma-roster-action { height: 44px; }
  #slumaDetailStats { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #slumasHudPanel { animation: none !important; }
  .sluma-slot-card,
  .sluma-roster-action,
  .sluma-roster-action::after { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   INVENTORY + WORLD SHOP — Sluma World visual language
   ═══════════════════════════════════════════════════════════════ */

#inventoryHudOverlay,
#shopHudOverlay {
  padding: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(163, 230, 53, 0.07), transparent 38%),
    linear-gradient(145deg, rgba(0, 13, 10, 0.74), rgba(2, 8, 12, 0.9));
  backdrop-filter: blur(10px) saturate(0.78);
}

#inventoryHudPanel,
#shopHudPanel {
  position: relative;
  isolation: isolate;
  width: min(1180px, 97vw);
  height: min(760px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(245, 158, 11, 0.42);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% -8%, rgba(250, 204, 21, 0.105), transparent 34%),
    radial-gradient(circle at 8% 110%, rgba(34, 197, 94, 0.07), transparent 31%),
    linear-gradient(155deg, rgba(5, 27, 21, 0.99), rgba(3, 14, 17, 0.99) 50%, rgba(5, 12, 16, 0.995));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.74),
    0 0 0 5px rgba(24, 27, 13, 0.7),
    0 0 42px rgba(245, 158, 11, 0.09),
    inset 0 1px rgba(255,255,255,0.055);
  animation: supplyHudEnter 0.32s cubic-bezier(0.2, 0.82, 0.25, 1);
}

#inventoryHudPanel::before,
#shopHudPanel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.23;
  background-image:
    linear-gradient(rgba(250, 204, 21, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163, 230, 53, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
}

#inventoryHudPanel::after,
#shopHudPanel::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: 0;
  left: 30px;
  right: 30px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #f59e0b 18%, #fde047 50%, #a3e635 82%, transparent);
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.55);
}

/* Inventory header */
#inventoryHudHeader,
#shopHudHeader {
  position: relative;
  min-height: 82px;
  padding: 13px 18px 13px 20px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.22);
  background: linear-gradient(90deg, rgba(40, 31, 8, 0.48), rgba(4, 25, 20, 0.8) 52%, rgba(9, 27, 18, 0.88));
  box-shadow: inset 0 -1px rgba(163, 230, 53, 0.04);
}

.inventory-hud-heading,
.inventory-hud-header-actions,
#shopHudTitleGroup,
#shopHudHeaderRight {
  display: flex;
  align-items: center;
}

.inventory-hud-heading,
#shopHudTitleGroup { gap: 13px; }
.inventory-hud-header-actions,
#shopHudHeaderRight { gap: 10px; }

.inventory-hud-emblem,
#shopHudTitleIcon {
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 204, 21, 0.46);
  border-radius: 14px 4px 14px 4px;
  background: linear-gradient(145deg, rgba(146, 95, 14, 0.34), rgba(24, 49, 23, 0.74));
  box-shadow: inset 0 0 18px rgba(250, 204, 21, 0.07), 0 0 18px rgba(245, 158, 11, 0.08);
  transform: rotate(45deg) scale(0.78);
}

.inventory-hud-emblem img,
#shopHudTitleIcon img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.48));
  transform: rotate(-45deg) scale(1.15);
}

.inventory-hud-kicker,
.shop-hud-kicker {
  display: block;
  color: #facc15;
  font: 700 6px/1.1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 1.3px;
}

#inventoryHudTitle {
  display: block;
  min-width: 0;
}

#inventoryHudHeader h3,
#shopHudTitle {
  display: block;
  margin: 5px 0 0;
  color: #f8fafc;
  font: 700 clamp(15px, 1.6vw, 22px)/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 0.7px;
  text-shadow: 0 3px rgba(0,0,0,0.3);
  text-transform: none;
}

#inventoryHudTitle p,
#shopHudSubtitle {
  display: block;
  margin: 6px 0 0;
  color: #7f9187;
  font: 500 10px/1.2 Arial, sans-serif;
  letter-spacing: 0.1px;
}

#inventoryCapacityBadge,
.inventory-hud-currency,
#shopHudMoneyDisplay {
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 6px 11px;
  border: 1px solid rgba(250, 204, 21, 0.24);
  border-radius: 10px;
  background: rgba(250, 204, 21, 0.055);
  color: #fef3c7;
  box-sizing: border-box;
}

#inventoryCapacityBadge { border-color: rgba(163, 230, 53, 0.2); background: rgba(132, 204, 22, 0.05); }
#inventoryCapacityBadge small,
.inventory-hud-currency small { color: #827b59; font: 700 5px/1 var(--font-game, monospace); letter-spacing: 0.75px; }
#inventoryCapacityBadge strong,
.inventory-hud-currency b { color: #ecfccb; font: 700 8px/1 var(--font-game, monospace); }
.inventory-hud-money b::before { content: none; }

.inventory-hud-currency {
  min-width: 116px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 7px;
  box-sizing: border-box;
}

.inventory-hud-currency > img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}

.inventory-hud-currency > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.inventory-hud-money {
  border-color: rgba(250, 204, 21, 0.3);
  background: linear-gradient(135deg, rgba(113, 63, 18, 0.16), rgba(39, 35, 8, 0.08));
}

.inventory-hud-money > img {
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.28)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}

.inventory-hud-money b { color: #fef08a; }

.inventory-hud-crystals {
  min-width: 134px;
  border-color: rgba(96, 165, 250, 0.34);
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.15), rgba(88, 28, 135, 0.1));
  box-shadow: inset 0 0 16px rgba(59, 130, 246, 0.045);
}

.inventory-hud-crystals small { color: #93c5fd; }
.inventory-hud-crystals b { color: #dbeafe; }
.inventory-hud-crystals > img {
  filter: drop-shadow(0 0 7px rgba(96, 165, 250, 0.48)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.52));
}

button.inventory-hud-currency {
  color: inherit;
  font: inherit;
  cursor: pointer;
  position: relative;
  border-style: solid;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

button.inventory-hud-currency:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.72);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.16), inset 0 0 18px rgba(59, 130, 246, 0.08);
}

.inventory-hud-crystals > i {
  width: 17px;
  height: 17px;
  position: absolute;
  right: -6px;
  top: -6px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103, 232, 249, 0.72);
  border-radius: 50%;
  background: #0b6ca8;
  color: #ecfeff;
  font: 900 11px/1 Arial, sans-serif;
  font-style: normal;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}

/* Sluma Crystal Store */
.crystal-store-overlay {
  position: fixed;
  inset: 0;
  z-index: 11650;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 35%, rgba(36, 99, 235, 0.16), transparent 38%),
    rgba(1, 7, 18, 0.84);
  backdrop-filter: blur(9px);
}

.crystal-store-panel {
  width: min(1080px, 96vw);
  max-height: min(760px, 92vh);
  overflow: hidden;
  position: relative;
  color: #dbeafe;
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(14, 39, 75, 0.35), transparent 34%),
    #06101e;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 50px rgba(14, 165, 233, 0.09);
  animation: crystal-store-arrive 220ms ease-out;
}

.crystal-store-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.025) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

@keyframes crystal-store-arrive {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.crystal-store-header {
  min-height: 102px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  background: linear-gradient(90deg, rgba(7, 34, 60, 0.94), rgba(12, 18, 42, 0.82));
}

.crystal-store-brand,
.crystal-store-header-actions,
.crystal-store-balance,
.crystal-store-section-title {
  display: flex;
  align-items: center;
}

.crystal-store-brand { gap: 16px; min-width: 0; }
.crystal-store-emblem {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103, 232, 249, 0.38);
  border-radius: 18px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.28), rgba(8, 47, 73, 0.62));
  box-shadow: inset 0 0 24px rgba(56, 189, 248, 0.12);
  transform: rotate(45deg);
}

.crystal-store-emblem img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 9px rgba(96, 165, 250, 0.68));
}

.crystal-store-brand small,
.crystal-store-section-title small {
  color: #67e8f9;
  font: 800 7px/1 var(--font-game, monospace);
  letter-spacing: 1.35px;
}

.crystal-store-brand h2 {
  margin: 5px 0 3px;
  color: #f8fafc;
  font: 800 23px/1.1 var(--font-game, monospace);
  letter-spacing: 0.3px;
}

.crystal-store-brand p {
  margin: 0;
  color: #7f9bb5;
  font: 500 12px/1.4 Arial, sans-serif;
}

.crystal-store-header-actions { gap: 12px; }
.crystal-store-balance {
  min-width: 138px;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
}

.crystal-store-balance img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(59, 130, 246, 0.55));
}

.crystal-store-balance span { display: flex; flex-direction: column; gap: 4px; }
.crystal-store-balance small { color: #7690a8; font: 800 6px/1 var(--font-game, monospace); }
.crystal-store-balance strong { color: #e0f2fe; font: 800 12px/1 var(--font-game, monospace); }

#crystalStoreClose {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.78);
  color: #94a3b8;
  font: 400 24px/1 Arial, sans-serif;
  cursor: pointer;
}

#crystalStoreClose:hover { color: #fff; border-color: rgba(125, 211, 252, 0.55); }

.crystal-store-body {
  min-height: 480px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
}

.crystal-store-catalog,
.crystal-store-history {
  min-width: 0;
  padding: 22px;
  box-sizing: border-box;
}

.crystal-store-history {
  border-left: 1px solid rgba(56, 189, 248, 0.14);
  background: rgba(2, 10, 22, 0.5);
}

.crystal-store-section-title {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}

.crystal-store-section-title h3 {
  margin: 5px 0 0;
  color: #edf7ff;
  font: 800 14px/1.15 var(--font-game, monospace);
}

.crystal-store-mode {
  padding: 7px 9px;
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.1);
  color: #5eead4;
  font: 800 6px/1 var(--font-game, monospace);
  letter-spacing: 0.75px;
}

.crystal-store-mode[data-mode="live"] {
  color: #fda4af;
  border-color: rgba(251, 113, 133, 0.42);
  background: rgba(190, 18, 60, 0.12);
}

.crystal-store-packages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.crystal-package-card {
  min-height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 17px;
  box-sizing: border-box;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 12%, rgba(59, 130, 246, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(12, 35, 64, 0.9), rgba(8, 18, 34, 0.9));
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.crystal-package-card:hover {
  transform: translateY(-3px);
  border-color: rgba(103, 232, 249, 0.47);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25), inset 0 0 24px rgba(59, 130, 246, 0.07);
}

.crystal-package-badge {
  align-self: flex-start;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(8, 145, 178, 0.15);
  color: #67e8f9;
  font: 800 6px/1 var(--font-game, monospace);
  letter-spacing: 0.7px;
}

.crystal-package-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 13px 0;
}

.crystal-package-main img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.58));
}

.crystal-package-main strong {
  display: block;
  color: #f0f9ff;
  font: 900 18px/1 var(--font-game, monospace);
}

.crystal-package-main span {
  display: block;
  margin-top: 6px;
  color: #8ba5bb;
  font: 600 10px/1.2 Arial, sans-serif;
}

.crystal-package-buy {
  width: 100%;
  min-height: 38px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border: 1px solid rgba(103, 232, 249, 0.48);
  border-radius: 9px;
  background: linear-gradient(135deg, #075985, #1d4ed8);
  color: #f0f9ff;
  font: 800 7px/1 var(--font-game, monospace);
  cursor: pointer;
}

.crystal-package-buy em {
  color: #cffafe;
  font-style: normal;
  font-size: 9px;
}

.crystal-package-buy:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.crystal-store-orders {
  max-height: 338px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-right: 4px;
}

.crystal-store-order {
  padding: 11px;
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.54);
}

.crystal-store-order > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.crystal-store-order strong { color: #dbeafe; font: 700 9px/1.2 var(--font-game, monospace); }
.crystal-store-order time { display: block; margin-top: 7px; color: #60778c; font: 500 9px/1 Arial, sans-serif; }
.crystal-store-order-status {
  color: #67e8f9;
  font: 800 6px/1 var(--font-game, monospace);
  text-transform: uppercase;
}
.crystal-store-order-status[data-status="failed"],
.crystal-store-order-status[data-status="refunded"],
.crystal-store-order-status[data-status="disputed"] { color: #fda4af; }
.crystal-store-order-status[data-status="fulfilled"] { color: #86efac; }

.crystal-store-security {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(45, 212, 191, 0.16);
  border-radius: 10px;
  background: rgba(13, 148, 136, 0.05);
}

.crystal-store-security > span { color: #5eead4; font-size: 16px; }
.crystal-store-security div { display: flex; flex-direction: column; gap: 4px; }
.crystal-store-security strong { color: #b7e9e2; font: 700 8px/1 var(--font-game, monospace); }
.crystal-store-security small { color: #617c80; font: 500 9px/1.25 Arial, sans-serif; }

.crystal-store-notice {
  grid-column: 1 / -1;
  display: none;
  margin: 18px 22px 0;
  padding: 11px 13px;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.09);
  color: #bae6fd;
  font: 600 11px/1.35 Arial, sans-serif;
}

.crystal-store-notice.is-visible { display: block; }
.crystal-store-notice[data-kind="success"] { color: #bbf7d0; border-color: rgba(74, 222, 128, 0.3); background: rgba(22, 163, 74, 0.09); }
.crystal-store-notice[data-kind="error"] { color: #fecdd3; border-color: rgba(251, 113, 133, 0.32); background: rgba(190, 18, 60, 0.1); }
.crystal-store-notice.is-visible + .crystal-store-catalog,
.crystal-store-notice.is-visible ~ .crystal-store-history { padding-top: 14px; }

.crystal-store-loading,
.crystal-store-empty {
  padding: 28px 12px;
  border: 1px dashed rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  color: #658198;
  text-align: center;
  font: 600 10px/1.4 Arial, sans-serif;
}

#crystalStoreRefresh {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.58);
  color: #7dd3fc;
  font-size: 17px;
  cursor: pointer;
}

@media (max-width: 820px) {
  .crystal-store-overlay { padding: 10px; }
  .crystal-store-panel { max-height: 96vh; overflow-y: auto; }
  .crystal-store-header { align-items: flex-start; padding: 16px; }
  .crystal-store-brand p { display: none; }
  .crystal-store-balance { min-width: 0; }
  .crystal-store-body { display: block; }
  .crystal-store-history { border-left: 0; border-top: 1px solid rgba(56, 189, 248, 0.14); }
}

@media (max-width: 560px) {
  .crystal-store-header { gap: 10px; }
  .crystal-store-emblem { width: 46px; height: 46px; }
  .crystal-store-emblem img { width: 36px; height: 36px; }
  .crystal-store-brand h2 { font-size: 15px; }
  .crystal-store-balance span { display: none; }
  .crystal-store-balance { min-width: auto; padding: 5px; }
  .crystal-store-packages { grid-template-columns: 1fr; }
}

#shopHudMoneyDisplay {
  min-height: 40px;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: #fde047;
  font-size: 8px;
}

#inventoryHudClose,
#shopHudClose {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(250, 204, 21, 0.2);
  border-radius: 11px;
  background: rgba(30, 31, 15, 0.68);
  color: #94a3b8;
  font-size: 21px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#inventoryHudClose:hover,
#shopHudClose:hover {
  border-color: rgba(248, 113, 113, 0.58);
  background: rgba(90, 22, 24, 0.55);
  color: #fecaca;
  transform: rotate(4deg);
}

/* Inventory layout */
#inventoryHudBody {
  grid-template-columns: minmax(570px, 1fr) minmax(290px, 330px);
  gap: 12px;
  padding: 12px;
}

#inventoryCollectionPane,
#inventoryDetailPane {
  min-height: 0;
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, rgba(250, 204, 21, 0.045), transparent 30%),
    linear-gradient(145deg, rgba(7, 26, 22, 0.84), rgba(4, 14, 18, 0.92));
  box-shadow: inset 0 1px rgba(255,255,255,0.025), 0 8px 24px rgba(0,0,0,0.1);
}

#inventoryCollectionPane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inventory-pane-heading,
.inventory-detail-heading {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  border-bottom: 1px solid rgba(250, 204, 21, 0.1);
  box-sizing: border-box;
}

.inventory-pane-heading div { display: flex; flex-direction: column; gap: 5px; }
.inventory-pane-heading span,
.inventory-detail-heading span { color: #d4a815; font: 700 5px/1 var(--font-game, monospace); letter-spacing: 1px; }
.inventory-pane-heading strong { color: #f1f5f9; font-size: 12px; }
.inventory-pane-heading small,
.inventory-detail-heading small { color: #66796e; font: 700 7px/1 ui-monospace, Consolas, monospace; text-transform: uppercase; }

#inventorySlotsPane {
  flex: 1;
  border: 0;
  border-radius: 0;
  padding: 12px;
  background: transparent;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 114px;
  gap: 9px;
  scrollbar-color: rgba(245, 158, 11, 0.42) rgba(255,255,255,0.025);
}
#inventorySlotsPane::-webkit-scrollbar-thumb { background: rgba(245, 158, 11, 0.42); }

.inventory-slot-card {
  --item-accent: #64748b;
  position: relative;
  min-height: 114px;
  padding: 7px 8px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--item-accent) 22%, rgba(255,255,255,0.07));
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--item-accent) 8%, transparent), transparent 45%),
    linear-gradient(145deg, rgba(12, 29, 26, 0.92), rgba(5, 16, 18, 0.97));
  box-shadow: inset 0 1px rgba(255,255,255,0.025), 0 5px 14px rgba(0,0,0,0.12);
  transition: transform 0.17s ease, border-color 0.17s ease, box-shadow 0.17s ease, filter 0.17s ease;
}

.inventory-slot-card::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 2px;
  background: var(--item-accent);
  box-shadow: 0 0 8px var(--item-accent);
  opacity: 0.2;
}

.inventory-slot-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--item-accent) 58%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,0.26), 0 0 16px color-mix(in srgb, var(--item-accent) 8%, transparent);
}

.inventory-slot-card.is-selected {
  border-color: color-mix(in srgb, var(--item-accent) 80%, white 4%);
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--item-accent) 18%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(28, 43, 27, 0.98), rgba(6, 23, 20, 0.98));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--item-accent) 12%, transparent), 0 8px 22px rgba(0,0,0,0.24), 0 0 18px color-mix(in srgb, var(--item-accent) 10%, transparent);
}
.inventory-slot-card.is-selected::after { opacity: 0.9; }

.inventory-slot-index {
  position: absolute;
  top: 7px;
  left: 8px;
  color: color-mix(in srgb, var(--item-accent) 56%, #64748b);
  font: 700 6px/1 var(--font-game, monospace);
}

.inventory-slot-main {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.inventory-slot-icon {
  position: relative;
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  border: 1px solid color-mix(in srgb, var(--item-accent) 18%, transparent);
  border-radius: 11px;
  background: radial-gradient(circle, color-mix(in srgb, var(--item-accent) 9%, transparent), rgba(2,11,14,0.58) 72%);
}
.inventory-slot-icon img { width: 92%; height: 92%; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.46)); }
.inventory-slot-rarity-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--item-accent); box-shadow: 0 0 7px var(--item-accent); }

.inventory-slot-name {
  width: 100%;
  overflow: hidden;
  color: #f5f7f6;
  font-size: 9px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-slot-footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.inventory-slot-footer small { overflow: hidden; color: color-mix(in srgb, var(--item-accent) 72%, #94a3b8); font: 700 5px/1 var(--font-game, monospace); text-transform: uppercase; text-overflow: ellipsis; }
.inventory-slot-qty { color: #ecfccb; font: 800 9px/1 ui-monospace, Consolas, monospace; }

.inventory-slot-card.is-empty {
  --item-accent: #334155;
  justify-content: center;
  gap: 5px;
  opacity: 0.52;
  border-style: dashed;
  background: rgba(3, 14, 17, 0.46);
}
.inventory-slot-card.is-empty:hover { opacity: 0.75; transform: translateY(-2px); border-color: rgba(100,116,139,0.42); background: rgba(8, 25, 24, 0.65); }
.inventory-slot-empty-icon { color: #465a55; font: 300 24px/1 Arial, sans-serif; }
.inventory-slot-empty { color: #5f726c; font: 700 6px/1 var(--font-game, monospace); text-transform: uppercase; }

#inventoryDetailPane {
  --inventory-item-accent: #f59e0b;
  position: relative;
  gap: 10px;
  padding: 0 14px 14px;
  overflow-y: auto;
}

.inventory-detail-heading { margin: 0 -14px 2px; }

.inventory-detail-art {
  position: relative;
  width: 158px;
  height: 158px;
  flex: 0 0 158px;
  align-self: center;
  display: grid;
  place-items: center;
  margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--inventory-item-accent) 32%, transparent);
  border-radius: 26px 9px 26px 9px;
  background: radial-gradient(circle, color-mix(in srgb, var(--inventory-item-accent) 12%, transparent), rgba(2,12,14,0.72) 68%);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.33), 0 0 25px color-mix(in srgb, var(--inventory-item-accent) 7%, transparent);
}
.inventory-detail-art::before { content:''; position:absolute; inset:8px; border:1px solid color-mix(in srgb, var(--inventory-item-accent) 15%, transparent); border-radius:20px 6px 20px 6px; }

#inventoryDetailImage {
  position: relative;
  z-index: 1;
  width: 138px;
  height: 138px;
  filter: drop-shadow(0 11px 13px rgba(0,0,0,0.5));
}
#inventoryDetailEmptyIcon { color: #45554f; font: 300 42px/1 Arial, sans-serif; }

#inventoryDetailBadges { display: flex; align-items: center; justify-content: center; gap: 6px; }
#inventoryDetailBadges[hidden] { display: none; }
#inventoryDetailCategory,
#inventoryDetailRarity { padding: 5px 8px; border: 1px solid rgba(148,163,184,0.2); border-radius: 999px; color: #9bad9f; font: 700 6px/1 var(--font-game, monospace); text-transform: uppercase; }
#inventoryDetailRarity { color: var(--inventory-item-accent); border-color: color-mix(in srgb, var(--inventory-item-accent) 38%, transparent); background: color-mix(in srgb, var(--inventory-item-accent) 7%, transparent); }

.inventory-detail-copy { padding-top: 2px; text-align: center; }
#inventoryDetailName { color: #f8fafc; font: 700 13px/1.3 var(--font-game, monospace); }
#inventoryDetailCount { margin-top: 6px; color: #bef264; font: 700 9px/1 ui-monospace, Consolas, monospace; }
#inventoryDetailDesc { margin: 9px 0 0; color: #869b91; font-size: 10px; line-height: 1.5; }

#inventoryDetailStats { justify-content: center; }
#inventoryDetailStats span { border-color: color-mix(in srgb, var(--inventory-item-accent) 25%, transparent); background: color-mix(in srgb, var(--inventory-item-accent) 6%, transparent); color: color-mix(in srgb, var(--inventory-item-accent) 76%, white 10%); font-size: 9px; }

#inventoryUseBtn {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 7px 10px;
  border-color: rgba(163, 230, 53, 0.52);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(79,121,24,0.62), rgba(18,61,35,0.94));
  box-shadow: inset 0 1px rgba(255,255,255,0.09), 0 7px 18px rgba(0,0,0,0.2);
  text-align: left;
}
#inventoryUseBtn > span:first-child { width: 31px; height: 31px; display:grid; place-items:center; flex:0 0 31px; border:1px solid rgba(255,255,255,0.14); border-radius:8px; background:rgba(0,0,0,0.17); color:#d9f99d; font-size:9px; }
#inventoryUseBtn > span:last-child { display:flex; flex-direction:column; gap:4px; }
#inventoryUseBtn strong { color:#f7fee7; font:700 7px/1 var(--font-game,monospace); }
#inventoryUseBtn small { color:#9abd82; font-size:8px; }
#inventoryUseBtn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.14); box-shadow: 0 10px 22px rgba(0,0,0,0.24), 0 0 16px rgba(132,204,22,0.1); }

#inventoryUseConfirm { background: rgba(1, 10, 9, 0.78); backdrop-filter: blur(8px); }
#inventoryUseConfirmCard {
  border-color: rgba(250, 204, 21, 0.4);
  background:
    radial-gradient(circle at 0 0, rgba(163,230,53,0.08), transparent 34%),
    linear-gradient(155deg, rgba(10,35,27,0.99), rgba(4,16,19,0.99));
  box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 28px rgba(245,158,11,0.08), inset 0 1px rgba(255,255,255,0.06);
}
#inventoryUseConfirmCopy > span { color: #facc15; font-family: var(--font-game, monospace); font-size: 6px; }
#inventoryUseConfirmBtn { border-color: rgba(163,230,53,0.6); background: linear-gradient(145deg, rgba(79,121,24,0.65), rgba(18,61,35,0.94)); }

/* World Shop layout */
#shopHudPanel { width: min(1120px, 97vw); }
#shopHudTitleIcon { font-size: 0; filter: none; }

#shopTabs {
  min-height: 56px;
  padding: 7px 12px;
  gap: 8px;
  border-bottom-color: rgba(250, 204, 21, 0.09);
  background: rgba(2, 15, 16, 0.5);
}

.shop-tab {
  height: 42px;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid rgba(148,163,184,0.1);
  border-radius: 10px;
  background: rgba(4, 18, 19, 0.62);
}
.shop-tab::after { content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:#facc15; box-shadow:0 0 8px #f59e0b; opacity:0; }
.shop-tab-icon { min-width: 39px; padding: 5px 6px; border: 1px solid rgba(148,163,184,0.14); border-radius: 7px; color:#6b7c74; font:700 5px/1 var(--font-game,monospace); text-align:center; }
.shop-tab-label { color:#b1beb7; font-size:7px; }
.shop-tab-sub { display:inline; color:#62746b; font-size:9px; }
.shop-tab.is-active { border-color:rgba(250,204,21,0.38); border-bottom-color:rgba(250,204,21,0.38); background:linear-gradient(145deg,rgba(111,79,13,0.28),rgba(12,39,25,0.82)); color:#facc15; }
.shop-tab.is-active::after { opacity:1; }
.shop-tab.is-active .shop-tab-icon { border-color:rgba(250,204,21,0.34); background:rgba(250,204,21,0.08); color:#fde047; }
.shop-tab.is-active .shop-tab-label { color:#fef3c7; }

#shopToolbar {
  display: grid;
  grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom-color: rgba(250,204,21,0.08);
  background: rgba(3, 16, 17, 0.42);
}

#shopSearchWrap {
  height: 38px;
  border-color: rgba(245,158,11,0.18);
  background: rgba(2,13,16,0.7);
}
#shopSearchWrap:focus-within { border-color:rgba(250,204,21,0.45); background:rgba(75,56,11,0.12); box-shadow:0 0 14px rgba(245,158,11,0.06); }
#shopSearchInput { color:#eaf2ed; font-size:10px; }

#shopCategoryFilters { justify-content: flex-end; }
.shop-cat-btn { height:29px; padding:4px 9px; border-radius:8px; border-color:rgba(148,163,184,0.1); background:rgba(3,17,18,0.62); color:#70827a; font-size:8px; }
.shop-cat-btn:hover { border-color:rgba(163,230,53,0.24); color:#b8c8be; }
.shop-cat-btn.is-active { color:#ecfccb; border-color:rgba(163,230,53,0.4); background:rgba(101,163,13,0.12); box-shadow:inset 0 0 12px rgba(132,204,22,0.035); }

#shopHudBody { gap: 11px; padding: 11px 12px 12px; }
.shop-pane { scrollbar-color:rgba(245,158,11,0.28) transparent; }
.shop-pane::-webkit-scrollbar-thumb { background:rgba(245,158,11,0.25); }

#shopItemsList,
#shopSellList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shop-item-card,
#shopSellList .shop-item-card {
  --rarity-border: rgba(148,163,184,0.26);
  --rarity-glow: rgba(148,163,184,0.08);
  position: relative;
  min-height: 78px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid var(--rarity-border);
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0, var(--rarity-glow), transparent 48%),
    linear-gradient(145deg, rgba(10,28,24,0.92), rgba(4,15,18,0.97));
  box-shadow: inset 0 1px rgba(255,255,255,0.025), 0 5px 15px rgba(0,0,0,0.12);
}

.shop-item-card::after { content:''; position:absolute; left:10px; right:10px; bottom:0; height:2px; background:var(--rarity-border); box-shadow:0 0 8px var(--rarity-border); opacity:0.22; }
.shop-item-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--rarity-border) 82%,white 8%); background:radial-gradient(circle at 100% 0,var(--rarity-glow),transparent 50%),linear-gradient(145deg,rgba(18,39,29,0.98),rgba(5,19,19,0.98)); box-shadow:0 10px 23px rgba(0,0,0,0.25),0 0 16px var(--rarity-glow); }
.shop-item-card.is-selected { border-color:#facc15; background:radial-gradient(circle at 100% 0,rgba(250,204,21,0.13),transparent 50%),linear-gradient(145deg,rgba(43,43,20,0.98),rgba(6,24,20,0.98)); box-shadow:inset 0 0 0 1px rgba(250,204,21,0.08),0 8px 22px rgba(0,0,0,0.24),0 0 18px rgba(245,158,11,0.09); }
.shop-item-card.is-selected::after { opacity:0.9; background:#facc15; }
.shop-item-card.cant-afford { filter:saturate(0.5); opacity:0.42; }

.shop-item-icon { width:58px; height:58px; border:1px solid var(--rarity-border); border-radius:12px; background:radial-gradient(circle,var(--rarity-glow),rgba(2,11,14,0.62) 72%); }
.shop-item-icon img { width:92%; height:92%; filter:drop-shadow(0 5px 5px rgba(0,0,0,0.45)); }
.shop-item-rarity-dot { top:5px; right:5px; width:6px; height:6px; border:0; box-shadow:0 0 7px currentColor; }
.shop-item-name { min-width:0; color:#f5f7f6; font-size:10px; }
.shop-item-rarity-tag { flex:0 0 auto; padding:3px 5px; border-radius:999px; font-size:5px; }
.shop-item-rarity-tag.divine { color:#22d3ee; border:1px solid rgba(34,211,238,0.45); box-shadow:0 0 8px rgba(34,211,238,0.18); }
.shop-item-desc { color:#758a80; font-size:9px; line-height:1.35; }

.shop-item-price {
  min-width: 66px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(250,204,21,0.2);
  border-radius: 9px;
  background: rgba(250,204,21,0.055);
  color: #fde047;
}
.shop-item-price small { color:#817746; font:700 5px/1 var(--font-game,monospace); }
.shop-item-price strong { color:#fef3c7; font:700 8px/1 var(--font-game,monospace); }
.shop-item-price strong::before { content:'$'; margin-right:2px; color:#facc15; }
.shop-sell-price { border-color:rgba(74,222,128,0.22); background:rgba(34,197,94,0.055); }
.shop-sell-price small { color:#58866a; }
.shop-sell-price strong { color:#bbf7d0; }
.shop-sell-price strong::before { color:#4ade80; }
.shop-item-qty-badge { border:1px solid rgba(163,230,53,0.13); background:rgba(101,163,13,0.07); color:#78917f; }

#shopSellHeader { padding:4px 3px 10px; border-bottom-color:rgba(163,230,53,0.1); }
#shopSellTitle { color:#bef264; font-size:6px; }
#shopSellCount { color:#6e8177; font-family:ui-monospace,Consolas,monospace; }

#shopTxPanel {
  width: 300px;
  gap: 11px;
  padding: 15px;
  border-color: rgba(250,204,21,0.22);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 0, rgba(250,204,21,0.09), transparent 35%),
    linear-gradient(145deg, rgba(17,33,23,0.97), rgba(4,15,18,0.98));
  box-shadow: inset 0 1px rgba(255,255,255,0.03), 0 9px 24px rgba(0,0,0,0.18);
}
.shop-tx-close { border-color:rgba(250,204,21,0.14); background:rgba(33,31,12,0.62); }
#shopTxIconWrap { width:96px; height:96px; border-color:rgba(250,204,21,0.22); border-radius:20px 7px 20px 7px; background:radial-gradient(circle,rgba(250,204,21,0.08),rgba(2,11,14,0.7) 72%); box-shadow:inset 0 0 22px rgba(0,0,0,0.28); }
#shopTxIcon img { width:78px; height:78px; filter:drop-shadow(0 7px 7px rgba(0,0,0,0.46)); }
#shopTxItemName { color:#fff; font:700 11px/1.3 var(--font-game,monospace); }
#shopTxItemDesc { color:#7d9287; font-size:9px; }
#shopTxDetails { padding:10px; border:1px solid rgba(250,204,21,0.1); border-radius:10px; background:rgba(2,12,15,0.48); }
.shop-tx-detail-label { color:#697b72; font-size:8px; }
.shop-tx-detail-value { color:#dbe7df; font-size:9px; }
.shop-tx-detail-divider { background:rgba(250,204,21,0.1); }
.shop-qty-btn { border-color:rgba(250,204,21,0.17); background:rgba(250,204,21,0.045); }
#shopTxQuantity { background:rgba(2,12,15,0.86); border-color:rgba(250,204,21,0.17); }

#shopTxConfirm {
  min-height: 48px;
  border: 1px solid rgba(250,204,21,0.58);
  border-radius: 11px;
  background: linear-gradient(145deg, #eab308, #a16207);
  color: #171b0d;
  box-shadow: inset 0 1px rgba(255,255,255,0.2), 0 8px 19px rgba(0,0,0,0.22), 0 0 15px rgba(245,158,11,0.08);
}
#shopTxConfirm:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 11px 24px rgba(0,0,0,0.25),0 0 20px rgba(234,179,8,0.18); filter:brightness(1.08); }
#shopTxSellAll { min-height:43px; border-radius:10px; }

#shopHudFooter { padding:9px 14px; border-top-color:rgba(163,230,53,0.08); background:rgba(2,13,15,0.36); }
#shopHudFooterNote { color:#64786e; font-size:8px; }
#shopHudFooterNote i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 7px #22c55e; }

@keyframes supplyHudEnter {
  from { opacity:0; transform:translateY(12px) scale(0.975); filter:saturate(0.6); }
  to { opacity:1; transform:translateY(0) scale(1); filter:saturate(1); }
}

@media (max-width: 980px) {
  #inventoryHudPanel,
  #shopHudPanel { width:calc(100vw - 22px); height:calc(100vh - 22px); }
  #inventoryHudBody { grid-template-columns:minmax(500px,1fr) 280px; }
  #inventorySlotsPane { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #shopItemsList,
  #shopSellList { grid-template-columns:1fr; }
  #shopTxPanel { width:280px; }
}

@media (max-width: 700px) {
  #inventoryHudOverlay,
  #shopHudOverlay { padding:7px; }
  #inventoryHudPanel,
  #shopHudPanel { width:100%; height:calc(100vh - 14px); border-radius:14px; }
  #inventoryHudHeader,
  #shopHudHeader { min-height:68px; padding:10px 11px; }
  .inventory-hud-emblem,
  #shopHudTitleIcon { width:42px; height:42px; flex-basis:42px; }
  .inventory-hud-emblem img,
  #shopHudTitleIcon img { width:37px; height:37px; }
  #inventoryHudTitle p,
  #shopHudSubtitle,
  #inventoryCapacityBadge { display:none; }
  #inventoryHudHeader h3,
  #shopHudTitle { font-size:13px; }
  #inventoryHudBody { display:block; overflow-y:auto; padding:8px; }
  #inventoryCollectionPane { min-height:460px; }
  #inventoryDetailPane { margin-top:8px; min-height:430px; }
  #inventorySlotsPane { grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  #shopToolbar { grid-template-columns:1fr; }
  #shopCategoryFilters { justify-content:flex-start; }
  #shopHudBody { flex-direction:column; }
  #shopTxPanel { width:100%; max-height:250px; order:-1; }
  #shopTxIconWrap { display:none; }
  #shopItemsList,
  #shopSellList { grid-template-columns:1fr; }
  .shop-tab-sub { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  #inventoryHudPanel,
  #shopHudPanel { animation:none !important; }
  .inventory-slot-card,
  .shop-item-card,
  #inventoryUseBtn { transition:none !important; }
}

/* ════════════════════════════════════════════════════
   CREATURE STORAGE — PROFESSIONAL RESERVE HUD
   ════════════════════════════════════════════════════ */

#storageHudOverlay {
  padding: 12px;
  background:
    radial-gradient(circle at 50% 12%, rgba(132, 204, 22, 0.1), transparent 34%),
    rgba(1, 9, 10, 0.84);
  backdrop-filter: blur(11px) saturate(0.7);
}

#storageHudPanel {
  --storage-green: #a3e635;
  --storage-mint: #4ade80;
  --storage-cyan: #22d3ee;
  width: min(1180px, 97vw);
  height: min(740px, 94vh);
  border: 1px solid rgba(163, 230, 53, 0.32);
  border-radius: 21px 8px 21px 8px;
  background:
    radial-gradient(circle at 10% 0%, rgba(132, 204, 22, 0.075), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(34, 211, 238, 0.045), transparent 32%),
    linear-gradient(145deg, rgba(5, 24, 20, 0.99), rgba(3, 13, 20, 0.995) 54%, rgba(5, 14, 23, 0.995));
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.72),
    0 0 35px rgba(132, 204, 22, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.055);
  animation: storageHudEnter 0.34s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

#storageHudPanel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(163, 230, 53, 0.012) 5px);
  mix-blend-mode: screen;
}

#storageHudPanel,
#storageHudHeader,
#storageHudBody,
.storage-collection-pane,
#storageDetailPane { position: relative; }

#storageHudHeader {
  min-height: 84px;
  gap: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(163, 230, 53, 0.17);
  background: linear-gradient(90deg, rgba(10, 38, 25, 0.78), rgba(3, 17, 21, 0.54));
  z-index: 2;
}

#storageHudHeader::after {
  content: '';
  position: absolute;
  left: 76px;
  right: 18px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, #a3e635, rgba(34, 211, 238, 0.5), transparent 78%);
  box-shadow: 0 0 10px rgba(163, 230, 53, 0.28);
}

.storage-header-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(163, 230, 53, 0.38);
  border-radius: 16px 5px 16px 5px;
  background: radial-gradient(circle, rgba(163, 230, 53, 0.18), rgba(10, 31, 24, 0.78));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 0 18px rgba(132, 204, 22, 0.08);
}

.storage-header-icon img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.42));
}

.storage-header-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.storage-header-copy > span,
.storage-section-heading span,
.storage-inspector-heading > span {
  color: #bef264;
  font: 700 6px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 1.4px;
}

#storageHudHeader .storage-header-copy h3 {
  margin: 0;
  color: #f4f9f5;
  font: 700 16px/1.12 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 0.3px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.storage-header-copy p {
  margin: 0;
  color: #758a80;
  font-size: 9px;
}

#storageCapacityBadge {
  min-width: 112px;
  min-height: 46px;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(163, 230, 53, 0.2);
  border-radius: 11px 4px 11px 4px;
  background: rgba(132, 204, 22, 0.055);
}

#storageCapacityBadge > span {
  color: #71846f;
  font: 700 5px/1 var(--font-game, monospace);
  letter-spacing: 0.8px;
}

#storageCapacityBadge #storageCountLabel {
  margin: 0;
  color: #d9f99d;
  font: 700 9px/1 var(--font-game, monospace);
}

#storageHudClose,
#storageSwapClose {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 11px 4px 11px 4px;
  background: rgba(15, 29, 31, 0.78);
  color: #809189;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

#storageHudClose:hover,
#storageSwapClose:hover {
  border-color: rgba(248, 113, 113, 0.48);
  background: rgba(127, 29, 29, 0.2);
  color: #fca5a5;
  transform: rotate(4deg);
}

#storageHudBody {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 326px;
  gap: 10px;
  padding: 10px;
  z-index: 1;
}

.storage-collection-pane,
#storageDetailPane {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(163, 230, 53, 0.13);
  border-radius: 15px 5px 15px 5px;
  background: rgba(2, 14, 17, 0.62);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.storage-collection-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.storage-section-heading,
.storage-inspector-heading {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-bottom: 1px solid rgba(163, 230, 53, 0.1);
  background: rgba(8, 27, 22, 0.5);
}

.storage-section-heading > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.storage-section-heading h4 {
  margin: 0;
  color: #eef6f0;
  font-size: 13px;
}

.storage-section-heading p {
  margin: 0;
  color: #667d72;
  font-size: 8px;
}

#storageGridWrap {
  min-height: 0;
  padding: 10px;
  scrollbar-color: rgba(163, 230, 53, 0.35) transparent;
}

#storageGridWrap::-webkit-scrollbar { width: 7px; }
#storageGridWrap::-webkit-scrollbar-track { background: rgba(2, 11, 14, 0.46); border-radius: 8px; }
#storageGridWrap::-webkit-scrollbar-thumb { background: linear-gradient(#84cc16, #22c55e); border-radius: 8px; }

#storageGrid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  align-content: start;
}

.storage-slot {
  min-width: 0;
  height: 158px;
  aspect-ratio: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--storage-accent, #5f776c) 28%, rgba(115, 139, 128, 0.2));
  border-radius: 13px 4px 13px 4px;
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--storage-accent, #6b8177) 11%, transparent), transparent 47%),
    linear-gradient(155deg, rgba(10, 29, 26, 0.92), rgba(4, 15, 20, 0.96));
  color: #e8f1eb;
  font-family: inherit;
  text-align: left;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  isolation: isolate;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.storage-slot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--storage-accent, #64748b), transparent);
  opacity: 0.35;
}

.storage-slot-creature:hover {
  z-index: 2;
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--storage-accent, #a3e635) 65%, #d9f99d);
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--storage-accent, #a3e635) 18%, transparent), transparent 49%),
    linear-gradient(155deg, rgba(12, 38, 29, 0.98), rgba(4, 18, 22, 0.98));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), 0 0 16px color-mix(in srgb, var(--storage-accent, #a3e635) 14%, transparent);
}

.storage-slot.storage-slot-selected,
.storage-slot.storage-slot-selected:hover {
  transform: translateY(-2px);
  border-color: #bef264;
  background:
    radial-gradient(circle at 50% 31%, color-mix(in srgb, var(--storage-accent, #a3e635) 23%, transparent), transparent 50%),
    linear-gradient(155deg, rgba(17, 50, 31, 0.99), rgba(5, 22, 23, 0.99));
  box-shadow: 0 0 0 1px rgba(190, 242, 100, 0.34), 0 9px 24px rgba(0, 0, 0, 0.35), 0 0 18px rgba(132, 204, 22, 0.16);
}

.storage-slot:focus-visible {
  outline: 2px solid #d9f99d;
  outline-offset: 2px;
}

.storage-slot-index {
  position: absolute;
  top: 7px;
  left: 8px;
  z-index: 3;
  color: #5e766b;
  font: 700 5px/1 var(--font-game, monospace);
  letter-spacing: 0.5px;
}

.storage-slot-portrait {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 7px 2px;
  position: relative;
}

.storage-slot .storage-slot-portrait > img,
.storage-slot .storage-slot-portrait > .storage-slot-fallback {
  width: 68px;
  height: 68px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  image-rendering: auto;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.47));
  transition: transform 0.22s ease, filter 0.22s ease;
}

.storage-slot-creature:hover .storage-slot-portrait > img { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 9px 8px rgba(0,0,0,0.5)); }

.storage-slot-elements {
  top: 5px;
  left: auto;
  right: 6px;
  z-index: 3;
  gap: 2px;
}

.storage-slot .storage-slot-element-icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
}

.storage-slot-copy {
  min-width: 0;
  padding: 2px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.storage-slot-copy > strong {
  overflow: hidden;
  color: #f2f7f4;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.storage-slot-copy > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.storage-slot-copy b {
  color: #d9f99d;
  font: 700 7px/1 var(--font-game, monospace);
}

.storage-slot-gender {
  width: 19px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font: 800 12px/1 Arial, sans-serif;
}

.storage-slot-gender.is-male { color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.28); background: rgba(14, 165, 233, 0.09); }
.storage-slot-gender.is-female { color: #f9a8d4; border: 1px solid rgba(244, 114, 182, 0.3); background: rgba(236, 72, 153, 0.09); }
.storage-slot-gender.is-genderless { color: #fda4af; border: 1px solid rgba(251, 113, 133, 0.34); background: rgba(225, 29, 72, 0.1); }

.storage-slot-breeding {
  margin-left: auto;
  color: #a7f3d0;
  font: 700 5px/1 var(--font-game, monospace);
  white-space: nowrap;
}

.storage-slot-breeding.is-mythic { color: #d8b4fe; }
.storage-slot-breeding.is-exhausted { color: #fda4af; }

.storage-slot-rarities {
  margin-top: auto;
  padding: 5px 6px 7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  border-top: 1px solid rgba(163, 230, 53, 0.075);
  background: rgba(1, 10, 13, 0.36);
}

.storage-slot-rarity {
  min-width: 0;
  padding: 3px 2px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: #85938c;
  font: 700 4.5px/1 var(--font-game, monospace);
  text-align: center;
  white-space: nowrap;
  text-overflow: clip;
  opacity: 0.78;
}

.storage-slot-rarity.rarity-F { color:#94a3b8; }
.storage-slot-rarity.rarity-E { color:#60a5fa; }
.storage-slot-rarity.rarity-D { color:#4ade80; }
.storage-slot-rarity.rarity-C { color:#86efac; }
.storage-slot-rarity.rarity-B { color:#facc15; }
.storage-slot-rarity.rarity-A { color:#fb923c; }
.storage-slot-rarity.rarity-S { color:#f472b6; }
.storage-slot-rarity.rarity-SS { color:#c084fc; }
.storage-slot-rarity.rarity-SSS { color:#22d3ee; }

.storage-slot-variant {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 3px 5px;
  border-radius: 999px;
  font: 700 4px/1 var(--font-game, monospace);
  letter-spacing: 0.4px;
}

.storage-slot-variant.is-shiny { color:#fde68a; border:1px solid rgba(250,204,21,0.35); background:rgba(120,53,15,0.76); }
.storage-slot-variant.is-ultra { color:#e9d5ff; border:1px solid rgba(192,132,252,0.38); background:rgba(59,7,100,0.78); }
.storage-slot-shiny { --storage-accent:#facc15 !important; }
.storage-slot-ultra { --storage-accent:#c084fc !important; }

.storage-slot.storage-slot-empty {
  --storage-accent: #52645b;
  cursor: default;
  justify-content: center;
  align-items: center;
  border-style: dashed;
  border-color: rgba(102, 125, 114, 0.15);
  background: rgba(4, 16, 18, 0.36);
  box-shadow: none;
}

.storage-slot.storage-slot-empty:hover { transform: none; border-color: rgba(102,125,114,0.15); background: rgba(4,16,18,0.36); }
.storage-slot-empty-mark { color:rgba(163,230,53,0.12); font:300 28px/1 Arial,sans-serif; }
.storage-slot-empty-label { margin-top:5px; color:rgba(121,143,132,0.28); font:700 5px/1 var(--font-game,monospace); letter-spacing:0.7px; }

.storage-slot.storage-slot-egg {
  --storage-accent: #f472b6;
  justify-content: flex-start;
  align-items: stretch;
  border-color: rgba(244, 114, 182, 0.35);
  background:
    radial-gradient(circle at 50% 37%, rgba(244, 114, 182, 0.18), transparent 43%),
    linear-gradient(155deg, rgba(47, 15, 47, 0.96), rgba(12, 15, 29, 0.98));
}

.storage-slot.storage-slot-egg:hover { transform:translateY(-3px); border-color:#f9a8d4; box-shadow:0 10px 22px rgba(0,0,0,.32),0 0 18px rgba(244,114,182,.16); }
.storage-slot.storage-slot-egg.storage-slot-selected { border-color:#f9a8d4; background:radial-gradient(circle at 50% 37%,rgba(244,114,182,.25),transparent 46%),linear-gradient(155deg,rgba(64,18,59,.98),rgba(15,16,32,.98)); }
.storage-slot.storage-slot-egg .storage-slot-portrait { height:108px; padding-top:25px; }
.storage-slot img.storage-egg-image { width:78px; height:78px; margin:0; }
.storage-egg-label { top:22px; left:0; right:0; color:#fbcfe8; font-size:5px; letter-spacing:.8px; text-align:center; }
.storage-egg-timer { left:8px; right:8px; bottom:10px; padding:6px; border:1px solid rgba(244,114,182,.18); border-radius:6px; background:rgba(24,9,28,.68); color:#fff1f8; font-size:6px; }

#storageDetailPane {
  --storage-accent: #a3e635;
  width: auto;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-left: 1px solid rgba(163, 230, 53, 0.13);
}

#storageDetailPane.storage-detail-empty {
  justify-content: flex-start;
  align-items: stretch;
}

.storage-inspector-heading {
  flex: 0 0 auto;
}

.storage-inspector-heading small {
  color: #556c61;
  font: 700 5px/1 var(--font-game, monospace);
  letter-spacing: 0.7px;
}

#storageDetailEmptyState {
  flex: 1;
  min-height: 0;
  padding: 28px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: center;
}

#storageDetailPane.storage-detail-empty #storageDetailEmptyState { display:flex; }
#storageDetailPane.storage-detail-empty #storageDetailContent { display:none; }

.storage-empty-radar {
  width: 92px;
  height: 92px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(163, 230, 53, 0.19);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 204, 22, 0.11), transparent 66%);
}

.storage-empty-radar::before,
.storage-empty-radar::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(163, 230, 53, 0.15);
  border-radius: 50%;
  animation: storageRadar 10s linear infinite;
}

.storage-empty-radar::after { inset:23px; animation-direction:reverse; animation-duration:7s; }
.storage-empty-radar img { width:56px; height:56px; object-fit:contain; opacity:.52; filter:saturate(.7) drop-shadow(0 6px 7px rgba(0,0,0,.38)); }
#storageDetailEmptyState strong { color:#c7d4cc; font-size:12px; }
#storageDetailEmptyState p { max-width:220px; margin:0; color:#657a70; font-size:9px; line-height:1.55; }

#storageDetailContent {
  min-height: 0;
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(163,230,53,.28) transparent;
}

#storageDetailPortraitWrap {
  width: 100%;
  height: 142px;
  margin: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--storage-accent) 34%, rgba(117,138,128,.15));
  border-radius: 14px 4px 14px 4px;
  background:
    radial-gradient(circle at 50% 49%, color-mix(in srgb, var(--storage-accent) 15%, transparent), transparent 48%),
    linear-gradient(150deg, rgba(9, 29, 25, 0.8), rgba(3, 13, 19, 0.9));
  isolation: isolate;
}

#storageDetailPortraitWrap::after {
  content:'';
  position:absolute;
  left:22%;
  right:22%;
  bottom:20px;
  height:12px;
  z-index:-1;
  border-radius:50%;
  background:rgba(0,0,0,.52);
  filter:blur(6px);
}

.storage-detail-orbit {
  position: absolute;
  width: 112px;
  height: 112px;
  border: 1px dashed color-mix(in srgb, var(--storage-accent) 24%, transparent);
  border-radius: 50%;
  animation: storageRadar 14s linear infinite;
}

.storage-detail-orbit::after {
  content:'';
  position:absolute;
  top:-3px;
  left:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--storage-accent);
  box-shadow:0 0 9px var(--storage-accent);
}

#storageDetailSprite {
  width: 126px;
  height: 126px;
  z-index: 1;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 10px 7px rgba(0, 0, 0, 0.55));
  animation: storagePortraitFloat 3.4s ease-in-out infinite;
}

#storageDetailFallback { width:76px; height:76px; z-index:1; }

#storageDetailLevelBadge {
  left: 10px;
  bottom: 9px;
  transform: none;
  z-index: 2;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--storage-accent) 45%, transparent);
  border-radius: 6px;
  background: rgba(2, 12, 14, 0.86);
  color: #e5f5d0;
  font-size: 6px;
}

#storageDetailMeta { gap:7px; margin:0; }
#storageDetailName { margin:0; color:#f7faf8; font-size:12px; line-height:1.3; text-align:left; }

#storageDetailTags { display:flex; flex-wrap:wrap; gap:5px; }
.storage-detail-gender,
.storage-detail-variant {
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}
.storage-detail-gender.is-male { color:#7dd3fc; border:1px solid rgba(56,189,248,.28); background:rgba(14,165,233,.09); }
.storage-detail-gender.is-female { color:#f9a8d4; border:1px solid rgba(244,114,182,.3); background:rgba(236,72,153,.09); }
.storage-detail-gender.is-genderless { color:#fda4af; border:1px solid rgba(251,113,133,.34); background:rgba(225,29,72,.1); }
.storage-detail-gender.is-exhausted { box-shadow: inset 0 0 0 1px rgba(251,113,133,.16); }
.storage-detail-variant.is-shiny { color:#fde68a; border:1px solid rgba(250,204,21,.32); background:rgba(120,53,15,.24); }
.storage-detail-variant.is-ultra { color:#e9d5ff; border:1px solid rgba(192,132,252,.34); background:rgba(88,28,135,.22); }

#storageDetailElement {
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--element-color, #a3e635) 30%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--element-color, #a3e635) 9%, transparent);
  color: var(--element-color, #d9f99d);
  font-size: 9px;
  font-weight: 800;
}

#storageDetailElement .storage-detail-element-icon { width:22px; height:22px; }

.storage-detail-progress-copy {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#storageDetailLevel,
#storageDetailExp { color:#708379; font-size:8px; text-align:left; }
#storageDetailLevel { color:#d9f99d; font-weight:800; }

#storageDetailExpTrack {
  height: 5px;
  overflow: hidden;
  border: 1px solid rgba(132, 204, 22, 0.13);
  border-radius: 99px;
  background: rgba(2, 9, 12, 0.76);
}

#storageDetailExpFill {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#22c55e,#bef264);
  box-shadow:0 0 8px rgba(163,230,53,.35);
  transition:width .35s ease;
}

#storageDetailStats {
  margin-top: 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#storageDetailStats .sluma-stat-card {
  min-height: 60px;
  padding: 8px;
  border: 1px solid rgba(126, 151, 139, 0.17);
  border-radius: 10px 3px 10px 3px;
  background: linear-gradient(145deg, rgba(11, 29, 28, 0.82), rgba(5, 17, 22, 0.9));
}

#storageDetailStats .sluma-stat-name { color:#71867a; font-size:7px; }
#storageDetailStats .sluma-stat-value { color:#f1f7f3; font-size:13px; }
#storageDetailStats .sluma-stat-rarity { margin-top:6px; }

#storageDetailActions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:2px;
}

.storage-equip-btn,
.storage-release-btn {
  min-height: 42px;
  padding: 8px 9px;
  gap: 6px;
  border-radius: 10px 3px 10px 3px;
  font-size: 6px;
  line-height: 1.35;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 7px 16px rgba(0,0,0,.18);
  transition:transform .18s ease,filter .18s ease,border-color .18s ease,background .18s ease;
}

.storage-equip-btn {
  border:1px solid rgba(163,230,53,.58);
  background:linear-gradient(145deg,#65a30d,#3f6212);
  color:#f7fee7;
}
.storage-equip-btn:hover { transform:translateY(-2px); filter:brightness(1.12); box-shadow:0 10px 20px rgba(0,0,0,.24),0 0 15px rgba(132,204,22,.13); }
.storage-release-btn { border:1px solid rgba(248,113,113,.26); background:rgba(127,29,29,.14); color:#fca5a5; box-shadow:none; }
.storage-release-btn:hover { transform:translateY(-2px); border-color:rgba(248,113,113,.48); background:rgba(127,29,29,.27); }

#storageDetailPane.is-egg #storageDetailPortraitWrap { border-color:rgba(244,114,182,.35); background:radial-gradient(circle,rgba(244,114,182,.17),transparent 48%),linear-gradient(150deg,rgba(45,15,44,.78),rgba(7,13,22,.92)); }
#storageDetailPane.is-egg #storageDetailLevelBadge { color:#fbcfe8; border-color:rgba(244,114,182,.35); }
#storageDetailPane.is-egg #storageDetailExpTrack { display:none; }
.storage-egg-sealed { border-color:rgba(244,114,182,.24); border-radius:10px 3px 10px 3px; background:linear-gradient(145deg,rgba(85,20,67,.15),rgba(29,12,32,.22)); }

#storageSwapOverlay { background:rgba(1,9,10,.88); backdrop-filter:blur(12px) saturate(.7); }
#storageSwapPanel {
  width:min(470px,94vw);
  padding:16px;
  gap:13px;
  border:1px solid rgba(163,230,53,.29);
  border-radius:18px 6px 18px 6px;
  background:radial-gradient(circle at 15% 0,rgba(132,204,22,.09),transparent 33%),linear-gradient(145deg,rgba(7,28,22,.99),rgba(3,13,20,.99));
  box-shadow:0 24px 65px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.05);
}
#storageSwapHeader h4 { color:#f1f7f3; font-size:10px; }
#storageSwapSubtitle { color:#72877c; font-size:9px; }
.swap-slot-btn { min-height:68px; border-color:rgba(163,230,53,.13); border-radius:11px 4px 11px 4px; background:rgba(4,19,20,.64); }
.swap-slot-btn:not([disabled]):hover { transform:translateX(3px); border-color:rgba(163,230,53,.48); background:rgba(42,72,23,.18); }
.swap-slot-portrait { width:50px; height:50px; border-color:rgba(163,230,53,.18); border-radius:10px 3px 10px 3px; background:rgba(2,12,15,.65); }
.swap-slot-name { color:#eff7f1; }
.swap-slot-sub { color:#708379; }

@keyframes storageHudEnter {
  from { opacity:0; transform:translateY(14px) scale(.975); filter:saturate(.6); }
  to { opacity:1; transform:translateY(0) scale(1); filter:saturate(1); }
}

@keyframes storageRadar { to { transform:rotate(360deg); } }
@keyframes storagePortraitFloat { 50% { transform:translateY(-3px); } }

@media (max-width: 940px) {
  #storageHudPanel { width:calc(100vw - 18px); height:calc(100vh - 18px); }
  #storageHudBody { grid-template-columns:minmax(0,1fr) 290px; }
  #storageGrid { grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); }
  .storage-slot { height:150px; }
  .storage-section-heading p { display:none; }
}

@media (max-width: 700px) {
  #storageHudOverlay { padding:6px; }
  #storageHudPanel { width:100%; height:calc(100vh - 12px); border-radius:14px; }
  #storageHudHeader { min-height:70px; padding:9px; gap:8px; }
  .storage-header-icon { width:43px; height:43px; flex-basis:43px; }
  .storage-header-icon img { width:37px; height:37px; }
  #storageHudHeader .storage-header-copy h3 { font-size:12px; }
  .storage-header-copy p,
  #storageCapacityBadge { display:none; }
  #storageHudBody { display:block; overflow-y:auto; padding:7px; }
  .storage-collection-pane { min-height:520px; }
  #storageGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .storage-slot { height:150px; }
  #storageDetailPane { min-height:560px; margin-top:7px; }
  #storageDetailContent { overflow:visible; }
}

@media (max-width: 430px) {
  #storageGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #storageHudPanel,
  .storage-empty-radar::before,
  .storage-empty-radar::after,
  .storage-detail-orbit,
  #storageDetailSprite,
  .storage-egg-image { animation:none !important; }
  .storage-slot { transition:none !important; }
}

/* Unified south-facing UI portraits. Directional sheets include transparent
   breathing room, so these views enlarge the sprite without changing its box. */
.ui-south-sprite {
  object-fit: contain;
  image-rendering: auto;
}

#hudSpriteImg.ui-south-sprite,
.deployed-hud-sprite.ui-south-sprite {
  width: 142%;
  height: 142%;
  max-width: none;
}

.sluma-slot-portrait > img.ui-south-sprite {
  width: 136%;
  height: 136%;
  max-width: none;
}

#slumaDetailSprite.ui-south-sprite,
#storageDetailSprite.ui-south-sprite {
  width: 148px;
  height: 148px;
  max-width: none;
}

.storage-slot .storage-slot-portrait > img.ui-south-sprite {
  width: 132%;
  height: 132%;
  max-width: none;
}

.storage-slot-creature:hover .storage-slot-portrait > img.ui-south-sprite {
  transform: translateY(-2px) scale(1.08);
}

.swap-slot-portrait > img.ui-south-sprite {
  width: 132%;
  height: 132%;
  max-width: none;
}

.market-card-visual > img.ui-south-sprite,
#marketDetailVisual > img.ui-south-sprite,
#marketCreatePreview > img.ui-south-sprite,
.market-sell-asset img.ui-south-sprite,
.market-own-visual > img.ui-south-sprite {
  transform: scale(1.42);
}

#mailRewardVisual > img.ui-south-sprite { transform: scale(1.28); }

.breeding-parent-sprite.ui-south-sprite,
.breeding-candidate img.ui-south-sprite { transform: scale(1.24); }

#breedingResultPortrait img.ui-south-sprite {
  width: 218px;
  height: 206px;
}

.trade-sluma-option img.ui-south-sprite,
.trade-offer-sluma-portrait img.ui-south-sprite,
.trade-tooltip-portrait img.ui-south-sprite {
  transform: scale(1.28);
}

/* ══════════════════════════════════════════════════════════════════════════
   TAMER PROFILE DOSSIER — unified private/public presentation
   ══════════════════════════════════════════════════════════════════════════ */
#profileHudOverlay,
#viewerProfileOverlay {
  background:
    radial-gradient(circle at 18% 12%, rgba(163, 230, 53, 0.09), transparent 29%),
    radial-gradient(circle at 84% 88%, rgba(234, 179, 8, 0.07), transparent 30%),
    rgba(1, 8, 8, 0.86);
  backdrop-filter: blur(10px) saturate(0.82);
}

#profileHudPanel,
#viewerProfilePanel {
  --profile-green: #a3e635;
  --profile-mint: #4ade80;
  --profile-gold: #facc15;
  --profile-ink: #03100f;
  width: min(920px, 96vw);
  max-height: min(810px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(163, 230, 53, 0.38);
  border-radius: 20px;
  background:
    linear-gradient(rgba(163,230,53,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163,230,53,.018) 1px, transparent 1px),
    linear-gradient(145deg, rgba(5, 25, 22, 0.995), rgba(2, 13, 15, 0.995) 64%, rgba(17, 20, 8, 0.995));
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow:
    0 34px 100px rgba(0,0,0,.82),
    0 0 38px rgba(132,204,22,.08),
    inset 0 1px rgba(255,255,255,.07),
    inset 0 0 80px rgba(0,0,0,.23);
}

#profileHudPanel::after,
#viewerProfilePanel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(190,242,100,.025) 40%, transparent 60%);
  transform: translateX(-100%);
  animation: profilePanelSweep 8s ease-in-out infinite;
}

#profileHudPanel,
#viewerProfilePanel,
#profileAvatarCard,
#viewerProfileAvatarCard {
  position: relative;
}

#profileHudHeader,
#viewerProfileHeader {
  position: relative;
  z-index: 2;
  min-height: 78px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(163,230,53,.23);
  background: linear-gradient(90deg, rgba(77,124,15,.22), rgba(3,18,17,.74) 52%, rgba(113,63,18,.14));
  box-shadow: inset 0 -1px rgba(0,0,0,.32);
}

#profileHudIdentity,
#viewerProfileIdentity,
#profileHudHeaderActions {
  display: flex;
  align-items: center;
}

#profileHudIdentity,
#viewerProfileIdentity { gap: 12px; }
#profileHudHeaderActions { gap: 10px; }

.profile-hud-emblem {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  border: 1px solid rgba(190,242,100,.4);
  border-radius: 14px;
  background: radial-gradient(circle, rgba(163,230,53,.18), rgba(20,83,45,.08) 58%, rgba(2,14,14,.84));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 22px rgba(132,204,22,.1);
  transform: rotate(45deg);
}

.profile-hud-emblem img {
  width: 39px;
  height: 39px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.5));
  transform: rotate(-45deg);
}

.profile-hud-heading-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-hud-heading-copy small,
.profile-card-kicker,
.profile-identity-label,
.profile-exp-heading,
.profile-section-heading small {
  font: 700 7px/1.2 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: 1.1px;
}

.profile-hud-heading-copy small { color: #bef264; }
#profileHudTitle,
#viewerProfileTitle {
  color: #f8fafc;
  font: 800 17px/1.1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .5px;
  text-shadow: 0 4px 12px rgba(0,0,0,.7);
  text-transform: uppercase;
}
.profile-hud-heading-copy p { margin: 0; color: #76938d; font-size: 10px; }

.profile-network-status {
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(74,222,128,.2);
  border-radius: 999px;
  background: rgba(34,197,94,.07);
  color: #86efac;
  font: 700 6px/1 var(--font-game, monospace);
  letter-spacing: .6px;
}
.profile-network-status i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 9px #4ade80; animation: profileOnlinePulse 1.8s ease-in-out infinite; }

#profileHudClose,
#viewerProfileClose {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  transition: .16s ease;
}
#profileHudClose:hover,
#viewerProfileClose:hover { border-color: rgba(248,113,113,.5); background: rgba(127,29,29,.25); color: #fecaca; transform: rotate(4deg); }

#profileHudBody,
#viewerProfileContent {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(300px, .86fr) minmax(380px, 1.14fr);
  grid-template-areas:
    'identity collection'
    'team team';
  gap: 13px;
  padding: 14px;
}

#profileHudBody { overflow-y: auto; }
#profileLeftCol,
#profileRightCol,
#viewerProfileLeftCol,
#viewerProfileRightCol { display: contents; }

#profileAvatarCard,
#viewerProfileAvatarCard { grid-area: identity; }
#profileCollectionCard,
#viewerProfileCollectionCard { grid-area: collection; }
#profileEquipCard,
#viewerProfileSlumasSection { grid-area: team; }
#profileHudBody {
  grid-template-areas:
    'identity collection'
    'team team';
}

#profileTitlesOpenBtn {
  min-width: 88px;
  height: 38px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(56, 189, 248, .32);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(14, 116, 144, .22), rgba(15, 23, 42, .75));
  color: #bae6fd;
  font: 700 7px/1 var(--font-game, monospace);
  text-transform: uppercase;
  cursor: pointer;
  transition: .16s ease;
}

#profileTitlesOpenBtn span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(56, 189, 248, .14);
  color: #67e8f9;
}

#profileTitlesOpenBtn:hover {
  border-color: rgba(103, 232, 249, .7);
  box-shadow: 0 0 18px rgba(34, 211, 238, .14);
  transform: translateY(-1px);
}

#profileTitlesHudOverlay {
  position: absolute;
  inset: 0;
  z-index: 72;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at 20% 15%, rgba(56, 189, 248, .1), transparent 30%),
    rgba(1, 8, 10, .9);
  backdrop-filter: blur(11px);
}

#profileTitlesHudPanel {
  width: min(980px, 96vw);
  height: min(760px, 92vh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, .38);
  border-radius: 18px;
  background:
    linear-gradient(rgba(56,189,248,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.025) 1px, transparent 1px),
    linear-gradient(145deg, rgba(4, 24, 27, .99), rgba(5, 12, 24, .99));
  background-size: 32px 32px, 32px 32px, auto;
  box-shadow: 0 35px 100px rgba(0,0,0,.82), 0 0 42px rgba(14,165,233,.1);
}

#profileTitlesHudHeader {
  min-height: 82px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(56, 189, 248, .18);
  background: linear-gradient(90deg, rgba(8, 145, 178, .14), transparent 65%);
}

.titles-hud-heading { display: flex; align-items: center; gap: 13px; }
.titles-hud-emblem {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103,232,249,.45);
  border-radius: 13px;
  background: rgba(14,116,144,.18);
  color: #67e8f9;
  font: 800 14px/1 var(--font-game, monospace);
  box-shadow: inset 0 0 18px rgba(34,211,238,.09);
}
.titles-hud-heading small { color: #67e8f9; font: 700 7px/1 var(--font-game, monospace); letter-spacing: 1px; }
.titles-hud-heading h3 { margin: 5px 0 3px; color: #f8fafc; font: 800 17px/1 var(--font-game, monospace); text-transform: uppercase; }
.titles-hud-heading p { margin: 0; color: #789196; font-size: 10px; }

#profileTitlesHudClose {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #94a3b8;
  font-size: 22px;
  cursor: pointer;
}

#profileTitlesProgressBar {
  min-height: 44px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(56,189,248,.12);
  background: rgba(2, 15, 21, .74);
  color: #8ca5aa;
  font: 700 7px/1.4 var(--font-game, monospace);
}
#profileTitlesUnlockedSummary { color: #67e8f9; }

#profileTitlesHudPanel #profileTitlesList {
  padding: 14px 18px 22px;
  display: block;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,.34) transparent;
}

.profile-title-category { margin-bottom: 18px; }
.profile-title-category-heading {
  margin-bottom: 8px;
  padding-bottom: 7px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(148,163,184,.1);
}
.profile-title-category-heading strong { color: #dff7fa; font: 800 9px/1 var(--font-game, monospace); text-transform: uppercase; }
.profile-title-category-heading span { color: #5f7c82; font-size: 9px; }
.profile-title-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

#profileTitlesHudFooter {
  min-height: 58px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(56,189,248,.14);
  background: rgba(2, 12, 18, .94);
  color: #71898e;
  font-size: 10px;
}
#profileTitlesHudFooter .profile-title-unequip { width: auto; min-width: 180px; margin: 0; }

@media (max-width: 720px) {
  .profile-title-category-grid { grid-template-columns: 1fr; }
  #profileTitlesProgressBar,
  #profileTitlesHudFooter { align-items: flex-start; flex-direction: column; }
  #profileTitlesHudFooter .profile-title-unequip { width: 100%; }
}

#profileAvatarCard,
#viewerProfileAvatarCard,
#profileCollectionCard,
#viewerProfileCollectionCard,
#profileEquipCard,
#viewerProfileSlumasSection,
#viewerMicroPassivesSection {
  overflow: hidden;
  border: 1px solid rgba(163,230,53,.15);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(9,30,26,.88), rgba(2,14,16,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 14px 30px rgba(0,0,0,.17);
}

#profileAvatarCard,
#viewerProfileAvatarCard {
  min-height: 248px;
  padding: 16px;
  gap: 13px;
  background:
    radial-gradient(circle at 17% 30%, rgba(163,230,53,.12), transparent 36%),
    linear-gradient(145deg, rgba(10,38,28,.95), rgba(3,17,18,.93));
}

#profileAvatarCard::before,
#viewerProfileAvatarCard::before {
  inset: auto -35px -70px auto;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(163,230,53,.06);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 18px, rgba(163,230,53,.025) 19px 20px);
}

.profile-card-kicker { position: relative; z-index: 2; color: #bef264; }
#profileAvatarBadge,
#viewerProfileAvatarBadge { position: relative; z-index: 2; gap: 15px; }

#profileAvatarWrap,
#viewerProfileAvatarWrap {
  width: 102px;
  height: 102px;
  flex: 0 0 102px;
  overflow: hidden;
  border: 1px solid rgba(190,242,100,.38);
  border-radius: 24px;
  background: radial-gradient(circle, rgba(132,204,22,.15), rgba(2,13,16,.86) 68%);
  box-shadow: inset 0 0 24px rgba(163,230,53,.06), 0 15px 28px rgba(0,0,0,.32);
}

.profile-avatar-orbit {
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px dashed rgba(190,242,100,.22);
  border-radius: 50%;
  animation: profileOrbit 12s linear infinite;
}

#profileAvatarSprite,
#viewerProfileAvatarSprite {
  position: relative;
  z-index: 1;
  width: 142%;
  height: 142%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 9px rgba(0,0,0,.56));
}

#profileAvatarFallback,
#viewerProfileAvatarFallback { position: relative; z-index: 1; width: 58px; height: 58px; }
.profile-avatar-presence { position: absolute; z-index: 3; right: 8px; bottom: 8px; width: 11px; height: 11px; border: 2px solid #071715; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }

#profileAvatarIdentityCopy,
#viewerProfileAvatarIdentityCopy { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.profile-identity-label { color: #6b8c83; }
.profile-identity-subtitle { color: #8fa7a0; font-size: 10px; }
#profileNameRow,
#viewerProfileNameRow { flex-wrap: wrap; align-items: center; gap: 7px; }
#profileUsername,
#viewerProfileUsername { max-width: 100%; overflow: hidden; color: #fff; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; text-shadow: 0 3px 10px #000; }
#profilePlayerLevel,
#viewerProfilePlayerLevel { border-color: rgba(190,242,100,.3); background: rgba(132,204,22,.1); color: #bef264; }

#profileExpSection,
#viewerProfileExpSection { position: relative; z-index: 2; gap: 6px; }
.profile-exp-heading { display: flex; justify-content: space-between; color: #78948c; }
.profile-exp-heading b { color: #bef264; font: inherit; }
#profilePlayerExpBar,
#viewerProfileExpBar { height: 10px; border: 1px solid rgba(163,230,53,.14); border-radius: 999px; background: rgba(0,0,0,.3); box-shadow: inset 0 2px 5px rgba(0,0,0,.4); }
#profilePlayerExpFill,
#viewerProfileExpFill { background: linear-gradient(90deg, #22c55e, #a3e635 72%, #fde047); box-shadow: 0 0 11px rgba(163,230,53,.33); }
#profilePlayerExpText,
#viewerProfileExpText { color: #8ca49e; font-size: 7px; }

.profile-account-meta { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 5px; }
#profileCreatedRow,
#profilePlaytimeRow,
#viewerProfileCreatedRow,
#viewerProfilePlaytimeRow { min-height: 30px; padding: 5px 8px; border: 1px solid rgba(148,163,184,.08); border-radius: 8px; background: rgba(0,0,0,.16); }
.profile-info-icon { width: 22px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgba(163,230,53,.08); color: #a3e635; font: 700 6px/1 var(--font-game, monospace); }
#profileCreatedAt,
#profilePlayTime,
#viewerProfileCreatedAt,
#viewerProfilePlayTime { color: #d8e2df; }

#profileCollectionCard,
#viewerProfileCollectionCard,
#profileEquipCard,
#viewerProfileSlumasSection { padding: 14px; gap: 11px; }

.profile-section-heading {
  min-height: 38px;
  padding-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(163,230,53,.12);
}
.profile-section-heading > span { display: flex; flex-direction: column; gap: 4px; color: #f8fafc; font: 800 10px/1.2 var(--font-game, monospace); text-transform: uppercase; }
.profile-section-heading small { color: #7ca08f; }
.profile-section-heading > b { padding: 5px 7px; border: 1px solid rgba(163,230,53,.17); border-radius: 6px; background: rgba(132,204,22,.06); color: #a3e635; font: 700 6px/1 var(--font-game, monospace); }

#profileCollectionGrid,
#viewerProfileCollectionGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#profileCollectionGrid .pcol-item,
#viewerProfileCollectionGrid .pcol-item {
  min-height: 76px;
  padding: 9px;
  justify-content: center;
  border-color: rgba(148,163,184,.1);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(0,0,0,.12));
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
#profileCollectionGrid .pcol-item:hover,
#viewerProfileCollectionGrid .pcol-item:hover { transform: translateY(-2px); border-color: rgba(163,230,53,.25); background: rgba(132,204,22,.055); }
.pcol-icon { color: #a3e635; filter: drop-shadow(0 0 6px rgba(163,230,53,.2)); }
.pcol-label { color: #718b84; font-size: 8px; }
.pcol-val { color: #f8fafc; font-size: 10px; }
.pcol-shiny .pcol-val { color: #fde047; }
.pcol-ultra .pcol-val { color: #d8b4fe; }
.pcol-money .pcol-val { color: #facc15; }
.pcol-dex .pcol-val,
.pcol-level .pcol-val { color: #86efac; }

/* =====================================================
   AUDIO OPTIONS
   ===================================================== */
.audio-options-nav-btn {
  position: relative;
  overflow: hidden;
  border-color: rgba(94,234,212,.38) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(45,212,191,.15), transparent 62%),
    linear-gradient(145deg, rgba(8,47,43,.92), rgba(2,20,24,.98)) !important;
  box-shadow: inset 0 0 16px rgba(45,212,191,.07), 0 0 12px rgba(45,212,191,.08);
}
.audio-options-nav-btn:hover {
  border-color: rgba(94,234,212,.78) !important;
  box-shadow: inset 0 0 19px rgba(45,212,191,.12), 0 0 18px rgba(45,212,191,.22) !important;
}
.audio-options-glyph {
  width: 27px;
  height: 25px;
  position: relative;
  display: block;
}
.audio-options-glyph i {
  position: absolute;
  left: 2px;
  width: 23px;
  height: 2px;
  border-radius: 999px;
  background: #99f6e4;
  box-shadow: 0 0 8px rgba(94,234,212,.7);
}
.audio-options-glyph i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 2px solid #052e2b;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 7px #2dd4bf;
  transform: translateY(-50%);
}
.audio-options-glyph i:nth-child(1) { top: 4px; }
.audio-options-glyph i:nth-child(1)::after { left: 4px; }
.audio-options-glyph i:nth-child(2) { top: 12px; }
.audio-options-glyph i:nth-child(2)::after { right: 3px; }
.audio-options-glyph i:nth-child(3) { top: 20px; }
.audio-options-glyph i:nth-child(3)::after { left: 9px; }

#audioOptionsOverlay {
  position: fixed;
  inset: 0;
  z-index: 18050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(13,148,136,.13), transparent 44%),
    rgba(0,8,10,.78);
  backdrop-filter: blur(10px) saturate(.75);
  animation: audioOverlayIn .18s ease-out both;
}
#audioOptionsPanel {
  width: min(580px, calc(100vw - 34px));
  overflow: hidden;
  border: 1px solid rgba(94,234,212,.38);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(8,40,36,.98), rgba(4,18,25,.99) 55%, rgba(10,25,37,.99));
  box-shadow:
    0 28px 80px rgba(0,0,0,.72),
    0 0 0 1px rgba(20,184,166,.08),
    0 0 44px rgba(13,148,136,.13);
  color: #e6fffb;
  animation: audioPanelIn .24s cubic-bezier(.2,.8,.2,1) both;
}
.audio-options-header {
  min-height: 112px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 58px 1fr 38px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid rgba(94,234,212,.2);
  background:
    linear-gradient(90deg, rgba(20,184,166,.11), transparent 62%),
    repeating-linear-gradient(90deg, transparent 0 29px, rgba(94,234,212,.025) 30px);
}
.audio-options-emblem {
  width: 56px;
  height: 56px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(94,234,212,.4);
  border-radius: 16px;
  background: rgba(15,118,110,.17);
  box-shadow: inset 0 0 20px rgba(45,212,191,.1), 0 0 20px rgba(13,148,136,.12);
  transform: rotate(45deg);
}
.audio-options-emblem span {
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(#ccfbf1, #2dd4bf);
  box-shadow: 0 0 7px #2dd4bf;
  animation: audioBar 1.05s ease-in-out infinite alternate;
  transform: rotate(-45deg);
}
.audio-options-emblem span:nth-child(1) { height: 13px; }
.audio-options-emblem span:nth-child(2) { height: 25px; animation-delay: -.35s; }
.audio-options-emblem span:nth-child(3) { height: 18px; animation-delay: -.7s; }
.audio-options-header small,
.audio-now-playing small {
  display: block;
  margin-bottom: 6px;
  color: #5eead4;
  font: 700 7px/1 var(--font-game, monospace);
  letter-spacing: 1.2px;
}
.audio-options-header h2 {
  margin: 0;
  color: #f0fdfa;
  font: 800 18px/1.2 var(--font-game, monospace);
  text-shadow: 0 4px 18px rgba(45,212,191,.24);
}
.audio-options-header p {
  margin: 7px 0 0;
  color: #82a8a4;
  font-size: 11px;
}
#audioOptionsClose {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 11px;
  background: rgba(15,23,42,.58);
  color: #94a3b8;
  font: 400 23px/1 sans-serif;
  cursor: pointer;
  transition: .16s ease;
}
#audioOptionsClose:hover {
  border-color: rgba(251,113,133,.52);
  background: rgba(127,29,29,.24);
  color: #fecdd3;
  transform: rotate(4deg);
}
.audio-options-body {
  padding: 20px 24px 24px;
  display: grid;
  gap: 13px;
}
.audio-now-playing {
  min-height: 62px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(94,234,212,.16);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(15,118,110,.16), rgba(2,6,23,.18));
}
.audio-now-playing strong {
  color: #f0fdfa;
  font: 700 10px/1.4 var(--font-game, monospace);
}
.audio-equalizer {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.audio-equalizer i {
  width: 3px;
  height: 8px;
  border-radius: 99px;
  background: #5eead4;
  box-shadow: 0 0 6px rgba(45,212,191,.8);
  animation: audioEqualizer .8s ease-in-out infinite alternate;
}
.audio-equalizer i:nth-child(2) { animation-delay: -.55s; }
.audio-equalizer i:nth-child(3) { animation-delay: -.25s; }
.audio-equalizer i:nth-child(4) { animation-delay: -.7s; }
.audio-channel-card {
  padding: 16px;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15,36,42,.72), rgba(3,15,23,.72));
  box-shadow: inset 0 1px rgba(255,255,255,.02);
}
.audio-channel-heading {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
}
.audio-channel-heading strong {
  display: block;
  margin-bottom: 4px;
  color: #f8fafc;
  font: 700 10px/1.2 var(--font-game, monospace);
}
.audio-channel-heading small { color: #718e90; font-size: 10px; }
.audio-channel-heading > b {
  min-width: 47px;
  color: #99f6e4;
  font: 700 9px/1 var(--font-game, monospace);
  text-align: right;
}
.audio-channel-icon {
  width: 39px;
  height: 39px;
  position: relative;
  display: block;
  border: 1px solid rgba(94,234,212,.22);
  border-radius: 11px;
  background: rgba(13,148,136,.1);
}
.audio-channel-icon.is-music::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 9px;
  width: 11px;
  height: 15px;
  border-top: 3px solid #5eead4;
  border-right: 3px solid #5eead4;
  transform: skewY(-13deg);
}
.audio-channel-icon.is-music::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 8px;
  height: 6px;
  border-radius: 50%;
  background: #99f6e4;
  box-shadow: 13px -3px 0 #99f6e4, 0 0 8px rgba(45,212,191,.7);
}
.audio-channel-icon.is-sfx::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 13px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 9px solid #5eead4;
}
.audio-channel-icon.is-sfx::after {
  content: ")))";
  position: absolute;
  left: 20px;
  top: 12px;
  color: #99f6e4;
  font: 700 10px/1 sans-serif;
  letter-spacing: -2px;
}
.audio-volume-range {
  width: 100%;
  height: 24px;
  margin: 13px 0 7px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.audio-volume-range::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgba(94,234,212,.15);
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(20,184,166,.5), rgba(15,23,42,.8));
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.audio-volume-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  appearance: none;
  border: 3px solid #042f2e;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 1px #2dd4bf, 0 0 13px rgba(45,212,191,.62);
}
.audio-channel-actions {
  display: flex;
  gap: 8px;
}
.audio-channel-toggle,
.audio-test-btn {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(94,234,212,.2);
  border-radius: 8px;
  background: rgba(13,148,136,.09);
  color: #99f6e4;
  font: 700 7px/1 var(--font-game, monospace);
  cursor: pointer;
  transition: .15s ease;
}
.audio-channel-actions .audio-channel-toggle { flex: 1; }
.audio-channel-toggle:hover,
.audio-test-btn:hover {
  border-color: rgba(94,234,212,.58);
  background: rgba(13,148,136,.18);
  color: #f0fdfa;
  transform: translateY(-1px);
}
.audio-channel-toggle.is-muted {
  border-color: rgba(251,113,133,.24);
  background: rgba(127,29,29,.12);
  color: #fda4af;
}
.audio-test-btn {
  border-color: rgba(96,165,250,.25);
  background: rgba(30,64,175,.12);
  color: #93c5fd;
}
.audio-options-footer {
  min-height: 45px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid rgba(94,234,212,.11);
  background: rgba(0,0,0,.14);
  color: #607e7d;
  font-size: 9px;
}
.audio-options-footer i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #10b981;
}
@keyframes audioOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes audioPanelIn {
  from { opacity: 0; transform: translateY(15px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes audioBar {
  from { height: 8px; opacity: .6; }
  to { height: 25px; opacity: 1; }
}
@keyframes audioEqualizer {
  from { height: 7px; opacity: .55; }
  to { height: 25px; opacity: 1; }
}
@media (max-width: 640px) {
  #audioOptionsOverlay { padding: 10px; }
  .audio-options-header { padding: 18px; grid-template-columns: 48px 1fr 34px; gap: 11px; }
  .audio-options-emblem { width: 46px; height: 46px; border-radius: 13px; }
  .audio-options-header h2 { font-size: 13px; }
  .audio-options-header p { font-size: 9px; }
  .audio-options-body { padding: 14px; }
}

#profileEquipList,
#viewerProfileSlumasList { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.profile-equip-row {
  --profile-sluma-color: #a3e635;
  position: relative;
  min-width: 0;
  min-height: 104px;
  padding: 10px;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr);
  grid-template-rows: 1fr auto;
  gap: 6px 9px;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--profile-sluma-color) 27%, rgba(148,163,184,.1));
  border-radius: 12px;
  background:
    radial-gradient(circle at 17% 42%, color-mix(in srgb, var(--profile-sluma-color) 11%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(9,27,25,.9), rgba(2,13,16,.92));
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}
.profile-equip-row:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--profile-sluma-color) 56%, #475569); box-shadow: 0 12px 25px rgba(0,0,0,.27); }
.profile-equip-row.is-empty { opacity: .48; border-style: dashed; background: rgba(0,0,0,.12); }
.profile-equip-slot { position: absolute; top: 7px; left: 7px; z-index: 2; color: color-mix(in srgb, var(--profile-sluma-color) 72%, #94a3b8); font: 700 6px/1 var(--font-game, monospace); }
.profile-equip-portrait { grid-row: 1 / 3; width: 62px; height: 72px; border-color: color-mix(in srgb, var(--profile-sluma-color) 32%, transparent); border-radius: 11px; background: radial-gradient(circle, color-mix(in srgb, var(--profile-sluma-color) 10%, transparent), rgba(0,0,0,.2) 70%); }
.profile-equip-portrait img.ui-south-sprite { width: 142%; height: 142%; max-width: none; filter: drop-shadow(0 8px 7px rgba(0,0,0,.5)); }
.profile-equip-empty-mark { color: #64748b; font: 500 20px/1 sans-serif; }
.profile-equip-info { align-self: end; gap: 5px; }
.profile-equip-name { overflow: hidden; color: #f8fafc; font: 800 9px/1.25 var(--font-game, monospace); text-overflow: ellipsis; white-space: nowrap; }
.profile-equip-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.profile-equip-level { color: #bef264; font-size: 9px; }
.profile-equip-gender { color: #93c5fd; font-size: 8px; }
.profile-equip-gender.is-female { color: #f9a8d4; }
.profile-equip-gender.is-genderless,
.profile-equip-gender.is-exhausted { color: #fda4af; }
.profile-equip-state { width: fit-content; padding: 3px 5px; border: 1px solid rgba(148,163,184,.14); border-radius: 4px; color: #64748b; font: 700 5px/1 var(--font-game, monospace); }
.profile-equip-state.is-deployed { border-color: rgba(74,222,128,.25); background: rgba(34,197,94,.08); color: #86efac; }
.profile-equip-variant-badge { position: absolute; top: 7px; right: 7px; padding: 3px 5px; font-size: 5px; }

#viewerProfileActions { display: flex; flex-wrap: wrap; gap: 6px; }
#viewerProfileFriendBtn,
#viewerProfileTradeBtn { min-height: 31px; border-radius: 8px; }

#viewerMicroPassivesSection { grid-column: 1 / -1; padding: 13px; }
.viewer-micro-portrait { overflow: hidden; }
.viewer-micro-portrait img.ui-south-sprite { width: 138%; height: 138%; max-width: none; }
.viewer-micro-fallback { width: 27px; height: 27px; border-radius: 50%; box-shadow: 0 0 9px color-mix(in srgb, var(--micro-color) 55%, transparent); }

@keyframes profilePanelSweep {
  0%, 70% { transform: translateX(-105%); }
  88%, 100% { transform: translateX(105%); }
}
@keyframes profileOnlinePulse { 50% { opacity: .42; transform: scale(.76); } }
@keyframes profileOrbit { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .profile-network-status,
  .profile-hud-heading-copy p { display: none; }
  #profileHudPanel,
  #viewerProfilePanel { width: min(620px, 98vw); max-height: 95vh; }
  #profileHudBody,
  #viewerProfileContent {
    grid-template-columns: 1fr;
    grid-template-areas: 'identity' 'collection' 'team';
    padding: 9px;
  }
  #profileEquipList,
  #viewerProfileSlumasList { grid-template-columns: 1fr; }
  .profile-equip-row { min-height: 90px; }
}

@media (max-width: 460px) {
  #profileHudHeader,
  #viewerProfileHeader { min-height: 65px; padding: 8px; }
  .profile-hud-emblem { width: 42px; height: 42px; flex-basis: 42px; }
  .profile-hud-emblem img { width: 32px; height: 32px; }
  #profileHudTitle,
  #viewerProfileTitle { font-size: 11px; }
  #profileAvatarWrap,
  #viewerProfileAvatarWrap { width: 82px; height: 82px; flex-basis: 82px; }
  #profileCollectionGrid,
  #viewerProfileCollectionGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #profileHudPanel::after,
  #viewerProfilePanel::after,
  .profile-avatar-orbit,
  .profile-network-status i { animation: none !important; }
}

/* Timed expedition routes, route resources and permanent Stat Potion upgrades */
#timedRouteHud {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 34;
  min-width: 250px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(125, 211, 252, .48);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(4, 18, 27, .94), rgba(8, 27, 35, .88));
  color: #e0f2fe;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 22px rgba(56, 189, 248, .14);
  transform: translateX(-50%);
  backdrop-filter: blur(9px);
  pointer-events: none;
}
#timedRouteHud::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 12px #38bdf8;
  animation: timedRoutePulse 1.25s ease-in-out infinite;
}
#timedRouteHudState {
  color: #7dd3fc;
  font: 700 6px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .8px;
}
#timedRouteHudName {
  color: #f0f9ff;
  font-size: 11px;
}
#timedRouteHudTimer {
  padding-left: 10px;
  border-left: 1px solid rgba(125, 211, 252, .22);
  color: #bae6fd;
  font: 700 9px/1 var(--font-game, 'Press Start 2P', monospace);
}
@keyframes timedRoutePulse { 50% { opacity: .4; transform: scale(.72); } }

#areaDetailPane {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.area-route-closed {
  color: #fda4af !important;
}
.area-route-closed i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fb7185;
  box-shadow: 0 0 10px rgba(251, 113, 133, .8);
}
#areaDropsCard {
  min-height: 118px;
  padding: 12px 20px 14px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: rgba(2, 13, 14, .34);
}
#areaDropsCard .area-creatures-heading {
  margin-bottom: 9px;
}
#areaDetailDrops {
  max-height: 86px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--detail-rgb), .35) transparent;
}
.area-drop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.area-drop-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 5px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  color: #aebdb6;
  font-size: 9px;
}
.area-drop-chip img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: auto;
}
.area-drop-chip b {
  padding: 3px 4px;
  border-radius: 4px;
  background: rgba(var(--detail-rgb), .16);
  color: var(--detail-accent);
  font: 700 5px/1 var(--font-game, 'Press Start 2P', monospace);
}
.area-drop-chip.is-special {
  border-color: rgba(var(--detail-rgb), .35);
  background: linear-gradient(120deg, rgba(var(--detail-rgb), .10), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 14px rgba(var(--detail-rgb), .045);
}
.area-drop-empty {
  color: #647a70;
  font-size: 10px;
}
#areaGoBtn:disabled {
  transform: none;
  border-color: rgba(251, 113, 133, .24);
  background: rgba(83, 29, 38, .42);
  color: #956d73;
  box-shadow: none;
  cursor: not-allowed;
}

.sluma-stat-upgrade-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(74, 222, 128, .18);
  border-radius: 9px;
  background: linear-gradient(100deg, rgba(34, 197, 94, .08), rgba(6, 18, 17, .45));
}
.sluma-stat-upgrade-summary span {
  color: #86efac;
  font: 700 6px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .6px;
}
.sluma-stat-upgrade-summary strong {
  color: #dcfce7;
  font: 700 8px/1 var(--font-game, 'Press Start 2P', monospace);
}
.sluma-stat-upgrade-summary small {
  grid-column: 1 / -1;
  color: #658078;
  font-size: 8px;
}
.sluma-stat-rarity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sluma-stat-upgrade-btn {
  width: 26px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(74, 222, 128, .45);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(34, 197, 94, .30), rgba(21, 128, 61, .18));
  color: #bbf7d0;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(34, 197, 94, .12);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sluma-stat-upgrade-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #4ade80;
  box-shadow: 0 0 17px rgba(34, 197, 94, .28);
}
.sluma-stat-upgrade-btn:disabled {
  opacity: .28;
  filter: grayscale(1);
  cursor: not-allowed;
  box-shadow: none;
}
#slumaDetailStats > .sluma-stat-card:nth-child(2) { --stat-accent: #fb7185; }
#slumaDetailStats > .sluma-stat-card:nth-child(3) { --stat-accent: #4ade80; }
#slumaDetailStats > .sluma-stat-card:nth-child(4) { --stat-accent: #60a5fa; }
#slumaDetailStats > .sluma-stat-card:nth-child(5) { --stat-accent: #facc15; }

@media (max-width: 680px) {
  #timedRouteHud { top: 7px; min-width: 210px; padding: 8px 10px; }
  #timedRouteHudName { display: none; }
  #areaDetailPane { grid-template-rows: auto auto auto auto; }
  #areaDropsCard { padding: 12px 14px; }
  #areaDetailDrops { max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  #timedRouteHud::before { animation: none !important; }
}

/* =====================================================
   EXPEDITION INTELLIGENCE DECK
   Keeps encounters and route drops readable at every size.
   ===================================================== */
#areaDetailPane {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.area-intel-deck {
  min-height: 0;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  overflow: hidden;
  border-top: 1px solid rgba(var(--detail-rgb), .08);
  background:
    linear-gradient(180deg, rgba(var(--detail-rgb), .035), transparent 62%),
    rgba(2, 13, 14, .36);
}

.area-intel-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
  background: rgba(2, 12, 12, .64);
}

.area-intel-tab {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  padding: 6px 10px 6px 7px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 10px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008));
  color: #80938a;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.area-intel-tab::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--detail-accent);
  box-shadow: 0 0 10px var(--detail-accent);
  opacity: 0;
  transform: scaleX(.25);
  transition: opacity .2s ease, transform .24s ease;
}

.area-intel-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--detail-rgb), .25);
  background: rgba(var(--detail-rgb), .055);
}

.area-intel-tab.is-active {
  border-color: rgba(var(--detail-rgb), .38);
  background: linear-gradient(120deg, rgba(var(--detail-rgb), .14), rgba(var(--detail-rgb), .045));
  color: #dce8e1;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 6px 16px rgba(0, 0, 0, .17);
}

.area-intel-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.area-intel-tab:focus-visible {
  outline: 2px solid var(--detail-accent);
  outline-offset: 1px;
}

.area-intel-tab > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.area-intel-tab small {
  overflow: hidden;
  color: #637970;
  font: 700 5px/1 var(--font-game, 'Press Start 2P', monospace);
  letter-spacing: .7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.area-intel-tab strong {
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.area-intel-tab > b {
  min-width: 25px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 1px solid rgba(var(--detail-rgb), .18);
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  color: #789087;
  font: 700 7px/1 var(--font-game, 'Press Start 2P', monospace);
}

.area-intel-tab.is-active > b {
  border-color: rgba(var(--detail-rgb), .34);
  background: rgba(var(--detail-rgb), .12);
  color: var(--detail-accent);
}

.area-intel-tab-icon {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  border: 1px solid rgba(var(--detail-rgb), .22);
  border-radius: 9px;
  background: radial-gradient(circle, rgba(var(--detail-rgb), .14), rgba(0, 0, 0, .12));
}

.area-intel-tab-icon-wildlife::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 11px;
  width: 9px;
  height: 8px;
  border-radius: 50% 50% 45% 45%;
  background: currentColor;
  box-shadow:
    -5px -5px 0 -2px currentColor,
    0 -7px 0 -2px currentColor,
    5px -5px 0 -2px currentColor;
}

.area-intel-tab-icon-drops::before,
.area-intel-tab-icon-drops::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 7px;
  width: 12px;
  height: 14px;
  border: 2px solid currentColor;
  transform: rotate(45deg);
}

.area-intel-tab-icon-drops::after {
  left: 12px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-width: 1px;
  opacity: .55;
}

.area-intel-panel {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  animation: areaIntelPanelIn .24s ease-out both;
}

.area-intel-panel[hidden] {
  display: none !important;
}

#areaCreaturesCard {
  min-height: 0;
  display: block;
  padding: 11px 14px 13px;
  overflow: hidden;
  border: 0;
  background: transparent;
}

#areaDetailCreatures {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--detail-rgb), .42) transparent;
}

#areaDetailCreatures::-webkit-scrollbar,
#areaDetailDrops::-webkit-scrollbar {
  width: 6px;
}

#areaDetailCreatures::-webkit-scrollbar-thumb,
#areaDetailDrops::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--detail-rgb), .34);
}

#areaCreaturesCard .area-sluma-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
}

#areaCreaturesCard .area-sluma-item {
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 8px;
  min-height: 57px;
  padding: 6px 9px 6px 6px;
  border-radius: 10px;
}

#areaCreaturesCard .area-sluma-portrait {
  width: 43px;
  height: 43px;
  border-radius: 8px;
}

#areaCreaturesCard .area-sluma-sprite {
  width: 38px;
  height: 38px;
}

#areaCreaturesCard .area-sluma-title {
  gap: 3px;
}

#areaCreaturesCard .area-sluma-name {
  font-size: 10px;
}

#areaCreaturesCard .area-sluma-rate {
  font-size: 9px;
}

#areaCreaturesCard .area-sluma-chance small {
  font-size: 7px;
}

#areaDropsCard {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px 14px 13px;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.area-intel-panel-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.area-intel-panel-note span {
  color: #82968d;
  font-size: 9px;
  font-weight: 700;
}

.area-intel-panel-note small {
  color: #52675e;
  font-size: 8px;
}

#areaDetailDrops {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--detail-rgb), .38) transparent;
}

#areaDropsCard .area-drop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  align-content: start;
  gap: 7px;
}

#areaDropsCard .area-drop-chip {
  min-width: 0;
  min-height: 38px;
  padding: 6px 8px 6px 6px;
  border-radius: 9px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

#areaDropsCard .area-drop-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--detail-rgb), .27);
  background: rgba(var(--detail-rgb), .06);
}

#areaDropsCard .area-drop-chip img {
  width: 25px;
  height: 25px;
}

#areaDropsCard .area-drop-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes areaIntelPanelIn {
  from { opacity: 0; transform: translateY(6px); }
}

@media (max-width: 900px) {
  .area-intel-tabs { padding-inline: 10px; }
  .area-intel-tab { grid-template-columns: 27px minmax(0, 1fr) auto; gap: 7px; padding-inline: 6px; }
  .area-intel-tab-icon { width: 27px; height: 27px; }
  #areaCreaturesCard .area-sluma-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  #areaDetailPane { grid-template-rows: auto auto auto; }
  .area-intel-deck { height: min(420px, 52vh); min-height: 320px; }
  .area-intel-tab small { display: none; }
  .area-intel-tab strong { font-size: 9px; }
  #areaCreaturesCard,
  #areaDropsCard { padding: 10px 11px 12px; }
  #areaDetailDrops { max-height: none; overflow-y: auto; }
  .area-intel-panel-note { align-items: flex-start; flex-direction: column; gap: 2px; }
  #areaDropsCard .area-drop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .area-intel-panel { animation: none !important; }
}