/* ── Screens ────────────────────────────────────────────────────────────────── */
.screen { display: none; transition: opacity 0.15s ease; }
.screen.active { display: block; }
#screen-game.active { display: flex; flex-direction: column; }

/* ── Loading Spinner ───────────────────────────────────────────────────────── */
.screen-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; color: var(--text-dim);
  font-family: 'Crimson Pro', serif; font-size: 14px; gap: 10px;
}
.screen-loading::before {
  content: ''; width: 20px; height: 20px; border: 2px solid rgba(201,168,76,0.3);
  border-top-color: var(--gold); border-radius: 50%;
  animation: screenSpin 0.6s linear infinite;
}
@keyframes screenSpin { to { transform: rotate(360deg); } }

/* ── Nav active link underline ─────────────────────────────────────────────── */
#nav-game-links .nav-link.active::after { width: 100%; }

/* ── Empty State ───────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center; gap: 12px;
}
.empty-state-icon { font-size: 40px; opacity: 0.4; }
.empty-state-msg {
  font-family: 'Crimson Pro', serif; font-size: 15px; color: var(--text-dim);
  max-width: 300px; line-height: 1.5;
}

/* ── Nav Additions ───────────────────────────────────────────────────────────── */
#nav-logged-in  { display: none; align-items: center; gap: 1rem; }
#nav-logged-out { display: flex; }
#nav-game-links { display: none; gap: 1.2rem; list-style: none; }
#nav-landing-links { display: none; }
#nav-game-links.nav-active { display: flex; }
#nav-landing-links.nav-active { display: flex; }
#nav-game-links .nav-link { color: var(--text-dim); text-decoration: none; font-size: 0.68rem;
  letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: color 0.2s; }
#nav-game-links .nav-link:hover, #nav-game-links .nav-link.active { color: var(--gold); }
.nav-user-info { display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem;
  color: var(--text-dim); letter-spacing: 0.08em; }
#nav-gold  { color: var(--gold); font-weight: 700; }
#nav-level { color: var(--teal); }
.nav-logout-btn { background: none; border: 1px solid rgba(240,192,64,0.25); color: var(--text-dim);
  font-family: Arial, sans-serif; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 2px; cursor: pointer; transition: all 0.2s; }
.nav-logout-btn:hover { border-color: var(--gold); color: var(--gold); }
.nav-help-btn { background: none; border: 1px solid rgba(201,168,76,0.3); color: var(--gold);
  font-family: 'Cinzel', serif; font-size: 0.75rem; font-weight: 700;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; padding: 0; }
.nav-help-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); }

/* ── Payment Method Form ────────────────────────────────────────────────────── */
.billing-divider {
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold); margin: 16px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(201,168,76,0.15);
}
.field-req { color: #e04020; font-size: 0.8em; }
.form-errors { margin: 8px 0; }
.form-error-line {
  font-size: 11px; color: #e04020; padding: 2px 0;
  font-family: 'Crimson Pro', serif;
}

/* ── Invoice Modal ──────────────────────────────────────────────────────────── */
.inv-modal-invoice-wrap {
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.5);
  border-radius: 12px;
  padding: 28px;
  max-width: 700px;
  width: 94%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.inv-modal-invoice { font-family: 'Crimson Pro', Georgia, serif; }
.inv-modal-invoice-wrap::-webkit-scrollbar { width: 4px; }
.inv-modal-invoice-wrap::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); border-radius: 2px; }

/* ── Nav Currency Buttons ───────────────────────────────────────────────────── */
.nav-currency {
  cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  position: relative;
}
.nav-currency:hover {
  color: var(--gold) !important;
  text-shadow: 0 0 8px rgba(201,168,76,0.4);
}

/* ── Gold Display ───────────────────────────────────────────────────────────── */
.gold-icon { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
.gold-display { display: inline-flex; align-items: center; gap: 3px; color: #c9a84c; font-weight: 600; }
.gold-amount { color: #c9a84c; }

/* ── Tutorial Overlay ────────────────────────────────────────────────────────── */
/* Guide popup modal — non-blocking, closeable */
.gp-box {
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 92%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.gp-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.gp-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.gp-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,168,76,0.1);
  border-radius: 6px;
}

.gp-step-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.gp-step-title {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  color: #e8dcc8;
  font-weight: 600;
  margin-bottom: 2px;
}

.gp-step-text {
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
  color: #9a8e7a;
  line-height: 1.4;
}

.gp-actions { text-align: center; }

.tutorial-overlay { position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,0.7); }
.tutorial-tooltip { position: fixed; z-index: 100001;
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.5); border-radius: 10px;
  padding: 20px; max-width: 320px; width: 90%;
  box-shadow: 0 12px 48px rgba(0,0,0,0.8), 0 0 20px rgba(201,168,76,0.15);
  animation: tutorialPop 0.3s ease-out; }
.tutorial-offer-box { position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 100001;
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.5); border-radius: 12px;
  padding: 28px; max-width: 380px; width: 90%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  animation: tutorialPop 0.4s ease-out; }
@keyframes tutorialPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.tutorial-offer-box { animation: tutorialOfferPop 0.4s ease-out; }
@keyframes tutorialOfferPop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.tutorial-step-num { font-family: 'Crimson Pro', serif; font-size: 10px;
  color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.tutorial-title { font-family: 'Cinzel', serif; font-size: 16px;
  color: var(--gold); letter-spacing: 1px; margin-bottom: 6px; }
.tutorial-text { font-family: 'Crimson Pro', serif; font-size: 14px;
  color: var(--text); line-height: 1.5; margin-bottom: 16px; }
.tutorial-btns { display: flex; gap: 10px; justify-content: flex-end; }
.tutorial-skip { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
  color: var(--text-dim); background: transparent; border: 1px solid rgba(201,168,76,0.2);
  padding: 6px 16px; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.tutorial-skip:hover { border-color: var(--text-dim); color: var(--text); }
.tutorial-next { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
  color: #1a1208; background: var(--gold); border: none;
  padding: 6px 20px; border-radius: 4px; cursor: pointer; font-weight: 700;
  transition: all 0.2s; }
.tutorial-next:hover { background: #ffe080; }
.tutorial-highlight { position: relative; z-index: 100001 !important;
  box-shadow: 0 0 0 4px rgba(201,168,76,0.6), 0 0 20px rgba(201,168,76,0.3) !important;
  border-radius: 8px; }

/* ── In-Game Hints ──────────────────────────────────────────────────────────── */
.game-hint {
  position: absolute;
  bottom: 200px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 12px rgba(201,168,76,0.1);
  display: flex; align-items: flex-start; gap: 10px;
  animation: hintSlideIn 0.3s ease-out;
  pointer-events: auto;
}
.game-hint-text {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.game-hint-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 14px; cursor: pointer; flex-shrink: 0; padding: 0 2px;
  transition: color 0.2s;
}
.game-hint-close:hover { color: var(--gold); }
@keyframes hintSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Guide / Tome ──────────────────────────────────────────────────────────── */
.guide-tome {
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.5);
  border-radius: 12px;
  padding: 28px;
  max-width: 560px;
  width: 94%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 20px rgba(201,168,76,0.1);
}
.guide-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.3rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}
.guide-section { margin-bottom: 20px; }
.guide-heading {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.guide-entry {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  padding: 3px 0;
}
.guide-entry strong { color: var(--gold); }
.guide-tome::-webkit-scrollbar { width: 4px; }
.guide-tome::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); border-radius: 2px; }

/* ── Persistent Help Button ────────────────────────────────────────────────── */
.guide-help-btn {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 9000;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(160deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.4);
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 10px rgba(201,168,76,0.1);
  transition: all 0.2s ease;
}
.guide-help-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 16px rgba(201,168,76,0.3);
  transform: scale(1.1);
}

/* ── Level Up Modal ──────────────────────────────────────────────────────────── */
.lu-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  animation: luFadeIn 0.3s ease-out;
}
@keyframes luFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lu-box {
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.6);
  border-radius: 16px;
  padding: 32px 40px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(201,168,76,0.15);
  animation: luBoxPop 0.4s ease-out;
}
@keyframes luBoxPop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.lu-particles {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,168,76,0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(201,168,76,0.1) 0%, transparent 35%);
}
.lu-level-number {
  font-family: 'Cinzel Decorative', serif;
  font-size: 64px;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(201,168,76,0.6), 0 0 40px rgba(201,168,76,0.3), 0 2px 4px rgba(0,0,0,0.8);
  line-height: 1;
  margin-bottom: 4px;
  animation: luNumGlow 2s ease-in-out infinite;
}
@keyframes luNumGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(201,168,76,0.5), 0 0 40px rgba(201,168,76,0.2), 0 2px 4px rgba(0,0,0,0.8); }
  50% { text-shadow: 0 0 30px rgba(201,168,76,0.8), 0 0 60px rgba(201,168,76,0.4), 0 2px 4px rgba(0,0,0,0.8); }
}
.lu-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.3rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}
.lu-subtitle {
  font-family: 'Crimson Pro', serif;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.lu-rewards {
  text-align: left;
  margin-bottom: 20px;
}
.lu-level-group {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.lu-level-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.lu-reward-item {
  font-family: 'Crimson Pro', serif;
  font-size: 13px;
  color: var(--text);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lu-reward-icon {
  font-size: 16px;
}
.lu-close-btn {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1208;
  background: var(--gold);
  border: none;
  padding: 10px 32px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s;
}
.lu-close-btn:hover { background: #ffe080; }

/* ── Inventory Popup ─────────────────────────────────────────────────────────── */
#inventory-popup {
  position: absolute; top: 100%; right: 0; z-index: 300;
  width: 480px; max-height: 560px; overflow-y: auto;
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 1px solid rgba(201,168,76,0.4); border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.8);
  padding: 14px; margin-top: 8px;
}
#nav-logged-in { position: relative; }
.inv-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.inv-tab {
  flex: 1; padding: 7px 4px; font-size: 10px; font-family: 'Cinzel', serif;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim);
  background: rgba(0,0,0,0.3); border: 1px solid rgba(201,168,76,0.15);
  border-radius: 4px; cursor: pointer; transition: all 0.2s; text-align: center;
}
.inv-tab:hover { border-color: rgba(201,168,76,0.4); color: var(--text); }
.inv-tab.active { background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.5); color: var(--gold); }
.inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inv-item {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(120,80,30,0.25);
  border-radius: 8px; padding: 10px 8px; text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.inv-item:hover { border-color: rgba(201,168,76,0.4); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
/* Prestige items: gold border */
.inv-item-prestige { border-color: rgba(201,168,76,0.35); }
.inv-item-prestige:hover { border-color: rgba(201,168,76,0.6);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 12px rgba(201,168,76,0.15); }
/* Equipped items: green border + checkmark */
.inv-item-equipped { border-color: rgba(64,184,64,0.4); }
.inv-item-equipped:hover { border-color: rgba(64,184,64,0.6); }
/* Image container */
.inv-img-wrap { position: relative; margin-bottom: 8px; }
.inv-item-img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; display: block; }
.inv-item-color { height: 150px; border: 2px solid; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; }
.inv-color-label { font-family: 'Cinzel', serif; font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 1px; }
.inv-item-default { height: 150px; border: 1px solid rgba(201,168,76,0.2); border-radius: 6px;
  background: repeating-linear-gradient(135deg,#2a1505 0px,#2a1505 8px,#1a0d03 8px,#1a0d03 16px);
  display: flex; align-items: center; justify-content: center; }
.inv-default-label { font-size: 10px; color: var(--text-dim); }
.inv-item-name { font-size: 12px; color: var(--text); font-weight: 700; margin-bottom: 2px;
  font-family: 'Cinzel', serif; }
.inv-item-desc { font-size: 10px; color: var(--text-dim); margin-bottom: 6px; line-height: 1.3;
  font-family: 'Crimson Pro', serif; }
.inv-equipped { font-size: 9px; color: #40b840; font-weight: 700; letter-spacing: 1px; padding: 4px 0; }
.inv-locked-label { font-size: 9px; color: #8a7a52; letter-spacing: 0.5px; padding: 4px 0; }
.inv-equip-btn {
  font-size: 10px; font-family: 'Cinzel', serif; letter-spacing: 1px;
  color: var(--gold); background: transparent; border: 1px solid rgba(201,168,76,0.3);
  padding: 5px 16px; border-radius: 4px; cursor: pointer; transition: all 0.2s;
  text-transform: uppercase;
}
.inv-equip-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); }
.inv-tier-badge { position: absolute; top: 6px; right: 6px; font-size: 8px; font-weight: 700;
  letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; z-index: 2; }
.inv-tier-regular { background: rgba(160,160,180,0.85); color: #1a1a2a; }
.inv-tier-prestige { background: linear-gradient(135deg, #c9a84c, #a8872e); color: #0a0608;
  box-shadow: 0 0 6px rgba(201,168,76,0.3); }
.inv-equipped-badge { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px;
  background: rgba(64,184,64,0.9); border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 13px; color: white; z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.inv-locked-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55);
  border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.inv-lock-icon { font-size: 24px; opacity: 0.7; }
.inv-item-locked { opacity: 0.55; }
/* Nav cosmetics sparkle indicator */
.nav-cosmetics-indicator {
  display: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); margin-left: 4px; vertical-align: middle;
  animation: cosmeticsSparkle 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(201,168,76,0.6); cursor: pointer;
}
@keyframes cosmeticsSparkle {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 4px rgba(201,168,76,0.4); }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(201,168,76,0.8); }
}
/* ── Card Back Preview Designs ─────────────────────────────────────────────── */
.inv-cb-preview {
  position: relative; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cb-inner-frame {
  position: absolute; inset: 8px; border: 2px solid rgba(255,255,255,0.08);
  border-radius: 4px; pointer-events: none;
}
/* Dragon Scale — dark red with diamond scale pattern */
.cb-dragon {
  background:
    repeating-conic-gradient(rgba(160,30,20,0.3) 0% 25%, rgba(80,10,5,0.4) 0% 50%) 0 0 / 20px 20px,
    linear-gradient(160deg, #4a0a08, #1a0502);
  border: 2px solid #6a2020;
}
/* Arcane Runes — deep purple with rune circle pattern */
.cb-arcane {
  background:
    radial-gradient(circle at 50% 50%, rgba(100,40,200,0.25) 20%, transparent 50%),
    radial-gradient(circle at 50% 50%, transparent 30%, rgba(60,20,120,0.15) 31%, transparent 32%),
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(80,30,160,0.12) 46%, transparent 47%),
    linear-gradient(160deg, #1a0a3a, #0a0520);
  border: 2px solid #4040a0;
}
/* Fel Corruption — toxic green with tendril wisps */
.cb-fel {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(30,180,30,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(40,200,40,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(20,100,20,0.2) 0%, transparent 60%),
    linear-gradient(160deg, #0a2a0a, #041204);
  border: 2px solid #2a6a20;
}
/* Frozen Tundra — icy blue with frost crystal pattern */
.cb-frost {
  background:
    repeating-linear-gradient(60deg, transparent, transparent 14px, rgba(140,200,255,0.06) 14px, rgba(140,200,255,0.06) 15px),
    repeating-linear-gradient(-60deg, transparent, transparent 14px, rgba(140,200,255,0.06) 14px, rgba(140,200,255,0.06) 15px),
    radial-gradient(circle at 50% 50%, rgba(100,180,240,0.2) 0%, transparent 60%),
    linear-gradient(160deg, #0a1a30, #040a18);
  border: 2px solid #4080c0;
}
/* Holy Light — warm gold with radiant beams */
.cb-holy {
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(240,200,60,0.08) 0deg 15deg, transparent 15deg 30deg),
    radial-gradient(circle at 50% 45%, rgba(255,220,80,0.2) 0%, transparent 50%),
    linear-gradient(160deg, #2a2208, #141002);
  border: 2px solid #a09030;
}
/* Shadow Void — deep black with void swirls */
.cb-shadow {
  background:
    radial-gradient(ellipse at 35% 40%, rgba(80,0,120,0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 60%, rgba(60,0,100,0.18) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(40,0,80,0.15) 0%, transparent 70%),
    linear-gradient(160deg, #0a0014, #040008);
  border: 2px solid #401060;
}

.lobby-inventory-btn {
  display: block; margin: 12px auto 0; font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
  background: transparent; border: 1px solid rgba(201,168,76,0.3);
  padding: 6px 24px; border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.lobby-inventory-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.08); }
.inv-modal-box {
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.5); border-radius: 12px;
  padding: 24px; max-width: 600px; width: 94%; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8); max-height: 85vh; overflow-y: auto;
}

/* ── Prestige Nameplate ──────────────────────────────────────────────────────── */
.nameplate-wrap { position: relative; display: inline-block; }
.nameplate-img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: fill; pointer-events: none; }
.nameplate-text { position: relative; z-index: 1; font-weight: 900; color: #ffe88a;
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.6); }
/* Navbar nameplate */
.nav-nameplate { position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 16px; min-width: 80px; }
.nav-nameplate .nameplate-img { border-radius: 3px; }
.nav-nameplate .nameplate-text { font-size: 0.72rem; letter-spacing: 0.08em; }
/* Lobby nameplate */
.lobby-nameplate { padding: 4px 24px; }
.lobby-nameplate .nameplate-text { font-family: 'Cinzel', serif; font-size: 16px; }
/* Leaderboard nameplate */
.lb-nameplate { padding: 1px 10px; }
.lb-nameplate .nameplate-text { font-size: inherit; }
/* Game nameplate */
.game-nameplate { padding: 2px 12px; }
.game-nameplate .nameplate-text { font-size: 11px; }

/* ── Prestige Skin Picker ────────────────────────────────────────────────────── */
.prestige-skin-picker {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px;
}
.prestige-pick-item {
  background: rgba(0,0,0,0.3); border: 2px solid rgba(201,168,76,0.15);
  border-radius: 6px; padding: 4px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.prestige-pick-item:hover { border-color: rgba(201,168,76,0.4); }
.prestige-pick-active { border-color: var(--gold); background: rgba(201,168,76,0.08);
  box-shadow: 0 0 8px rgba(201,168,76,0.2); }
.prestige-pick-img { width: 100%; height: 48px; object-fit: cover; border-radius: 4px; }
.prestige-pick-name { font-size: 9px; color: var(--text-dim); margin: 2px 0; font-weight: 600; }
.prestige-preview-btn {
  font-size: 8px; font-family: 'Cinzel', serif; letter-spacing: 0.5px;
  color: var(--gold); background: transparent; border: 1px solid rgba(201,168,76,0.25);
  padding: 2px 8px; border-radius: 2px; cursor: pointer; transition: all 0.2s;
}
.prestige-preview-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); }

/* ── Skin Preview Modal ──────────────────────────────────────────────────────── */
.skin-preview-overlay {
  position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
}
.skin-preview-box {
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.5); border-radius: 12px;
  padding: 20px; max-width: 400px; width: 90%; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.skin-preview-img { width: 100%; border-radius: 8px; margin-bottom: 12px; }
.skin-preview-name {
  text-align: center; font-family: 'Cinzel', serif; font-size: 16px;
  color: var(--gold); letter-spacing: 1px;
}

/* ── Prestige Skin Modal ─────────────────────────────────────────────────────── */
.skin-modal-box {
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.5); border-radius: 12px;
  padding: 24px; max-width: 520px; width: 92%; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8); max-height: 90vh; overflow-y: auto;
}
.skin-modal-title {
  text-align: center; font-family: 'Cinzel Decorative', serif; font-size: 18px;
  color: var(--gold); letter-spacing: 2px; margin-bottom: 4px;
}
.skin-modal-subtitle {
  text-align: center; font-family: 'Crimson Pro', serif; font-size: 12px;
  color: var(--text-dim); font-style: italic; margin-bottom: 16px;
}
.skin-modal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px;
}
.psm-item {
  background: rgba(0,0,0,0.3); border: 2px solid rgba(201,168,76,0.15);
  border-radius: 6px; padding: 6px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.psm-item:hover { border-color: rgba(201,168,76,0.4); transform: translateY(-2px); }
.psm-active { border-color: var(--gold); background: rgba(201,168,76,0.1);
  box-shadow: 0 0 12px rgba(201,168,76,0.25); }
.psm-img { width: 100%; height: 56px; object-fit: cover; border-radius: 4px; }
.psm-name { font-size: 10px; color: var(--text-dim); font-weight: 600; margin-top: 3px; }
.psm-active .psm-name { color: var(--gold); }
.skin-modal-preview { text-align: center; }
.psm-preview-large { width: 200px; height: 200px; object-fit: cover; border-radius: 8px;
  border: 2px solid rgba(201,168,76,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.psm-preview-label {
  font-family: 'Cinzel', serif; font-size: 14px; color: var(--gold);
  margin-top: 8px; letter-spacing: 1px;
}

/* ── Modals ──────────────────────────────────────────────────────────────────── */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.75); align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal-box { background: linear-gradient(175deg, #1a0f08, #0d0805); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 12px; padding: 2rem; width: 90%; max-width: 420px; max-height: 90vh;
  overflow-y: auto; position: relative; box-shadow: 0 20px 80px rgba(0,0,0,0.7); margin: 1rem; }
.modal-box-lg { max-width: 560px; }
.modal-close { position: absolute; top: 0.8rem; right: 1rem; background: none; border: none;
  color: var(--text-dim); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--gold); }
.modal-title { font-family: 'Cinzel Decorative', serif; font-size: 1.2rem;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem; text-align: center; }

/* Auth Modal */
.auth-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(240,192,64,0.15); }
.auth-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-family: Arial, sans-serif; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem; cursor: pointer;
  transition: all 0.2s; margin-bottom: -1px; }
.auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.auth-form { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.auth-form .form-group,
.auth-form .auth-error,
.auth-form .reg-terms-label { width: 100%; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); }
.form-group input { background: rgba(0,0,0,0.4); border: 1px solid rgba(240,192,64,0.2);
  border-radius: 2px; color: #ffffff !important; font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important; font-size: 1.1rem !important;
  font-weight: 500 !important; letter-spacing: 0.03em; text-transform: none !important;
  padding: 0.6rem 0.8rem; outline: none; transition: border-color 0.2s; }
.form-group input:focus { border-color: rgba(240,192,64,0.5); }
.auth-error { color: #e04020; font-size: 0.8rem; font-family: 'Crimson Pro', serif;
  min-height: 1.2em; text-align: center; }
.auth-submit {
  font-size: 0.8rem;
  padding: 12px 32px;
  display: inline-block;
  width: auto;
  min-width: 160px;
  max-width: 220px;
  align-self: center;
}
.reg-terms-label {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: 'Crimson Pro', serif; font-size: 0.75rem;
  color: var(--text-dim, #b8a47c); cursor: pointer; line-height: 1.4;
}
.reg-terms-label input[type="checkbox"] { accent-color: var(--gold, #c9a44a); margin-top: 2px; }
.reg-terms-label a { color: var(--gold, #c9a44a); text-decoration: underline; }
.reg-terms-label a:hover { color: #fff; }
.altcha-wrap { width: 100%; }
.altcha-wrap altcha-widget { --altcha-color-text: #f5e8c8; --altcha-color-base: #1a0f08;
  --altcha-color-border: rgba(240,192,64,0.25); --altcha-color-border-focus: rgba(240,192,64,0.5);
  --altcha-max-width: 100%; }
.verify-step-indicator {
  font-family: Arial, sans-serif; font-size: 0.6rem; color: var(--text-dim, #b8a47c);
  text-transform: uppercase; letter-spacing: 0.15em; text-align: center; margin-bottom: 0.3rem;
}

/* ── Email & Phone Verification Form ─────────────────────────────────────── */
#auth-verify-form {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}
.verify-header { text-align: center; }
.verify-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.verify-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem;
  color: var(--gold, #c9a44a);
  margin: 0 0 0.5rem;
}
.verify-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: var(--text-dim, #b8a47c);
  line-height: 1.5;
}
.verify-simulated {
  background: rgba(240,192,64,0.08);
  border: 1px dashed rgba(240,192,64,0.3);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  text-align: center;
  width: 100%;
}
.verify-sim-label {
  font-size: 0.65rem;
  color: var(--text-dim, #b8a47c);
  display: block;
  margin-bottom: 0.3rem;
}
.verify-sim-code {
  font-family: monospace;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold, #c9a44a);
  letter-spacing: 0.5em;
}
.verify-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.verify-digit {
  width: 42px;
  height: 50px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold, #c9a44a);
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(240,192,64,0.2);
  border-radius: 6px;
  outline: none;
  caret-color: var(--gold, #c9a44a);
}
.verify-digit:focus {
  border-color: var(--gold, #c9a44a);
  box-shadow: 0 0 8px rgba(240,192,64,0.3);
}
.verify-resend {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: var(--text-dim, #b8a47c);
  text-decoration: underline;
  cursor: pointer;
}
.verify-resend:hover { color: var(--gold, #c9a44a); }

/* Deck picker modal */
.deck-pick-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 55vh; overflow-y: auto; }
.deck-pick-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(240,192,64,0.12); border-radius: 4px;
  cursor: pointer; transition: all 0.2s; }
.deck-pick-item:hover { border-color: rgba(240,192,64,0.4); background: rgba(240,192,64,0.05); }
.deck-pick-item.deck-invalid { opacity: 0.45; cursor: not-allowed; }
.dpi-emoji { font-size: 1.8rem; }
.dpi-name  { font-size: 0.85rem; font-weight: 700; }
.dpi-meta  { font-family: 'Crimson Pro', serif; font-size: 0.8rem; color: var(--text-dim); }

/* Choice modal */
.choice-options { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.choice-option { flex: 1; min-width: 140px; background: rgba(0,0,0,0.4);
  border: 1px solid rgba(240,192,64,0.2); border-radius: 6px; padding: 1rem;
  text-align: center; cursor: pointer; transition: all 0.2s; }
.choice-option:hover { border-color: var(--gold); background: rgba(240,192,64,0.1); transform: translateY(-4px); }
.choice-opt-name { font-size: 0.85rem; font-weight: 700; color: var(--gold); margin-bottom: 0.4rem; }
.choice-opt-desc { font-family: 'Crimson Pro', serif; font-size: 0.82rem; color: var(--text); }

/* ── Toasts ───────────────────────────────────────────────────────────────────── */
#toasts { position: fixed; bottom: 2rem; right: 1.5rem; z-index: 500;
  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.toast { background: #1e120a; border: 1px solid rgba(240,192,64,0.25); border-radius: 4px;
  padding: 0.7rem 1.2rem; font-size: 0.8rem; letter-spacing: 0.05em;
  opacity: 0; transform: translateX(20px); transition: all 0.3s; max-width: 320px; }
.toast.toast-show  { opacity: 1; transform: translateX(0); }
.toast.toast-success { border-color: #40b840; color: #90e090; }
.toast.toast-error   { border-color: #e04020; color: #ff9070; }
.toast.toast-info    { border-color: rgba(240,192,64,0.3); color: var(--text-dim); }

/* ── Shared screen styles ────────────────────────────────────────────────────── */
.screen-body { position: relative; z-index: 1; min-height: calc(100vh - 72px);
  padding: 5.5rem 2rem 3rem; max-width: 1100px; margin: 0 auto; }
.screen-title { font-family: 'Cinzel Decorative', serif; font-size: 1.6rem; margin-bottom: 0.3rem;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.screen-subtitle { font-family: 'Crimson Pro', serif; font-style: italic;
  color: #e8d5a3; margin-bottom: 2rem; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9); }
.divider-line { width: 100%; height: 1px; background: linear-gradient(to right,transparent,rgba(240,192,64,0.2),transparent); margin: 1.5rem 0; }
.empty-msg { color: var(--text-dim); font-family: 'Crimson Pro', serif; font-style: italic;
  text-align: center; padding: 2rem; }
.loading-msg { color: var(--text-dim); font-family: 'Crimson Pro', serif; text-align: center; padding: 1rem; }
.error-msg { color: #e04020; font-family: 'Crimson Pro', serif; text-align: center; padding: 1rem; }
/* ══ DARK FANTASY BUTTON SYSTEM ═══════════════════════════════════════════════ */

/* ── Base: shared across all tiers ──────────────────────────────────────────── */
.btn-sm, .btn-sm-outline, .btn-gold,
.btn-shop-buy, .btn-bundle-buy, .btn-pack-close,
.btn-save-deck, .btn-payment-confirm,
.btn-claim, .auth-submit,
.gambling-buy-btn, .gambling-draw-btn,
.mystery-open-btn, .mystery-collect-btn,
.ranked-buy-btn, .buy-cosmetic-btn, .equip-btn,
.craft-btn, .concede-btn,
#confirm-disenchant-btn, #select-all-de-btn,
.game-over-box button,
.lottery-ticket-controls button {
  font-family: Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, filter 0.18s, opacity 0.18s;
  position: relative;
  outline: none;
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
}

/* ── Disabled state (all tiers) ─────────────────────────────────────────────── */
.btn-sm:disabled, .btn-shop-buy:disabled, .btn-bundle-buy:disabled,
.btn-pack-close:disabled, .btn-save-deck:disabled, .btn-payment-confirm:disabled,
.btn-claim:disabled, .auth-submit:disabled,
.gambling-buy-btn:disabled, .gambling-draw-btn:disabled,
.mystery-open-btn:disabled, .mystery-collect-btn:disabled,
.ranked-buy-btn:disabled, .buy-cosmetic-btn:disabled, .equip-btn:disabled,
.craft-btn:disabled, #confirm-disenchant-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  filter: saturate(0.3);
}

/* ── PRIMARY TIER — gold stone texture (buy, purchase, confirm, save, open, collect) ── */
.btn-shop-buy, .btn-bundle-buy, .btn-pack-close,
.btn-save-deck, .btn-payment-confirm,
.btn-claim, .auth-submit,
.gambling-buy-btn,
.mystery-open-btn, .mystery-collect-btn,
.ranked-buy-btn, .buy-cosmetic-btn,
.btn-gold,
.game-over-box button {
  background-image: url('../assets/btn-primary.webp');
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  color: #ffcc44;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(240,192,64,0.3);
}

.btn-shop-buy:hover:not(:disabled), .btn-bundle-buy:hover:not(:disabled),
.btn-pack-close:hover:not(:disabled),
.btn-save-deck:hover:not(:disabled), .btn-payment-confirm:hover:not(:disabled),
.btn-claim:hover:not(:disabled), .auth-submit:hover:not(:disabled),
.gambling-buy-btn:hover:not(:disabled),
.mystery-open-btn:hover:not(:disabled), .mystery-collect-btn:hover:not(:disabled),
.ranked-buy-btn:hover:not(:disabled), .buy-cosmetic-btn:hover:not(:disabled),
.btn-gold:hover:not(:disabled),
.game-over-box button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.2);
  color: #ffe080;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 14px rgba(240,192,64,0.5);
}

.btn-shop-buy:active:not(:disabled), .btn-bundle-buy:active:not(:disabled),
.btn-pack-close:active:not(:disabled),
.btn-save-deck:active:not(:disabled), .btn-payment-confirm:active:not(:disabled),
.btn-claim:active:not(:disabled), .auth-submit:active:not(:disabled),
.gambling-buy-btn:active:not(:disabled),
.mystery-open-btn:active:not(:disabled), .mystery-collect-btn:active:not(:disabled),
.ranked-buy-btn:active:not(:disabled), .buy-cosmetic-btn:active:not(:disabled),
.btn-gold:active:not(:disabled),
.game-over-box button:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.9);
}

/* ── SECONDARY TIER — dark stone texture (equip, draw, craft, navigate) ──────── */
.equip-btn, .gambling-draw-btn, .craft-btn,
.btn-sm, .btn-sm-outline, #select-all-de-btn, #select-dupes-de-btn {
  background-image: url('../assets/btn-secondary.webp');
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 8px rgba(200,100,50,0.3);
}

.equip-btn:hover:not(:disabled), .gambling-draw-btn:hover:not(:disabled),
.craft-btn:hover:not(:disabled),
.btn-sm:hover:not(:disabled), .btn-sm-outline:hover:not(:disabled),
#select-all-de-btn:hover:not(:disabled), #select-dupes-de-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.2);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 12px rgba(200,100,50,0.5);
}

.equip-btn:active:not(:disabled), .gambling-draw-btn:active:not(:disabled),
.craft-btn:active:not(:disabled),
.btn-sm:active:not(:disabled), .btn-sm-outline:active:not(:disabled),
#select-all-de-btn:active:not(:disabled), #select-dupes-de-btn:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.9);
}

/* ── DANGER TIER — cyan stone texture (concede, disenchant, delete) ─────────────── */
.concede-btn, #confirm-disenchant-btn,
.btn-sm.btn-danger {
  background-image: url('../assets/btn-danger.webp');
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 8px rgba(80,200,220,0.3);
}

.concede-btn:hover:not(:disabled), #confirm-disenchant-btn:hover:not(:disabled),
.btn-sm.btn-danger:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.2);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 12px rgba(80,200,220,0.5);
}

.concede-btn:active:not(:disabled), #confirm-disenchant-btn:active:not(:disabled),
.btn-sm.btn-danger:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.9);
}

/* ══ END OF BUTTON SYSTEM ════════════════════════════════════════════════════ */

/* ── Size overrides (keep original sizing per context) ──────────────────────── */
.btn-sm { font-size: 0.65rem; padding: 0.35rem 0.8rem; }
.btn-sm-outline { font-size: 0.65rem; padding: 0.35rem 0.8rem; }
.btn-sm.btn-danger { font-size: 0.65rem; padding: 0.35rem 0.8rem; }
.price-input { background: rgba(0,0,0,0.4); border: 1px solid rgba(240,192,64,0.2); border-radius: 2px;
  color: var(--gold); font-family: 'Cinzel Decorative', serif; font-size: 0.85rem; padding: 0.3rem 0.5rem;
  width: 80px; outline: none; text-align: center; }

/* ── Lobby ───────────────────────────────────────────────────────────────────── */
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 700px) { .lobby-grid { grid-template-columns: 1fr; } }
.lobby-card { background: linear-gradient(175deg, #221508, #100703); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 8px; }
.lobby-user-name { font-family: 'Cinzel Decorative', serif; font-size: 1.4rem;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; }
.lobby-stats-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.lobby-stat { text-align: center; }
.lobby-stat-val { font-family: 'Cinzel Decorative', serif; font-size: 1.1rem; color: var(--gold); }
.lobby-stat-lbl { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); margin-top: 0.1rem; }
.xp-bar-bg { height: 6px; background: rgba(0,0,0,0.4); border-radius: 3px; margin: 0.5rem 0; overflow: hidden; }
.xp-bar-fill { height: 100%; background: linear-gradient(to right, var(--teal), var(--blue)); border-radius: 3px; transition: width 0.5s; }
.xp-text { font-size: 0.65rem; color: var(--text-dim); letter-spacing: 0.1em; }
.play-modes { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; }
.play-btn { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem;
  background: linear-gradient(160deg,rgba(255,255,255,0.03),transparent);
  border: 1px solid; border-radius: 4px; cursor: pointer; transition: all 0.25s;
  font-family: Arial, sans-serif; text-align: left; color: var(--text); }
.play-btn:hover { transform: translateX(4px); }
.play-btn-casual  { border-color: rgba(64,184,64,0.3); }
.play-btn-ranked  { border-color: rgba(240,192,64,0.3); }
.play-btn-ai      { border-color: rgba(64,128,224,0.3); }
.play-btn-casual:hover  { border-color: #40b840; box-shadow: 0 0 20px rgba(64,184,64,0.2); }
.play-btn-ranked:hover  { border-color: var(--gold); box-shadow: 0 0 20px rgba(240,192,64,0.2); }
.play-btn-ai:hover      { border-color: #4080e0; box-shadow: 0 0 20px rgba(64,128,224,0.2); }
.play-btn-icon { font-size: 1.8rem; }
.play-btn-label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; }
.play-btn-desc  { font-family: 'Crimson Pro', serif; font-size: 0.78rem; color: var(--text-dim); margin-top: 0.2rem; }
.queue-waiting { display: flex; align-items: center; gap: 1rem; padding: 1rem;
  background: rgba(64,184,64,0.05); border: 1px solid rgba(64,184,64,0.2); border-radius: 4px;
  font-size: 0.8rem; color: var(--green); }
.queue-spinner { width: 16px; height: 16px; border: 2px solid rgba(64,184,64,0.3);
  border-top-color: var(--green); border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.quest-item { display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0.8rem; background: rgba(0,0,0,0.25); border: 1px solid rgba(240,192,64,0.08);
  border-radius: 4px; gap: 1rem; margin-bottom: 0.5rem; }
.quest-item.quest-done { border-color: rgba(64,184,64,0.2); }
.quest-item.quest-claimed { opacity: 0.5; }
.quest-name { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.2rem; }
.quest-desc { font-family: 'Crimson Pro', serif; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.4rem; }
.quest-bar { height: 4px; background: rgba(0,0,0,0.4); border-radius: 2px; overflow: hidden; margin-bottom: 0.2rem; }
.quest-bar-fill { height: 100%; background: linear-gradient(to right, var(--gold-dark), var(--gold)); transition: width 0.4s; }
.quest-prog { font-size: 0.65rem; color: var(--text-dim); }
.quest-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex-shrink: 0; }
.badge-gold { font-family: 'Cinzel Decorative', serif; font-size: 0.75rem; color: var(--gold);
  background: rgba(240,192,64,0.1); border: 1px solid rgba(240,192,64,0.2); padding: 0.1rem 0.4rem; border-radius: 2px; }
.badge-xp { font-size: 0.7rem; color: var(--teal); }
.btn-claim { font-size: 0.65rem; padding: 0.35rem 0.8rem; }
.claimed-label { font-size: 0.7rem; color: var(--text-dim); }

/* ── Game Screen ─────────────────────────────────────────────────────────────── */
#screen-game {
  position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh;
  overflow: hidden; padding-top: 0;
  background-color: #0d0608 !important;
}
/* ── Board Background — covers entire viewport ────────────────────────────── */
#screen-game::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../assets/board/bg-final.webp') center center / cover no-repeat;
}
/* Subtle dark overlay for card readability */
#screen-game::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 48%,
    rgba(5,3,10,0.12) 0%, rgba(5,3,10,0.35) 100%);
}
/* FX overlays sit between bg and UI */
.board-fx-rune, .board-fx-candle, .board-fx-fog,
.board-fx-particles, .board-fx-lava, .board-fx-smoke, .board-fx-lightning,
.board-fx-torchlight { z-index: 2 !important; }
/* All game UI above background + FX */
.game-layout, .game-log-toggle, .game-log-float { position: relative; z-index: 10; }

/* ── Torch Lighting Overlay — warm amber from sides ───────────────────────── */
.board-fx-torchlight {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 35% 70% at 5% 40%, rgba(180,100,20,0.08) 0%, transparent 100%),
    radial-gradient(ellipse 35% 70% at 95% 40%, rgba(180,100,20,0.08) 0%, transparent 100%);
  animation: torchFlicker 3s ease-in-out infinite;
}
@keyframes torchFlicker {
  0%, 100% { opacity: 0.7; }
  30% { opacity: 1; }
  60% { opacity: 0.8; }
  85% { opacity: 1; }
}

/* ── Ambient FX overlays ──────────────────────────────────────────────────── */
/* Rune circle pulse — center of board, purple+gold glow */
.board-fx-rune {
  position: absolute; pointer-events: none;
  width: 300px; height: 300px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(120,60,180,0.25) 0%, rgba(201,168,76,0.10) 40%, transparent 70%);
  filter: blur(15px);
  animation: fxRunePulse 3s ease-in-out infinite;
}
/* Candle flicker — two warm amber glows, top-left and top-right */
.board-fx-candle {
  position: absolute; pointer-events: none;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,170,60,0.5) 0%, rgba(200,140,40,0.15) 50%, transparent 70%);
  filter: blur(6px);
}
.board-fx-candle-l { left: 12%; top: 15%; animation: fxCandleL 1.4s ease-in-out infinite; }
.board-fx-candle-r { left: 82%; top: 15%; animation: fxCandleR 1.8s ease-in-out infinite; }
/* Fog drift — bottom 20%, wispy white-blue */
.board-fx-fog {
  position: absolute; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 20%;
  background: linear-gradient(to top,
    rgba(200,210,230,0.12) 0%, rgba(180,195,220,0.06) 40%, transparent 100%);
  animation: fxFogDrift 10s ease-in-out infinite;
}

@keyframes fxRunePulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}
@keyframes fxCandleL {
  0% { opacity: 0.2; }
  30% { opacity: 0.55; }
  60% { opacity: 0.25; }
  80% { opacity: 0.6; }
  100% { opacity: 0.2; }
}
@keyframes fxCandleR {
  0% { opacity: 0.35; }
  20% { opacity: 0.6; }
  45% { opacity: 0.2; }
  70% { opacity: 0.5; }
  100% { opacity: 0.35; }
}
@keyframes fxFogDrift {
  0% { transform: translateX(-2%); opacity: 0.05; }
  50% { transform: translateX(2%); opacity: 0.15; }
  100% { transform: translateX(-2%); opacity: 0.05; }
}

/* ── Animation 1: Floating magical particles ─────────────────────────────── */
.board-fx-particles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.fx-particle {
  position: absolute; border-radius: 50%; pointer-events: none;
  will-change: transform, opacity;
  animation: fxParticleFloat var(--dur) linear infinite;
  animation-delay: var(--delay);
}
@keyframes fxParticleFloat {
  0% { transform: translate(0, 0) translateX(0); opacity: 0; }
  10% { opacity: var(--peak-op); }
  80% { opacity: var(--peak-op); }
  100% { transform: translate(var(--drift), -100vh); opacity: 0; }
}

/* ── Animation 2: Lava crack glow ────────────────────────────────────────── */
.board-fx-lava {
  position: absolute; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
}
.board-fx-lava-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,100,0,0.4) 0%, rgba(200,30,0,0.2) 40%, transparent 70%);
  filter: blur(20px);
  animation: fxLavaPulse1 2s ease-in-out infinite;
}
.board-fx-lava-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,120,20,0.35) 0%, rgba(220,50,0,0.15) 45%, transparent 70%);
  filter: blur(15px);
  animation: fxLavaPulse2 2.5s ease-in-out infinite;
}
@keyframes fxLavaPulse1 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}
@keyframes fxLavaPulse2 {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.6; }
}

/* ── Animation 3: Ambient smoke wisps ────────────────────────────────────── */
.board-fx-smoke {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.fx-smoke-wisp {
  position: absolute; border-radius: 50%; pointer-events: none;
  will-change: transform, opacity;
  animation: fxSmokeRise var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}
@keyframes fxSmokeRise {
  0% { transform: translateY(0) translateX(0); opacity: var(--start-op); }
  100% { transform: translateY(-100px) translateX(var(--drift)); opacity: 0; }
}

/* ── Animation 4: Lightning crackle ──────────────────────────────────────── */
.board-fx-lightning {
  position: absolute; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 340px; height: 340px;
  border-radius: 50%;
}
.fx-lightning-flash {
  position: absolute; pointer-events: none;
  width: 3px; border-radius: 1px;
  will-change: opacity;
}

/* Pause FX when game screen not active */
#screen-game:not(.active) .board-fx-particles,
#screen-game:not(.active) .board-fx-lava,
#screen-game:not(.active) .board-fx-smoke,
#screen-game:not(.active) .board-fx-lightning,
#screen-game:not(.active) .board-fx-rune,
#screen-game:not(.active) .board-fx-candle,
#screen-game:not(.active) .board-fx-fog {
  animation-play-state: paused !important;
}
#screen-game:not(.active) .fx-particle,
#screen-game:not(.active) .fx-smoke-wisp {
  animation-play-state: paused !important;
}

.game-layout { display: grid; grid-template-columns: 1fr;
  height: 100vh; overflow: hidden; position: relative; padding-top: 72px; }

/* Log toggle button */
.game-log-toggle { position: absolute; top: 8px; left: 8px; z-index: 20;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: rgba(10,6,2,0.85); border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold); font-size: 16px; display: flex; align-items: center;
  justify-content: center; transition: all 0.2s; }
.game-log-toggle:hover { border-color: var(--gold); background: rgba(201,168,76,0.15); }

/* Floating log panel */
.game-log-float { position: absolute; top: 50px; left: 8px; z-index: 20;
  width: 240px; max-height: 300px; background: rgba(10,6,2,0.92);
  border: 1px solid rgba(201,168,76,0.3); border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.game-log-float-header { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid rgba(201,168,76,0.1);
  font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); }
.game-log-float-close { background: none; border: none; color: var(--text-dim);
  font-size: 16px; cursor: pointer; }
#game-log-messages { flex: 1; overflow-y: auto; padding: 0.5rem; max-height: 240px; }

/* Concede button — small danger button near player hero (overrides shared danger tier) */
.game-hero .concede-btn {
  background: linear-gradient(160deg, #3a1010, #2a0808) !important;
  background-image: none !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  color: #cc6050;
  font-family: Arial, sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
  text-shadow: none;
  min-width: auto;
  min-height: auto;
}
.game-hero .concede-btn:hover {
  background: linear-gradient(160deg, #5a1515, #3a0a0a) !important;
  border-color: rgba(224,64,32,0.5) !important;
  color: #ff6050;
  transform: none;
  filter: none;
}

/* Hero power circle — next to hero portrait */
.hero-power-circle { width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(160deg, #1a0a1a, #0a0512);
  border: 2px solid rgba(144,64,224,0.5); color: #c090ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; font-family: Arial, sans-serif;
  transition: all 0.2s; position: relative; flex-shrink: 0;
  box-shadow: 0 0 10px rgba(144,64,224,0.2); }
.hero-power-circle:hover:not(:disabled) { border-color: #9040e0;
  box-shadow: 0 0 20px rgba(144,64,224,0.5); }
.hero-power-circle:disabled, .hero-power-circle.hp-used { opacity: 0.3; cursor: default; }
.hp-cost { font-size: 14px; }
#game-log-messages::-webkit-scrollbar { width: 4px; }
#game-log-messages::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.2); border-radius: 2px; }
.log-line { font-family: 'Crimson Pro', serif; font-size: 0.72rem; color: var(--text-dim);
  padding: 0.15rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); word-break: break-word; }

/* Game board */
.game-board { display: flex; flex-direction: column; overflow: visible; position: relative; height: 100%;
  background: transparent; padding-bottom: 12px; }
.game-board-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: transparent; }

/* Sidebar — removed, replaced by inline hero power + menu button */
.game-sidebar { display: none; }

/* Player zones — transparent so dungeon floor shows through */
.player-zone { flex: 1; display: flex; flex-direction: column; padding: 0.3rem 0.6rem;
  position: relative; z-index: 1; min-height: 0;
  background: transparent;
  transition: box-shadow 0.6s ease, border-color 0.6s ease; }
.player-zone.opp-zone {
  justify-content: flex-start;
  border-top: 1px solid rgba(180,100,20,0.12);
}
.player-zone.my-zone {
  justify-content: flex-end;
  border-bottom: 1px solid rgba(180,100,20,0.12);
}
/* Turn-based zone tinting — player turn: warm amber glow pulse */
.player-zone.my-zone.zone-active {
  border-bottom-color: rgba(201,168,76,0.3);
  animation: zoneAmberPulse 3s ease-in-out infinite;
}
.player-zone.my-zone.zone-dim {
  border-bottom-color: rgba(201,168,76,0.04);
  animation: none;
  box-shadow: none;
}
/* Opponent turn: cool purple/red tint */
.player-zone.opp-zone.zone-active {
  border-top-color: rgba(160,50,80,0.35);
  box-shadow: inset 0 3px 12px rgba(140,40,70,0.12), 0 0 8px rgba(140,40,70,0.08);
}
.player-zone.opp-zone.zone-dim {
  border-top-color: rgba(201,168,76,0.04);
  box-shadow: none;
}
@keyframes zoneAmberPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(201,168,76,0.1), inset 0 0 6px rgba(201,168,76,0.05); }
  50% { box-shadow: 0 0 18px rgba(201,168,76,0.25), inset 0 0 10px rgba(201,168,76,0.08); }
}

/* Hero rows */
.hero-row { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.2rem; }
.hero-info-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.opp-hand-cnt-lbl, .my-hand-cnt-lbl { font-size: 0.65rem; color: var(--text-dim); }
.opp-deck-cnt-lbl, .my-deck-cnt-lbl { font-size: 0.6rem; color: var(--text-dim); opacity: 0.5; }

/* ── Hero Unit — unified cohesive component ───────────────────────────────── */
.hero-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(160deg, rgba(15,10,5,0.7) 0%, rgba(10,6,3,0.5) 100%);
  border: 1px solid rgba(180,100,20,0.2);
  border-radius: 16px;
  padding: 6px 12px 6px 6px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-unit:hover {
  border-color: rgba(201,168,76,0.3);
  box-shadow: 0 0 12px rgba(201,168,76,0.1);
}

/* Portrait wrapper — holds portrait + HP overlay + armor badge */
.hero-portrait-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Hero portraits — ornate gold frame with class-color outer glow */
.game-hero-portrait { width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(145deg, #2a1a0a, #1a0e05);
  /* Ornate gradient border: bright gold top, darker gold bottom */
  border: 3.5px solid;
  border-image: none;
  border-color: rgba(220,190,100,0.6) rgba(180,140,60,0.5) rgba(120,80,30,0.5) rgba(180,140,60,0.5);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  cursor: pointer; transition: all 0.2s; position: relative; flex-shrink: 0;
  /* Inner shadow for depth + ambient outer glow + torch rim light */
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.5),
    0 4px 16px rgba(0,0,0,0.6),
    0 0 14px var(--hero-glow, rgba(201,168,76,0.2)),
    0 0 20px rgba(200,130,40,0.2);
  overflow: hidden; }
.game-hero-portrait .hero-portrait-img { width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; }
.game-hero-portrait .hero-emoji { font-size: 1.8rem; }
.game-hero-portrait.targetable { border-color: #ff4020;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,64,32,0.4), 0 0 28px rgba(224,64,32,0.8);
  animation: pulse-target 1s ease-in-out infinite; cursor: crosshair; }
/* Prestige skin portrait — golden ornate glow */
.game-hero-portrait.prestige-portrait {
  border-color: rgba(220,180,60,0.7);
  border-width: 4px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.6),
    0 0 20px rgba(201,168,76,0.4), 0 0 40px rgba(201,168,76,0.15);
}

/* HP overlay — anchored at bottom center of portrait */
.hp-overlay {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  transition: transform 0.2s ease, color 0.2s ease;
}
.hp-val { width: 40px; height: 40px; background: url('../assets/stat-health.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: 0.95rem; color: #fff8f0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
/* Low HP warning: pulse red when below 15 */
.hp-val.hp-low {
  animation: hpLowPulse 1.5s ease-in-out infinite;
}
@keyframes hpLowPulse {
  0%, 100% { color: #ff6040; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 4px rgba(255,60,30,0.3)); }
  50% { color: #ff3020; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(255,40,20,0.6)); }
}
/* HP change animation */
.hp-val.hp-changed {
  animation: hpBounce 0.35s ease-out;
}
@keyframes hpBounce {
  0% { transform: translateX(-50%) scale(1); }
  30% { transform: translateX(-50%) scale(1.3); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Armor badge — overlaps bottom-left of portrait */
.armor-badge {
  position: absolute;
  bottom: -4px;
  left: -2px;
  z-index: 3;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.75rem;
  font-weight: 900;
  color: #a0d0ff;
  background: radial-gradient(circle, rgba(40,80,160,0.6) 0%, rgba(20,40,80,0.8) 100%);
  border: 2px solid rgba(100,160,255,0.4);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 8px rgba(80,140,255,0.2);
  transition: transform 0.2s ease;
}
.armor-badge.armor-gained {
  animation: armorGainPop 0.3s ease-out;
}
@keyframes armorGainPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); box-shadow: 0 0 16px rgba(80,140,255,0.6); }
  100% { transform: scale(1); }
}

/* ── Hero Power — circular button, 60% portrait size ─────────────────────── */
.hero-power-circle { width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  background: linear-gradient(160deg, #1a0a1a, #0a0512);
  border: 2px solid rgba(144,64,224,0.4); color: #c090ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; font-family: Arial, sans-serif;
  transition: all 0.2s; position: relative; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 10px rgba(144,64,224,0.15); }
.hero-power-circle:hover:not(:disabled):not(.hp-used) { border-color: #9040e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 20px rgba(144,64,224,0.5); }
.hero-power-circle:disabled, .hero-power-circle.hp-used { opacity: 0.3; cursor: default;
  border-color: rgba(80,40,100,0.25); animation: none; }
/* Usable pulse — subtle gold border when ready */
.hero-power-circle.hp-ready {
  animation: hpReadyPulse 2s ease-in-out infinite;
}
@keyframes hpReadyPulse {
  0%, 100% { border-color: rgba(201,168,76,0.4); box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 10px rgba(201,168,76,0.15); }
  50% { border-color: rgba(201,168,76,0.7); box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 18px rgba(201,168,76,0.35); }
}
.hp-cost { font-size: 14px; }

/* Mana */
.mana-info { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.mana-txt { font-family: 'Cinzel Decorative', serif; font-size: 0.85rem; color: #80c0ff; }
.mana-gems { display: flex; gap: 3px; flex-wrap: wrap; max-width: 128px; justify-content: flex-end; }
.mana-gem { width: 13px; height: 13px; background: radial-gradient(circle,#90d0ff,#2060c0);
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); transition: all 0.25s; }
.mana-gem.empty { background: radial-gradient(circle,#2a3845,#141c22); opacity: 0.5; }

/* Turn indicator & divider */
.turn-indicator { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.turn-indicator.my-turn-pulse { animation: turn-pulse 1.4s ease-in-out infinite; }
@keyframes turn-pulse { 0%,100% { text-shadow: 0 0 8px rgba(240,192,64,0.4); } 50% { text-shadow: 0 0 18px rgba(240,192,64,0.9), 0 0 4px #fff; } }
@keyframes pulse { 0% { opacity: 0.5; } 100% { opacity: 1; } }

/* Board divider — glowing gold/amber center line */
.board-divider { display: flex; align-items: center; padding: 0.15rem 0.4rem;
  z-index: 1; position: relative; }
.bd-line { flex: 1; height: 2px; position: relative;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(240,192,64,0.15) 10%,
    rgba(240,192,64,0.5) 30%,
    rgba(255,210,80,0.7) 50%,
    rgba(240,192,64,0.5) 70%,
    rgba(240,192,64,0.15) 90%,
    transparent 100%);
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(240,192,64,0.2), 0 0 10px rgba(232,160,64,0.1), 0 1px 0 rgba(0,0,0,0.5);
  animation: bdLinePulse 3s ease-in-out infinite; }
@keyframes bdLinePulse {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 4px rgba(240,192,64,0.2), 0 0 10px rgba(232,160,64,0.1), 0 1px 0 rgba(0,0,0,0.5); }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(240,192,64,0.35), 0 0 20px rgba(232,160,64,0.2), 0 0 30px rgba(201,168,76,0.08), 0 1px 0 rgba(0,0,0,0.5); }
}

/* End turn panel — right side of board, vertically centered */
.end-turn-panel {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* End turn button */
.end-turn-btn {
  background-image: url('../assets/btn-primary.webp');
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  color: #ffcc44;
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  min-width: 120px;
  min-height: 42px;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 0.18s, filter 0.18s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(240,192,64,0.3);
  white-space: nowrap;
  position: relative;
}
.end-turn-btn.my-turn {
  animation: endTurnPulse 2s ease-in-out infinite;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 14px rgba(240,192,64,0.6);
}
@keyframes endTurnPulse {
  0%, 100% { filter: brightness(1); }
  50% {
    filter: brightness(1.3);
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 18px rgba(240,192,64,0.8);
  }
}
.end-turn-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.2);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 14px rgba(240,192,64,0.6);
}
.end-turn-btn:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.9);
}
.end-turn-btn:disabled {
  opacity: 0.4;
  cursor: default;
  filter: saturate(0.3);
  animation: none;
}

/* Battlefield zones — carved stone surfaces */
.board-zone { flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; flex-wrap: wrap; min-height: 110px; padding: 0.5rem 0.8rem; margin: 0.2rem 0.4rem;
  border-radius: 8px; position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  /* Stone texture: darker edges, lighter center */
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(20,14,8,0.15) 0%, rgba(8,4,2,0.4) 100%),
    linear-gradient(180deg, rgba(12,8,4,0.2) 0%, transparent 30%, transparent 70%, rgba(12,8,4,0.2) 100%);
  /* Inset shadow: recessed into stone floor */
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.4),
    inset 0 -2px 6px rgba(0,0,0,0.3),
    inset 3px 0 8px rgba(0,0,0,0.2),
    inset -3px 0 8px rgba(0,0,0,0.2);
  border: 1px solid rgba(120,70,20,0.2); }
/* Drop zone highlight when placing a card */
.board-zone.board-drop-zone {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(201,168,76,0.06) 0%, rgba(8,4,2,0.35) 100%);
  cursor: pointer;
  border-color: rgba(201,168,76,0.4);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.4),
    inset 0 -2px 6px rgba(0,0,0,0.3),
    inset 3px 0 8px rgba(0,0,0,0.2),
    inset -3px 0 8px rgba(0,0,0,0.2),
    0 0 20px rgba(201,168,76,0.15),
    inset 0 0 16px rgba(201,168,76,0.08); }
#my-board:not(:has(.game-minion)).board-drop-zone::after { content: 'Click to play here';
  font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(64,184,64,0.5); }
#my-board:not(:has(.game-minion)):not(.board-drop-zone)::after { content: 'Your battlefield';
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.08); }
#opp-board:not(:has(.game-minion))::after { content: 'Opponent battlefield';
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.06); }

/* Hand area — arc container with shadow vignette */
.hand-area {
  border-top: 1px solid rgba(180,100,20,0.12);
  position: relative;
  height: 190px;
  overflow: visible;
  z-index: 3;
  flex-shrink: 0;
  background: linear-gradient(to top, rgba(5,2,0,0.85) 0%, rgba(10,5,2,0.4) 40%, transparent 100%);
}
/* Cards positioned absolutely by layoutHandCards() */
#my-hand .hand-card {
  position: absolute;
  transform-origin: bottom center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, left 0.15s ease;
  margin: 0; /* override base margin */
}
/* Hover: straighten, dramatic rise, golden glow */
#my-hand .hand-card:hover:not(.not-affordable):not(.card-playing):not(.selected-hand) {
  transform: rotate(0deg) translateY(-50px) scale(1.15) !important;
  z-index: 200 !important;
  border-color: rgba(240,200,80,0.7) !important;
  box-shadow:
    0 0 20px rgba(201,168,76,0.8),
    0 0 40px rgba(201,168,76,0.4),
    0 16px 32px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,240,200,0.15) !important;
}
/* Unplayable hover: rises but red glow */
#my-hand .hand-card.not-affordable:hover:not(.card-playing) {
  transform: rotate(0deg) translateY(-30px) scale(1.08) !important;
  z-index: 200 !important;
  box-shadow:
    0 0 16px rgba(200,50,30,0.5),
    0 0 30px rgba(200,50,30,0.25),
    0 12px 24px rgba(0,0,0,0.6) !important;
  border-color: rgba(200,60,40,0.5) !important;
}
.hand-area::-webkit-scrollbar { height: 3px; }
.hand-area::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.2); }

/* Hand cards */
.hand-card { width: 90px; height: 126px; background: linear-gradient(175deg, #221508 0%, #100703 100%);
  border-radius: 6px; display: flex; flex-direction: column;
  align-items: center; flex-shrink: 0; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease; user-select: none; position: relative;
  margin: 0 -6px;
  will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden;
  /* Embossed border: light top-left, dark bottom-right */
  border: 1px solid rgba(180,120,40,0.35);
  border-top-color: rgba(220,180,100,0.4);
  border-left-color: rgba(200,160,80,0.35);
  border-bottom-color: rgba(60,30,10,0.6);
  border-right-color: rgba(80,40,15,0.5);
  /* Physical depth: close shadow + ambient */
  box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,240,200,0.08); }
.hand-card.playable { border-color: rgba(240,192,64,0.6); cursor: pointer;
  border-top-color: rgba(255,220,100,0.5); border-left-color: rgba(240,200,80,0.45);
  border-bottom-color: rgba(120,80,20,0.5); border-right-color: rgba(140,90,30,0.4);
  box-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 10px 28px rgba(240,192,64,0.18),
    inset 0 1px 0 rgba(255,240,200,0.1); }
/* Selected card — ready to play, pulsing bright glow */
.hand-card.selected-hand {
  transform: rotate(0deg) translateY(-70px) scale(1.2) !important;
  z-index: 200 !important;
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 2px rgba(240,192,64,0.6),
    0 0 28px rgba(240,192,64,0.9),
    0 0 50px rgba(255,180,0,0.4),
    0 16px 32px rgba(0,0,0,0.5) !important;
  cursor: pointer;
  animation: selectedCardPulse 1s ease-in-out infinite;
}
@keyframes selectedCardPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(240,192,64,0.6), 0 0 28px rgba(240,192,64,0.7), 0 0 50px rgba(255,180,0,0.3), 0 16px 32px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 0 3px rgba(240,192,64,0.8), 0 0 36px rgba(240,192,64,1), 0 0 60px rgba(255,180,0,0.5), 0 16px 32px rgba(0,0,0,0.5); }
}
/* Unplayable card — desaturated + dark overlay */
.hand-card.not-affordable {
  opacity: 0.7;
  filter: saturate(0.5) brightness(0.75);
  cursor: not-allowed;
}

/* Card play animations */
@keyframes cardPlayUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-40px) scale(1.1); opacity: 0.8; }
  100% { transform: translateY(-80px) scale(0.3); opacity: 0; }
}
@keyframes minionLand {
  0% { transform: translateY(-30px) scale(0.5); opacity: 0; }
  60% { transform: translateY(5px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes spellBurst {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  30% { transform: scale(1.3); filter: brightness(2); }
  60% { transform: scale(1.5); opacity: 0.6; filter: brightness(3); }
  100% { transform: scale(0); opacity: 0; filter: brightness(1); }
}
.card-playing {
  animation: cardPlayUp 0.5s ease-in forwards;
  z-index: 999 !important;
  pointer-events: none;
  will-change: transform, opacity;
}
.card-spell-burst {
  animation: spellBurst 0.6s ease-out forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Flying card clone */
.card-fly-clone {
  background: linear-gradient(175deg, #221508 0%, #100703 100%);
  border: 1px solid rgba(240,192,64,0.6);
}

/* Landing flash — bright gold burst */
@keyframes cardLandFlashAnim {
  0% { transform: scale(0.3); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Landing ripple — expanding gold ring */
@keyframes cardLandRippleAnim {
  0% { transform: scale(0.5); opacity: 0.8; border-width: 3px; }
  100% { transform: scale(2); opacity: 0; border-width: 1px; }
}

/* Minion landing: bounce scale */
.card-landing {
  animation: minionLandBounce 0.4s ease-out;
  will-change: transform;
}
@keyframes minionLandBounce {
  0% { transform: scale(0.5) translateY(-20px); opacity: 0; }
  50% { transform: scale(1.1) translateY(3px); opacity: 1; }
  70% { transform: scale(0.97) translateY(-1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Selected card glow in hand */
.hand-card.selected {
  transform: translateY(-20px) scale(1.1) !important;
  box-shadow: 0 0 25px rgba(255, 220, 80, 0.9), 0 0 50px rgba(255,180,0,0.4) !important;
  z-index: 99;
}

/* Attack animations */
@keyframes attackLunge {
  0% { transform: translateY(0); }
  30% { transform: translateY(-20px) scale(1.1); }
  50% { transform: translateY(-30px) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes takeDamage {
  0% { filter: brightness(1); }
  20% { filter: brightness(2) sepia(1) saturate(3) hue-rotate(-20deg); }
  40% { filter: brightness(0.5); }
  70% { filter: brightness(1.5) sepia(0.5) saturate(2); }
  100% { filter: brightness(1); }
}
@keyframes heroShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes weaponEquip {
  0% { box-shadow: 0 0 0 rgba(201,168,76,0); }
  50% { box-shadow: 0 0 20px rgba(201,168,76,0.6); }
  100% { box-shadow: 0 0 0 rgba(201,168,76,0); }
}
.minion-attacking-up   { animation: attackLunge 0.44s ease-in-out; z-index: 99 !important; will-change: transform; }
.minion-attacking-left { animation: attackLunge 0.44s ease-in-out; z-index: 99 !important; will-change: transform; }
.minion-attacking-right{ animation: attackLunge 0.44s ease-in-out; z-index: 99 !important; will-change: transform; }
.taking-damage  { animation: takeDamage 0.4s ease-out; will-change: filter; }
.hero-hit       { animation: heroShake 0.3s ease-out; will-change: transform; }

/* ── Floating Damage/Heal Numbers ─────────────────────────────────────────── */
.float-num {
  font-family: 'Cinzel Decorative', serif;
  font-size: 32px;
  font-weight: 900;
  transform: translateX(-50%);
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5);
  animation: floatNumRise 1.2s ease-out forwards;
  white-space: nowrap;
}
.float-num-damage { color: #ff3333; }
.float-num-heal   { color: #44ff44; }
.float-num-armor  { color: #aaddff; }
.float-num-big    { font-size: 40px; animation: floatNumRiseBig 1.2s ease-out forwards; }
.float-num-huge   { font-size: 48px; color: #ff2020;
  text-shadow: 0 0 12px rgba(255,40,20,0.8), 0 2px 4px rgba(0,0,0,0.9);
  animation: floatNumRiseHuge 1.2s ease-out forwards; }

@keyframes floatNumRise {
  0% { opacity: 1; transform: translateX(calc(-50% + var(--drift, 0px))) translateY(0); }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(calc(-50% + var(--drift, 0px))) translateY(-80px); }
}
@keyframes floatNumRiseBig {
  0% { opacity: 1; transform: translateX(calc(-50% + var(--drift, 0px))) translateY(0) scale(1.1); }
  15% { transform: translateX(calc(-50% + var(--drift, 0px))) translateY(-5px) scale(1.2); }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(calc(-50% + var(--drift, 0px))) translateY(-80px) scale(1); }
}
@keyframes floatNumRiseHuge {
  0% { opacity: 1; transform: translateX(calc(-50% + var(--drift, 0px))) translateY(0) scale(1.2); }
  10% { transform: translateX(calc(-54% + var(--drift, 0px))) translateY(-3px) scale(1.3); }
  20% { transform: translateX(calc(-46% + var(--drift, 0px))) translateY(-8px) scale(1.3); }
  30% { transform: translateX(calc(-50% + var(--drift, 0px))) translateY(-12px) scale(1.2); }
  70% { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(calc(-50% + var(--drift, 0px))) translateY(-90px) scale(1); }
}

/* ── Hero Impact Effects ──────────────────────────────────────────────────── */
.hero-damage-flash {
  animation: heroDmgFlash 0.3s ease-out;
}
@keyframes heroDmgFlash {
  0% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 12px rgba(201,168,76,0.15), inset 0 0 0 rgba(255,0,0,0); }
  30% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 20px rgba(255,0,0,0.6), inset 0 0 20px rgba(255,0,0,0.4); }
  100% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 12px rgba(201,168,76,0.15), inset 0 0 0 rgba(255,0,0,0); }
}
.hero-heal-flash {
  animation: heroHealFlash 0.3s ease-out;
}
@keyframes heroHealFlash {
  0% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 12px rgba(201,168,76,0.15); }
  30% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 24px rgba(64,255,64,0.5), inset 0 0 16px rgba(64,255,64,0.25); }
  100% { box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 12px rgba(201,168,76,0.15); }
}

/* Screen edge damage vignette */
.screen-damage-vignette {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  border-radius: 0;
  animation: screenDmgVig 0.4s ease-out forwards;
}
@keyframes screenDmgVig {
  0% { box-shadow: inset 0 0 80px rgba(255,0,0,0.2); }
  30% { box-shadow: inset 0 0 120px rgba(255,0,0,0.15); }
  100% { box-shadow: inset 0 0 0 rgba(255,0,0,0); }
}

/* ── Minion Impact Effects ────────────────────────────────────────────────── */
.minion-damage-flash {
  animation: minionDmgShake 0.25s ease-out;
}
@keyframes minionDmgShake {
  0% { filter: brightness(1); transform: translateX(0) translateZ(0); }
  15% { filter: brightness(1.8) sepia(0.5) saturate(2); transform: translateX(-3px); }
  30% { transform: translateX(3px); }
  45% { filter: brightness(1.4); transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  100% { filter: brightness(1); transform: translateX(0) translateZ(0); }
}
/* HP number flash red + scale */
.hp-flash-red {
  animation: hpFlashRed 0.35s ease-out;
}
@keyframes hpFlashRed {
  0% { filter: none; transform: scale(1); }
  20% { filter: brightness(2) hue-rotate(-30deg); transform: scale(1.3); }
  100% { filter: none; transform: scale(1); }
}

/* ── Minion Death Animation ───────────────────────────────────────────────── */
.minion-dying {
  animation: minionDeath 0.42s ease-in forwards;
  pointer-events: none;
}
@keyframes minionDeath {
  0% { opacity: 1; filter: brightness(1); transform: scale(1) rotate(0deg); }
  15% { filter: brightness(2.5); }
  40% { filter: brightness(0.8) saturate(0.3); }
  100% { opacity: 0; filter: brightness(0.4) saturate(0); transform: scale(0.8) rotate(6deg); }
}

/* Tooltip styles */
.hc-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,8,5,0.95);
  border: 1px solid #c9a84c;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Crimson Pro', serif;
  font-size: 12px;
  color: #c8b88a;
  line-height: 1.4;
  white-space: normal;
  width: 180px;
  text-align: center;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.8);
}
.hand-card:hover .hc-tooltip {
  display: block;
}
.minion-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,8,5,0.95);
  border: 1px solid #c9a84c;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Crimson Pro', serif;
  font-size: 11px;
  color: #c8b88a;
  line-height: 1.4;
  white-space: normal;
  width: 160px;
  text-align: center;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.8);
}
.game-minion:hover .minion-tooltip {
  display: block;
}

.hand-card-back { background: repeating-linear-gradient(135deg,#2a1505 0px,#2a1505 8px,#1a0d03 8px,#1a0d03 16px);
  border-color: rgba(240,192,64,0.12); cursor: default; }
.deck-pile { position: relative; width: 60px; height: 84px; margin: 6px auto; }
.deck-pile-sm { width: 44px; height: 62px; margin: 4px auto; }
.deck-pile-sm .deck-pile-card { width: 40px; height: 56px; }
.opp-hand-area { display: flex; justify-content: center; gap: 2px; padding: 4px 12px;
  min-height: 40px; }
.opp-hand-card { width: 42px; height: 58px; border-radius: 4px;
  border: 1px solid rgba(201,168,76,0.25); flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4); margin: 0 -4px; }
.deck-pile-card { position: absolute; width: 54px; height: 76px; border-radius: 5px;
  border: 2px solid rgba(201,168,76,0.3); background-size: cover; background-position: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6); }
.deck-pile-card:nth-child(1) { top: 0; left: 0; }
.deck-pile-card:nth-child(2) { top: 2px; left: 2px; }
.deck-pile-card:nth-child(3) { top: 4px; left: 4px; }
/* Mana gem — big and prominent */
.hc-cost { width: 34px; height: 34px; background: url('../assets/stat-mana.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-size: 15px; font-weight: 900; color: #fff8f0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5);
  position: absolute; top: -10px; left: -10px;
  z-index: 10; }
/* Mana color coding */
.hand-card.affordable .hc-cost { color: #fff8f0; }
.hand-card.not-affordable .hc-cost { filter: saturate(0.3) brightness(0.6); color: #aaa; }
.hand-card.exact-cost .hc-cost { filter: hue-rotate(-60deg) brightness(1.2) drop-shadow(0 0 10px rgba(255,150,0,0.6)); color: #fff8f0; }
.hc-emoji { font-size: 1.7rem; margin-top: 14px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
/* Card name */
.hc-name  { font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: #fff8f0; text-shadow: 0 1px 3px #000, 0 0 6px #000;
  text-align: center; line-height: 1.1; max-width: 82px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 4px; background: rgba(0,0,0,0.5); border-radius: 2px; margin-top: 2px; }
/* Stats row — old inline style */
.hc-stats { font-family: 'Cinzel Decorative', serif; font-size: 0.75rem; color: #e0d0b0; margin-top: 2px; text-shadow: 0 1px 2px #000;
  display: none; /* replaced by badge stats */ }
/* Attack/Health stat badges */
.hc-stat-badges { display: flex; justify-content: space-between; position: absolute; bottom: -4px; left: -4px; right: -4px; padding: 0 2px; pointer-events: none; }
.hc-atk { background: url('../assets/stat-attack.webp') center/contain no-repeat;
  color: #fff8f0; font-weight: 900; font-size: 13px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9); font-family: 'Cinzel Decorative', serif; }
.hc-hp { background: url('../assets/stat-health.webp') center/contain no-repeat;
  color: #fff8f0; font-weight: 900; font-size: 13px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9); font-family: 'Cinzel Decorative', serif; }

/* Minions */
.game-minion { width: 80px; height: 100px; background: linear-gradient(175deg, #221508, #100703);
  border-radius: 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  cursor: default; position: relative; transition: transform 0.18s, box-shadow 0.18s;
  will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden;
  user-select: none;
  /* Embossed border */
  border: 1px solid rgba(180,120,40,0.35);
  border-top-color: rgba(220,180,100,0.35);
  border-left-color: rgba(200,160,80,0.3);
  border-bottom-color: rgba(60,30,10,0.5);
  border-right-color: rgba(80,40,15,0.4);
  /* Sitting on stone floor: strong bottom shadow + warm torch side light */
  box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,240,200,0.06),
    -4px 0 12px rgba(200,120,30,0.1), 4px 0 12px rgba(200,120,30,0.1); }
/* Rarity inner glow for minions on board */
.game-minion.rarity-common  { border-color: rgba(160,160,160,0.3); }
.game-minion.rarity-rare    { box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.35), inset 0 0 8px rgba(80,140,255,0.12); border-color: rgba(80,140,255,0.3); }
.game-minion.rarity-epic    { box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.35), inset 0 0 8px rgba(160,60,220,0.12); border-color: rgba(160,60,220,0.3); }
.game-minion.rarity-legendary { box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.35), inset 0 0 10px rgba(240,180,40,0.15); border-color: rgba(240,180,40,0.4); }
.game-minion.can-attack { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(240,192,64,0.3), 0 0 16px rgba(240,192,64,0.45); cursor: pointer; }
.game-minion.can-attack:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 0 0 1px rgba(240,192,64,0.5), 0 8px 24px rgba(240,192,64,0.6); }
.game-minion.targetable { border-color: #ff4020; box-shadow: 0 0 0 2px rgba(255,64,32,0.4), 0 0 18px rgba(224,64,32,0.8);
  cursor: crosshair; animation: pulse-target 1s ease-in-out infinite; }
.game-minion.selected-attacker { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,192,64,0.6), 0 0 28px rgba(240,192,64,1); transform: translateY(-10px) scale(1.06); }
.game-minion.has-taunt { box-shadow: 0 0 0 3px rgba(240,192,64,0.5), 0 0 16px rgba(240,192,64,0.25); }
.game-minion.is-frozen { border-color: #80c0ff; box-shadow: 0 0 0 2px rgba(128,192,255,0.4), 0 0 14px rgba(128,192,255,0.6); filter: brightness(1.15) hue-rotate(110deg); }
.divine-ring { position: absolute; inset: -5px; border-radius: 12px;
  border: 2px solid #ffe680; box-shadow: 0 0 12px rgba(255,230,128,0.7); pointer-events: none;
  animation: divineShimmer 2s ease-in-out infinite; }
@keyframes divineShimmer {
  0%,100% { box-shadow: 0 0 12px rgba(255,230,128,0.5); }
  50% { box-shadow: 0 0 20px rgba(255,230,128,0.9); }
}

/* ── Card State Indicators ────────────────────────────────────────────────── */
/* Can attack: pulsing gold border */
.game-minion.can-attack { animation: canAttackPulse 1.5s ease-in-out infinite; cursor: pointer; }
@keyframes canAttackPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(240,192,64,0.3), 0 0 12px rgba(240,192,64,0.3); }
  50% { box-shadow: 0 0 0 2px rgba(240,192,64,0.6), 0 0 20px rgba(240,192,64,0.5); }
}

/* Summoning sickness: muted, zzz overlay */
.game-minion.has-attacked, .game-minion:not(.can-attack):not(.targetable):not(.selected-attacker):not(.is-frozen) {
  filter: brightness(0.85);
}

/* Taunt: distinctive shield border */
.game-minion.has-taunt {
  border-style: double !important;
  border-width: 3px !important;
  border-color: rgba(240,192,64,0.6) !important;
}

/* Stealth: semi-transparent */
.game-minion:has(.stealth-icon) { opacity: 0.6; filter: blur(0.5px); }

/* Targeting mode: valid targets glow green */
.game-minion.targetable { cursor: crosshair; }
.game-hero-portrait.targetable { cursor: crosshair; }

/* Targeting message */
.targeting-msg {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 30; font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold);
  background: rgba(10,6,3,0.85); border: 1px solid rgba(201,168,76,0.4);
  padding: 6px 20px; border-radius: 4px;
  animation: targetMsgFade 0.3s ease-out;
  pointer-events: none;
}
@keyframes targetMsgFade { from { opacity:0; transform:translateX(-50%) translateY(-8px); } to { opacity:1; transform:translateX(-50%); } }

/* Attack clash spark */
.attack-clash {
  position: fixed; z-index: 99999; pointer-events: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,80,0.9) 0%, rgba(255,150,0,0.5) 40%, transparent 70%);
  animation: clashBurst 0.3s ease-out forwards;
}
@keyframes clashBurst {
  0% { transform: translate(-50%,-50%) scale(0.3); opacity: 1; }
  50% { transform: translate(-50%,-50%) scale(1.5); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(2); opacity: 0; }
}

/* Opponent action text */
.opp-action-text {
  position: absolute; top: 40%; left: 50%; transform: translateX(-50%);
  z-index: 30; pointer-events: none;
  font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; color: #e8dcc8;
  background: rgba(10,6,3,0.9); border: 1px solid rgba(201,168,76,0.4);
  padding: 8px 20px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  animation: oppActionIn 0.3s ease-out, oppActionOut 0.4s ease-in 1.5s forwards;
}
@keyframes oppActionIn { from { opacity:0; transform:translateX(-50%) translateY(-10px); } to { opacity:1; transform:translateX(-50%); } }
@keyframes oppActionOut { to { opacity:0; transform:translateX(-50%) translateY(-10px); } }

/* Turn flash */
.turn-flash {
  position: absolute; inset: 0; z-index: 25; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.15) 0%, transparent 70%);
  animation: turnFlashAnim 0.6s ease-out forwards;
}
@keyframes turnFlashAnim {
  0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; }
}

.minion-emoji { font-size: 1.8rem; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6)); }
.minion-name  { font-size: 0.46rem; letter-spacing: 0.04em;
  color: var(--text-dim); text-align: center; line-height: 1.1; max-width: 74px;
  white-space: nowrap; overflow: hidden; }
.minion-stats { display: flex; gap: 5px; }
.m-atk { width: 28px; height: 28px; background: url('../assets/stat-attack.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', serif;
  font-size: 0.75rem; font-weight: 900; color: #fff8f0; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.m-hp  { width: 28px; height: 28px; background: url('../assets/stat-health.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', serif;
  font-size: 0.75rem; font-weight: 900; color: #fff8f0; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.m-hp.damaged { filter: brightness(1.3) hue-rotate(10deg); }
.status-icon { position: absolute; bottom: 28px; right: 2px; font-size: 0.85rem; }
.attacked-veil { position: absolute; inset: 0; background: rgba(0,0,0,0.38); border-radius: 8px; pointer-events: none; }
@keyframes pulse-target { 0%,100% { box-shadow: 0 0 0 2px rgba(255,64,32,0.4), 0 0 14px rgba(224,64,32,0.7); } 50% { box-shadow: 0 0 0 3px rgba(255,64,32,0.7), 0 0 26px rgba(224,64,32,1); } }

/* Hero power & sidebar */
.hero-power-btn { background: linear-gradient(160deg,#1a0a1a,#0a0512); border: 2px solid rgba(144,64,224,0.45);
  color: #c090ff; font-family: Arial, sans-serif; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.6rem 0.4rem; border-radius: 4px;
  cursor: pointer; transition: all 0.2s; text-align: center; width: 96px;
  box-shadow: 0 0 12px rgba(144,64,224,0.15); }
.hero-power-btn:hover:not(:disabled) { border-color: #9040e0; box-shadow: 0 0 20px rgba(144,64,224,0.45); }
.hero-power-btn:disabled, .hero-power-btn.hp-used { opacity: 0.35; cursor: default; }
.concede-btn { font-size: 0.55rem; padding: 0.4rem 0.6rem; }

/* Game over overlay */
.game-over-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; }
.game-over-box { background: linear-gradient(175deg, #1a0f08, #0d0805); border: 2px solid rgba(201,168,76,0.4);
  border-radius: 14px; padding: 3rem 2.5rem; text-align: center; max-width: 460px; width: 90%;
  box-shadow: 0 0 80px rgba(0,0,0,0.9), 0 0 40px rgba(240,192,64,0.2);
  animation: gameOverReveal 0.5s cubic-bezier(0.22,1,0.36,1); }
@keyframes gameOverReveal { from { opacity: 0; transform: scale(0.8) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.game-over-title { font-family: 'Cinzel Decorative', serif; font-size: 3rem; margin-bottom: 1.5rem; letter-spacing: 0.05em; filter: drop-shadow(0 0 20px currentColor); }
.game-over-rewards { font-family: 'Crimson Pro', serif; font-size: 1.1rem; color: var(--text);
  margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.game-over-box button { font-size: 0.85rem; padding: 0.8rem 2rem; }

@media (max-width: 480px) {
  .game-over-box { padding: 2rem 1.5rem; }
  .game-over-title { font-size: 2rem; }
  .game-over-box button { font-size: 0.75rem; padding: 0.7rem 1.5rem; }
}

/* ── Deck Screens ─────────────────────────────────────────────────────────────── */
.deck-list { display: flex; flex-direction: column; gap: 0.6rem; position: relative; z-index: 1; }
.deck-card { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem;
  background: rgba(0,0,0,0.25); border: 1px solid; border-radius: 4px; }
.deck-card:hover { background: rgba(0,0,0,0.4); }
.deck-icon { font-size: 2rem; }
.deck-info { flex: 1; }
.deck-name { font-size: 0.9rem; font-weight: 700; }
.deck-meta { font-family: 'Crimson Pro', serif; font-size: 0.82rem; color: var(--text-dim); }
.deck-btns { display: flex; gap: 0.4rem; }
.new-deck-form { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 500;
  padding: 1rem; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; margin-bottom: 1.5rem; }
.new-deck-form .form-group { flex: 1; min-width: 140px; }
.form-group select { background: rgba(0,0,0,0.4); border: 1px solid rgba(240,192,64,0.2);
  border-radius: 2px; color: var(--text); font-family: Arial, sans-serif; font-size: 0.8rem;
  padding: 0.6rem 0.8rem; outline: none; width: 100%; }

.deck-slots-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(26,18,8,0.6);
  border: 1px solid #3a2e1a;
  border-radius: 6px;
}
.btn-buy-slot {
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #c9a84c;
  background: transparent;
  border: 1px solid rgba(201,168,76,0.3);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-buy-slot:hover {
  border-color: #c9a84c;
  background: rgba(201,168,76,0.1);
}

/* ── Deck Builder ─────────────────────────────────────────────────────────────── */
#screen-deck-builder.active { display: block; }
.builder-layout { display: grid; grid-template-columns: 1fr 290px; height: 100vh; padding-top: 72px; overflow: hidden; position: relative; z-index: 1; }
.builder-left  { display: flex; flex-direction: column; overflow: hidden; padding: 0.8rem 1rem; }
.builder-right { display: flex; flex-direction: column; overflow: hidden; padding: 0.8rem 1rem;
  border-left: 2px solid rgba(240,192,64,0.25);
  background: linear-gradient(rgba(5,3,10,0.55), rgba(5,3,10,0.65)),
    url('assets/deck-panel-bg.webp') center center / cover no-repeat;
  box-shadow: -4px 0 24px rgba(0,0,0,0.8); position: relative; z-index: 2; }
.builder-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.builder-filters input, .builder-filters select { background: rgba(0,0,0,0.4); border: 1px solid rgba(240,192,64,0.15);
  border-radius: 2px; color: var(--text); font-family: Arial, sans-serif !important; font-size: 0.72rem; padding: 0.4rem 0.6rem; outline: none; text-transform: none !important; }
.builder-filters input { flex: 1; min-width: 120px; }

/* Builder card grid */
#builder-card-list { flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem;
  align-content: start; padding: 0.5rem; }
#builder-card-list::-webkit-scrollbar { width: 4px; }
#builder-card-list::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.2); border-radius: 2px; }

/* Builder card (grid cell) */
.builder-card { background: linear-gradient(175deg,#211408,#0e0603);
  border-radius: 8px; display: flex; flex-direction: column; align-items: center;
  overflow: hidden; position: relative; cursor: default; user-select: none;
  min-height: 200px; contain: layout style paint;
  /* Embossed border */
  border: 1px solid rgba(180,120,40,0.3);
  border-top-color: rgba(220,180,100,0.3);
  border-left-color: rgba(200,160,80,0.25);
  border-bottom-color: rgba(60,30,10,0.45);
  border-right-color: rgba(80,40,15,0.35);
  /* Physical depth */
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,240,200,0.05); }
.builder-card.bc-can { cursor: pointer; }
.builder-card.bc-can:hover { opacity: 0.8; }
.builder-card.bc-max { opacity: 0.45; }
.db-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0.6rem 0; }
.bc-mana { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px;
  background: url('../assets/stat-mana.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-size: 0.75rem; font-weight: 900;
  color: #fff8f0; z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.bc-in-deck { position: absolute; top: 4px; right: 4px; font-family: 'Cinzel Decorative', serif;
  font-size: 0.65rem; color: var(--gold); background: rgba(0,0,0,0.7);
  border: 1px solid rgba(240,192,64,0.4); border-radius: 3px;
  padding: 1px 4px; z-index: 1; }
.bc-art { width: 100%; flex: 0 0 60%; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; background: transparent; }
.bc-emoji-art { font-size: 2.2rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.bc-stat-row { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 4px; }
.bc-atk { width: 22px; height: 22px; background: url('../assets/stat-attack.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', serif;
  font-size: 0.6rem; font-weight: 900; color: #fff8f0; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.bc-hp  { width: 22px; height: 22px; background: url('../assets/stat-health.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', serif;
  font-size: 0.6rem; font-weight: 900; color: #fff8f0; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.bc-nameband { width: 100%; padding: 5px 6px; font-size: 0.68rem; font-weight: 700;
  text-align: center; white-space: normal; line-height: 1.3;
  background: rgba(0,0,0,0.75); min-height: 30px;
  display: flex; align-items: center; justify-content: center; }
.bc-footer { width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 2px 5px 4px; font-size: 0.58rem; }
.bc-own { color: var(--green); font-weight: 700; }
.bc-unowned { color: #e04020; }

/* Deck right panel */
.builder-deck-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.builder-deck-title { font-family: 'Cinzel Decorative', serif; font-size: 0.95rem; color: var(--gold); }
#builder-count { font-family: 'Cinzel Decorative', serif; font-size: 1.05rem; }
#builder-deck-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
#builder-deck-cards::-webkit-scrollbar { width: 4px; }
#builder-deck-cards::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.15); border-radius: 2px; }
.bdc { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 3px;
  background: rgba(0,0,0,0.25); font-size: 0.73rem; border-left: 3px solid transparent; transition: background 0.15s; }
.bdc:hover { background: rgba(0,0,0,0.4); }
.bdc-cost { width: 22px; height: 22px; background: url('../assets/stat-mana.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-size: 0.62rem; color: #fff8f0; flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.bdc-emoji { font-size: 0.9rem; flex-shrink: 0; }
.bdc-name  { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdc-qty   { font-family: 'Cinzel Decorative', serif; font-size: 0.78rem; color: var(--gold); flex-shrink: 0; }
.bdc-rm    { background: none; border: none; color: rgba(224,64,32,0.6); font-size: 1.1rem; cursor: pointer;
  padding: 0 0.15rem; line-height: 1; flex-shrink: 0; transition: color 0.15s; }
.bdc-rm:hover { color: #ff6040; }

/* ── Collection ──────────────────────────────────────────────────────────────── */
.coll-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }
.coll-filters select, .coll-filters input { background: rgba(0,0,0,0.4); border: 1px solid rgba(240,192,64,0.15);
  border-radius: 2px; color: var(--text); font-family: Arial, sans-serif; font-size: 0.72rem; padding: 0.4rem 0.6rem; outline: none; }
.coll-filters input { min-width: 160px; }
.coll-show-all { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-dim); cursor: pointer; }
#collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(162px,1fr)); gap: 1rem; }

/* Collection cards — Hearthstone style */
.coll-card { background: linear-gradient(175deg,#221508,#100703);
  border-radius: 10px; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  position: relative; cursor: default;
  /* Embossed border */
  border: 1px solid rgba(180,120,40,0.3);
  border-top-color: rgba(220,180,100,0.35);
  border-left-color: rgba(200,160,80,0.3);
  border-bottom-color: rgba(60,30,10,0.5);
  border-right-color: rgba(80,40,15,0.4);
  /* Physical depth */
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,240,200,0.06); }
.coll-card.not-owned { opacity: 0.38; filter: saturate(0.3); }
.cc-mana { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px;
  background: url('../assets/stat-mana.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-size: 0.85rem; font-weight: 900;
  color: #fff8f0; z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.cc-qty-badge { position: absolute; top: 6px; right: 6px; font-family: 'Cinzel Decorative', serif;
  font-size: 0.72rem; font-weight: 900; color: var(--gold); padding: 2px 6px;
  border-radius: 3px; border: 1px solid; z-index: 1; background: rgba(0,0,0,0.65); }
.cc-unowned-badge { color: #e04020 !important; border-color: rgba(224,64,32,0.4) !important;
  background: rgba(0,0,0,0.65) !important; font-family: Arial, sans-serif; font-size: 0.58rem; letter-spacing: 0.05em; }
.cc-art { width: 100%; aspect-ratio: 1.1; display: flex; align-items: center; justify-content: center; position: relative; }
.cc-emoji { font-size: 3rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6)); }
.cc-stat-row { position: absolute; bottom: 4px; left: 0; right: 0;
  display: flex; justify-content: space-between; padding: 0 6px; }
.cc-atk { width: 28px; height: 28px; background: url('../assets/stat-attack.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', serif;
  font-size: 0.72rem; font-weight: 900; color: #fff8f0; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.cc-hp  { width: 28px; height: 28px; background: url('../assets/stat-health.webp') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center; font-family: 'Cinzel Decorative', serif;
  font-size: 0.72rem; font-weight: 900; color: #fff8f0; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.cc-nameband { width: 100%; padding: 5px 8px; font-size: 0.72rem; font-weight: 700;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(0,0,0,0.55); border-top: 2px solid; }
.cc-sub-row { width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 3px 8px; font-size: 0.6rem; background: rgba(0,0,0,0.3); }
.cc-type-lbl { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.cc-rarity-lbl { font-weight: 700; }
.cc-desc { font-family: 'Crimson Pro', serif; font-size: 0.72rem; color: var(--text); opacity: 0.8;
  text-align: center; line-height: 1.4; padding: 5px 8px 6px; }

/* ── Collection Pagination ────────────────────────────────────────────────────── */
.coll-pagination {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.8rem; margin-top: 1.5rem; padding: 0.8rem 0;
  border-top: 1px solid rgba(240,192,64,0.15);
}
.cpag-info {
  font-family: 'Crimson Pro', serif; font-size: 0.8rem; color: var(--text-dim);
  letter-spacing: 0.05em;
}
.cpag-buttons { display: flex; align-items: center; gap: 0.35rem; }
.cpag-btn {
  font-family: Arial, sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; padding: 0.4rem 0.7rem; border-radius: 3px;
  border: 1px solid rgba(240,192,64,0.25); background: rgba(26,15,8,0.8);
  color: var(--text-dim); cursor: pointer; transition: all 0.2s;
}
.cpag-btn:hover:not(:disabled) {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 8px rgba(240,192,64,0.2);
}
.cpag-btn:disabled {
  opacity: 0.3; cursor: default;
}
.cpag-btn.cpag-active {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a0800; border-color: var(--gold);
  box-shadow: 0 0 12px rgba(240,192,64,0.35);
}
.cpag-prev, .cpag-next { text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.1em; }
.cpag-ellipsis { color: var(--text-dim); opacity: 0.5; padding: 0 0.3rem; font-size: 0.8rem; }

/* ── Marketplace ──────────────────────────────────────────────────────────────── */
.mp-tabs { display: flex; gap: 6px; border-bottom: none; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; }
.mp-tab {
  background-image: url('../assets/tab-btn.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  color: #c9a84c;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  padding: 10px 20px;
  min-width: 110px;
  min-height: 48px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
  filter: brightness(0.85);
}
.mp-tab.active { filter: brightness(1.3); color: #ffe88a; text-shadow: 0 0 8px rgba(201,168,76,0.6); border-bottom: none; min-height: 48px; }
.mp-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem;
  background: rgba(0,0,0,0.75); border: 1px solid #3a2e1a;
  border-radius: 6px;
  margin-bottom: 0.4rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.mp-emoji { font-size: 1.6rem; flex-shrink: 0; }
.mp-info { flex: 1; min-width: 0; }
.mp-name { font-size: 0.82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-meta { font-family: 'Crimson Pro', serif; font-size: 0.75rem; color: var(--text-dim); }
.mp-seller { font-size: 0.68rem; color: var(--text-dim); opacity: 0.7; }
.mp-price { font-family: 'Cinzel Decorative', serif; font-size: 1rem; color: var(--gold); flex-shrink: 0; }
.mine-label { font-size: 0.65rem; color: var(--text-dim); }
.cdm-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Leaderboard ──────────────────────────────────────────────────────────────── */
.lb-tabs { display: flex; gap: 8px; border-bottom: none; margin-bottom: 1.5rem; align-items: center; }
.lb-tab {
  background-image: url('../assets/tab-btn.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  color: #c9a84c;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  text-transform: uppercase;
  padding: 10px 24px;
  min-width: 130px;
  min-height: 48px;
  cursor: pointer;
  transition: filter 0.2s;
  filter: brightness(0.85);
}
.lb-tab.active { filter: brightness(1.3); color: #ffe88a; text-shadow: 0 0 8px rgba(201,168,76,0.6); }
#my-rank-box { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;
  padding: 0.8rem 1rem; background: rgba(240,192,64,0.05); border: 1px solid rgba(240,192,64,0.15);
  border-radius: 4px; margin-bottom: 1.5rem; font-size: 0.82rem; color: var(--text-dim); }
#my-rank-box strong { color: var(--gold); }
.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim);
  padding: 0.5rem 0.8rem; text-align: left; border-bottom: 1px solid rgba(240,192,64,0.15); }
.lb-table td { padding: 0.6rem 0.8rem; font-size: 0.82rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
tr.lb-me td { background: rgba(240,192,64,0.05); color: var(--gold); }

/* ════════════════════════════════════════════════════════════════════════════ */
/* ── Dark Fantasy Custom Dropdown ─────────────────────────────────────────── */
select[data-upgraded] { display: none !important; }
.gdd-wrap {
  position: relative;
  display: inline-block;
  min-width: 120px;
  z-index: 10;
}
.new-deck-form .gdd-wrap {
  display: block;
  width: 100%;
}
.new-deck-form .gdd-trigger {
  width: 100%;
  box-sizing: border-box;
}
.gdd-trigger {
  background: #1a1208;
  border: 1px solid #3a2e1a;
  border-radius: 4px;
  padding: 7px 32px 7px 12px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #c9a84c;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: border-color 0.2s;
  position: relative;
}
.gdd-trigger:hover { border-color: #c9a84c; }
.gdd-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s;
  line-height: 0;
}
.gdd-arrow.gdd-open { transform: translateY(-50%) rotate(180deg); }
.gdd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: #1a1208;
  border: 1px solid #c9a84c;
  border-radius: 4px;
  z-index: 99999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.95);
}
.gdd-menu.gdd-open { display: block; }
.gdd-option {
  padding: 8px 14px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #c9a84c !important;
  background: #1a1208 !important;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid rgba(58,46,26,0.4);
  transition: background 0.15s, color 0.15s;
  display: block;
}
.gdd-option:last-child { border-bottom: none; }
.gdd-option:hover { background: rgba(201,168,76,0.2) !important; color: #ffe88a !important; }
.gdd-option.gdd-selected { background: rgba(201,168,76,0.15) !important; color: #ffe88a !important; }
.gdd-option:hover { background: rgba(201,168,76,0.15); color: #ffe88a; }
.gdd-option.gdd-selected { background: rgba(201,168,76,0.12); color: #ffe88a; }
.gdd-menu::-webkit-scrollbar { width: 4px; }
.gdd-menu::-webkit-scrollbar-track { background: #0f0c08; }
.gdd-menu::-webkit-scrollbar-thumb { background: #3a2e1a; border-radius: 2px; }
/* Fallback for non-upgraded selects */
select:not([data-upgraded]) {
  appearance: none; -webkit-appearance: none;
  background-color: rgba(10,8,5,0.9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
  border: 1px solid #3a2e1a; border-radius: 4px; color: #c9a84c;
  font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 1px;
  padding: 7px 32px 7px 12px; cursor: pointer; transition: border-color 0.2s;
}
select:not([data-upgraded]):hover { border-color: #c9a84c; }
select:not([data-upgraded]):focus { outline: none; border-color: #c9a84c; box-shadow: 0 0 8px rgba(201,168,76,0.2); }

/* ── UI/UX ENHANCEMENTS ──────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════════ */

/* 1. Chakra Petch gaming font for stats, counters, and key numeric displays  */
.lobby-stat-val, #builder-count, .builder-deck-title,
.hp-val, .mana-txt, .m-atk, .m-hp,
.bc-atk, .bc-hp, .cc-atk, .cc-hp,
.stat-atk, .stat-hp, .mp-price,
.hc-cost, .bc-mana, .bdc-cost, .cc-mana,
#nav-gold, #nav-level,
.armor-val { font-family: 'Chakra Petch', 'Cinzel Decorative', serif; }

/* 2. Global visible focus ring — critical for keyboard accessibility */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Replace outline:none on inputs with a proper focus indicator */
.form-group input:focus,
.builder-filters input:focus,
.coll-filters input:focus,
.price-input:focus,
.builder-filters select:focus,
.coll-filters select:focus,
.form-group select:focus {
  outline: 2px solid rgba(240,192,64,0.55);
  outline-offset: 0;
  border-color: rgba(240,192,64,0.65) !important;
}

/* 3. prefers-reduced-motion — disable all animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .spark { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .board-zone.board-drop-zone { animation: none; }
  .hand-card.playable:hover { transform: translateY(-8px); }
}

/* 4. Skip link — keyboard accessibility */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1.2rem;
  background: var(--gold);
  color: #1a0800;
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* 5. Touch-friendly minimum target sizes */
.btn-sm, .btn-sm-outline, .btn-claim, .nav-logout-btn,
.auth-tab, .mp-tab, .lb-tab, .auth-submit, .end-turn-btn,
.hero-power-btn { min-height: 36px; }

@media (pointer: coarse) {
  .btn-sm, .btn-sm-outline, .btn-claim, .bdc-rm, .modal-close {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .play-btn { min-height: 64px; }
  .deck-pick-item { min-height: 60px; }
  .auth-tab { min-height: 44px; }
}

/* 6. Loading state — disable button during async operations */
.btn-loading {
  opacity: 0.6;
  cursor: wait !important;
  pointer-events: none;
  position: relative;
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* 7. Skeleton shimmer for loading content */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.6s ease infinite;
  border-radius: 4px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* 8. Cursor pointer coverage — all interactive elements */
.coll-card:not(.not-owned),
.class-card, .feature-card, .mini-card, .hero-portrait,
.deck-pick-item:not(.deck-invalid), .deck-card,
.nav-link, .nav-logo, .mp-tab, .lb-tab, .auth-tab,
.play-btn, .quest-item .btn-claim,
[role="button"], [tabindex="0"] { cursor: pointer; }

/* 9. Fix minion and card names — currently too small (0.44–0.46rem) */
.minion-name {
  font-size: 0.56rem !important;
  color: #d4b880 !important;
  font-weight: 600;
}
.hc-name {
  font-size: 11px !important;
  color: #fff !important;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
}

/* 10. Improve dim text contrast — #b89860 ≈ 3.8:1 fails WCAG AA */
/* Raised to #c8a870 ≈ 4.6:1 on #0a0608 background */
.form-group label, .quest-desc, .lobby-stat-lbl, .play-btn-desc,
.screen-subtitle, .dpi-meta, .deck-meta, .mp-meta, .mp-seller,
.log-line, .xp-text, .cc-type-lbl, .bc-footer { color: #c8a870; }

/* 11. Deck card interactive improvements */
.deck-card { cursor: pointer; }
.deck-card:hover {
  border-color: rgba(240,192,64,0.35) !important;
  background: rgba(240,192,64,0.04);
  transform: translateX(3px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* 12. Marketplace row hover */
.mp-row { transition: background 0.2s, border-color 0.2s; }
.mp-row:hover {
  background: rgba(201,168,76,0.15) !important;
  border-color: #c9a84c !important;
}
.mp-panel {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 16px;
}
.sell-card-row {
  background: rgba(0,0,0,0.75);
  border: 1px solid #3a2e1a;
  border-radius: 6px;
  margin-bottom: 6px;
  transition: background 0.2s, border-color 0.2s;
}
.sell-card-row:hover {
  background: rgba(201,168,76,0.15);
  border-color: #c9a84c;
}

.mp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  margin-top: 0.5rem;
}
.mp-page-num {
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  color: var(--text-dim, #b8a47c);
  min-width: 5rem;
  text-align: center;
}
.mp-page-btn {
  font-family: Arial, sans-serif;
  padding: 0.4rem 1rem;
  border: 1px solid var(--gold, #c9a44a);
  background: rgba(0,0,0,0.3);
  color: var(--gold, #c9a44a);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mp-page-btn:hover:not(:disabled) {
  background: var(--gold, #c9a44a);
  color: #1a1a2e;
}
.mp-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
#mw-pagination .mp-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* 13. Neon glow enhancements on active game elements */
.game-minion.can-attack {
  box-shadow:
    0 0 0 1px rgba(240,192,64,0.5),
    0 0 20px rgba(240,192,64,0.5),
    0 0 45px rgba(240,192,64,0.15) !important;
}
.hand-card.playable {
  box-shadow:
    0 4px 18px rgba(240,192,64,0.2),
    0 0 0 1px rgba(240,192,64,0.35) !important;
}
/* end-turn-btn.my-turn pulse handled by primary endTurnPulse keyframes above */

/* 14. Board drop zone pulse animation */
.board-zone.board-drop-zone {
  animation: dropPulse 1.6s ease-in-out infinite;
}
@keyframes dropPulse {
  0%, 100% { box-shadow: inset 0 0 20px rgba(64,184,64,0.06), 0 0 0 1px rgba(64,184,64,0.2); }
  50%       { box-shadow: inset 0 0 35px rgba(64,184,64,0.14), 0 0 0 2px rgba(64,184,64,0.45); }
}

/* 15. Active nav link glow */
#nav-game-links .nav-link.active {
  text-shadow: 0 0 12px rgba(240,192,64,0.65);
}

/* 16. will-change for GPU-accelerated animated elements */
.hand-card.playable, .hand-card.playable:hover,
.game-minion.can-attack, .game-minion.can-attack:hover,
.card, .card:hover, .feature-card, .class-card,
.play-btn, .builder-card.bc-can { will-change: transform; }

/* 17. Quest progress bar improvements */
.quest-bar {
  height: 5px !important;
  border-radius: 3px !important;
  margin-bottom: 0.3rem !important;
}
.quest-item.quest-done .quest-bar-fill {
  background: linear-gradient(to right, #40b840, #80e080) !important;
}
.quest-item.quest-done { border-color: rgba(64,184,64,0.25) !important; }

/* 18. Game over overlay button transition */
.game-over-box button {
  transition: all 0.2s;
  cursor: pointer;
}
/* game-over hover handled by primary tier */

/* 19. XP bar smooth animation */
.xp-bar-fill {
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 20. Empty and loading state improvements */
.empty-msg {
  padding: 3rem 2rem !important;
  font-size: 0.95rem !important;
  opacity: 0.75;
  line-height: 1.6 !important;
}
.loading-msg {
  padding: 2rem !important;
  animation: pulse 1.8s ease-in-out infinite;
}

/* 21. Auth submit button focus */
.auth-submit:focus-visible {
  outline: 2px solid rgba(255,150,100,0.8);
  outline-offset: 2px;
}

/* 22. Improved custom scrollbars */
.deck-pick-list::-webkit-scrollbar,
#builder-card-list::-webkit-scrollbar,
#builder-deck-cards::-webkit-scrollbar,
#game-log-messages::-webkit-scrollbar,
.hand-area::-webkit-scrollbar { width: 4px; height: 4px; }
.deck-pick-list::-webkit-scrollbar-thumb,
#builder-card-list::-webkit-scrollbar-thumb,
#builder-deck-cards::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.22); border-radius: 2px; }
.deck-pick-list::-webkit-scrollbar-track,
#builder-card-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }

/* 23. Mobile toast positioning */
@media (max-width: 480px) {
  #toasts { bottom: 1rem; right: 0.75rem; left: 0.75rem; }
  .toast { max-width: none; }
}

/* 24. Mobile game screen layout */
@media (max-width: 768px) {
  .game-layout { grid-template-columns: 1fr; }
  .game-hero-portrait { width: 72px; height: 72px; font-size: 1.6rem; }
  .hand-card { width: 72px; height: 100px; margin: 0 -4px; }
  .hc-cost { width: 26px; height: 26px; font-size: 12px; top: -8px; left: -8px; }
  .hc-name { font-size: 8px !important; }
  .hc-atk, .hc-hp { width: 20px; height: 20px; font-size: 11px; }
  .hc-emoji { font-size: 1.35rem; margin-top: 10px; }
  .game-minion { width: 66px; height: 84px; }
  .minion-emoji { font-size: 1.4rem; }
  .board-zone { min-height: 88px; }
}

/* 25. Mobile nav */
@media (max-width: 600px) {
  nav { padding: 0 1rem; height: auto; min-height: 56px; }
  .screen-body { padding: 4rem 0.8rem 2rem; min-height: calc(100vh - 56px); }
  #screen-game { padding-top: 0; }
  .game-layout { height: 100vh; padding-top: 56px; }
  .lobby-grid { grid-template-columns: 1fr !important; }
}

/* 26. Responsive builder */
@media (max-width: 900px) {
  .builder-layout { grid-template-columns: 1fr 240px; }
}
@media (max-width: 640px) {
  .builder-layout { grid-template-columns: 1fr; height: auto; padding-top: 60px; overflow: auto; }
  .builder-right { border-left: none; border-top: 1px solid rgba(240,192,64,0.12); height: 40vh; }
}

/* 27. Responsive collection grid */
@media (max-width: 480px) {
  #collection-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
}

/* 28. Lobby card responsive */
@media (max-width: 480px) {
  .play-btn-icon { font-size: 1.4rem; }
  .play-btn { padding: 0.8rem 1rem; }
  .lobby-stats-row { gap: 1rem; }
}

/* 29. Improved modal animations */
.modal-overlay { transition: opacity 0.2s; }
.modal-box {
  animation: modalReveal 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalReveal {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 30. Feature cards on landing — decorative icons (aria-hidden set in HTML) */

/* ── AUDIT FOLLOW-UP FIXES ───────────────────────────────────────────────── */

/* Tab hover states (missing from original CSS) */
.mp-tab:hover { filter: brightness(1.15); color: #ffe88a; }
.lb-tab:hover { filter: brightness(1.15); color: #ffe88a; }
.auth-tab:hover {
  color: var(--gold);
  background: rgba(240,192,64,0.04);
}

/* Claim button hover */
.btn-claim:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
  transition: all 0.2s;
}
.btn-claim { transition: all 0.2s; }

/* Responsive leaderboard table */
@media (max-width: 600px) {
  .lb-table thead { display: none; }
  .lb-table, .lb-table tbody, .lb-table tr, .lb-table td { display: block; width: 100%; }
  .lb-table tr {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  .lb-table td { padding: 0; border: none; font-size: 0.8rem; }
  .lb-table td:nth-child(1) { font-size: 1rem; min-width: 28px; }
  .lb-table td:nth-child(2) { flex: 1; font-weight: 700; }
  .lb-table td:nth-child(3) { color: var(--gold); }
}

/* Form group label improvement — for (links inputs properly) */
.form-group label { cursor: default; }
.form-group label[for] { cursor: pointer; }

/* Leaderboard table hover row */
.lb-table tbody tr:hover td { background: rgba(240,192,64,0.03); }
.lb-table tbody tr { transition: background 0.15s; }

/* Not-owned cards — slightly improve opacity for readability */
.coll-card.not-owned { opacity: 0.45; filter: saturate(0.35); }

/* Opponent thinking indicator — give it a proper animation */
#ai-thinking-indicator {
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  animation: aiPulse 1.2s ease-in-out infinite;
}
@keyframes aiPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #ai-thinking-indicator { animation: none; opacity: 0.8; }
}

/* Queue spinner ARIA helper — visually hidden label */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* End turn button accessible focus */
.end-turn-btn:focus-visible {
  outline: 2px solid #c0ff40;
  outline-offset: 3px;
}

/* Concede button accessible focus */
.concede-btn:focus-visible {
  outline: 2px solid #e04020;
  outline-offset: 2px;
}

/* Game over overlay keyboard focus */
.game-over-box button:focus-visible {
  outline: 2px solid rgba(255,150,100,0.8);
  outline-offset: 3px;
}

/* Marketplace price input improvement */
.price-input { width: 90px; }

/* Play button icon aria-hidden (decorative) */
.play-btn-icon { user-select: none; }

/* Deck card - simple hover */

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM HOVER ANIMATIONS — site-wide interactive polish
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. BUTTONS — universal hover lift + gold glow + press ────────────────── */
.btn-shop-buy, .btn-bundle-buy, .btn-pack-close, .btn-save-deck,
.btn-payment-confirm, .btn-claim, .auth-submit, .gambling-buy-btn,
.mystery-open-btn, .mystery-collect-btn, .ranked-buy-btn, .buy-cosmetic-btn,
.btn-gold, .game-over-box button, .equip-btn, .gambling-draw-btn, .craft-btn,
.btn-sm, .btn-sm-outline, .play-btn, .btn-buy-slot,
.btn-withdraw, .download-invoice-btn, .btn-payment-secondary, .btn-pay-settings,
.cookie-btn-accept, .cookie-btn-essential, .cookie-btn-settings,
.game-modal-btn-confirm, .game-modal-btn-cancel, .btn-add-card, .btn-save-card,
.btn-cancel-card, .btn-remove-card, .btn-copy-referral, .settings-nav-btn,
.forge-btn, .dpi-play-btn, .btn-token-buy, .lobby-inventory-btn,
.prestige-preview-btn, .inv-equip-btn, .tutorial-skip, .tutorial-next,
.nav-logout-btn, .nav-help-btn, .game-log-toggle, .modal-close {
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.btn-shop-buy:hover:not(:disabled), .btn-bundle-buy:hover:not(:disabled),
.btn-pack-close:hover:not(:disabled), .btn-save-deck:hover:not(:disabled),
.btn-payment-confirm:hover:not(:disabled), .btn-claim:hover:not(:disabled),
.auth-submit:hover:not(:disabled), .gambling-buy-btn:hover:not(:disabled),
.mystery-open-btn:hover:not(:disabled), .mystery-collect-btn:hover:not(:disabled),
.ranked-buy-btn:hover:not(:disabled), .buy-cosmetic-btn:hover:not(:disabled),
.btn-gold:hover:not(:disabled), .game-over-box button:hover:not(:disabled),
.equip-btn:hover:not(:disabled), .gambling-draw-btn:hover:not(:disabled),
.craft-btn:hover:not(:disabled), .btn-sm:hover:not(:disabled),
.btn-sm-outline:hover:not(:disabled), .play-btn:hover, .btn-buy-slot:hover,
.btn-withdraw:hover, .download-invoice-btn:hover, .btn-payment-secondary:hover,
.btn-pay-settings:hover, .cookie-btn-accept:hover, .cookie-btn-essential:hover,
.cookie-btn-settings:hover, .game-modal-btn-confirm:hover,
.game-modal-btn-cancel:hover, .btn-add-card:hover, .btn-save-card:hover,
.btn-cancel-card:hover, .btn-remove-card:hover, .btn-copy-referral:hover,
.settings-nav-btn:hover, .forge-btn:hover, .dpi-play-btn:hover,
.btn-token-buy:hover, .lobby-inventory-btn:hover, .prestige-preview-btn:hover,
.inv-equip-btn:hover, .tutorial-skip:hover, .tutorial-next:hover,
.nav-logout-btn:hover, .nav-help-btn:hover, .game-log-toggle:hover,
.modal-close:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.15);
  box-shadow: 0 4px 18px rgba(201,168,76,0.4);
}
.btn-shop-buy:active:not(:disabled), .btn-bundle-buy:active:not(:disabled),
.btn-pack-close:active:not(:disabled), .btn-save-deck:active:not(:disabled),
.btn-payment-confirm:active:not(:disabled), .btn-claim:active:not(:disabled),
.auth-submit:active:not(:disabled), .gambling-buy-btn:active:not(:disabled),
.mystery-open-btn:active:not(:disabled), .mystery-collect-btn:active:not(:disabled),
.ranked-buy-btn:active:not(:disabled), .buy-cosmetic-btn:active:not(:disabled),
.btn-gold:active:not(:disabled), .game-over-box button:active:not(:disabled),
.equip-btn:active:not(:disabled), .gambling-draw-btn:active:not(:disabled),
.craft-btn:active:not(:disabled), .btn-sm:active:not(:disabled),
.btn-sm-outline:active:not(:disabled), .play-btn:active, .btn-buy-slot:active,
.btn-withdraw:active, .download-invoice-btn:active, .btn-payment-secondary:active,
.btn-pay-settings:active, .cookie-btn-accept:active, .cookie-btn-essential:active,
.cookie-btn-settings:active, .game-modal-btn-confirm:active,
.game-modal-btn-cancel:active, .btn-add-card:active, .btn-save-card:active,
.btn-cancel-card:active, .btn-remove-card:active, .btn-copy-referral:active,
.settings-nav-btn:active, .forge-btn:active, .dpi-play-btn:active,
.btn-token-buy:active, .lobby-inventory-btn:active, .prestige-preview-btn:active,
.inv-equip-btn:active, .tutorial-skip:active, .tutorial-next:active,
.nav-logout-btn:active, .nav-help-btn:active, .game-log-toggle:active,
.modal-close:active {
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.9);
  box-shadow: none;
}

/* ── 2. HAND CARDS — arc layout handled by layoutHandCards() in game.js ──── */

/* ── 3. COLLECTION CARDS — lift + rarity glow ─────────────────────────────── */
.coll-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.coll-card:not(.not-owned):hover {
  transform: translateY(-10px) scale(1.06);
  box-shadow: 0 12px 32px rgba(201,168,76,0.35);
  border-color: rgba(201,168,76,0.6);
}
/* Rarity-specific glow on hover */
.coll-card.rarity-common:not(.not-owned):hover { border-color: rgba(200,200,200,0.5); box-shadow: 0 12px 28px rgba(200,200,200,0.2), 0 0 12px rgba(200,200,200,0.15); }
.coll-card.rarity-rare:not(.not-owned):hover { border-color: rgba(80,140,255,0.7); box-shadow: 0 12px 28px rgba(80,140,255,0.3), 0 0 16px rgba(80,140,255,0.2); }
.coll-card.rarity-epic:not(.not-owned):hover { border-color: rgba(160,60,220,0.7); box-shadow: 0 12px 28px rgba(160,60,220,0.3), 0 0 16px rgba(160,60,220,0.2); }
.coll-card.rarity-legendary:not(.not-owned):hover { border-color: rgba(240,180,40,0.8); box-shadow: 0 12px 28px rgba(240,180,40,0.4), 0 0 20px rgba(240,180,40,0.25); }

/* ── 4. NAVIGATION LINKS — gold shift + sliding underline ─────────────────── */
#nav-game-links .nav-link {
  transition: color 0.2s ease;
  position: relative;
}
#nav-game-links .nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.2s ease;
}
#nav-game-links .nav-link:hover {
  color: #ffe080;
}
#nav-game-links .nav-link:hover::after {
  width: 100%;
}

/* ── 5. HERO PORTRAITS — bright ring glow ─────────────────────────────────── */
.game-hero-portrait {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.game-hero-portrait:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.4), 0 0 24px rgba(201,168,76,0.35),
              0 4px 16px rgba(0,0,0,0.6);
}

/* ── 6. SHOP ITEMS — lift + gold border ───────────────────────────────────── */
.shop-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.shop-item:hover {
  transform: translateY(-8px);
  border-color: rgba(240,192,64,0.5);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 16px rgba(201,168,76,0.2);
  filter: brightness(1.08);
}
.gold-tier-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gold-tier-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 36px rgba(255,180,0,0.3), 0 0 20px rgba(201,168,76,0.15);
  border-color: rgba(255,180,40,0.7);
  filter: brightness(1.08);
}

/* ── 7. MARKETPLACE LISTINGS — gold left border + highlight ───────────────── */
.mp-row {
  transition: background 0.15s ease, border-color 0.15s ease, border-left 0.15s ease;
  border-left: 3px solid transparent;
}
.mp-row:hover {
  background: rgba(201,168,76,0.08) !important;
  border-left-color: rgba(201,168,76,0.6);
  border-color: rgba(201,168,76,0.35);
}
.sell-card-row {
  transition: background 0.15s ease, border-left 0.15s ease;
  border-left: 3px solid transparent;
}
.sell-card-row:hover {
  background: rgba(201,168,76,0.06);
  border-left-color: rgba(201,168,76,0.5);
}

/* ── 8. DECK CARDS in builder list — nudge right + gold highlight ──────────── */
.bdc {
  transition: background 0.15s ease, transform 0.15s ease, border-left-color 0.15s ease, filter 0.15s ease;
}
.bdc:hover {
  background: rgba(201,168,76,0.08);
  transform: translateX(6px);
  border-left-color: rgba(201,168,76,0.6);
  filter: brightness(1.1);
}

/* ── 9. TABS — brightness + subtle scale ──────────────────────────────────── */
.mp-tab, .lb-tab, .auth-tab, .shop-tab, .crafting-tab, .inv-tab {
  transition: filter 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.mp-tab:hover, .lb-tab:hover, .shop-tab:hover {
  filter: brightness(1.2);
  transform: scale(1.03);
}
.auth-tab:hover, .crafting-tab:hover:not(.active), .inv-tab:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

/* ── 10. LANDING PAGE CLASS CARDS — lift + class color glow ───────────────── */
.class-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.class-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 36px rgba(201,168,76,0.3), 0 0 20px rgba(201,168,76,0.15);
}

/* ── 11. LANDING PAGE FEATURE ITEMS — gold border + slide ─────────────────── */
.feature-card {
  transition: transform 0.2s ease, background 0.2s ease, border-left 0.2s ease;
  border-left: 3px solid transparent;
}
.feature-card:hover {
  transform: translateX(4px);
  background: rgba(201,168,76,0.04);
  border-left-color: rgba(201,168,76,0.5);
}

/* ── 12. LANDING PAGE SHOWCASE CARDS — lift + glow ────────────────────────── */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ── 13. MANA CRYSTALS — blue pulse glow ──────────────────────────────────── */
.mana-gem:not(.empty) {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mana-gem:not(.empty):hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(80,160,255,0.6), 0 0 16px rgba(64,128,220,0.3);
}

/* ── 14. END TURN BUTTON — intensified gold glow ──────────────────────────── */
.end-turn-btn {
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.end-turn-btn:hover:not(:disabled) {
  transform: scale(1.08);
  filter: brightness(1.25);
  box-shadow: 0 0 20px rgba(240,192,64,0.5), 0 0 40px rgba(201,168,76,0.25);
}
.end-turn-btn:active:not(:disabled) {
  transform: scale(0.95);
  filter: brightness(0.85);
  box-shadow: none;
}

/* ── 15. BUILDER CARDS in grid — lift + border glow ───────────────────────── */
.builder-card.bc-can {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.builder-card.bc-can:hover {
  transform: translateY(-4px) scale(1.03);
  opacity: 1;
  border-color: rgba(240,192,64,0.5);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 12px rgba(201,168,76,0.15);
}

/* ── 16. DECK PICK items (lobby deck selector) ────────────────────────────── */
.deck-pick-item:not(.deck-invalid) {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.deck-pick-item:not(.deck-invalid):hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,0.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 10px rgba(201,168,76,0.15);
}

/* ── 17. COSMETIC & HERO SKIN CARDS ───────────────────────────────────────── */
.cosmetic-card, .hero-skin-card, .class-unlock-card, .token-bundle-card, .class-bundle-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cosmetic-card:hover, .hero-skin-card:hover, .class-unlock-card:hover,
.token-bundle-card:hover, .class-bundle-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 14px rgba(201,168,76,0.2);
  border-color: rgba(201,168,76,0.5);
}

/* ── 18. PLAY MODE BUTTONS — lift + glow ──────────────────────────────────── */
.play-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.play-btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 16px rgba(201,168,76,0.25);
  filter: brightness(1.1);
}
.play-btn:active {
  transform: translateY(1px) scale(0.97);
}

/* ── 19. INVENTORY & PRESTIGE ITEMS ───────────────────────────────────────── */
.inv-item, .prestige-pick-item, .psm-item {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.inv-item:hover, .prestige-pick-item:hover, .psm-item:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* ── 20. GAME MINIONS — hover with rarity glow ───────────────────────────── */
.game-minion {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.game-minion:hover {
  transform: translateY(-8px) scale(1.08);
}
/* Rarity-specific hover glow */
.game-minion:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 14px rgba(200,200,200,0.2); }
.game-minion.rarity-common:hover  { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 14px rgba(200,200,200,0.25); }
.game-minion.rarity-rare:hover    { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 18px rgba(80,140,255,0.4); }
.game-minion.rarity-epic:hover    { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 18px rgba(160,60,220,0.4); }
.game-minion.rarity-legendary:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 22px rgba(240,180,40,0.5); }
/* Can-attack hover override */
.game-minion.can-attack:hover {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 0 0 1px rgba(240,192,64,0.5), 0 8px 24px rgba(240,192,64,0.5), 0 0 16px rgba(240,192,64,0.3);
}

/* ── 21. QUEST ITEMS ──────────────────────────────────────────────────────── */
.quest-item {
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.quest-item:hover {
  transform: translateY(-2px);
  border-color: rgba(201,168,76,0.3);
}

/* ── 22. DROPDOWN OPTIONS ─────────────────────────────────────────────────── */
.gdd-option, .choice-option {
  transition: background 0.15s ease, transform 0.15s ease;
}
.gdd-option:hover, .choice-option:hover {
  transform: translateX(3px);
}

/* ── 23. PAYMENT & WALLET CARDS ───────────────────────────────────────────── */
.payment-method-card, .pay-saved-card, .withdraw-method-option, .mw-card, .saved-card-row {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.payment-method-card:hover, .pay-saved-card:hover, .withdraw-method-option:hover,
.mw-card:hover, .saved-card-row:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* ── 24. DISENCHANT CARDS ─────────────────────────────────────────────────── */
.de-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.de-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  border-color: rgba(201,168,76,0.5);
}

/* ── 25. FOOTER LINKS ─────────────────────────────────────────────────────── */
.footer-legal-links a, .footer-social-link, .pay-new-card-link, .withdraw-add-method {
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-legal-links a:hover, .footer-social-link:hover,
.pay-new-card-link:hover, .withdraw-add-method:hover {
  transform: translateY(-1px);
}

/* ── 26. MYSTERY CHEST ────────────────────────────────────────────────────── */
.mystery-chest-img {
  transition: transform 0.2s ease;
}
.mystery-chest-img:hover {
  transform: scale(1.08) rotate(-2deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   END PREMIUM HOVER ANIMATIONS
═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TAVERN LOBBY — Immersive inn experience
═══════════════════════════════════════════════════════════════════════════ */

/* ── Screen override ────────────────────────────────────────────────────── */
#screen-lobby.active {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Lobby video: handled via inline styles on #lobby-vid-a / #lobby-vid-b */

/* ── Background layers ──────────────────────────────────────────────────── */
.tvn-bg { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.tvn-ceiling {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 68px;
  background:
    repeating-linear-gradient(90deg,
      #1a0b04 0px,  #1a0b04 55px,
      #251209 55px, #251209 75px,
      #3a1c0a 75px, #3a1c0a 80px,
      #2a1408 80px, #2a1408 130px),
    linear-gradient(to bottom, #130903, #2a1508);
  box-shadow: 0 10px 40px rgba(0,0,0,0.85);
}
.tvn-beam {
  position: absolute;
  top: 0;
  width: 22px;
  height: 100vh;
  background: linear-gradient(to bottom, #3a1c0a 0%, #2a1408 60%, transparent 100%);
  opacity: 0.35;
}
.tvn-beam-1 { left: 18%; }
.tvn-beam-2 { left: 38%; }
.tvn-beam-3 { left: 62%; }
.tvn-beam-4 { left: 82%; }

.tvn-wall-left {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 220px;
  background: linear-gradient(to right, rgba(40,15,3,0.6) 0%, transparent 100%);
}
.tvn-wall-right {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 200px;
  background: linear-gradient(to left, rgba(20,8,2,0.5) 0%, transparent 100%);
}

.tvn-atmos {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 18% 52%, rgba(220,90,10,0.14) 0%, transparent 38%),
    radial-gradient(ellipse at 50% 40%, rgba(180,70,10,0.06) 0%, transparent 60%);
  animation: tvn-atmos-breathe 4s ease-in-out infinite alternate;
}
@keyframes tvn-atmos-breathe {
  0%   { opacity: 0.7; }
  100% { opacity: 1.0; }
}

.tvn-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background:
    repeating-linear-gradient(90deg,
      #2a1a0a 0px,  #2a1a0a 48px,
      #1e1207 48px, #1e1207 52px,
      #2a1a0a 52px, #2a1a0a 96px),
    linear-gradient(to top, #140c04, #251608);
  box-shadow: 0 -6px 30px rgba(0,0,0,0.7);
}

/* ── Dust Particles ─────────────────────────────────────────────────────── */
.tvn-dust { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.tvn-dust-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(240,192,64,0.6);
  animation: tvn-dust-float linear infinite;
}
@keyframes tvn-dust-float {
  0%   { transform: translateY(0)    translateX(0);    opacity: 0;   }
  8%   { opacity: 1; }
  50%  { transform: translateY(-28px) translateX(12px); }
  92%  { opacity: 1; }
  100% { transform: translateY(-60px) translateX(-8px); opacity: 0;  }
}

/* ── Lobby layout ──────────────────────────────────────────────────────── */
.tvn-layout {
  position: absolute; inset: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.tvn-center {
  width: 100%;
  max-width: 100%;
  display: flex; flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  overflow-y: visible;
  margin: 0;
}
#lobby-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a2e1a transparent;
  padding: 16px 12px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-right: 1px solid #3a2e1a;
  display: flex;
  flex-direction: column;
}
#lobby-sidebar .tvn-quest-board {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#lobby-sidebar .qb-quests {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  grid-template-columns: unset !important;
  gap: 8px;
  max-height: none !important;
}
#lobby-sidebar .qb-note {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#lobby-sidebar .quest-section-label {
  flex: 0;
}
#lobby-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 5rem 1.5rem 1.5rem;
}

/* ── Keeper overlay — fixed bottom-right ───────────────────────────── */
.keeper-overlay {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.keeper-overlay .keeper-bubble,
.keeper-overlay .tvn-keeper {
  pointer-events: auto;
}

/* (Fireplace removed — sidebars stripped) */

/* ── Keyframe Animations ────────────────────────────────────────────────── */
/* (tvn-flicker removed — fireplace gone) */
/* (fireplace animations removed — sidebars stripped) */
@keyframes tvn-sign-swing {
  0%   { transform: rotate(var(--tilt, -1deg)); }
  20%  { transform: rotate(calc(var(--tilt, -1deg) + 5deg)); }
  50%  { transform: rotate(calc(var(--tilt, -1deg) - 2deg)); }
  75%  { transform: rotate(calc(var(--tilt, -1deg) + 2deg)); }
  100% { transform: rotate(var(--tilt, -1deg)); }
}
@keyframes tvn-keeper-breathe {
  0%   { transform: translateY(0);   }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0);   }
}
@keyframes tvn-bubble-pop {
  0%   { opacity: 0; transform: scale(0.92) translateY(4px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);   }
}
@keyframes tvn-bubble-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Parchment Stats Panel ──────────────────────────────────────────────── */
.tvn-parchment {
  width: 100%;
  max-width: 560px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.65));
}
.parch-edge {
  height: 14px;
  background: linear-gradient(to bottom, #c49050, #b07830);
  position: relative;
  overflow: hidden;
}
.parch-edge-top {
  clip-path: polygon(
    0% 100%, 2% 15%, 5% 80%, 8% 5%,
    12% 70%, 16% 20%, 20% 85%, 24% 10%,
    28% 75%, 32% 30%, 36% 88%, 40% 8%,
    44% 72%, 48% 18%, 52% 82%, 56% 12%,
    60% 78%, 64% 22%, 68% 88%, 72% 5%,
    76% 68%, 80% 28%, 84% 82%, 88% 12%,
    92% 72%, 96% 22%, 100% 100%
  );
  background: linear-gradient(to bottom, #b87830, #c49050);
}
.parch-edge-bottom {
  clip-path: polygon(
    0% 0%, 3% 90%, 6% 20%, 10% 95%,
    14% 25%, 18% 82%, 22% 15%, 26% 90%,
    30% 20%, 34% 78%, 38% 12%, 42% 95%,
    46% 22%, 50% 88%, 54% 18%, 58% 92%,
    62% 20%, 66% 85%, 70% 10%, 74% 92%,
    78% 25%, 82% 80%, 86% 18%, 90% 88%,
    94% 22%, 98% 80%, 100% 0%
  );
  background: linear-gradient(to top, #a06828, #c49050);
}
.parch-body {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,240,200,0.08) 0%, transparent 50%),
    linear-gradient(160deg, #d4a870 0%, #c49050 40%, #b88040 70%, #c49858 100%);
  padding: 0.9rem 1.6rem 0.8rem;
  text-align: center;
  border-left: 3px solid #a07030;
  border-right: 3px solid #a07030;
}
.parch-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.35rem;
  color: #3a1a05;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(255,220,140,0.4);
  margin-bottom: 0.35rem;
}
.parch-divider {
  font-size: 0.5rem;
  color: rgba(60,25,5,0.5);
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}
.parch-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}
.parch-stat { text-align: center; }
.parch-stat-val {
  display: block;
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem;
  color: #2a1005;
  line-height: 1.1;
}
.parch-stat-lbl {
  display: block;
  font-family: 'Crimson Pro', serif;
  font-size: 0.68rem;
  color: rgba(50,20,5,0.65);
  letter-spacing: 0.08em;
  margin-top: 0.1rem;
}
.parch-stat-sep { color: rgba(60,25,5,0.35); font-size: 0.6rem; user-select: none; }
.tvn-xp-bar {
  height: 7px;
  background: rgba(60,25,5,0.2) !important;
  border-radius: 3px;
  overflow: hidden;
}
.tvn-xp-bar .xp-bar-fill {
  background: linear-gradient(to right, #8b4010, #e07020) !important;
}
.tvn-xp-text {
  font-family: 'Crimson Pro', serif;
  font-size: 0.7rem;
  color: rgba(50,20,5,0.6);
  margin-top: 0.3rem;
  letter-spacing: 0.06em;
}

/* ── Tavern Signs (Play Buttons) ────────────────────────────────────────── */
.tvn-signs-rail {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.tvn-sign {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  transform-origin: top center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  transition: filter 0.25s ease;
  animation: tvn-sign-idle 3s ease-in-out infinite;
}
.sign-casual  { animation-delay: 0s; }
.sign-ranked  { animation-delay: 0.4s; }
.sign-ai      { animation-delay: 0.8s; }
.sign-tournament { animation-delay: 1.2s; }
.tvn-sign:hover {
  filter: drop-shadow(0 6px 16px rgba(220,100,10,0.45));
  animation: tvn-sign-hover 0.5s ease-in-out infinite;
}
@keyframes tvn-sign-idle {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1.5deg); }
}
@keyframes tvn-sign-hover {
  0%   { transform: rotate(-1deg); }
  20%  { transform: rotate(4deg); }
  50%  { transform: rotate(-3deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(-1deg); }
}

.sign-chains {
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 0 6px;
}
.sign-chain {
  display: block;
  width: 2px; height: 18px;
  background: linear-gradient(to bottom, #888 0%, #555 60%, #333 100%);
  border-radius: 1px;
  box-shadow: 1px 0 2px rgba(0,0,0,0.4);
}
.sign-board {
  width: 115px;
  padding: 0.75rem 0.7rem;
  background:
    repeating-linear-gradient(90deg,
      #5c3317 0px,  #5c3317 4px,
      #6b3d1a 4px,  #6b3d1a 9px,
      #7a4820 9px,  #7a4820 13px,
      #5c3317 13px, #5c3317 17px),
    linear-gradient(to bottom, #6b3d1a, #4a2810);
  border: 2px solid #3a2010;
  border-radius: 4px 4px 3px 3px;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.35),
    inset 0 -1px 4px rgba(255,160,60,0.08),
    0 3px 8px rgba(0,0,0,0.5);
  text-align: center;
  position: relative;
}
.sign-board::before {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid rgba(255,160,60,0.12);
  border-radius: 2px;
  pointer-events: none;
}
.sign-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.3rem;
  color: #f0c040;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.sign-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(5deg) brightness(0.75);
}
.sign-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.68rem;
  color: #f0c040;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  margin-bottom: 0.2rem;
}
.sign-sub {
  font-family: 'Crimson Pro', serif;
  font-size: 0.62rem;
  color: rgba(240,192,64,0.55);
  letter-spacing: 0.04em;
  font-style: italic;
}
.tvn-sign:hover .sign-board {
  background:
    repeating-linear-gradient(90deg,
      #6b4020 0px,  #6b4020 4px,
      #7d4a22 4px,  #7d4a22 9px,
      #8e5528 9px,  #8e5528 13px,
      #6b4020 13px, #6b4020 17px),
    linear-gradient(to bottom, #7d4a22, #5a3015);
}
.tvn-sign:hover .sign-name { color: #ffe680; }

/* Queue status */
.tvn-queue-status { width: 100%; max-width: 480px; text-align: center; }

/* ── Quest Notice Board ──────────────────────────────────────────────────── */
.tvn-quest-board {
  width: 100%;
  max-width: 620px;
  border-radius: 4px;
  overflow: hidden;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.6));
}
.qb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(to bottom, #4a2c10, #3a2008);
  border-bottom: 2px solid #2a1506;
}
.qb-nail {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c8a060, #8a6030);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  display: inline-block;
}
.qb-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.qb-quests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:
    repeating-linear-gradient(to bottom,
      #3d2510 0px, #3d2510 55px,
      #352010 55px, #352010 57px);
  padding: 0.7rem;
  gap: 0.6rem;
  max-height: 205px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,192,64,0.2) transparent;
}
.qb-quests::-webkit-scrollbar { width: 4px; }
.qb-quests::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.2); border-radius: 2px; }

/* Quest note cards */
.qb-note {
  background: linear-gradient(160deg, #d4a870, #c09050);
  border: 1px solid #a07030;
  border-radius: 3px;
  padding: 0.55rem 0.65rem;
  position: relative;
  font-family: 'Crimson Pro', serif;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,220,140,0.2);
  transition: transform 0.2s;
}
.qb-note:hover { transform: translateY(-1px); }
.qb-note.quest-done { border-color: #6a9040; box-shadow: 1px 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(80,160,40,0.2); }
.qb-note.quest-claimed { opacity: 0.55; }

.qb-pin {
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #e84020, #8b1a00);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  z-index: 1;
}
.qb-note-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2a1005;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
  font-family: Arial, sans-serif;
}
.qb-note-desc {
  font-size: 0.7rem;
  color: #c8b88a;
  line-height: 1.4;
  margin-bottom: 0.3rem;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.qb-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.qb-note-rewards {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.qb-note-rewards .badge-gold {
  font-size: 0.6rem;
  background: rgba(60,25,5,0.2);
  border: 1px solid rgba(60,25,5,0.3);
  border-radius: 2px;
  padding: 0.1rem 0.3rem;
  color: #5a2a05;
  font-family: Arial, sans-serif;
}
.qb-note-rewards .badge-xp {
  font-size: 0.6rem;
  background: rgba(40,80,10,0.2);
  border: 1px solid rgba(40,80,10,0.3);
  border-radius: 2px;
  padding: 0.1rem 0.3rem;
  color: #3a6010;
  font-family: Arial, sans-serif;
}
.qb-note-prog { font-size: 0.62rem; color: rgba(40,15,3,0.55); }
.qb-note .quest-bar {
  height: 4px;
  background: rgba(60,25,5,0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.15rem;
}
.qb-note .quest-bar-fill {
  height: 100%;
  background: linear-gradient(to right, #7a3a10, #c06020);
  border-radius: 2px;
  transition: width 0.5s;
}
.qb-note.quest-done .quest-bar-fill {
  background: linear-gradient(to right, #3a6a10, #70b030);
}
.qb-note .btn-claim {
  font-size: 0.58rem;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  transition: all 0.2s;
}
.qb-note .btn-claim:hover { filter: brightness(1.2); }
.qb-note .claimed-label {
  font-size: 0.58rem;
  color: rgba(40,15,3,0.45);
  font-style: italic;
}

/* ── Tavern Keeper Character — bottom-right overlay ────────────────────── */
.keeper-bubble {
  position: relative;
  width: 180px;
  background: linear-gradient(160deg, #f5e8c8, #ede0b4);
  border: 2px solid #c8a860;
  border-radius: 10px 10px 10px 2px;
  padding: 0.6rem 0.8rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,240,180,0.4);
  z-index: 5;
  margin-bottom: 8px;
  animation: tvn-bubble-pop 0.4s ease-out both;
}
.keeper-bubble.bubble-fade {
  animation: tvn-bubble-fade-out 0.35s ease-out forwards;
}
.keeper-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 50%; transform: translateX(-50%);
  border-width: 10px 8px 0 8px;
  border-style: solid;
  border-color: #c8a860 transparent;
}
.keeper-bubble::before {
  content: '';
  position: absolute;
  bottom: -7px; left: 50%; transform: translateX(-50%);
  border-width: 7px 6px 0 6px;
  border-style: solid;
  border-color: #f0dca8 transparent;
  z-index: 1;
}
#keeper-text {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 0.75rem;
  color: #3a1a05;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

/* Keeper wrapper */
.tvn-keeper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  animation: keeperFloat 3s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Hat */
.kp-hat {
  width: 76px; height: 30px;
  background: linear-gradient(to bottom, #4a2810, #3a1e0a);
  border-radius: 8px 8px 0 0;
  border-top: 3px solid #6a3c18;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  margin-bottom: -4px;
  z-index: 2;
}
.kp-hat::after {
  content: '';
  position: absolute;
  bottom: -5px; left: -8px; right: -8px;
  height: 10px;
  background: linear-gradient(to bottom, #5a3018, #4a2410);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Head */
.kp-head {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #f0b880, #d89058, #c07840);
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.2), 0 3px 10px rgba(0,0,0,0.4);
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Eyebrows */
.kp-brow {
  position: absolute;
  top: 24px;
  width: 22px; height: 6px;
  background: #5a3010;
  border-radius: 3px;
  transform: rotate(-8deg);
}
.kp-brow-l { left: 10px; transform: rotate(-10deg); }
.kp-brow-r { right: 10px; transform: rotate(10deg); }

/* Eyes */
.kp-eye {
  position: absolute;
  top: 34px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #2a1005;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.kp-eye::after {
  content: '';
  position: absolute;
  top: 2px; left: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
}
.kp-eye-l { left: 14px; }
.kp-eye-r { right: 14px; }

/* Nose */
.kp-nose {
  position: absolute;
  top: 46px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 8px;
  background: #c07840;
  border-radius: 50% 50% 60% 60%;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.15);
}

/* Rosy cheeks */
.kp-cheek {
  position: absolute;
  top: 48px;
  width: 16px; height: 10px;
  border-radius: 50%;
  background: rgba(220,90,70,0.32);
}
.kp-cheek-l { left: 6px; }
.kp-cheek-r { right: 6px; }

/* Smile */
.kp-mouth {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 10px;
  border: 3px solid #7a3010;
  border-top: none;
  border-radius: 0 0 16px 16px;
}

/* Beard */
.kp-beard {
  width: 88px; height: 44px;
  background: linear-gradient(to bottom, #8b4513, #6b3210, #4a2008);
  border-radius: 30% 30% 50% 50%;
  margin-top: -18px;
  position: relative;
  z-index: 2;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.kp-beard::before {
  content: '';
  position: absolute;
  top: 4px; left: 12px; right: 12px;
  height: 28px;
  background: linear-gradient(to bottom, #9a5018, #7a3810);
  border-radius: 20% 20% 50% 50%;
  opacity: 0.6;
}

/* Torso */
.kp-torso {
  position: relative;
  width: 100px;
  display: flex;
  justify-content: center;
  margin-top: -4px;
  z-index: 3;
}
.kp-shirt {
  width: 88px; height: 72px;
  background: linear-gradient(to bottom, #8b1a00, #6a1200);
  border-radius: 6px 6px 4px 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.kp-apron {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 60px;
  background: linear-gradient(to bottom, #d4a870, #b88848);
  border-radius: 4px 4px 8px 8px;
  border: 1px solid #a07030;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
.kp-apron::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 1px;
  background: rgba(80,40,5,0.3);
  box-shadow: 0 8px 0 rgba(80,40,5,0.2), 0 16px 0 rgba(80,40,5,0.15);
}

/* Arms */
.kp-arm {
  position: absolute;
  top: 6px;
  width: 24px; height: 55px;
  border-radius: 12px;
  background: linear-gradient(to bottom, #8b1a00, #6a1200);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.kp-arm-l { left: -20px; transform: rotate(12deg); transform-origin: top center; }
.kp-arm-r { right: -20px; transform: rotate(-15deg); transform-origin: top center; }

.kp-forearm {
  position: absolute;
  bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 30px;
  border-radius: 10px;
  background: linear-gradient(to bottom, #c07840, #a05e28);
}
.kp-forearm-l { transform: translateX(-50%) rotate(-8deg); }

.kp-mug {
  position: absolute;
  bottom: -20px;
  left: 50%; transform: translateX(-55%);
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: tvn-mug-tilt 3s ease-in-out infinite alternate;
}
@keyframes tvn-mug-tilt {
  0%   { transform: translateX(-55%) rotate(-5deg); }
  100% { transform: translateX(-55%) rotate(5deg); }
}

/* Legs */
.kp-legs {
  display: flex;
  gap: 6px;
  margin-top: 2px;
  z-index: 3;
}
.kp-leg {
  width: 32px; height: 36px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to bottom, #3a2010, #251408);
  box-shadow: inset 2px 0 4px rgba(0,0,0,0.2);
}
.kp-boot {
  position: absolute;
  bottom: -10px; left: -3px; right: -3px;
  height: 14px;
  background: linear-gradient(to bottom, #2a1a08, #1a1005);
  border-radius: 2px 2px 4px 4px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .tvn-signs-rail { gap: 0.9rem; }
  .sign-board { width: 98px; padding: 0.65rem 0.5rem; }
  .sign-name  { font-size: 0.6rem; }
  .qb-quests  { grid-template-columns: 1fr 1fr; max-height: 175px; }
}
@media (max-width: 720px) {
  .tvn-center { padding: 0; flex-direction: column !important; }
  #lobby-sidebar { width: 100% !important; position: static !important; max-height: none !important;
    min-height: auto !important; height: auto !important; overflow-y: visible !important;
    border-right: none !important; border-bottom: 1px solid #3a2e1a; padding: 8px !important; }
  #lobby-sidebar .tvn-quest-board { flex: none; }
  #lobby-sidebar .qb-quests { flex: none; max-height: 180px !important; overflow-y: auto;
    grid-template-columns: 1fr !important; }
  #lobby-sidebar .qb-note { flex: none; }
  .tvn-quest-board .qb-title { font-size: 12px; margin-bottom: 8px; }
  #lobby-main { padding: 1rem; }
  .qb-quests  { grid-template-columns: 1fr; }
  .keeper-overlay { position: static !important; margin: 12px auto; align-self: center; }
  .keeper-portrait-img { width: 80px !important; height: 80px !important; }
  .keeper-bubble { width: 140px; font-size: 0.65rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAVERN BACKGROUND IMAGE — overrides CSS-only bg with real photo
   The panels become semi-transparent dark glass so the photo shows through.
═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── Background image */
#screen-lobby.active {
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  background-image: url('../assets/tavern-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 2 ── Atmospheric overlay on top of photo (depth + warmth) */
.tvn-bg {
  background:
    radial-gradient(ellipse at 15% 55%, rgba(180,60,5,0.22) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 60%, rgba(0,0,0,0.30) 0%, transparent 50%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.10) 30%,
      rgba(0,0,0,0.10) 70%,
      rgba(0,0,0,0.55) 100%);
}

/* 3 ── Remove purely CSS-painted ceiling / floor / beams (photo has them) */
.tvn-ceiling,
.tvn-beam,
.tvn-floor  { display: none; }
.tvn-wall-left  { background: rgba(0,0,0,0.25); }
.tvn-wall-right { background: rgba(0,0,0,0.18); }

/* 5 ── Center column content stays centered */
.tvn-center {
  padding-top: 5rem;
}
.tvn-parchment,
.tvn-signs-rail,
.tvn-quest-board { max-width: 600px; width: 100%; }

/* 6 ── PARCHMENT PANEL → dark frosted-glass */
.tvn-parchment { filter: drop-shadow(0 8px 28px rgba(0,0,0,0.75)); }

.parch-edge-top,
.parch-edge-bottom { display: none; }

.parch-body {
  background : rgba(6, 3, 1, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border        : 1px solid rgba(240,192,64,0.22);
  border-radius : 6px;
  box-shadow    : 0 4px 24px rgba(0,0,0,0.65),
                  inset 0 1px 0 rgba(240,192,64,0.07);
}
.parch-name     { color: var(--gold); text-shadow: 0 0 18px rgba(240,192,64,0.35); }
.parch-stat-val { color: var(--gold-bright); }
.parch-stat-lbl { color: var(--text-dim); }
.parch-divider  { color: rgba(240,192,64,0.22); }
.parch-stat-sep { color: rgba(240,192,64,0.30); }
.tvn-xp-bar     { background: rgba(255,255,255,0.09) !important; }
.tvn-xp-text    { color: var(--text-dim); }

/* 7 ── PLAY SIGNS → dark frosted-glass boards */
.sign-board {
  background     : rgba(6, 3, 1, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border         : 1px solid rgba(240,192,64,0.20);
  box-shadow     : 0 4px 18px rgba(0,0,0,0.65),
                   inset 0 1px 0 rgba(240,192,64,0.05);
  /* remove the repeating wood-grain gradient */
  background-image: none;
}
.sign-board::before { border-color: rgba(240,192,64,0.10); }

.tvn-sign:hover .sign-board {
  background     : rgba(14, 7, 1, 0.88);
  background-image: none;
  border-color   : rgba(240,192,64,0.45);
  box-shadow     : 0 6px 22px rgba(0,0,0,0.7),
                   0 0 18px rgba(220,100,10,0.20),
                   inset 0 1px 0 rgba(240,192,64,0.08);
}
.sign-name { color: var(--gold); }
.sign-sub  { color: rgba(240,192,64,0.50); }
.sign-chain { background: linear-gradient(to bottom, #999 0%, #666 60%, #444 100%); }

/* 8 ── QUEST BOARD → dark frosted-glass panel */
.tvn-quest-board {
  border        : 1px solid rgba(240,192,64,0.18);
  box-shadow    : 0 8px 32px rgba(0,0,0,0.70);
  border-radius : 4px;
  overflow      : hidden;
}
.qb-header {
  background     : rgba(6, 3, 1, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom  : 1px solid rgba(240,192,64,0.15);
}
.qb-quests {
  background     : rgba(4, 2, 0, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* remove the wood-plank repeating gradient */
  background-image: none;
}

/* Quest note cards — semi-transparent dark, not parchment-coloured */
.qb-note {
  background     : rgba(18, 9, 2, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border         : 1px solid rgba(240,192,64,0.14);
  box-shadow     : 0 2px 8px rgba(0,0,0,0.45);
}
.qb-note:hover  {
  background: rgba(24, 12, 3, 0.88);
  border-color: rgba(240,192,64,0.28);
}
.qb-note.quest-done { border-color: rgba(64,184,64,0.32); }

.qb-note-name { color: var(--gold); }
.qb-note-desc { color: var(--text-dim); }
.qb-note-prog { color: rgba(240,192,64,0.40); }

.qb-note .quest-bar { background: rgba(255,255,255,0.08); }

.qb-note-rewards .badge-gold {
  background  : rgba(240,192,64,0.13);
  border-color: rgba(240,192,64,0.28);
  color       : var(--gold);
}
.qb-note-rewards .badge-xp {
  background  : rgba(64,184,64,0.12);
  border-color: rgba(64,184,64,0.28);
  color       : var(--green);
}
.qb-pin { background: radial-gradient(circle at 38% 38%, #e84020, #8b1a00); }

/* ── Music Control ──────────────────────────────────────────────────────────── */

/* Wrapper — relative so the panel can be absolutely positioned */
.music-ctrl {
  position: relative;
  display: flex;
  align-items: center;
}

/* Nav icon button */
.music-btn {
  background: none;
  border: 1px solid rgba(240,192,64,0.20);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.music-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(240,192,64,0.07);
}

/* Popup panel — hidden by default, shown via .music-panel--open */
.music-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 218px;
  background: rgba(6, 3, 1, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(240,192,64,0.22);
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.75), inset 0 1px 0 rgba(240,192,64,0.06);
  z-index: 400;
}
.music-panel--open {
  display: block;
  animation: music-panel-in 0.18s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes music-panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);     }
}

/* Track label */
.music-track-name {
  font-family: Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 0.85rem;
  opacity: 0.85;
}

/* Slider row: icon + range + percentage */
.music-slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.music-vol-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  line-height: 1;
  width: 18px;
  text-align: center;
}
.music-vol-pct {
  font-family: Arial, sans-serif;
  font-size: 0.58rem;
  color: var(--text-dim);
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* Volume slider */
.music-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  /* track fill set dynamically via JS */
  background: rgba(240,192,64,0.18);
  transition: background 0.05s;
}
.music-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--gold-bright), var(--gold));
  cursor: pointer;
  box-shadow: 0 0 6px rgba(240,192,64,0.50), 0 1px 3px rgba(0,0,0,0.5);
  transition: transform 0.15s;
}
.music-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.music-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 6px rgba(240,192,64,0.50);
}
.music-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(240,192,64,0.18);
}

/* Mute toggle button */
.music-mute-btn {
  width: 100%;
  background: rgba(240,192,64,0.06);
  border: 1px solid rgba(240,192,64,0.16);
  border-radius: 3px;
  color: var(--text-dim);
  font-family: Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.38rem 0.5rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.music-mute-btn:hover {
  background: rgba(240,192,64,0.12);
  border-color: rgba(240,192,64,0.35);
  color: var(--gold);
}

/* Divider inside panel */
.music-divider {
  height: 1px;
  background: rgba(240,192,64,0.12);
  margin: 0.6rem 0;
}

/* 9 ── Keeper bubble matches dark-glass theme */
.keeper-bubble {
  background    : rgba(6, 3, 1, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border        : 1px solid rgba(240,192,64,0.25);
  box-shadow    : 0 4px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(240,192,64,0.06);
}
.keeper-bubble::after  { border-color: rgba(240,192,64,0.25) transparent; left: 50%; transform: translateX(-50%); }
.keeper-bubble::before { border-color: rgba(6,3,1,0.88) transparent; left: 50%; transform: translateX(-50%); }
#keeper-text { color: var(--text); font-style: italic; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   ATMOSPHERIC ANIMATIONS — Torch flicker & Fog drift on all screens
═══════════════════════════════════════════════════════════════════════════ */

/* Background images + stacking context for decks / market / leaderboard */
#screen-decks.active {
  position: relative;
  z-index: 1;
  background-image: url('../assets/decks-bg.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
}
#screen-marketplace.active {
  position: relative;
  z-index: 1;
  background-image: url('../assets/market-bg.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
}
#screen-leaderboard.active {
  position: relative;
  z-index: 1;
  background-image: url('../assets/leaderboard-bg.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes torch-flicker {
  from { opacity: 0.05; }
  to   { opacity: 0.30; }
}
@keyframes fog-drift {
  from { transform: translateX(-20%) translateY(-10%); }
  to   { transform: translateX( 20%) translateY( 10%); }
}

/* ── ::before — flickering torch light (all five screens) ───────────────── */
#screen-lobby.active::before,
#screen-collection.active::before,
#screen-decks.active::before,
#screen-marketplace.active::before,
#screen-leaderboard.active::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 20% 30%, rgba(255,140,30,0.2) 0%, transparent 60%);
  animation: torch-flicker 2s ease-in-out infinite alternate;
}

/* ── ::after — drifting fog (all five screens) ──────────────────────────── */
#screen-lobby.active::after,
#screen-collection.active::after,
#screen-decks.active::after,
#screen-marketplace.active::after,
#screen-leaderboard.active::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(180,200,255,0.08) 0%, transparent 70%);
  animation: fog-drift 20s ease-in-out infinite alternate;
}

/* ── Video background — shared by all five screens ──────────────────────── */
.screen-video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── Collection video: fixed so it fills the viewport without zooming in ── */
#screen-collection .screen-video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -1;
}

/* ── Collection Screen Background ───────────────────────────────────────── */
#screen-collection.active {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  background-image: url('../assets/collection-bg.webp');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}


/* ── Card Art Images ─────────────────────────────────────────────────────────── */
.bc-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-emoji-fallback { font-size: 2rem; display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; }
.cc-art { position: relative; width: 100%; flex: 0 0 60%; overflow: hidden; border-radius: 6px; background: transparent; display: flex; align-items: center; justify-content: center; }
.cc-art-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.cc-emoji-fallback { font-size: 2.5rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cc-art .cc-stat-row { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 6px; pointer-events: none; }
.hc-art { position: relative; width: 100%; flex: 0 0 60%; overflow: hidden; border-radius: 4px; background: transparent; display: flex; align-items: center; justify-content: center; min-height: 0; }
.hc-art-img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.minion-emoji { position: relative; width: 100%; flex: 0 0 55%; overflow: hidden; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: transparent; }
.minion-art { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.hero-portrait-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; image-rendering: auto; }
.hero-power-img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

/* ── Card Art Inner Shadow — depth between art and card stats ──────────────── */
.hc-art::after, .cc-art::after, .bc-art::after, .minion-emoji::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0 0 4px 4px;
}
.cc-art::after { border-radius: 0 0 6px 6px; }

/* ── Legendary Card Shimmer — animated golden sweep ───────────────────────── */
.hand-card.rarity-legendary::before,
.game-minion.rarity-legendary::before,
.coll-card.rarity-legendary::before,
.builder-card.rarity-legendary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(255,220,100,0.12) 45%,
    rgba(255,240,150,0.18) 50%,
    rgba(255,220,100,0.12) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: legendaryShimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}
@keyframes legendaryShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Deck Builder Right Panel ────────────────────────────────────────────────── */
.builder-deck-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(240,192,64,0.2);
}

.builder-count-badge {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}

.builder-class-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 3px;
  text-transform: capitalize;
}

.builder-progress-wrap {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.builder-progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  background: linear-gradient(90deg, #4080e0, #f0c040);
}

.builder-progress-label {
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-align: center;
}

.builder-curve-title, .builder-deck-list-title {
  font-family: Arial, sans-serif;
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 6px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(240,192,64,0.1);
}

.builder-curve {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
  margin-bottom: 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  padding: 6px 4px 0;
  border: 1px solid rgba(240,192,64,0.1);
}

.curve-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.curve-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.curve-bar {
  width: 80%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: rgba(255,255,255,0.05);
}

.curve-lbl {
  font-size: 0.52rem;
  color: var(--text-dim);
  padding: 2px 0;
}

#builder-deck-cards {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  min-height: 0;
}

#builder-deck-cards::-webkit-scrollbar { width: 3px; }
#builder-deck-cards::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.2); border-radius: 2px; }

.bdc-empty {
  color: var(--text-dim);
  font-size: 0.68rem;
  text-align: center;
  padding: 24px 10px;
  line-height: 1.8;
  border: 1px dashed rgba(240,192,64,0.15);
  border-radius: 6px;
  margin-top: 8px;
}

.bdc-thumb {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}

.builder-actions {
  padding-top: 8px;
  border-top: 1px solid rgba(240,192,64,0.12);
}

.btn-save-deck { width: 100%; font-size: 0.8rem; padding: 0.65rem; }

/* ── Deck Builder Tips ───────────────────────────────────────────────────────── */
.builder-tips {
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(20,12,5,0.95), rgba(10,6,2,0.95));
  border: 1px solid rgba(240,192,64,0.25);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
}

.builder-tips-title {
  font-family: Arial, sans-serif;
  font-size: 0.65rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(240,192,64,0.2);
  text-align: center;
}

.builder-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.65rem;
  color: #c8a870;
  line-height: 1.4;
  border-bottom: 1px solid rgba(240,192,64,0.05);
}

.builder-tip:last-child { border-bottom: none; }

.tip-icon {
  font-size: 0.75rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.builder-tip b {
  color: var(--gold);
  font-weight: 700;
}



/* ── Class & Type Icons ──────────────────────────────────────────────────────── */
.class-icon, .deck-class-icon, .dpi-class-icon {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(240,192,64,0.4);
  display: inline-block;
  vertical-align: middle;
}

.deck-class-icon { width: 44px; height: 44px; }
.dpi-class-icon  { width: 40px; height: 40px; }

.class-emoji-fallback { font-size: 1.4rem; vertical-align: middle; }

.card-type-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* ── Tavern Keeper Portrait ──────────────────────────────────────────────────── */
/* (keeper portrait styles consolidated in overlay section) */

/* ── Marketplace Card Thumbnails ─────────────────────────────────────────────── */
.mp-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1020;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-card-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.mp-emoji-fallback {
  font-size: 1.4rem;
}

/* ── Leaderboard Medal Badges ────────────────────────────────────────────────── */
.lb-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  color: #0a0608;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.lb-rank-num {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-family: Arial, sans-serif;
}

/* ── Season Countdown & Podium ────────────────────────────────────────────── */
.season-header {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #1a1208, #0f0c08);
  border: 1px solid #3a2e1a;
  border-radius: 8px;
  margin-bottom: 24px;
}
.season-title {
  font-family: 'Cinzel Decorative', serif;
  color: #c9a84c;
  font-size: 20px;
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.season-subtitle {
  font-family: 'Crimson Pro', serif;
  color: #8a7a52;
  font-size: 13px;
  margin-bottom: 20px;
  font-style: italic;
}
.season-countdown-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.season-countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0f0c08;
  border: 1px solid #3a2e1a;
  border-radius: 6px;
  padding: 10px 16px;
  min-width: 64px;
}
.countdown-value {
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #c9a84c;
  line-height: 1;
  text-shadow: 0 0 20px rgba(201,168,76,0.4);
}
.countdown-label {
  font-family: Arial, sans-serif;
  font-size: 8px;
  color: #6a5c38;
  letter-spacing: 2px;
  margin-top: 4px;
}
.countdown-sep {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #c9a84c;
  font-weight: 700;
  margin-bottom: 12px;
}
.season-rewards-hint {
  font-family: 'Crimson Pro', serif;
  color: #6a5c38;
  font-size: 11px;
  letter-spacing: 1px;
  font-style: italic;
}
.sr-panel {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}
.sr-title {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-align: center;
}
.sr-rank-info {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.sr-breakdown { margin-bottom: 10px; }
.sr-row {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-top: 8px;
}
.sr-detail {
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: #e8dcc8;
  padding: 4px 0;
}
.sr-total {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: var(--gold);
  padding: 10px 0;
  border-top: 1px solid rgba(201,168,76,0.2);
  margin-top: 10px;
  text-align: center;
}
.sr-hint {
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
  color: #8a7a52;
  font-style: italic;
  text-align: center;
}
.podium-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 32px;
  padding: 0 20px;
}
.podium-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 200px;
}
.podium-crown {
  font-size: 28px;
  margin-bottom: 4px;
  animation: podiumFloat 2s ease-in-out infinite;
}
@keyframes podiumFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.podium-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1208, #3a2e1a);
  border: 2px solid #3a2e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #8a7a52;
  margin-bottom: 8px;
}
.podium-avatar-1st {
  width: 72px;
  height: 72px;
  border-color: #c9a84c;
  box-shadow: 0 0 20px rgba(201,168,76,0.3);
}
.podium-name {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #e8d5a3;
  margin-bottom: 2px;
  text-align: center;
}
.podium-tier {
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.podium-rp {
  font-family: 'Crimson Pro', serif;
  font-size: 12px;
  color: #8a7a52;
  margin-bottom: 8px;
}
.podium-block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 4px 4px 0 0;
}
.podium-medal {
  width: 56px; height: 56px; object-fit: contain; margin-bottom: 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.podium-medal-1st { width: 72px; height: 72px; }
.podium-info-frame {
  background: linear-gradient(180deg, rgba(30,22,10,0.95), rgba(15,12,8,0.95));
  border: 2px solid #5a4520;
  border-radius: 6px;
  padding: 14px 18px 12px; min-width: 120px; max-width: 160px;
  position: relative;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(201,168,76,0.15);
}
.podium-info-frame .podium-name {
  font-size: 14px; font-weight: 900; margin-bottom: 3px;
  color: #ffe88a; text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.8);
}
.podium-info-frame .podium-tier {
  font-size: 11px; font-weight: 700; margin-bottom: 3px;
  text-shadow: 0 1px 3px rgba(0,0,0,1);
}
.podium-info-frame .podium-rp {
  font-size: 13px; font-weight: 700; color: #e8d5a3;
  text-shadow: 0 1px 3px rgba(0,0,0,1);
}
.podium-info-1st { padding: 16px 22px 14px; min-width: 140px; max-width: 180px;
  border-color: #c9a84c; box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 12px rgba(201,168,76,0.2), inset 0 1px 0 rgba(201,168,76,0.25); }
.podium-info-1st .podium-name { font-size: 16px; }
.podium-block-1st {
  height: 100px;
  background: linear-gradient(180deg, #2a2010, #1a1208);
  border: 1px solid #c9a84c;
  border-bottom: none;
  box-shadow: 0 0 20px rgba(201,168,76,0.2);
}
.podium-block-2nd {
  height: 75px;
  background: linear-gradient(180deg, #1e1e1e, #141414);
  border: 1px solid #888;
  border-bottom: none;
}
.podium-block-3rd {
  height: 56px;
  background: linear-gradient(180deg, #1e1810, #141008);
  border: 1px solid #7a5c2a;
  border-bottom: none;
}
.ranked-row-legend {
  background: rgba(201,168,76,0.08);
  border-left: 2px solid #c9a84c;
}

/* ── Text Readability Enhancements ────────────────────────────────────────── */
/* Leaderboard table rows */
.lb-table tbody tr {
  background: rgba(0,0,0,0.45);
}
.lb-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.55);
}
.lb-table td, .lb-table th {
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Deck list cards */
.deck-card {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
}
.deck-card:hover {
  background: rgba(0,0,0,0.6);
}

/* Collection card text */
.cc-nameband {
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.7);
}
.cc-type-lbl, .cc-rarity-lbl {
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Form inputs contrast */
#screen-decks input,
#screen-decks select,
#screen-collection input,
#screen-collection select {
  background: rgba(10,8,5,0.8);
  color: #e8d5a3;
  text-shadow: none;
  font-family: Arial, sans-serif !important;
  text-transform: none !important;
}

/* Deck slots bar */
.deck-slots-bar {
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ── Keeper Portrait — overlay style ────────────────────────────────────────── */
.keeper-portrait-img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  border: 2px solid rgba(240,192,64,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  filter: drop-shadow(0 0 16px rgba(240,150,40,0.25));
}

/* ── Marketplace Improvements ────────────────────────────────────────────────── */
.mp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(240,192,64,0.1);
  margin-bottom: 0.4rem;
}

.mp-filter-input, .mp-filter-select {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 4px;
  color: var(--text);
  font-family: Arial, sans-serif !important;
  font-size: 0.7rem;
  padding: 0.35rem 0.6rem;
  outline: none;
  text-transform: none !important;
}

.mp-filter-input { min-width: 150px; flex: 1; }

.mp-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 80px;
}
.mp-actions { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.mp-buy-btn { padding: 4px 12px !important; font-size: 0.6rem !important; min-width: 0 !important;
  width: auto !important; display: inline-block !important;
  background-image: none !important; background: rgba(201,168,76,0.2) !important;
  border: 1px solid rgba(201,168,76,0.4) !important; color: var(--gold) !important; }
.mp-buy-btn:hover { background: rgba(201,168,76,0.35) !important; }
.mp-history-btn { padding: 4px 6px !important; min-width: 0 !important; width: auto !important;
  background-image: none !important; background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important; }

.mp-tax-note {
  font-size: 0.58rem;
  color: var(--text-dim);
}

.mp-tax-info {
  font-size: 0.62rem;
  color: #e08040;
  margin-left: auto;
  align-self: center;
}

.mp-stats {
  font-size: 0.65rem;
  color: var(--text-dim);
  background: rgba(0,0,0,0.3);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}

.mp-cost-badge {
  color: #4080e0;
  font-weight: bold;
}

.mp-history-btn {
  font-size: 0.7rem;
  padding: 2px 6px;
  opacity: 0.7;
}

.mp-history-btn:hover { opacity: 1; }

/* Sell toolbar */
.mp-sell-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(240,192,64,0.1);
  flex-wrap: wrap;
}

.btn-gold { font-size: 0.72rem; padding: 0.3rem 0.8rem; }

.mp-sell-row { align-items: center; }

.mp-select-cb {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--gold);
}

.mp-sell-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 100px;
}

.mp-suggest-hint {
  font-size: 0.58rem;
  color: var(--text-dim);
}

.mp-suggest-val { color: #4aaa4a; font-weight: bold; }

.mp-status-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}

.mp-status-sold { background: rgba(80,180,80,0.2); color: #4aaa4a; }
.mp-status-cancelled { background: rgba(180,60,40,0.2); color: #e06040; }

/* Price History Modal */
.ph-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ph-box {
  background: linear-gradient(135deg, #15100a, #0a0608);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 10px;
  padding: 1.2rem;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}

.ph-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--gold);
  border-bottom: 1px solid rgba(240,192,64,0.2);
  padding-bottom: 0.5rem;
}

.ph-header button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
}

.ph-suggested {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 1rem;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 0.6rem;
}

.ph-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ph-stat span { font-size: 0.58rem; color: var(--text-dim); }
.ph-stat strong { font-size: 0.8rem; color: var(--text); }
.ph-highlight strong { color: var(--gold); font-size: 0.9rem; }

.ph-title {
  font-family: Arial, sans-serif;
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.ph-list { display: flex; flex-direction: column; gap: 4px; }

.ph-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  font-size: 0.72rem;
}

.ph-price { color: var(--gold); font-weight: bold; }
.ph-qty { color: var(--text-dim); }
.ph-date { color: var(--text-dim); font-size: 0.62rem; }

/* ── Shop Screen ─────────────────────────────────────────────────────────────── */
.shop-category { margin-bottom: 2rem; }

.shop-cat-title {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(240,192,64,0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-cat-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(255,180,0,0.3);
}

.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.shop-item {
  background: linear-gradient(175deg, #221508, #100703); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.15s, box-shadow 0.15s;
}

.shop-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  border-color: rgba(240,192,64,0.4);
}
.shop-item-legendary {
  border-color: rgba(201,168,76,0.5);
  background: linear-gradient(175deg, #2a1a08, #1a0d03);
  box-shadow: 0 0 16px rgba(201,168,76,0.15);
  position: relative;
}
.legendary-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #c9a84c, #a07010);
  color: #0a0608; font-size: 9px; font-weight: 700; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 3px;
  font-family: 'Cinzel', serif;
}
.legendary-guarantee {
  font-family: 'Crimson Pro', serif; font-size: 12px; font-weight: 700;
  color: #c9a84c; text-align: center; letter-spacing: 0.5px;
}
.legendary-timer-wrap {
  text-align: center; font-family: Arial, sans-serif; font-size: 14px;
  color: #e8d5a3; min-height: 20px;
}

.shop-item-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.shop-item-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
  background: transparent;
}

.shop-item-emoji { font-size: 2.5rem; }

.shop-item-name {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--gold);
  text-align: center;
}

.shop-item-desc {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
  flex: 1;
}

.shop-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(240,192,64,0.1);
}

.shop-item-price {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1rem;
  color: var(--gold);
  font-weight: 900;
}

.btn-shop-buy { font-size: 0.75rem; padding: 0.45rem 1.2rem; }

/* ── Pack Opening Modal ───────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pack-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.pack-box {
  background: linear-gradient(175deg, #1a0f08, #0d0805); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 12px;
  padding: 2rem;
  max-width: 700px;
  width: 90%;
  box-shadow: 0 16px 60px rgba(0,0,0,0.9);
}

.pack-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.2rem;
  color: var(--gold);
  text-align: center;
  margin-bottom: 0.5rem;
}

.pack-subtitle {
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 1.5rem;
}

.pack-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  perspective: 800px;
}

.pack-card {
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  perspective: 600px;
}

.pack-card-flipper {
  position: relative;
  width: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.pack-card-hidden .pack-card-flipper {
  transform: rotateY(180deg);
}

.pack-card-revealed .pack-card-flipper {
  transform: rotateY(0deg);
  animation: packCardBounce 0.4s ease;
}

@keyframes packCardBounce {
  0% { transform: rotateY(0deg) scale(1.15); }
  50% { transform: rotateY(0deg) scale(0.95); }
  100% { transform: rotateY(0deg) scale(1); }
}

.pack-card-front, .pack-card-back {
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
}

.pack-card-front {
  position: relative;
  background: linear-gradient(175deg, #221508, #100703);
  border: 2px solid var(--rarity-color, rgba(180,120,40,0.3));
  display: flex;
  flex-direction: column;
}

.pack-card-back {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(145deg, #1a1208 0%, #2a1a0c 40%, #1a1208 100%);
  border: 2px solid rgba(180,120,40,0.5);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-card-back-design {
  width: 60%;
  height: 60%;
  border: 2px solid rgba(201,168,76,0.3);
  border-radius: 8px;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.1), transparent 70%);
  box-shadow: inset 0 0 20px rgba(201,168,76,0.1);
}

.pack-card-back-design::after {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 50%;
}

/* Legendary burst effect */
.pack-legendary-burst {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, rgba(255,170,0,0.3) 0%, transparent 70%);
  animation: legendaryPulse 1.5s ease infinite;
}

@keyframes legendaryPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Epic glow effect */
.pack-epic-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 20px rgba(170,68,255,0.4);
}

/* Pack particles */
.pack-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: packParticleFly 0.8s ease-out forwards;
}

@keyframes packParticleFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

/* Collect button animation */
.pack-collect-appear {
  animation: packCollectIn 0.4s ease;
}

@keyframes packCollectIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pack-card-art {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.pack-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack-card-emoji {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: transparent;
}

.pack-card-name {
  padding: 4px 6px;
  font-family: Arial, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pack-card-meta {
  padding: 2px 6px 4px;
  font-size: 0.55rem;
  color: var(--text-dim);
  text-align: center;
}

.btn-pack-close { display: block; width: auto; margin: 0 auto; font-size: 0.9rem; padding: 0.75rem 2.5rem; }

/* ── Active Perks (Lobby) ────────────────────────────────────────────────── */
.lobby-active-perks {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px;
}

.perks-title {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.perk-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  font-family: 'Crimson Pro', serif;
  font-size: 12px;
  margin-bottom: 4px;
}

.perk-pill:last-child { margin-bottom: 0; }

.perk-xp {
  background: rgba(255,180,0,0.1);
  border: 1px solid rgba(255,180,0,0.25);
  color: #ffb400;
}

.perk-gold {
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.25);
  color: var(--gold);
}

.perk-season {
  background: rgba(76,175,80,0.1);
  border: 1px solid rgba(76,175,80,0.25);
  color: #4caf50;
}

/* ── Game Perks Indicator ────────────────────────────────────────────────── */
.game-perks-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  z-index: 20;
}

.game-perk-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

.gp-xp {
  background: rgba(255,180,0,0.2);
  border: 1px solid rgba(255,180,0,0.5);
  animation: gpPulse 2s ease infinite;
}

.gp-gold {
  background: rgba(201,168,76,0.2);
  border: 1px solid rgba(201,168,76,0.5);
  animation: gpPulse 2s ease infinite 0.5s;
}

@keyframes gpPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(201,168,76,0.3); }
  50% { box-shadow: 0 0 10px rgba(201,168,76,0.6); }
}

/* ── Shop Purchase History ─────────────────────────────────────────────── */
.shop-purchase-history-section {
  margin-top: 20px;
}

.shop-ph-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}

.shop-ph-type {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(201,168,76,0.1);
  color: var(--text-dim);
  text-transform: capitalize;
}

/* ── Gold Tier Cards ────────────────────────────────────────────────────────── */
.gold-tier-grid {
  grid-template-columns: repeat(4, 1fr);
}

.gold-tier-card {
  background: linear-gradient(175deg, #221508, #100703); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  cursor: pointer;
}

.btn-bundle-buy {
  display: inline-block;
  width: auto;
  min-width: 120px;
  max-width: 160px;
  padding: 8px 24px;
}

.gold-tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(255,180,0,0.25);
  border-color: rgba(255,180,40,0.7);
}

.gold-tier-card.best-value {
  border-color: rgba(255,200,0,0.8);
  box-shadow: 0 0 20px rgba(255,180,0,0.2);
}

.gold-tier-card .bonus-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #cc6600, #ff9900);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.gold-tier-img-wrap {
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(255,180,0,0.35), 0 2px 8px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,200,60,0.4);
}

.gold-tier-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gold-tier-card:hover .gold-tier-img-wrap {
  box-shadow: 0 0 20px rgba(255,180,0,0.5), 0 2px 12px rgba(0,0,0,0.5);
  border-color: rgba(255,200,60,0.7);
}

.gold-tier-card .tier-euros {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}

.gold-tier-card .tier-total-gold {
  font-size: 22px;
  font-weight: 900;
  color: #ffcc44;
  font-family: 'Cinzel Decorative', serif;
}

.gold-tier-card .tier-breakdown {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}

.gold-tier-card .tier-rate {
  font-size: 11px;
  color: #88cc88;
  margin-top: 2px;
}

.gold-tier-card .btn-bundle-buy {
  margin-top: 10px;
}

.btn-bundle-buy { font-size: 0.75rem; }

/* Shop buttons — compact and centered */
.ranked-buy-btn,
.btn-shop-buy,
.buy-cosmetic-btn,
.btn-token-buy {
  display: inline-block;
  width: auto;
  min-width: 120px;
  max-width: 160px;
  padding: 8px 24px;
}
.ranked-card, .cosmetic-card, .token-bundle-card, .shop-item { text-align: center; }

/* ── Custom Slider Panel ──────────────────────────────────────────────────── */
.gold-custom-panel {
  background: linear-gradient(135deg, rgba(20,12,5,0.95), rgba(40,25,8,0.95));
  border: 1px solid rgba(255,180,40,0.5);
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
}

.gold-custom-panel input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,153,0,0.25), rgba(255,153,0,0.6));
  outline: none;
  cursor: pointer;
  flex: 1;
}

.gold-custom-panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cc6600, #ff9900);
  border: 2px solid #ffcc44;
  box-shadow: 0 0 10px rgba(255,153,0,0.5);
  cursor: pointer;
}

.gold-custom-panel input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cc6600, #ff9900);
  border: 2px solid #ffcc44;
  box-shadow: 0 0 10px rgba(255,153,0,0.5);
  cursor: pointer;
}

.gold-custom-panel .custom-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
}

.gold-custom-panel .custom-total {
  font-size: 28px;
  font-weight: 900;
  color: #ffcc44;
  font-family: 'Cinzel Decorative', serif;
}

.gold-custom-panel .active-tier-label {
  font-size: 13px;
  font-weight: 700;
  color: #ff9900;
  text-align: right;
}

.tier-progress {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  align-items: center;
}

.tier-progress-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  transition: background 0.3s;
}

.tier-progress-step.active {
  background: #ff9900;
}

.tier-progress-step.passed {
  background: rgba(255,153,0,0.4);
}

/* ── Simulated Payment Modal ─────────────────────────────────────────────────── */
.payment-box {
  max-width: 360px !important;
}

.payment-gold-img {
  text-align: center;
  margin-bottom: 10px;
}

.payment-gold-img img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255,180,0,0.4);
  border: 2px solid rgba(255,200,60,0.5);
}

.payment-summary {
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 0.8rem;
  margin-bottom: 1rem;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8rem;
  color: var(--text);
}

.payment-row-2 {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.payment-card-mock {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(240,192,64,0.15);
  border-radius: 8px;
  padding: 0.8rem;
  margin-bottom: 1rem;
}

.payment-field-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.payment-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 6px 10px;
  outline: none;
  width: 100%;
  font-family: Arial, sans-serif !important;
  text-transform: none !important;
}

.payment-input:focus {
  border-color: rgba(240,192,64,0.5);
}

.btn-payment-confirm { width: 100%; font-size: 0.9rem; padding: 0.7rem; margin-bottom: 0.5rem; }

/* payment confirm hover/disabled handled by primary tier */

.payment-disclaimer {
  font-size: 0.58rem;
  color: #e08040;
  text-align: center;
  line-height: 1.4;
}

/* ── Payment Method Grid ───────────────────────────────────────────────────── */
.payment-method-card {
  background: rgba(15,12,8,0.8);
  border: 1px solid rgba(58,46,26,0.8);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
}
.payment-method-card:hover {
  border-color: #c9a84c;
  background: rgba(26,18,8,0.9);
  transform: translateY(-1px);
}

/* ── Payment Card Picker ───────────────────────────────────────────────────── */
.pay-card-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pay-saved-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(240,192,64,0.12);
  border-radius: 6px; cursor: pointer; transition: border-color 0.15s;
}
.pay-saved-card:hover { border-color: rgba(240,192,64,0.35); }
.pay-saved-selected { border-color: var(--gold, #c9a44a) !important; background: rgba(240,192,64,0.06); }
.pay-saved-card input[type="radio"] { accent-color: var(--gold, #c9a44a); margin: 0; }
.pay-card-info { display: flex; align-items: center; gap: 10px; flex: 1; }
.pay-card-type { font-family: Arial, sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; min-width: 70px; }
.pay-card-masked { font-family: monospace; font-size: 0.8rem; color: var(--text, #e8dcc8); letter-spacing: 0.08em; }
.pay-card-expiry { font-size: 0.65rem; color: var(--text-dim, #b8a47c); margin-left: auto; }
.pay-new-card-link {
  display: block; text-align: center; margin-top: 8px;
  font-family: Arial, sans-serif; font-size: 0.65rem; color: var(--text-dim, #b8a47c);
  text-decoration: underline; cursor: pointer;
}
.pay-new-card-link:hover { color: var(--gold, #c9a44a); }
.pay-no-cards { text-align: center; }
.pay-no-cards-msg {
  font-family: 'Crimson Pro', serif; font-size: 0.85rem;
  color: var(--text-dim, #b8a47c); margin-bottom: 12px;
}
.btn-pay-settings {
  display: inline-block;
  width: auto;
  padding: 8px 20px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #c9a44a);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(200,160,60,0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.btn-pay-settings:hover {
  border-color: var(--gold, #c9a44a);
  box-shadow: 0 0 10px rgba(200,160,60,0.2);
}
.btn-payment-secondary {
  background: rgba(240,192,64,0.08) !important; margin-top: 8px;
  border: 1px solid rgba(240,192,64,0.25) !important;
}
.btn-payment-secondary:hover:not(:disabled) {
  background: rgba(240,192,64,0.15) !important;
}

/* ── Shop Tabs ──────────────────────────────────────────────────────────────── */
#shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: none;
  padding-bottom: 0;
}
.shop-tab {
  background-image: url('../assets/tab-btn.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  color: #c9a84c;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  padding: 10px 20px;
  min-width: 110px;
  min-height: 48px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
  filter: brightness(0.85);
}
.shop-tab:hover { filter: brightness(1.1); transform: scale(1.03); color: #ffe88a; }
.shop-tab.active { filter: brightness(1.3); color: #ffe88a; text-shadow: 0 0 8px rgba(201,168,76,0.8); }

.shop-tab-icon {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 4px;
  margin-top: -2px;
}

.shop-tab[data-tab="gambling"] .shop-tab-icon {
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  mix-blend-mode: screen;
}

.shop-section-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 5px;
  vertical-align: middle;
  margin-right: 6px;
  margin-top: -2px;
  box-shadow: 0 0 6px rgba(255,180,0,0.25);
}

.lottery-timer-img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  mix-blend-mode: screen;
  vertical-align: middle;
  margin-right: 4px;
  margin-top: -1px;
}

.ranked-icon-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255,180,0,0.35), 0 2px 8px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,200,60,0.4);
}

/* ── Cosmetics ─────────────────────────────────────────────────────────────── */
.cosmetics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.cosmetic-card {
  background: linear-gradient(175deg, #221508, #100703); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 8px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}
.cosmetic-card .buy-cosmetic-btn {
  margin-top: auto;
  align-self: center;
}
.cosmetic-card:hover { transform: translateY(-3px); border-color: rgba(255,180,40,0.6); }
.cosmetic-card.equipped { border-color: #ffcc44; box-shadow: 0 0 16px rgba(255,200,0,0.2); }
.cosmetic-preview {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
/* Card back base gradients */
.cb-dragon  { background: linear-gradient(135deg, #8b0000, #cc3300); }
.cb-arcane  { background: linear-gradient(135deg, #1a0066, #6600cc); }
.cb-fel     { background: linear-gradient(135deg, #003300, #00aa00); }
.cb-frost   { background: linear-gradient(135deg, #003366, #0066cc); }
.cb-holy    { background: linear-gradient(135deg, #665500, #ffcc00); }
.cb-shadow  { background: linear-gradient(135deg, #1a001a, #660066); }
/* Card back animated patterns */
.cb-pattern {
  position: absolute; inset: 0; opacity: 0.35;
}
.cb-pattern-dragon {
  background: repeating-conic-gradient(rgba(255,60,0,0.3) 0% 25%, transparent 0% 50%) 0 0/20px 20px;
  animation: cbPatternShift 4s linear infinite;
}
.cb-pattern-arcane {
  background: radial-gradient(circle at 50% 50%, rgba(120,0,255,0.5) 0%, transparent 60%);
  animation: cbPulse 2.5s ease-in-out infinite;
}
.cb-pattern-fel {
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0,255,0,0.15) 8px, rgba(0,255,0,0.15) 16px);
  animation: cbPatternShift 3s linear infinite;
}
.cb-pattern-frost {
  background: radial-gradient(circle at 30% 30%, rgba(100,200,255,0.4) 0%, transparent 50%),
              radial-gradient(circle at 70% 70%, rgba(100,200,255,0.3) 0%, transparent 50%);
  animation: cbPulse 3s ease-in-out infinite;
}
.cb-pattern-holy {
  background: radial-gradient(circle at 50% 50%, rgba(255,220,0,0.5) 0%, transparent 55%);
  animation: cbPulse 2s ease-in-out infinite;
}
.cb-pattern-shadow {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 8px, rgba(120,0,180,0.2) 8px, rgba(120,0,180,0.2) 16px);
  animation: cbPatternShift 5s linear infinite reverse;
}
@keyframes cbPatternShift { from { background-position: 0 0; } to { background-position: 40px 40px; } }
@keyframes cbPulse { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); } }
.cb-shine {
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  animation: cbShine 3s ease-in-out infinite;
}
@keyframes cbShine { 0%,100% { transform: translateX(-30%) translateY(-30%); } 50% { transform: translateX(30%) translateY(30%); } }
.cb-equipped-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #ffcc44; background: rgba(0,0,0,0.3);
  text-shadow: 0 0 12px rgba(255,200,0,0.8);
}
/* Hero skins */
.hero-skins-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.hero-skin-card { padding: 0 0 12px; overflow: hidden; }
.hero-skin-preview-wrap {
  position: relative; width: 100%; height: 160px; overflow: hidden;
  border-radius: 12px 12px 0 0; margin-bottom: 8px;
}
.hero-skin-portrait {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s;
}
.hero-skin-card:hover .hero-skin-portrait { transform: scale(1.08); }
.hero-skin-name-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  font-weight: 700; font-size: 13px; color: #fff;
}
.hero-skin-equipped-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,200,0,0.9); color: #1a0d05;
  font-size: 10px; font-weight: 900; padding: 3px 8px;
  border-radius: 4px; letter-spacing: 0.08em;
}
.hero-skin-locked-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.hero-skin-lock-price {
  background: rgba(0,0,0,0.7); padding: 6px 14px; border-radius: 8px;
  color: #ffcc44; font-weight: 700; font-size: 14px;
}
.hero-skin-card.equipped { border-color: #ffcc44; box-shadow: 0 0 20px rgba(255,200,0,0.25); }
.hero-skin-card .cosmetic-class { padding: 0 12px; }
.hero-skin-card .equip-btn,
.hero-skin-card .buy-cosmetic-btn { margin: 0 12px; width: calc(100% - 24px); }
.cosmetic-name { font-weight: 700; color: #fff; font-size: 13px; margin-bottom: 4px; }
.cosmetic-class { font-size: 11px; color: #aaa; margin-bottom: 8px; }
.equipped-badge { color: #ffcc44; font-weight: 700; font-size: 12px; }
.buy-cosmetic-btn, .equip-btn { font-size: 12px; padding: 6px 14px; width: 100%; margin-top: 4px; }
.prestige-badge {
  background: linear-gradient(135deg, #c9a84c, #ffe88a);
  color: #1a1208;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 6px;
}
.ultimate-badge {
  background: linear-gradient(135deg, #9333ea, #c026d3);
  color: white;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 6px;
}
.prestige-price {
  font-size: 20px;
  font-weight: 700;
  color: #c9a84c;
  text-shadow: 0 0 10px rgba(201,168,76,0.4);
}
.class-unlock-card {
  background: linear-gradient(180deg, #1a1208 0%, #0f0c08 100%);
  border: 1px solid #3a2e1a;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.class-unlock-card:hover {
  border-color: #c9a84c;
  transform: translateY(-2px);
}
.class-unlock-card.unlocked {
  border-color: #2d6a2d;
  opacity: 0.85;
}
.class-unlock-card.unlocked:hover {
  transform: none;
  border-color: #2d6a2d;
}
.class-unlock-portrait {
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #0a0805;
}
.class-unlock-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.class-unlock-body {
  padding: 12px 14px 16px;
  text-align: center;
}
.class-unlocked-badge {
  background: #1a3d1a;
  color: #4caf50;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
  display: inline-block;
  margin-top: 8px;
}
/* ── Tournament Panel ─────────────────────────────────────────────────────── */
.tournament-status-card {
  background: linear-gradient(135deg, #1a1208, #0f0c08);
  border: 1px solid #3a2e1a;
  border-left: 3px solid #c9a84c;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
.tournament-countdown {
  font-family: Arial, sans-serif;
  color: #c9a84c;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.tournament-prize-table {
  width: 100%;
  border-collapse: collapse;
}
.tournament-prize-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #1e1a10;
  font-family: 'Crimson Pro', serif;
  color: #c8b88a;
  font-size: 13px;
}
.tournament-prize-table tr:first-child td {
  color: #c9a84c;
  font-weight: 700;
}
.tournament-progress-bar {
  height: 6px;
  background: #1e1a10;
  border-radius: 3px;
  overflow: hidden;
}
.tournament-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a84c, #ffe88a);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ── Game Confirm/Alert Modals ─────────────────────────────────────────────── */
.game-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.75); z-index: 99999;
  display: flex; align-items: center; justify-content: center;
}
.game-modal-box {
  background: linear-gradient(135deg, #1a1208, #0f0c08);
  border: 1px solid #3a2e1a; border-top: 2px solid #c9a84c;
  border-radius: 12px; padding: 32px; max-width: 460px; width: 90%;
  max-height: 85vh; overflow-y: auto;
  text-align: center; box-shadow: 0 0 40px rgba(0,0,0,0.8);
}
.game-modal-box::-webkit-scrollbar { width: 4px; }
.game-modal-box::-webkit-scrollbar-thumb { background: #3a2e1a; border-radius: 2px; }
.game-modal-title {
  font-family: 'Cinzel Decorative', serif; color: #c9a84c;
  font-size: 16px; letter-spacing: 2px; margin-bottom: 12px;
}
.game-modal-msg {
  font-family: 'Crimson Pro', serif; color: #c8b88a;
  font-size: 15px; line-height: 1.5; margin-bottom: 28px;
}
.game-modal-btns { display: flex; gap: 12px; justify-content: center; }
.game-modal-btn-cancel {
  font-family: Arial, sans-serif; color: #8a7a52; background: transparent;
  border: 1px solid #3a2e1a; padding: 10px 28px; cursor: pointer;
  font-size: 11px; letter-spacing: 2px; border-radius: 4px; transition: border-color 0.2s;
}
.game-modal-btn-cancel:hover { border-color: #c9a84c; }
.game-modal-btn-confirm {
  font-family: Arial, sans-serif; color: #1a1208; background: #c9a84c;
  border: none; padding: 10px 28px; cursor: pointer;
  font-size: 11px; letter-spacing: 2px; border-radius: 4px; font-weight: 700; transition: background 0.2s;
}
.game-modal-btn-confirm:hover { background: #ffe88a; }

.class-unlock-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.class-unlock-modal-box {
  background: linear-gradient(135deg, #1a1208, #0f0c08);
  border: 2px solid #c9a84c; border-radius: 12px;
  padding: 40px; text-align: center; max-width: 400px;
  box-shadow: 0 0 40px rgba(201,168,76,0.3);
  animation: fadeIn 0.3s ease;
}
.class-bundle-card {
  background: linear-gradient(135deg, #1a1020 0%, #0f0818 50%, #1a1020 100%);
  border: 1px solid rgba(147,51,234,0.3);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  text-align: center;
}
.class-bundle-card:hover {
  border-color: rgba(147,51,234,0.6);
}
.class-bundle-inner {
  max-width: 400px;
  margin: 0 auto;
}

/* ── Gambling ──────────────────────────────────────────────────────────────── */
.gambling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 16px;
}
.gambling-card {
  background: linear-gradient(175deg, #221508, #100703); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 8px;
  text-align: center;
}
.gambling-icon { font-size: 48px; margin-bottom: 12px; line-height: 1; }
.gambling-icon-img { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; overflow: hidden; background: transparent; mix-blend-mode: screen; }
.gambling-price { font-size: 22px; font-weight: 900; color: #ffcc44; margin: 12px 0; }
.gambling-buy-btn, .gambling-draw-btn { font-size: 14px; padding: 10px 24px; width: 100%; margin-top: 8px; }
/* draw btn gets secondary tier from the system above */
.lottery-ticket-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 12px 0;
  font-size: 20px;
  font-weight: 900;
}
.lottery-ticket-controls button {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-bottom-width: 1px !important;
  color: #fff !important;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  font-size: 18px;
}
/* Lottery enhancements */
.lottery-card { border: 1px solid rgba(120,80,200,0.3); }
.lottery-odds { font-size: 12px; color: #aa88ff; margin: 4px 0 12px; letter-spacing: 0.05em; }
.lottery-tickets-visual {
  background: rgba(0,0,0,0.3); border-radius: 10px; padding: 12px; margin: 12px 0;
}
.lottery-tickets-label { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.lottery-ticket-dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 16px; }
.lottery-ticket-dot {
  width: 12px; height: 12px; border-radius: 2px;
  background: linear-gradient(135deg, #ffcc44, #ff9900);
  animation: ticketGlow 2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.1s);
}
.lottery-ticket-dot:nth-child(odd) { animation-delay: 0.5s; }
@keyframes ticketGlow { 0%,100% { opacity: 0.7; } 50% { opacity: 1; box-shadow: 0 0 6px rgba(255,200,0,0.5); } }
.lottery-ticket-more { font-size: 11px; color: #ffcc44; font-weight: 700; align-self: center; }
.lottery-tickets-count { font-size: 13px; color: #ffcc44; font-weight: 700; margin-top: 6px; }
.lottery-countdown {
  background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px;
  margin: 10px 0; font-size: 14px; color: #ccc;
}
.lottery-ready { color: #44dd44; font-weight: 700; }
.lottery-timer-icon { margin-right: 4px; }
.lottery-cost { font-size: 13px; color: #aaa; margin: 4px 0; }
.lottery-buy-section { margin-top: 8px; }
.lottery-draw-section { margin-top: 8px; }

/* ── Mystery Box Modal (Animated) ─────────────────────────────────────────── */
.mystery-box-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; transition: background 0.3s ease; pointer-events: none;
}
.mystery-box-modal.visible { background: rgba(0,0,0,0.88); pointer-events: all; }
.mystery-box-content {
  background: linear-gradient(175deg, #1a0f08, #0d0805); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 12px;
  padding: 40px 48px; text-align: center; min-width: 380px; max-width: 480px;
  position: relative; box-shadow: 0 0 60px rgba(100,50,200,0.3);
}
.mystery-box-title {
  font-family: 'Cinzel Decorative', serif; font-size: 22px;
  color: #ffcc44; margin-bottom: 24px; letter-spacing: 0.1em;
}
.mystery-box-stage {
  position: relative; height: 220px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.mystery-box-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(120,60,255,0.25) 0%, transparent 70%);
  animation: mysteryGlowPulse 2s ease-in-out infinite;
}
@keyframes mysteryGlowPulse {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.08); }
}
.mystery-chest-img {
  width: 200px; height: 200px; object-fit: contain; position: relative; z-index: 2;
  filter: drop-shadow(0 0 20px rgba(120,60,255,0.5));
  transition: transform 0.3s ease; cursor: pointer;
  animation: chestFloat 3s ease-in-out infinite;
}
.mystery-chest-img:hover { transform: scale(1.05); }
@keyframes chestFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes chestShake {
  0%,100% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-4deg) scale(1.05); }
  20% { transform: rotate(4deg) scale(1.08); }
  30% { transform: rotate(-5deg) scale(1.06); }
  40% { transform: rotate(5deg) scale(1.1); }
  50% { transform: rotate(-4deg) scale(1.08); }
  60% { transform: rotate(4deg) scale(1.1); }
  70% { transform: rotate(-3deg) scale(1.06); }
  80% { transform: rotate(3deg) scale(1.05); }
  90% { transform: rotate(-2deg) scale(1.03); }
}
@keyframes chestExplode {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 0.8; filter: drop-shadow(0 0 60px rgba(255,200,0,0.9)) brightness(2); }
  100% { transform: scale(0); opacity: 0; }
}
.chest-shaking  { animation: chestShake   0.6s ease-in-out; }
.chest-exploding { animation: chestExplode 0.4s ease-in forwards; }
.mystery-particles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mystery-particle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  animation: particleBurst 0.8s ease-out forwards;
}
@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
.mystery-rarity-flash {
  position: absolute; inset: 0; border-radius: 20px;
  background: var(--rarity-glow);
  animation: rarityFlash 0.6s ease-out forwards; pointer-events: none;
}
@keyframes rarityFlash {
  0%   { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}
.mystery-card-reveal {
  background: linear-gradient(135deg, rgba(20,12,5,0.95), rgba(40,25,8,0.92));
  border: 2px solid; border-radius: 12px; padding: 24px 32px; margin: 16px 0;
  animation: mysteryCardReveal 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
  transform: scale(0);
}
@keyframes mysteryCardReveal {
  0%   { transform: scale(0) rotateY(90deg); opacity: 0; }
  60%  { transform: scale(1.08) rotateY(-5deg); opacity: 1; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
.mystery-card-art-wrap {
  width: 140px; height: 140px; margin: 0 auto 12px; border-radius: 8px;
  overflow: hidden; background: rgba(0,0,0,0.4);
}
.mystery-card-art {
  width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
  display: block;
}
.mystery-card-art-fallback {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 3rem; background: #1a1020;
  border-radius: 8px;
}
.mystery-card-name { font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.mystery-card-rarity { font-size: 12px; font-weight: 700; letter-spacing: 0.15em; opacity: 0.8; }
.mystery-card-meta { font-size: 11px; color: #aaa; margin-top: 4px; }
.mystery-bonus-reveal {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 16px; color: #88ccff; margin: 12px 0 20px;
  animation: fadeInUp 0.4s 0.3s ease-out both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mystery-box-subtitle { color: #aaa; font-size: 13px; margin-bottom: 16px; }
.mystery-open-btn { font-size: 16px; padding: 12px 32px; }
.mystery-collect-btn { font-size: 16px; padding: 12px 40px; animation: fadeInUp 0.4s 0.5s ease-out both; }
.mystery-box-content .mystery-card-reveal,
.mystery-box-content .mystery-bonus-reveal,
.mystery-box-content .mystery-collect-btn { opacity: 0; }
.mystery-box-content.result-visible .mystery-card-reveal { opacity: 1; }
.mystery-box-content.result-visible .mystery-bonus-reveal { opacity: 1; }
.mystery-box-content.result-visible .mystery-collect-btn { opacity: 1; }

/* ── Ranked ────────────────────────────────────────────────────────────────── */
.ranked-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 24px; margin-top: 16px; }
.ranked-card {
  background: linear-gradient(175deg, #221508, #100703); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ranked-card.owned {
  border-color: #ffcc44;
  box-shadow: 0 0 20px rgba(255,200,0,0.15), inset 0 0 30px rgba(255,200,0,0.05);
}
.ranked-active-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,200,0,0.08) 0%, transparent 70%);
  animation: rankedGlow 3s ease-in-out infinite;
}
@keyframes rankedGlow { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.ranked-icon { font-size: 48px; margin-bottom: 12px; position: relative; }
.ranked-status-badge {
  display: inline-block; background: linear-gradient(135deg, #cc8800, #ffcc44);
  color: #1a0d05; font-size: 11px; font-weight: 900; padding: 4px 14px;
  border-radius: 20px; letter-spacing: 0.1em; margin-bottom: 8px;
}
.ranked-perks { text-align: left; list-style: none; padding: 0; margin: 16px 0; color: #aaa; font-size: 13px; line-height: 2; }
.ranked-perks .perk-active { color: #88dd88; }
.ranked-price { font-size: 24px; font-weight: 900; color: #ffcc44; margin: 16px 0; }
.ranked-buy-btn { font-size: 15px; padding: 12px 28px; width: 100%; }
.ranked-active-label {
  color: #ffcc44; font-weight: 900; font-size: 18px;
  text-shadow: 0 0 12px rgba(255,200,0,0.4);
}
.owned-badge { color: #ffcc44; font-weight: 900; font-size: 16px; }

/* ── Crafting Screen ───────────────────────────────────────────────────────── */
/* ── Crafting Top Bar ──────────────────────────────────────────────────────── */
#crafting-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(180,120,40,0.3);
}

#dust-balance-display {
  background: linear-gradient(135deg, rgba(20,12,5,0.95), rgba(40,25,8,0.95));
  border: 1px solid rgba(100,160,220,0.5);
  border-radius: 24px;
  padding: 8px 20px;
  font-size: 20px;
  font-weight: 900;
  color: #88ccff;
  letter-spacing: 0.05em;
  font-family: Arial, sans-serif;
}

.dust-icon { margin-right: 4px; }

/* ── Crafting Tabs ─────────────────────────────────────────────────────────── */
.crafting-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}
.crafting-tab {
  flex: 1;
  max-width: 200px;
  padding: 10px 20px;
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(180,120,40,0.15);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.2s;
}
.crafting-tab.active {
  color: var(--gold);
  background: rgba(20,12,5,0.92);
  border-color: rgba(180,120,40,0.4);
  border-bottom: 2px solid var(--gold);
}
.crafting-tab:hover:not(.active) { color: var(--text); }

/* ── Crafting Layout (shared) ─────────────────────────────────────────────── */
#crafting-layout, .crafting-layout-de {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
}

#forge-select-panel, #disenchant-panel, #forge-result-panel {
  background: linear-gradient(135deg, rgba(20,12,5,0.92), rgba(35,20,8,0.88));
  border: 1px solid rgba(180,120,40,0.3);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#forge-select-panel h3, #disenchant-panel h3 {
  font-family: Arial, sans-serif;
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin: 0 0 12px 0;
}

/* ── Filters ───────────────────────────────────────────────────────────────── */
#forge-filters, #disenchant-filters {
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

#forge-filters select, #disenchant-filters select {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(180,120,40,0.3);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-family: Arial, sans-serif;
}

.forge-sel-info {
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.forge-clear-btn {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(180,120,40,0.2);
  color: var(--text-dim);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-family: Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}
.forge-clear-btn:hover { color: var(--gold); border-color: rgba(180,120,40,0.5); }

/* ── Card Grids ────────────────────────────────────────────────────────────── */
#forge-card-grid, #disenchant-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 8px;
  align-items: start;
  padding: 8px 0;
}

/* ── Shared Card Tiles ─────────────────────────────────────────────────────── */
.de-card {
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(180,120,40,0.3);
  transition: border-color 0.2s, transform 0.2s, opacity 0.2s;
  background: linear-gradient(175deg, #221508, #100703);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 6px;
}

.de-card.selected {
  border-color: #88ccff;
  box-shadow: 0 0 12px rgba(100,180,255,0.5);
}
.de-card.forge-selected {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(240,192,64,0.5);
}
.de-card.forge-dimmed {
  opacity: 0.25;
  pointer-events: none;
}

.de-card:hover { transform: translateY(-3px); }

.de-card-art { border-radius: 4px; overflow: hidden; width: 100%; }

.de-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.de-card-name {
  font-size: 0.55rem;
  font-family: Arial, sans-serif;
  font-weight: 700;
  margin-top: 4px;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  width: 100%;
  box-sizing: border-box;
}

.de-dust-val {
  font-size: 0.58rem;
  font-weight: 700;
  color: #88ccff;
  text-shadow: 0 1px 3px #000;
  margin-top: 2px;
  padding: 0 4px;
  line-height: 1.3;
}

.de-card-btn {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 1px;
  color: #e04020;
  background: rgba(224,64,32,0.1);
  border: 1px solid rgba(224,64,32,0.3);
  border-radius: 3px;
  padding: 3px 6px;
  cursor: pointer;
  margin-top: 3px;
  transition: all 0.2s;
  width: calc(100% - 8px);
}
.de-card-btn:hover { background: rgba(224,64,32,0.2); border-color: #e04020; }

.de-qty {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #ffcc44;
  text-shadow: 0 1px 3px #000;
  background: rgba(0,0,0,0.6);
  padding: 1px 4px;
  border-radius: 4px;
}

/* ── Craft Specific Card Section ──────────────────────────────────────────── */
.craft-specific-section {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px;
}

.craft-specific-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.craft-specific-title {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 1px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.craft-specific-dust-bal {
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.craft-specific-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.craft-filter-input {
  flex: 1;
  min-width: 120px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 4px;
  color: var(--text);
  padding: 6px 10px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
}

.craft-filter-select {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 4px;
  color: var(--text);
  padding: 6px 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
}

.craft-affordable-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}

.craft-specific-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.craft-card-item {
  position: relative;
  background: linear-gradient(175deg, #1a0f08, #100703);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.2s;
}

.craft-card-item:hover { border-color: rgba(201,168,76,0.5); }
.craft-card-item.craft-unaffordable { opacity: 0.5; }

.craft-card-art { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.craft-card-art img { width: 100%; height: 100%; object-fit: cover; }

.craft-card-info {
  padding: 3px 2px;
  width: 100%;
}

.craft-card-info-name {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.craft-cost-badge {
  font-size: 0.6rem;
  font-weight: 700;
  margin-top: 2px;
}

.craft-card-craft-btn {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 1px;
  color: #88ccff;
  background: rgba(136,204,255,0.1);
  border: 1px solid rgba(136,204,255,0.3);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  margin-top: 3px;
  transition: all 0.2s;
  width: 100%;
}

.craft-card-craft-btn:hover:not(:disabled) { background: rgba(136,204,255,0.2); border-color: #88ccff; }
.craft-card-craft-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.forge-check {
  position: absolute;
  top: 4px;
  right: 4px;
  color: var(--gold);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}

/* ── Disenchant Footer ─────────────────────────────────────────────────────── */
#disenchant-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(180,120,40,0.2);
  margin-top: 8px;
  gap: 8px;
  flex-wrap: wrap;
}

#de-dust-preview { font-size: 0.7rem; color: var(--text-dim); }
#select-all-de-btn, #select-dupes-de-btn { font-size: 0.7rem; padding: 6px 12px; }
#confirm-disenchant-btn { font-size: 0.7rem; padding: 8px 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORGE RESULT PANEL — Anvil aesthetic
═══════════════════════════════════════════════════════════════════════════ */
#forge-result-panel {
  align-items: center;
  text-align: center;
  gap: 16px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(240,150,40,0.06) 0%, transparent 60%),
    linear-gradient(175deg, rgba(14,8,3,0.95), rgba(28,16,6,0.92));
}

/* Rune Circle */
.forge-anvil {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 12px auto;
}
.forge-rune-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid rgba(180,120,40,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle, rgba(10,5,2,0.9) 0%, rgba(20,10,4,0.8) 100%);
  transition: all 0.4s;
}
.forge-rune-circle.forge-rune-active {
  border-color: rgba(240,192,64,0.6);
  box-shadow: 0 0 30px rgba(240,150,40,0.3), inset 0 0 20px rgba(240,150,40,0.1);
}
.forge-rune-glow {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,150,40,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.forge-rune-active .forge-rune-glow {
  background: radial-gradient(circle, rgba(240,150,40,0.2) 0%, transparent 70%);
  animation: forgeRunePulse 2s ease-in-out infinite;
}
.forge-rune-icon { color: rgba(240,192,64,0.3); transition: color 0.3s; }
.forge-rune-active .forge-rune-icon { color: var(--gold); }

@keyframes forgeRunePulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* Ember particles around forge */
.forge-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.forge-ember-p {
  position: absolute;
  bottom: 20%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff8800;
  box-shadow: 0 0 4px #ff6600;
  animation: forgeEmberRise linear infinite;
}
@keyframes forgeEmberRise {
  0%   { transform: translateY(0) translateX(0); opacity: 1; }
  50%  { opacity: 0.7; }
  100% { transform: translateY(-80px) translateX(10px); opacity: 0; }
}

/* Forge info */
.forge-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.forge-rarity-badge {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.forge-cost-row {
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.forge-cost-total {
  color: #88ccff;
  font-weight: 900;
  font-size: 1rem;
}
.forge-balance {
  font-size: 0.68rem;
  color: var(--text-dim);
}

/* Forge Button */
.forge-btn {
  width: 100%;
  max-width: 240px;
  padding: 14px 24px;
  font-family: 'Cinzel Decorative', serif;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: #fff;
  background: linear-gradient(135deg, #8b3a00, #c05800, #8b3a00);
  border: 2px solid rgba(240,150,40,0.5);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(200,100,10,0.3), inset 0 1px 0 rgba(255,200,100,0.2);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  position: relative;
  overflow: hidden;
}
.forge-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #a04500, #e06800, #a04500);
  box-shadow: 0 6px 28px rgba(240,120,20,0.45), inset 0 1px 0 rgba(255,200,100,0.3);
  border-color: var(--gold);
}
.forge-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.forge-result-msg {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORGE REVEAL MODAL
═══════════════════════════════════════════════════════════════════════════ */
.forge-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s;
}
.forge-reveal-overlay.active { opacity: 1; }

.forge-reveal-box {
  text-align: center;
  position: relative;
  padding: 40px;
}
.forge-reveal-flash {
  position: absolute;
  inset: -100px;
  border-radius: 50%;
  animation: forgeFlash 1s ease-out both;
  pointer-events: none;
}
@keyframes forgeFlash {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.forge-reveal-card {
  background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(180,120,40,0.5);
  border-radius: 12px;
  padding: 20px;
  max-width: 240px;
  margin: 0 auto;
  animation: forgeCardPop 0.5s 0.3s ease-out both;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
@keyframes forgeCardPop {
  0%   { transform: scale(0.5) rotateY(90deg); opacity: 0; }
  60%  { transform: scale(1.05) rotateY(0deg); opacity: 1; }
  100% { transform: scale(1); }
}

.forge-reveal-art { border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.forge-reveal-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 8px; }
.forge-reveal-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 4px;
}
.forge-reveal-rarity {
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}
.forge-reveal-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
}

.forge-reveal-close {
  margin-top: 24px;
  padding: 10px 32px;
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: rgba(240,192,64,0.1);
  border: 1px solid rgba(240,192,64,0.35);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  animation: forgeCardPop 0.4s 0.7s ease-out both;
}
.forge-reveal-close:hover {
  background: rgba(240,192,64,0.2);
  border-color: var(--gold);
}

/* ── Nav Dust Badge ────────────────────────────────────────────────────────── */
#nav-dust {
  font-weight: 700;
  font-size: 0.72rem;
}

/* ── Settings Screen ──────────────────────────────────────────────────────── */
#settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  margin-top: 24px;
}
#settings-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(20,12,5,0.8);
  border: 1px solid rgba(180,120,40,0.3);
  border-radius: 12px;
  padding: 16px;
  height: fit-content;
}
.settings-nav-btn {
  background: transparent;
  border: none;
  color: #aaa;
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.settings-nav-btn:hover { color: #ffcc44; background: rgba(255,200,0,0.05); }
.settings-nav-btn.active { color: #ffcc44; background: rgba(255,200,0,0.1); border-left: 3px solid #ffcc44; }
#settings-content {
  background: rgba(20,12,5,0.8);
  border: 1px solid rgba(180,120,40,0.3);
  border-radius: 12px;
  padding: 32px;
  min-height: 400px;
}
#settings-content h2 {
  font-family: 'Cinzel Decorative', serif;
  color: #ffcc44;
  font-size: 20px;
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(180,120,40,0.2);
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 15px;
  color: #ccc;
}
.settings-toggle {
  width: 52px;
  height: 28px;
  background: rgba(255,255,255,0.1);
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  border: 1px solid rgba(255,255,255,0.2);
}
.settings-toggle.active { background: linear-gradient(90deg, #7a4a00, #cc8800); border-color: #ffcc44; }
.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.settings-toggle.active .toggle-knob { transform: translateX(24px); }
#settings-content select {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(180,120,40,0.4);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.referral-box {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(180,120,40,0.3);
  border-radius: 10px;
  padding: 16px;
  margin: 20px 0;
}
.referral-link-display {
  flex: 1;
  font-size: 13px;
  color: #88ccff;
  word-break: break-all;
  font-family: monospace;
}
.btn-copy-referral {
  background: linear-gradient(135deg, #7a4a00, #cc8800);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: filter 0.2s;
}
.btn-copy-referral:hover { filter: brightness(1.2); }
.referral-stats {
  display: flex;
  gap: 32px;
  margin-top: 24px;
}
.referral-stat {
  text-align: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(180,120,40,0.2);
  border-radius: 10px;
  padding: 20px 32px;
}
.referral-stat-value {
  font-size: 32px;
  font-weight: 900;
  color: #ffcc44;
  font-family: Arial, sans-serif;
}
.referral-stat-label { font-size: 12px; color: #aaa; margin-top: 4px; }
/* ── Withdrawal Form ──────────────────────────────────────────────────────── */
.withdraw-form {
  background: linear-gradient(160deg, #1e120a, #120806);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 4px; padding: 20px 24px; margin-bottom: 24px;
}
.withdraw-form-header {
  font-family: Arial, sans-serif; font-size: 14px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 12px;
}
.withdraw-balance {
  font-family: 'Crimson Pro', serif; font-size: 14px; color: var(--text-dim);
  margin-bottom: 14px;
}
.withdraw-balance span { color: var(--gold); font-weight: 700; }
.withdraw-input-row { margin-bottom: 14px; }
.withdraw-input-row label {
  display: block; font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;
}
.withdraw-input-row input {
  width: 100%; max-width: 240px; padding: 8px 12px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(240,192,64,0.25);
  border-radius: 3px; color: var(--text); font-family: Arial, sans-serif;
  font-size: 14px; outline: none; transition: border-color 0.2s;
}
.withdraw-input-row input:focus { border-color: var(--gold); }
.withdraw-calc {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px; padding: 12px 16px; margin-bottom: 16px;
  max-width: 320px;
}
.withdraw-calc-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 13px; color: var(--text-dim);
}
.withdraw-calc-row .wc-gross { color: #eee; font-weight: 600; }
.withdraw-calc-row .wc-fee { color: #e04020; font-weight: 600; }
.withdraw-calc-net {
  border-top: 1px solid rgba(240,192,64,0.2); margin-top: 6px; padding-top: 8px;
}
.withdraw-calc-row .wc-net { color: #44cc44; font-weight: 700; font-size: 15px; }
.withdraw-method-section { margin: 12px 0; }
.withdraw-method-label {
  font-family: Arial, sans-serif; font-size: 0.7rem; color: var(--text-dim, #b8a47c);
  text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 6px;
}
.withdraw-method-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(240,192,64,0.1);
  border-radius: 5px; cursor: pointer; margin-bottom: 4px; font-size: 0.75rem;
}
.withdraw-method-option:hover { border-color: rgba(240,192,64,0.3); }
.withdraw-method-option.wm-selected { border-color: var(--gold, #c9a44a); background: rgba(240,192,64,0.06); }
.withdraw-method-option input[type="radio"] { accent-color: var(--gold, #c9a44a); margin: 0; }
.wm-type { font-family: Arial, sans-serif; font-weight: 700; font-size: 0.65rem; min-width: 55px; }
.wm-masked { font-family: monospace; color: var(--text, #e8dcc8); letter-spacing: 0.05em; }
.wm-detail { color: var(--text-dim, #b8a47c); font-size: 0.65rem; margin-left: auto; }
.wm-name { display: none; }
.withdraw-no-methods { font-size: 0.75rem; color: #e04020; padding: 6px 0; }
.withdraw-add-method {
  display: inline-block; margin-top: 6px; font-size: 0.65rem;
  color: var(--text-dim, #b8a47c); text-decoration: underline; cursor: pointer;
}
.withdraw-add-method:hover { color: var(--gold, #c9a44a); }
.btn-withdraw {
  font-family: Arial, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 28px; border: none; border-radius: 3px; cursor: pointer;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a0800; transition: all 0.2s;
  box-shadow: 0 0 12px rgba(240,192,64,0.2);
}
.btn-withdraw:hover:not(:disabled) {
  background: linear-gradient(135deg, #e08010, #ffe030);
  box-shadow: 0 0 20px rgba(240,192,64,0.4);
}
.btn-withdraw:disabled { opacity: 0.35; cursor: default; }

/* ── Payment Sub-tabs ────────────────────────────────────────────────────── */
.payment-sub-tabs {
  display: flex; gap: 0; margin-bottom: 16px;
  border-bottom: 1px solid rgba(240,192,64,0.15);
}
.payment-sub-tab {
  font-family: Arial, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 20px; background: none; border: none;
  color: var(--text-dim); cursor: pointer; transition: all 0.2s;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.payment-sub-tab:hover { color: var(--gold); }
.payment-sub-tab.active {
  color: var(--gold); border-bottom-color: var(--gold);
}
.payment-status.processed { background: rgba(0,150,0,0.2); color: #44cc44; border: 1px solid rgba(0,200,0,0.3); }

.payment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.payment-table th {
  text-align: left;
  padding: 12px 16px;
  color: #ffcc44;
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(180,120,40,0.3);
}
.payment-table td {
  padding: 12px 16px;
  color: #ccc;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.payment-table tr:hover td { background: rgba(255,200,0,0.03); }
.payment-status {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.payment-status.completed { background: rgba(0,150,0,0.2); color: #44cc44; border: 1px solid rgba(0,200,0,0.3); }
.no-payments { color: #666; text-align: center; padding: 40px; font-size: 14px; }
.download-invoice-btn {
  background: none; border: none; color: #cc8800;
  font-family: Arial, sans-serif; font-size: 11px;
  cursor: pointer; padding: 4px 0; transition: all 0.2s;
  letter-spacing: 0.03em;
}
.download-invoice-btn:hover { color: #ffcc44; text-decoration: underline; }

@media print {
  body > *:not(.invoice-print-target) { display: none !important; }
  .invoice-print-target { display: block !important; }
}

/* ── Payment Methods ──────────────────────────────────────────────────────── */
.saved-card-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(180,120,40,0.2);
  border-radius: 10px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.saved-card-row:hover { border-color: rgba(180,120,40,0.4); }
.saved-card-info { display: flex; align-items: center; gap: 12px; flex: 1; }
.saved-card-type-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 4px;
  white-space: nowrap;
}
.saved-card-number {
  font-family: monospace;
  font-size: 14px;
  color: #ccc;
  letter-spacing: 0.05em;
}
.saved-card-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 120px;
}
.saved-card-name { font-size: 12px; color: #aaa; }
.saved-card-expiry { font-size: 11px; color: #777; }
.btn-remove-card {
  background: transparent;
  border: 1px solid rgba(200,60,60,0.3);
  color: #cc4444;
  font-family: Arial, sans-serif;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-remove-card:hover { background: rgba(200,60,60,0.15); border-color: rgba(200,60,60,0.5); }
.pm-add-buttons { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.btn-add-sepa { background: linear-gradient(135deg, #005a3a, #00a86b) !important; }
.btn-add-card {
  margin-top: 0;
  background: linear-gradient(135deg, #7a4a00, #cc8800);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: filter 0.2s;
}
.btn-add-card:hover { filter: brightness(1.2); }
.add-card-form {
  margin-top: 20px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(180,120,40,0.3);
  border-radius: 12px;
  padding: 24px;
}
.card-form-row {
  margin-bottom: 16px;
}
.card-form-row label {
  display: block;
  font-size: 12px;
  color: #aaa;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.card-form-row input {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(180,120,40,0.35);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  transition: border-color 0.2s;
}
.card-form-row input:focus { outline: none; border-color: rgba(255,200,40,0.6); }
.card-form-row input::placeholder { color: #555; }
.card-form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.detected-card-type {
  font-weight: 700;
  font-size: 11px;
  margin-left: 8px;
  letter-spacing: 0.05em;
}
.card-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.btn-save-card {
  background: linear-gradient(135deg, #7a4a00, #cc8800);
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s;
}
.btn-save-card:hover { filter: brightness(1.2); }
.btn-cancel-card {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: #aaa;
  padding: 10px 24px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-cancel-card:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

/* ── Market Prices & Sparklines ──────────────────────────────────────────── */
.market-price-display { display: flex; align-items: center; gap: 6px; }
.mp-market-val { font-size: 12px; font-weight: 700; color: #ffcc44; }
.price-change-up { color: #44cc44; font-size: 11px; font-weight: 700; }
.price-change-down { color: #cc4444; font-size: 11px; font-weight: 700; }
.price-sparkline { display: none; }
.mp-market-col { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; }
.trending-badge {
  position: absolute; top: 4px; left: 4px;
  background: linear-gradient(135deg, #7a4a00, #cc8800);
  color: #fff; font-size: 9px; font-weight: 900;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em;
}
.falling-badge {
  position: absolute; top: 4px; left: 4px;
  background: linear-gradient(135deg, #8b0000, #cc0000);
  color: #fff; font-size: 9px; font-weight: 900;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em;
}
.market-overview {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 16px; padding: 14px;
  background: rgba(20,12,5,0.8);
  border: 1px solid rgba(180,120,40,0.3); border-radius: 8px;
}
.market-stat { text-align: center; }
.market-stat-value { font-size: 18px; font-weight: 900; color: #ffcc44; font-family: Arial, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-stat-label { font-size: 11px; color: #aaa; margin-top: 4px; letter-spacing: 0.05em; }

/* ── Market Watch Tab ────────────────────────────────────────────────────── */
.mw-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 20px; padding: 16px;
  background: rgba(20,12,5,0.7);
  border: 1px solid rgba(180,120,40,0.25); border-radius: 10px;
}
.mw-rarity-btns { display: flex; gap: 4px; }
.mw-rarity-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: #999; font-family: Arial, sans-serif; font-size: 11px;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s;
  letter-spacing: 0.03em;
}
.mw-rarity-btn:hover { color: #ddd; border-color: rgba(255,200,40,0.3); }
.mw-rarity-btn.active { color: #ffcc44; background: rgba(255,200,0,0.1); border-color: #ffcc44; }

.mw-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.mw-card {
  position: relative;
  background: rgba(15,10,5,0.85);
  border: 1px solid rgba(180,120,40,0.2);
  border-radius: 10px; padding: 12px;
  cursor: pointer; transition: all 0.25s;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.mw-card:hover { border-color: rgba(255,200,40,0.5); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.mw-card-art { width: 80px; height: 80px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.mw-card-art img, .mw-card-art .mp-card-thumb { width: 100%; height: 100%; object-fit: cover; }
.mw-card-name { font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; color: #eee; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.mw-card-rarity { font-size: 10px; font-weight: 600; text-transform: capitalize; margin-bottom: 4px; letter-spacing: 0.05em; }
.mw-card-price { font-size: 16px; font-weight: 900; color: #ffcc44; font-family: Arial, sans-serif; margin-bottom: 2px; }
.mw-spark { display: none; }
.mw-badge-trending {
  position: absolute; top: 6px; left: 6px;
  background: linear-gradient(135deg, #7a4a00, #cc8800);
  color: #fff; font-size: 8px; font-weight: 900;
  padding: 2px 5px; border-radius: 3px; letter-spacing: 0.05em;
}
.mw-badge-falling {
  position: absolute; top: 6px; left: 6px;
  background: linear-gradient(135deg, #8b0000, #cc0000);
  color: #fff; font-size: 8px; font-weight: 900;
  padding: 2px 5px; border-radius: 3px; letter-spacing: 0.05em;
}

/* ── Market Watch Detail Modal ───────────────────────────────────────────── */
.mw-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.mw-modal-overlay.mw-modal-visible { opacity: 1; }
.mw-modal-box {
  position: relative;
  background: linear-gradient(160deg, rgba(25,18,10,0.98), rgba(15,10,5,0.98));
  border: 1px solid rgba(180,120,40,0.4); border-radius: 16px;
  padding: 32px; max-width: 620px; width: 92vw;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,200,40,0.08);
  transform: translateY(20px); transition: transform 0.3s ease;
}
.mw-modal-visible .mw-modal-box { transform: translateY(0); }
.mw-modal-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: #888; font-size: 20px;
  cursor: pointer; transition: color 0.2s; z-index: 2;
}
.mw-modal-close:hover { color: #fff; }

.mw-modal-top { display: flex; gap: 24px; margin-bottom: 24px; }
.mw-modal-art { width: 120px; height: 120px; border-radius: 10px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(180,120,40,0.3); }
.mw-modal-art img, .mw-modal-art .mp-card-thumb { width: 100%; height: 100%; object-fit: cover; }
.mw-modal-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mw-modal-name { font-family: 'Cinzel Decorative', serif; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.mw-modal-rarity { font-size: 12px; text-transform: capitalize; margin-bottom: 12px; letter-spacing: 0.05em; }
.mw-modal-price { font-family: Arial, sans-serif; font-size: 42px; font-weight: 900; color: #ffcc44; line-height: 1; }
.mw-modal-price-unit { font-size: 20px; color: #aa8830; margin-left: 2px; }

.mw-modal-stats { display: flex; gap: 12px; margin-top: 16px; }
.mw-stat-box {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(180,120,40,0.2);
  border-radius: 8px; padding: 10px 16px; text-align: center; flex: 1;
}
.mw-stat-val { font-size: 16px; font-weight: 900; font-family: Arial, sans-serif; }
.mw-stat-lbl { font-size: 10px; color: #888; margin-top: 4px; letter-spacing: 0.05em; }

.mw-modal-chart-section { display: none; }
.mw-chart-title {
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 700;
  color: #ffcc44; margin-bottom: 12px; letter-spacing: 0.08em;
  padding-bottom: 8px; border-bottom: 1px solid rgba(180,120,40,0.15);
}
.mw-detail-chart {
  display: none;
  display: flex; align-items: center; justify-content: center;
}

.mw-modal-trades-section { margin-bottom: 16px; }
.mw-trades-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mw-trades-table th {
  text-align: left; padding: 8px 12px; color: #888;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid rgba(180,120,40,0.15);
}
.mw-trades-table td { padding: 7px 12px; color: #ccc; border-bottom: 1px solid rgba(255,255,255,0.03); }
.mw-trade-buy td { background: rgba(68,204,68,0.04); }
.mw-trade-sell td { background: rgba(204,68,68,0.04); }
.mw-trade-buy td:nth-child(2) { color: #44cc44; font-weight: 700; }
.mw-trade-sell td:nth-child(2) { color: #cc4444; font-weight: 700; }

.mw-own-section {
  display: flex; align-items: center; gap: 16px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(180,120,40,0.15);
}
.mw-own-badge {
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 700;
  color: #44cc44; letter-spacing: 0.03em;
}
.mw-list-btn { font-size: 12px; padding: 8px 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOBBY OVERHAUL — Enhanced visuals
═══════════════════════════════════════════════════════════════════════════ */

/* ── Keeper Float Animation ────────────────────────────────────────────── */
@keyframes keeperFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* ── Typewriter Cursor ──────────────────────────────────────────────────── */
@keyframes keeperCursorBlink {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 0; }
}
.keeper-bubble.keeper-typing #keeper-text::after {
  content: '|';
  animation: keeperCursorBlink 0.6s step-end infinite;
  color: var(--gold);
  opacity: 0.7;
  margin-left: 1px;
}

/* ── Level Frame ────────────────────────────────────────────────────────── */
.parch-level-frame {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(240,192,64,0.45);
  box-shadow: 0 0 18px rgba(240,192,64,0.18), inset 0 0 14px rgba(240,192,64,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.4rem;
  background: rgba(0,0,0,0.3);
  position: relative;
}
.parch-level-frame::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(240,192,64,0.12);
}
.parch-level-num {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.8rem;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(240,192,64,0.4);
  line-height: 1;
}

/* ── XP Bar Shimmer ──────────────────────────────────────────────────────── */
@keyframes xpShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.tvn-xp-bar .xp-bar-fill {
  position: relative !important;
  overflow: hidden !important;
}
.tvn-xp-bar .xp-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: xpShimmer 2.5s ease-in-out infinite;
}
.parch-xp-pct {
  font-family: Arial, sans-serif;
  font-size: 0.58rem;
  color: rgba(240,192,64,0.55);
  margin-top: 0.15rem;
  letter-spacing: 0.06em;
}
.parch-dust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  font-family: Arial, sans-serif;
  font-size: 0.65rem;
  color: var(--text-dim);
  opacity: 0.8;
}

/* ── Quest Overhaul ──────────────────────────────────────────────────────── */
.qb-note-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}
.qb-note-icon {
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.75;
  line-height: 0;
}
@keyframes questPulse {
  0%, 100% { box-shadow: 0 0 3px rgba(240,192,64,0.2); }
  50%      { box-shadow: 0 0 10px rgba(240,192,64,0.55); }
}
.qb-note.quest-active .quest-bar-fill {
  background: linear-gradient(to right, #a07020, var(--gold)) !important;
  animation: questPulse 2s ease-in-out infinite;
}
.qb-note-reward-item {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

/* ── Quest Section Labels ──────────────────────────────────────────────── */
.quest-section-label {
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0 0.3rem;
  margin-top: 0.3rem;
  border-bottom: 1px solid rgba(240,192,64,0.12);
}
.quest-label-daily { color: var(--gold, #c9a44a); }
.quest-label-weekly { color: #b070e0; }
.quest-label-ach { color: #60c0c0; }

/* Weekly quest styling */
.quest-weekly { border-color: rgba(160,100,220,0.3) !important; }
.quest-weekly .qb-pin { background: #8050b0 !important; }
.quest-weekly .quest-bar { background: rgba(160,100,220,0.12) !important; }
.quest-weekly .quest-bar-fill,
.quest-bar-fill-weekly {
  background: linear-gradient(to right, #7040a0, #b070e0) !important;
}
.quest-weekly .qb-note-name { color: #c890f0; }
.quest-weekly.quest-active .quest-bar-fill {
  background: linear-gradient(to right, #7040a0, #b070e0) !important;
}
.quest-weekly.quest-done { border-color: rgba(160,100,220,0.4) !important; }

/* ── Deck Picker Overhaul ────────────────────────────────────────────────── */
#modal-deck-pick .modal-box {
  max-width: 500px;
}
.deck-pick-mode-badge {
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
  opacity: 0.7;
}
.deck-pick-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(240,192,64,0.12);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s;
}
.deck-pick-item:hover {
  border-color: rgba(240,192,64,0.4);
  background: rgba(240,192,64,0.06);
}
.deck-pick-item.deck-invalid {
  opacity: 0.4;
  cursor: not-allowed;
}
.dpi-info { flex: 1; }
.dpi-name {
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.dpi-meta {
  font-size: 0.65rem;
  color: var(--text-dim);
}
.dpi-count {
  font-family: Arial, sans-serif;
  font-size: 0.58rem;
  background: rgba(240,192,64,0.10);
  border: 1px solid rgba(240,192,64,0.22);
  border-radius: 10px;
  padding: 0.12rem 0.5rem;
  color: var(--gold);
  white-space: nowrap;
}
.dpi-play-btn {
  margin-left: auto;
  background: rgba(64,184,64,0.12);
  border: 1px solid rgba(64,184,64,0.35);
  color: var(--green);
  font-family: Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 6px rgba(64,184,64,0.12);
}
.dpi-play-btn:hover {
  background: rgba(64,184,64,0.22);
  box-shadow: 0 0 14px rgba(64,184,64,0.28);
  border-color: rgba(64,184,64,0.55);
}
.dpi-empty {
  border-style: dashed;
  border-color: rgba(240,192,64,0.10);
  opacity: 0.45;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}
.dpi-empty:hover {
  opacity: 0.7;
  border-color: rgba(240,192,64,0.25);
}
.dpi-empty-icon {
  font-size: 1.3rem;
  color: var(--gold);
  opacity: 0.5;
}
.dpi-empty-label {
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* ── Landing Footer ───────────────────────────────────────────────────────── */
.hf-footer {
  background: rgba(0,0,0,0.8);
  border-top: 1px solid rgba(240,192,64,0.15);
  padding: 2.5rem 2rem 1.5rem;
  text-align: center;
}
.footer-legal-links {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.footer-legal-links a {
  font-family: Arial, sans-serif;
  font-size: 0.65rem;
  color: var(--gold, #c9a44a);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-legal-links a:hover { color: #fff; }
.footer-sep { color: rgba(240,192,64,0.3); font-size: 0.65rem; }
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.footer-social-link {
  color: var(--text-dim, #b8a47c);
  transition: color 0.2s;
}
.footer-social-link:hover { color: var(--gold, #c9a44a); }
.footer-payment-logos {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.payment-logos-img {
  max-width: 420px;
  width: 90%;
  height: auto;
  filter: brightness(0.85);
  opacity: 0.8;
}
.footer-disclaimer {
  font-family: 'Crimson Pro', serif;
  font-size: 0.7rem;
  color: var(--text-dim, #b8a47c);
  opacity: 0.5;
  max-width: 600px;
  margin: 0.6rem auto 0;
  line-height: 1.5;
}

/* ── Legal Modals (Privacy / Terms) ───────────────────────────────────────── */
.legal-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.legal-modal {
  background: linear-gradient(175deg, #1a1208, #0d0804);
  border: 1px solid rgba(240,192,64,0.35);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 60px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.4);
}
.legal-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--gold, #c9a44a);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}
.legal-modal-close:hover { color: #fff; }
.legal-modal-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.2rem;
  color: var(--gold, #c9a44a);
  padding: 1.5rem 2rem 1rem;
  border-bottom: 1px solid rgba(240,192,64,0.15);
  margin: 0;
}
.legal-modal-body {
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
  max-height: 70vh;
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: var(--text, #e8dcc8);
  line-height: 1.7;
}
.legal-modal-body h3 {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--gold, #c9a44a);
  margin: 1.5rem 0 0.5rem;
  letter-spacing: 0.04em;
}
.legal-modal-body h3:first-child { margin-top: 0; }
.legal-modal-body p { margin: 0 0 0.8rem; }
.legal-modal-body ul {
  margin: 0 0 0.8rem;
  padding-left: 1.4rem;
}
.legal-modal-body li {
  margin-bottom: 0.4rem;
}
.legal-modal-body strong { color: var(--gold, #c9a44a); }
.legal-updated {
  margin-top: 1.5rem;
  font-style: italic;
  opacity: 0.5;
  font-size: 0.75rem;
}
.legal-modal-body::-webkit-scrollbar { width: 4px; }
.legal-modal-body::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.2); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE — Landing Page
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Burger Button (hidden on desktop) ─────────────────────────────────────── */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 250;
}
.burger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold, #c9a44a);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-mobile-open .burger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-open .burger-btn span:nth-child(2) { opacity: 0; }
.nav-mobile-open .burger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hide mobile-only elements on desktop */
.cards-swipe-hint { display: none; }

/* ── Mobile Breakpoint ─────────────────────────────────────────────────────── */
/* ── Tablet (768px) ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html { scroll-padding-top: 56px; }

  /* ── Nav — burger for landing links only ── */
  .burger-btn { display: flex; }
  nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 0 1rem;
    position: fixed;
    z-index: 150;
  }
  nav > .nav-logo { order: 1; }
  nav > .nav-logo .nav-logo-img { height: 40px; }
  nav > .burger-btn { order: 3; margin-left: auto; position: relative; z-index: 250; }
  nav > #nav-logged-out { order: 2; margin-left: auto; margin-right: 0.5rem; }
  nav > #nav-logged-in { order: 2; margin-left: auto; margin-right: 0.5rem; }
  nav > .music-ctrl { order: 2; margin-right: 0.5rem; }

  /* Hide ALL nav-links by default on mobile */
  nav > .nav-links {
    order: 10; display: none; flex-direction: column; width: 100%; gap: 0;
    padding: 0.5rem 0 1rem; border-top: 1px solid rgba(240,192,64,0.12);
    background: rgba(10,6,4,0.98);
  }
  /* Burger open state */
  nav.nav-mobile-open { z-index: 200; }
  /* Hide all nav link sets on mobile — only burger toggles them */
  #nav-game-links,
  #nav-game-links.nav-active,
  #nav-landing-links,
  #nav-landing-links.nav-active { display: none !important; }
  /* Show via burger (mobile-visible class) — must beat ID specificity above */
  #nav-game-links.mobile-visible,
  #nav-landing-links.mobile-visible { display: flex !important;
    flex-direction: column !important; overflow-x: visible !important;
    white-space: normal !important; flex-wrap: wrap !important; }

  .nav-links li { width: 100%; }
  .nav-links a, .nav-links .nav-link {
    display: block; padding: 0.7rem 1rem; font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .nav-user-info { font-size: 0.6rem; gap: 0.4rem; }
  .nav-logout-btn { font-size: 0.6rem; padding: 0.3rem 0.6rem; }

  /* ── Hero — responsive title ── */
  .hero {
    min-height: auto;
    padding-top: 80px;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-bottom: 2.5rem;
    overflow: visible;
  }
  .hero-title {
    font-size: clamp(2.5rem, 10vw, 5rem) !important;
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-text-fill-color: transparent;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .hero-sub {
    font-size: clamp(0.75rem, 2.5vw, 1.1rem) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .hero-desc { font-size: 0.85rem; }
  .hero-divider { width: 60%; max-width: 200px; }
  .hero-btns {
    flex-direction: column; align-items: center;
    gap: 0.8rem;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-secondary {
    width: auto; display: inline-block; text-align: center;
    min-width: 160px; max-width: 220px;
    padding: 12px 32px; font-size: 0.8rem;
  }

  /* ── Cards — JS carousel ── */
  .cards-section { padding: 40px 0 !important; overflow: hidden !important; }
  .cards-showcase .card-art { height: 180px !important; overflow: hidden !important; }
  .cards-showcase .card-art-img { height: 180px !important; width: 100% !important; object-fit: cover !important; object-position: top center !important; }
  #lc-wrap {
    width: 100% !important;
    overflow: hidden !important;
    height: auto !important;
    touch-action: pan-x;
  }
  #lc-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    perspective: none !important;
    animation: none !important;
    transition: transform 0.3s ease !important;
    will-change: transform;
    height: auto !important;
    align-items: flex-start;
  }
  #lc-track > .card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  #lc-track > .card:hover { transform: none !important; }
  #lc-dots {
    display: flex !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 8px;
    padding: 0;
    width: 100%;
  }
  #lc-dots > div {
    width: 10px !important; height: 10px !important;
    border-radius: 50% !important; transition: background 0.2s !important;
  }

  /* ── Features ── */
  .features { padding: 40px 1rem; }
  .features-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* ── Board ── */
  .board-section { padding: 40px 1rem; }
  .board-preview { padding: 1rem; }
  .board-row { gap: 0.4rem; }
  .mini-card { width: 48px; height: 68px; }
  .mini-card-emoji { font-size: 1.2rem; }
  .hero-portrait { width: 55px; height: 55px; font-size: 1.5rem; }
  .hero-hp { width: 30px; height: 30px; font-size: 0.75rem; }
  .end-turn-btn { font-size: 0.55rem; padding: 0.4rem 0.7rem; }

  /* ── Stats — 2x2 grid ── */
  .stats-section { padding: 40px 1rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .stat-box { display: block !important; }
  .stat-number { font-size: 1.8rem; }
  .stat-label { font-size: 0.55rem; }

  /* ── Classes — 3x3 grid ── */
  .classes-section { padding: 40px 1rem; }
  .classes-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0.5rem 0;
  }
  .classes-grid > .class-card {
    flex: none !important;
    width: auto !important;
    padding: 8px;
  }
  .class-portrait { width: 80px; height: 80px; margin-bottom: 0.4rem; }
  .class-name { font-size: 0.6rem; }
  .class-desc { font-size: 0.55rem; }

  /* ── Footer ── */
  .hf-footer { padding: 2rem 1rem 1.5rem; }
  .footer-compliance { gap: 0.6rem; }
  .compliance-badge { padding: 3px 6px; }
  .compliance-label { font-size: 0.5rem; }
  .footer-disclaimer { font-size: 0.6rem; }

  /* ── Sections ── */
  .section-title { font-size: 1.4rem !important; }
  .section-subtitle { margin-bottom: 2rem; font-size: 0.85rem; }
  .ornament { font-size: 1rem; margin: 1rem 0; }

  /* ── Legal modals ── */
  .legal-modal-overlay { padding: 0.5rem; }
  .legal-modal { max-width: 100%; border-radius: 8px; }
  .legal-modal-title { font-size: 1rem; padding: 1rem 1.2rem 0.8rem; }
  .legal-modal-body { padding: 1rem 1.2rem 1.5rem; font-size: 0.8rem; }
}

/* ── Small phones (480px) ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero { padding: 80px 0.8rem 1.5rem; }
  .hero-title { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .hero-sub { font-size: 0.7rem !important; letter-spacing: 0.1em !important; }
  .hero-desc { font-size: 0.8rem; max-width: 100%; }
  .hero-divider { width: 140px; }
  .hero-btns .btn-primary,
  .hero-btns .btn-secondary { max-width: 100%; padding: 0.7rem 1rem; font-size: 0.75rem; }

  /* cards handled by inline styles in carousel */
  .card-art { height: 160px !important; }
  .card-name-band { font-size: 0.6rem; padding: 0.3rem 0.4rem; }
  .card-text { font-size: 0.6rem; min-height: 40px; padding: 0.3rem 0.5rem; }
  .card-cost { width: 28px; height: 28px; font-size: 0.85rem; }

  .feature-card { padding: 1.2rem 1rem; }
  .feature-title { font-size: 0.75rem; }
  .feature-text { font-size: 0.85rem; }

  .board-preview { padding: 0.6rem; }
  .mini-card { width: 40px; height: 56px; }
  .mini-card-emoji { font-size: 1rem; }
  .mini-card-stats { font-size: 0.45rem; }
  .hero-portrait { width: 45px; height: 45px; font-size: 1.2rem; }
  .hero-hp { width: 26px; height: 26px; font-size: 0.65rem; margin-left: -8px; }
  .mana-gem { width: 10px; height: 10px; }
  .board-label { font-size: 0.45rem; }

  .stat-box { padding: 1rem 0.5rem; }
  .stat-number { font-size: 1.5rem; }

  .classes-grid > .class-card { flex: 0 0 115px; padding: 1rem 0.6rem; }
  .class-portrait { width: 48px; height: 48px; }
  .class-desc { font-size: 0.6rem; }

  .section-title { font-size: 1.1rem !important; }
  .section-subtitle { font-size: 0.75rem; margin-bottom: 1.5rem; }

  .footer-legal-links { flex-direction: column; gap: 0.4rem; }
  .footer-sep { display: none; }
  .footer-compliance { flex-wrap: wrap; justify-content: center; }
  .footer-copy { font-size: 0.65rem; }

  .nav-user-info { font-size: 0.55rem; gap: 0.3rem; }
  .nav-tokens { font-size: 0.6rem; }

  /* Auth modal */
  .modal-box { margin: 0.5rem; padding: 1.2rem; }
  .modal-title { font-size: 1.2rem; }
  .form-group label { font-size: 0.7rem; }
  .verify-digit { width: 36px; height: 42px; font-size: 1.1rem; }
  .verify-inputs { gap: 5px; }

  /* Tokens modal */
  .tokens-bundle-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .token-bundle-amount { font-size: 1.4rem; }
}

/* ── Token Counter (navbar) ────────────────────────────────────────────────── */
.nav-tokens {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--gold, #c9a44a);
  font-weight: 700;
  font-size: 0.72rem;
}
.nav-token-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 50%;
}
.nav-tokens.tokens-zero {
  color: #e04020;
}

/* ── Out of Tokens Modal ───────────────────────────────────────────────────── */
.tokens-modal-body {
  padding: 2rem;
  text-align: center;
}
.tokens-modal-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.tokens-modal-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.3rem;
  color: var(--gold, #c9a44a);
  margin: 0 0 0.5rem;
}
.tokens-modal-subtitle {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-dim, #b8a47c);
  margin-bottom: 1rem;
}
.tokens-reset-timer {
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  color: #e08040;
  margin-bottom: 1.5rem;
}
.tokens-bundle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.token-bundle-card {
  background: linear-gradient(175deg, #1a1208, #0d0804);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 8px;
  padding: 1rem 0.8rem;
  text-align: center;
}
.token-bundle-card:hover {
  border-color: rgba(240,192,64,0.5);
}
.token-bundle-name {
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  color: var(--text-dim, #b8a47c);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
}
.token-bundle-amount {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold, #c9a44a);
  line-height: 1;
}
.token-bundle-label {
  font-size: 0.6rem;
  color: var(--text-dim, #b8a47c);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}
.token-bundle-price {
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  color: var(--gold, #c9a44a);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.btn-token-buy {
  font-family: Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffcc44;
  background-image: url('../assets/btn-primary.webp');
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  border-radius: 7px;
  padding: 8px 24px;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 10px rgba(240,192,64,0.3);
  letter-spacing: 0.08em;
}
.btn-token-buy:hover {
  filter: brightness(1.2);
}

/* ── Token Shop Section ────────────────────────────────────────────────────── */
.token-shop-status {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(240,192,64,0.15);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.token-shop-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.token-shop-count {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold, #c9a44a);
}
.token-shop-count-label {
  font-size: 0.6rem;
  color: var(--text-dim, #b8a47c);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.token-shop-info {
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: var(--text-dim, #b8a47c);
  line-height: 1.5;
}
.token-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* ── Level Up Modal ────────────────────────────────────────────────────────── */
.lu-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: luFadeIn 0.3s ease;
}
@keyframes luFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lu-box {
  background: linear-gradient(175deg, #1a1208, #0d0804);
  border: 2px solid var(--gold, #c9a44a);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 400px;
  width: 90%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(240,192,64,0.3), 0 0 120px rgba(240,192,64,0.1);
  animation: luBoxPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes luBoxPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lu-level-number {
  font-family: 'Cinzel Decorative', serif;
  font-size: 4rem;
  font-weight: 900;
  color: var(--gold, #c9a44a);
  text-shadow: 0 0 30px rgba(240,192,64,0.6), 0 0 60px rgba(240,192,64,0.3);
  line-height: 1;
  animation: luGlow 2s ease-in-out infinite alternate;
}
@keyframes luGlow {
  from { text-shadow: 0 0 20px rgba(240,192,64,0.4), 0 0 40px rgba(240,192,64,0.2); }
  to { text-shadow: 0 0 40px rgba(240,192,64,0.8), 0 0 80px rgba(240,192,64,0.4); }
}
.lu-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold, #c9a44a);
  letter-spacing: 0.2em;
  margin: 0.5rem 0;
}
.lu-subtitle {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: var(--text-dim, #b8a47c);
  margin-bottom: 1.5rem;
}
.lu-rewards {
  text-align: left;
  margin-bottom: 1.5rem;
}
.lu-level-group {
  margin-bottom: 0.8rem;
  padding: 0.6rem;
  background: rgba(240,192,64,0.05);
  border-radius: 6px;
  border-left: 3px solid var(--gold, #c9a44a);
}
.lu-level-label {
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  color: var(--gold, #c9a44a);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
}
.lu-reward-item {
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: var(--text, #e8dcc8);
  padding: 0.15rem 0;
}
.lu-reward-icon {
  margin-right: 0.4rem;
}
.lu-close-btn {
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a0800;
  background: linear-gradient(135deg, var(--gold, #c9a44a), #e0a020);
  border: none;
  border-radius: 4px;
  padding: 0.6rem 2rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.lu-close-btn:hover { filter: brightness(1.2); }
.lu-particles {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(240,192,64,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.lobby-next-reward {
  font-family: 'Crimson Pro', serif;
  font-size: 0.7rem;
  color: var(--text-dim, #b8a47c);
  opacity: 0.7;
  margin-top: 0.3rem;
  text-align: center;
}

/* ── Cookie Consent Banner ─────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: linear-gradient(to top, rgba(10,6,4,0.98), rgba(20,12,8,0.96));
  border-top: 1px solid rgba(240,192,64,0.2);
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: center;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.6);
}
.cookie-content {
  max-width: 900px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-text {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
}
.cookie-icon { font-size: 1.5rem; }
.cookie-text strong {
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  color: var(--gold, #c9a44a);
  display: block;
  margin-bottom: 4px;
}
.cookie-text p {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: var(--text-dim, #b8a47c);
  line-height: 1.5;
  margin: 0;
}
.cookie-text a { color: var(--gold, #c9a44a); text-decoration: underline; }
.cookie-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cookie-btn {
  font-family: Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.cookie-btn-accept {
  background: linear-gradient(135deg, var(--gold, #c9a44a), #e0a020);
  color: #1a0800;
}
.cookie-btn-accept:hover { filter: brightness(1.2); }
.cookie-btn-essential {
  background: rgba(240,192,64,0.1);
  color: var(--gold, #c9a44a);
  border: 1px solid rgba(240,192,64,0.3);
}
.cookie-btn-essential:hover { background: rgba(240,192,64,0.2); }
.cookie-btn-settings {
  background: transparent;
  color: var(--text-dim, #b8a47c);
  border: 1px solid rgba(255,255,255,0.1);
}
.cookie-btn-settings:hover { border-color: rgba(255,255,255,0.3); color: #fff; }

/* Cookie Settings Modal Extras */
.cookie-setting-group {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(240,192,64,0.08);
}
.cookie-setting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.cookie-setting-header label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.cookie-setting-header input[type="checkbox"] { accent-color: var(--gold, #c9a44a); }
.cookie-always-on {
  font-size: 0.6rem;
  color: #44cc44;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cookie-setting-group p {
  font-size: 0.75rem;
  color: var(--text-dim, #b8a47c);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .cookie-content { flex-direction: column; gap: 1rem; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
  .footer-compliance { gap: 0.8rem; }
  .compliance-badge { padding: 3px 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Comprehensive coverage for all game sections
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shop: Tabs + Grid (768px) ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  #shop-tabs { flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
  .shop-tab { min-width: 0; flex: 1 1 auto; font-size: 10px; letter-spacing: 1px;
    padding: 8px 10px; min-height: 40px; }
  .shop-items-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; }
  .cosmetics-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
  .gold-tier-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .token-shop-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .prestige-skin-picker { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}

/* ── Shop: Small phones (480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
  #shop-tabs { gap: 3px; }
  .shop-tab { font-size: 9px; letter-spacing: 0.5px; padding: 6px 6px; min-height: 36px; }
  .shop-items-grid { grid-template-columns: 1fr; }
  .cosmetics-grid { grid-template-columns: 1fr 1fr; }
  .gold-tier-grid { grid-template-columns: 1fr 1fr; }
  .token-shop-grid { grid-template-columns: 1fr !important; }
  .gold-custom-panel { padding: 12px !important; }
  .hero-skin-card { min-width: 0; }
}

/* ── Marketplace (768px) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mp-tabs { gap: 4px; flex-wrap: wrap; }
  .mp-tabs button, .mp-tab { font-size: 0.65rem; padding: 6px 10px; min-width: 0; flex: 1 1 auto; }
  .mp-row { flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem; }
  .mp-emoji { font-size: 1.2rem; }
  .mp-pagination { flex-wrap: wrap; gap: 4px; justify-content: center; }
  .mp-pagination button { font-size: 0.65rem; padding: 4px 8px; }
  .mp-filters { flex-wrap: wrap; gap: 6px; }
  .mp-filters select, .mp-filters input, .mp-filter-input { min-width: 0; flex: 1 1 120px; font-size: 12px; }
}

/* ── Marketplace (600px) ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mp-tabs button, .mp-tab { font-size: 0.6rem; padding: 5px 8px; }
  .mp-row { gap: 0.3rem; padding: 0.5rem; }
  .mp-filters { flex-direction: column; }
  .mp-filters select, .mp-filters input, .mp-filter-input { width: 100%; flex: none; }
}

/* ── Marketplace: Small phones (480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  .mp-tabs button, .mp-tab { font-size: 0.55rem; padding: 4px 6px; }
  .mp-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .mp-row > * { width: 100%; }
  .mp-pagination button { font-size: 0.6rem; padding: 3px 6px; min-width: 28px; }
}

/* ── Collection (768px) ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #collection-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 0.6rem; }
  .coll-filters { flex-wrap: wrap; gap: 6px; }
  .coll-filters select, .coll-filters input { font-size: 12px; }
}

/* ── Game: Small phones (480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .game-hero-portrait { width: 56px; height: 56px; border-width: 2px; }
  .hand-card { width: 60px; height: 84px; margin: 0 -6px; }
  .hc-cost { width: 22px; height: 22px; font-size: 10px; top: -6px; left: -6px; }
  .hc-name { font-size: 7px !important; padding: 1px 3px !important; }
  .hc-stat-badges { gap: 2px; }
  .hc-stat-badge { font-size: 8px; min-width: 16px; padding: 1px 3px; }
  .game-minion { width: 52px; height: 68px; }
  .minion-name { font-size: 6px; }
  .minion-stats span { font-size: 9px; min-width: 16px; }
  .board-zone { min-height: 72px; gap: 0.3rem; }
  .hero-power-btn { width: 60px; font-size: 0.45rem; padding: 0.4rem 0.2rem; }
  .end-turn-btn { font-size: 0.5rem; padding: 0.35rem 0.5rem; }
  .concede-btn { font-size: 0.45rem; padding: 0.3rem 0.5rem; }
  .mana-gem { width: 10px; height: 10px; }
  .mana-txt { font-size: 0.6rem; }
  .game-sidebar { padding: 0.3rem 0.1rem; gap: 0.3rem; }
  .board-label { font-size: 0.4rem; }
  .deck-pile { width: 40px; height: 56px; }
  .deck-pile-card { width: 36px; height: 50px; }
  .game-hero-hp { gap: 0.2rem; }
  .hp-val { width: 28px; height: 28px; font-size: 0.7rem; }
}

/* ── Deck Builder: Small phones (480px) ────────────────────────────────────── */
@media (max-width: 480px) {
  .builder-layout { grid-template-columns: 1fr !important; }
  .builder-right { height: 35vh; min-height: 200px; }
  .builder-card-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .builder-pagination { gap: 4px; }
  .builder-pagination button { font-size: 0.6rem; padding: 4px 8px; }
}

/* ── Inventory Popup (768px) ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #inventory-popup { width: 340px; right: -20px; max-height: 70vh; }
}

/* ── Inventory Popup + Modal (480px) ───────────────────────────────────────── */
@media (max-width: 480px) {
  #inventory-popup { width: calc(100vw - 20px); right: -10px; max-height: 60vh; padding: 8px; }
  .inv-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .inv-tab { font-size: 8px; padding: 5px 3px; }
  .inv-item img { height: 60px; }
  .inv-item-name { font-size: 9px; }
  .inv-modal-box { padding: 16px; max-width: 95vw; }
}

@media (max-width: 768px) {
  .inv-modal-box { max-width: 95vw; }
  .inv-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ── Prestige Skin Modal (480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .skin-modal-box { padding: 16px; max-width: 95vw; }
  .skin-modal-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .psm-img { height: 40px; }
  .psm-name { font-size: 8px; }
  .psm-preview-large { width: 150px; height: 150px; }
  .psm-preview-label { font-size: 12px; }
  .skin-modal-title { font-size: 14px; }
}

/* ── Skin Preview Overlay ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .skin-preview-box { padding: 14px; max-width: 90vw; }
}

/* ── Settings screen (768px) ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr !important; }
  .settings-card { padding: 1rem; }
}

/* ── Leaderboard: Small phones (480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  .season-header { padding: 16px; }
  .season-title { font-size: 16px; letter-spacing: 1px; }
  .season-countdown-block { padding: 6px 10px; min-width: 48px; }
  .countdown-value { font-size: 20px; }
  .podium-wrap { gap: 0; padding: 0 8px; }
  .podium-medal { width: 40px; height: 40px; }
  .podium-medal-1st { width: 52px; height: 52px; }
  .podium-info-frame { padding: 8px 10px; min-width: 90px; max-width: 120px; }
  .podium-info-frame .podium-name { font-size: 10px; }
  .podium-info-frame .podium-rp { font-size: 10px; }
  .podium-info-1st { min-width: 100px; max-width: 140px; }
  .podium-info-1st .podium-name { font-size: 12px; }
  .lb-tabs { flex-wrap: wrap; gap: 4px; }
  .lb-tab { font-size: 0.55rem; padding: 6px 10px; }
}

/* ── Auth Modal: Small phones (375px) ──────────────────────────────────────── */
@media (max-width: 400px) {
  .modal-box { margin: 0.3rem; padding: 1rem; max-width: 100%; }
  .verify-digit { width: 32px; height: 38px; font-size: 16px; }
  .verify-inputs { gap: 4px; }
  .auth-submit { min-width: 120px; padding: 10px 20px; }
}

/* ── Nav game links: mobile font size ──────────────────────────────────────── */
@media (max-width: 768px) {
  #nav-game-links .nav-link { font-size: 0.8rem; }
}

/* ── Game: Full mobile layout (600px) ──────────────────────────────────────── */
@media (max-width: 600px) {
  .game-layout { grid-template-columns: 1fr !important; grid-template-rows: 1fr auto auto;
    height: 100vh; }
  .end-turn-panel { right: 6px; }
  .end-turn-btn { font-size: 0.55rem; padding: 0.4rem 0.7rem; min-width: 90px; min-height: 36px; }
  .game-hero .concede-btn { font-size: 0.45rem; padding: 0.2rem 0.4rem; }
  .hand-area { order: 3; height: 140px; overflow: visible; }
  .hand-card { margin: 0; }
  #my-hand .hand-card:hover { transform: none !important; z-index: auto; box-shadow: none; }
}

/* ── Game: Tiny phones (480px) — compact everything ────────────────────────── */
@media (max-width: 480px) {
  .game-layout { height: 100dvh; }
  .hero-row { gap: 0.4rem; }
  .game-hero { gap: 0.4rem; }
  .turn-indicator { font-size: 0.5rem !important; padding: 0.2rem 0.6rem !important; }
  .hand-area { height: 120px; }
  .bd-line { margin: 2px 0; }
  .player-zone { padding: 0.2rem; }
}

/* ── Lobby: Small phones (480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tvn-parchment { max-width: 100%; }
  .parch-body { padding: 1rem 0.8rem; }
  .parch-name { font-size: 1rem; }
  .parch-stats-row { gap: 0.3rem; }
  .parch-stat-val { font-size: 0.8rem; }
  .parch-stat-lbl { font-size: 0.55rem; }
  .parch-stat-sep { display: none; }
  .tvn-signs-rail { gap: 0.5rem; }
  .sign-board { width: 80px; }
  .sign-name { font-size: 0.5rem; }
  .sign-icon-img { width: 24px; height: 24px; }
  .keeper-portrait-img { width: 90px !important; height: 90px !important; }
  .keeper-bubble { width: 120px !important; font-size: 0.6rem !important; }
  .lobby-inventory-btn { font-size: 9px; padding: 5px 16px; }
}

/* ── Game History (Lobby) ───────────────────────────────────────────────────── */
.gh-container { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  border: 1px solid #3a2e1a; border-radius: 8px; padding: 16px; margin-top: 16px; }
.gh-view-all { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
  color: var(--gold); background: transparent; border: 1px solid rgba(201,168,76,0.3);
  padding: 5px 18px; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.gh-view-all:hover { border-color: var(--gold); background: rgba(201,168,76,0.08); }
.gh-modal-box { background: linear-gradient(175deg, #1a0f08, #0d0805);
  border: 2px solid rgba(201,168,76,0.5); border-radius: 12px;
  padding: 24px; max-width: 640px; width: 94%; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8); max-height: 85vh; overflow: hidden;
  display: flex; flex-direction: column; }
.gh-modal-list { overflow-y: auto; flex: 1; max-height: 60vh; }
.gh-modal-list::-webkit-scrollbar { width: 4px; }
.gh-modal-list::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 2px; }
.gh-title { font-family: 'Cinzel', serif; color: #c9a84c; font-size: 12px; letter-spacing: 3px; margin-bottom: 12px; }
.gh-header, .gh-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.gh-header { font-family: 'Cinzel', serif; font-size: 9px; color: #6a5c38; letter-spacing: 1px;
  border-bottom: 1px solid #1e1a10; padding-bottom: 8px; }
.gh-row { border-bottom: 1px solid #1e1a10; }
.gh-result { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; min-width: 44px; }
.gh-opponent { font-family: 'Cinzel', serif; font-size: 11px; color: #e8d5a3; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-mode { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px; min-width: 44px; text-transform: uppercase; }
.gh-time { font-family: 'Crimson Pro', serif; font-size: 12px; color: #8a7a52; min-width: 40px; }
.gh-rp { min-width: 40px; text-align: right; font-size: 11px; }
.gh-when { font-family: 'Crimson Pro', serif; font-size: 11px; color: #6a5c38; min-width: 50px; text-align: right; }

/* ── Marketplace modals mobile (768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  .mw-modal-box { padding: 20px; max-width: 95vw; }
  .mw-modal-top { gap: 16px; }
  .mw-modal-art { width: 80px; height: 80px; }
  .mw-modal-name { font-size: 16px; }
  .mw-modal-price { font-size: 28px !important; }
  .market-overview { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
  .game-modal-box { padding: 20px; max-width: 95vw; }
  .ph-box { min-width: 0; max-width: 95vw; width: 90vw; }
}

/* ── Marketplace modals mobile (480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  .mw-modal-box { padding: 14px; }
  .mw-modal-top { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .mw-modal-art { width: 100px; height: 100px; }
  .mw-modal-name { font-size: 14px; }
  .mw-modal-price { font-size: 24px !important; }
  .mw-modal-info { align-items: center; }
  .market-overview { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
  .market-stat-value { font-size: 14px; }
  .market-stat-label { font-size: 9px; }
  .game-modal-box { padding: 16px; width: 95%; }
  .ph-box { padding: 0.8rem; width: 95vw; }
}

/* ── Game History mobile (600px) ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .gh-header { display: none; }
  .gh-row { flex-wrap: wrap; gap: 4px; padding: 8px 6px; }
  .gh-result { min-width: 44px; font-size: 10px; }
  .gh-opponent { flex: 1 1 100%; order: -1; font-size: 12px; }
  .gh-mode { font-size: 8px; min-width: 36px; }
  .gh-time { font-size: 10px; min-width: 36px; }
  .gh-rp { min-width: 36px; font-size: 10px; }
  .gh-when { min-width: 40px; font-size: 10px; }
  .gh-container { padding: 12px; }
}

/* ── Lobby scrollable on mobile (720px) ─────────────────────────────────────── */
@media (max-width: 720px) {
  #screen-lobby.active { height: auto !important; min-height: 100vh;
    overflow: visible !important; overflow-y: auto !important; }
  .tvn-layout { position: relative !important; inset: auto !important;
    min-height: auto; overflow-y: visible; }
  .tvn-center { overflow-y: visible !important; }
  #lobby-main { padding-bottom: 3rem !important; }
}

/* ── Quest board + Lobby mobile (480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  #lobby-sidebar .qb-quests { max-height: 150px !important; }
  .qb-note { padding: 6px; }
  .qb-note-name { font-size: 0.6rem; }
  .tvn-quest-board { max-width: 100%; }
  #lobby-main { padding: 0.5rem !important; padding-bottom: 3rem !important; }
  .tvn-signs-rail { flex-wrap: wrap; justify-content: center; }
}

/* ── Tournament mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #tournament-panel { padding: 12px !important; max-width: 100% !important; }
  .tournament-status-card { padding: 14px; margin-bottom: 10px; }
  .tournament-prize-table { font-size: 12px; }
  .tournament-prize-table td { padding: 4px 8px; }
}
@media (max-width: 480px) {
  .tournament-status-card { padding: 10px; margin-bottom: 8px; }
  .tournament-countdown { font-size: 10px; }
  .tournament-prize-table td { padding: 3px 4px; font-size: 10px; }
  .tournament-prize-table { overflow-x: auto; display: block; }
}

/* ── Crafting/Settings: Small phones ───────────────────────────────────────── */
@media (max-width: 480px) {
  .crafting-grid { grid-template-columns: 1fr !important; }
  .settings-section { padding: 0.8rem; }
}

/* ── Global: Very small phones (375px) ─────────────────────────────────────── */
@media (max-width: 400px) {
  .screen-body { padding: 4rem 0.6rem 1.5rem; }
  .screen-title { font-size: 1.1rem; }
  .screen-subtitle { font-size: 0.7rem; }
  nav { padding: 0 0.8rem; min-height: 50px; }
  .nav-user-info { font-size: 0.5rem; gap: 0.25rem; }
  .nav-logout-btn { font-size: 0.55rem; padding: 0.25rem 0.5rem; }
  .game-layout { height: 100dvh !important; padding-top: 50px !important; }
  #screen-game { padding-top: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE — 768px
   All rules below are MOBILE-ONLY inside media queries.
   Desktop styles are NEVER modified.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Navbar ──────────────────────────────────────────────────────────── */
  nav { padding: 0 0.8rem; height: auto; min-height: 56px; flex-wrap: wrap; }
  .nav-logo-img { height: 28px; }
  .nav-user-info { font-size: 0.6rem; gap: 0.3rem; }
  .nav-logout-btn { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
  .nav-help-btn { width: 24px; height: 24px; font-size: 0.65rem; }
  #nav-level, #nav-dust { display: none; }

  /* ── Global Screen ───────────────────────────────────────────────────── */
  .screen-body { padding: 4.5rem 0.8rem 2rem; }
  .screen-title { font-size: 1.3rem; }
  .screen-subtitle { font-size: 0.8rem; }

  /* ── Landing Page ────────────────────────────────────────────────────── */
  .hero { padding: 100px 1rem 2rem; }
  .hero-title { font-size: 2rem !important; }
  .hero-sub { font-size: 0.75rem !important; }
  .hero-desc { font-size: 0.85rem; max-width: 100%; }
  .hero-btns { flex-direction: column; gap: 0.6rem; }
  .hero-btns .btn-primary, .hero-btns .btn-secondary { width: 100%; max-width: 320px; }
  .classes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .features-grid { grid-template-columns: 1fr !important; }
  .economy-section, .market-section { flex-direction: column !important; }
  .live-market-panel { width: 100% !important; max-width: 100% !important; }

  /* ── Lobby ───────────────────────────────────────────────────────────── */
  .tvn-layout { flex-direction: column !important; padding: 0 !important; }
  .tvn-center { flex-direction: column !important; gap: 12px !important; padding: 0.5rem !important; }
  .tvn-parchment { max-width: 100% !important; width: 100% !important; }
  #lobby-sidebar { width: 100% !important; max-width: 100% !important; }
  .tvn-signs-rail { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important;
    justify-content: center !important; }
  .tvn-sign { width: calc(50% - 6px) !important; min-width: 0 !important; }

  /* ── Collection ──────────────────────────────────────────────────────── */
  #collection-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; }
  .coll-filters { flex-direction: column; gap: 0.4rem; }
  .coll-filters input { min-width: 100% !important; }

  /* ── Deck Builder ────────────────────────────────────────────────────── */
  .builder-layout { grid-template-columns: 1fr !important; }
  .builder-right { display: none; }
  .builder-right.mobile-visible { display: block !important; position: fixed; inset: 0; z-index: 500;
    background: rgba(10,6,3,0.95); overflow-y: auto; padding: 60px 1rem 2rem; }
  #builder-card-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Marketplace ─────────────────────────────────────────────────────── */
  .mp-tabs { overflow-x: auto; flex-wrap: nowrap; gap: 2px; -webkit-overflow-scrolling: touch; }
  .mp-tab { flex-shrink: 0; min-width: 90px; font-size: 10px; padding: 8px 12px; }
  .mp-filters { flex-direction: column; gap: 0.4rem; }
  .mp-row { flex-direction: column; gap: 0.3rem; padding: 0.6rem; }
  .mp-price { font-size: 0.85rem; }

  /* ── Shop ─────────────────────────────────────────────────────────────── */
  #shop-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .shop-tab { flex-shrink: 0; min-width: 70px; font-size: 10px; padding: 8px 10px; }
  .shop-items-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem !important; }
  .gold-tier-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cosmetics-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-skins-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .token-bundles-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Crafting ─────────────────────────────────────────────────────────── */
  #craft-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .crafting-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .forge-preview, .de-preview { width: 100% !important; }

  /* ── Leaderboard ─────────────────────────────────────────────────────── */
  .lb-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .lb-tab { flex-shrink: 0; font-size: 10px; padding: 8px 12px; }
  .lb-table { font-size: 0.75rem; }
  .lb-table th:nth-child(4), .lb-table td:nth-child(4) { display: none; }
  .podium-wrap { gap: 8px; }
  .podium-player { transform: scale(0.85); }
  .season-countdown-wrap { gap: 6px; }
  .season-countdown-block { min-width: 40px; }
  .countdown-value { font-size: 1.2rem; }

  /* ── Settings ────────────────────────────────────────────────────────── */
  #settings-layout { flex-direction: column !important; }
  #settings-sidebar { flex-direction: row !important; overflow-x: auto; gap: 4px;
    border-right: none !important; border-bottom: 1px solid rgba(201,168,76,0.15);
    padding-bottom: 8px; margin-bottom: 12px; width: 100% !important; }
  .settings-nav-btn { flex-shrink: 0; font-size: 0.55rem; padding: 6px 10px; white-space: nowrap; }
  #settings-content { width: 100% !important; }
  .card-form-row-split { flex-direction: column; gap: 0; }

  /* ── Game Screen ─────────────────────────────────────────────────────── */
  .game-board { padding-bottom: 4px; }
  .hero-unit { padding: 4px 8px 4px 4px; gap: 5px; }
  .game-hero-portrait { width: 60px !important; height: 60px !important; }
  .hp-overlay { bottom: -6px; }
  .hp-val { width: 30px; height: 30px; font-size: 0.75rem; }
  .hero-power-circle { width: 40px !important; height: 40px !important; font-size: 11px; }
  .hp-cost { font-size: 11px; }
  .armor-badge { width: 24px; height: 24px; font-size: 0.6rem; }
  .board-zone { min-height: 70px !important; padding: 0.3rem; gap: 0.3rem; }
  .game-minion { width: 56px !important; height: 72px !important; }
  .minion-emoji { font-size: 1.2rem !important; }
  .minion-name { font-size: 0.35rem !important; }
  .minion-stats { gap: 2px; }
  .m-atk, .m-hp { width: 20px !important; height: 20px !important; font-size: 0.6rem !important; }
  .hand-area { height: 130px !important; }
  .hand-card { width: 68px !important; height: 96px !important; }
  .hc-cost { width: 26px; height: 26px; font-size: 12px; top: -8px; left: -8px; }
  .hc-name { font-size: 8px !important; }
  .hc-atk, .hc-hp { width: 20px; height: 20px; font-size: 10px; }
  .hc-emoji { font-size: 1.2rem; margin-top: 8px; }
  .end-turn-panel { right: 4px; }
  .end-turn-btn { font-size: 0.5rem !important; padding: 0.4rem 0.6rem !important;
    min-width: 80px !important; min-height: 44px !important; }
  .turn-indicator { font-size: 0.45rem !important; }
  .concede-btn { font-size: 0.4rem !important; padding: 0.2rem 0.4rem !important; }
  .mana-info { gap: 0.15rem; }
  .mana-txt { font-size: 0.65rem; }
  .mana-gem { width: 10px; height: 10px; }
  .deck-pile { width: 36px; height: 50px; }
  .deck-pile-card { width: 32px; height: 44px; }
  .game-log-toggle { width: 30px; height: 30px; font-size: 13px; }
  .game-log-float { width: 200px; max-height: 240px; }
  .opp-hand-card { width: 28px !important; height: 38px !important; }
  /* Reduce FX on mobile */
  .board-fx-particles, .board-fx-smoke { opacity: 0.5; }
  .board-fx-lightning { display: none; }
  /* Disable parallax mouse tracking result (JS sets transform, we reset) */
  .board-fx-rune { animation-duration: 6s; }

  /* ── Modals ──────────────────────────────────────────────────────────── */
  .skin-preview-overlay > div, .inv-modal-box, .guide-tome,
  .lu-box, .inv-modal-invoice-wrap, .payment-modal {
    width: 95vw !important; max-width: 95vw !important;
    max-height: 90vh !important; overflow-y: auto !important;
  }
  .modal-close { min-width: 44px; min-height: 44px; font-size: 24px; }
  .tutorial-tooltip { max-width: 90vw !important; }

  /* ── Touch Targets ──────────────────────────────────────────────────── */
  button, .btn-sm, .btn-gold, .auth-submit, .play-btn,
  .nav-link, .inv-equip-btn, .tutorial-next, .tutorial-skip {
    min-height: 44px; min-width: 44px;
  }

  /* ── Form Inputs — prevent iOS zoom ─────────────────────────────────── */
  input, select, textarea { font-size: 16px !important; }

  /* ── Inventory Popup ─────────────────────────────────────────────────── */
  #inventory-popup { width: calc(100vw - 16px) !important; right: -8px !important;
    max-height: 70vh !important; }
  .inv-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .inv-item-img { height: 100px !important; }

  /* ── Guide help button ───────────────────────────────────────────────── */
  .guide-help-btn { width: 44px; height: 44px; bottom: 12px; right: 12px; font-size: 20px; }

  /* ── Class Detail Overlay — stack vertically on mobile ───────────────── */
  #class-detail-overlay > div { flex-direction: column !important; max-height: 90vh !important; }
  #class-detail-overlay > div > div:first-child { flex: 0 0 200px !important; min-height: 200px !important; }
  #class-detail-overlay > div > div:first-child img { min-height: 200px !important; }
  #class-detail-overlay > div > div:last-child { padding: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL PHONES — 480px
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Navbar compact ──────────────────────────────────────────────────── */
  .nav-user-info { font-size: 0.5rem; gap: 0.2rem; }
  #nav-tokens { font-size: 0.5rem; }
  .nav-currency { font-size: 0.5rem !important; }

  /* ── Landing ─────────────────────────────────────────────────────────── */
  .hero-title { font-size: 1.6rem !important; }
  .classes-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Collection ──────────────────────────────────────────────────────── */
  #collection-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Shop ─────────────────────────────────────────────────────────────── */
  .shop-items-grid { grid-template-columns: 1fr !important; }
  .gold-tier-grid { grid-template-columns: 1fr !important; }

  /* ── Game ─────────────────────────────────────────────────────────────── */
  .game-hero-portrait { width: 48px !important; height: 48px !important; }
  .hero-power-circle { width: 32px !important; height: 32px !important; font-size: 9px !important; }
  .game-minion { width: 48px !important; height: 62px !important; }
  .m-atk, .m-hp { width: 16px !important; height: 16px !important; font-size: 0.5rem !important; }
  .hand-area { height: 110px !important; }
  .hand-card { width: 56px !important; height: 80px !important; }
  .hc-cost { width: 22px; height: 22px; font-size: 10px; }
  .board-zone { min-height: 56px !important; }

  /* ── Lobby ────────────────────────────────────────────────────────────── */
  .tvn-sign { width: 100% !important; }

  /* ── Modals ──────────────────────────────────────────────────────────── */
  .lu-level-number { font-size: 48px; }
  .lu-title { font-size: 1rem; }
  .inv-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Loading Spinner ──────────────────────────────────────────────────────── */
.hf-spinner {
  display: flex; align-items: center; justify-content: center; padding: 3rem;
}
.hf-spinner::after {
  content: '';
  width: 32px; height: 32px;
  border: 3px solid rgba(201,168,76,0.2);
  border-top-color: #c9a84c;
  border-radius: 50%;
  animation: hfSpin 0.8s linear infinite;
}
@keyframes hfSpin { to { transform: rotate(360deg); } }

/* ── Season Pass Badge (Lobby Profile) ────────────────────────────────────── */
.lobby-season-badge {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: #4caf50;
  background: rgba(76,175,80,0.12);
  border: 1px solid rgba(76,175,80,0.35);
  border-radius: 3px;
  padding: 3px 10px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Season Pass Content ──────────────────────────────────────────────────── */
.sp-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 16px 0 8px;
}

.sp-challenges {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-challenge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,168,76,0.1);
  border-radius: 4px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
  color: #c8b88a;
}

.sp-ch-icon { flex-shrink: 0; color: var(--gold); }
.sp-ch-reward {
  margin-left: auto;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: #4caf50;
  white-space: nowrap;
}

.sp-milestones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-milestone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
}

.sp-ms-rank { font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 600; }
.sp-ms-reward { color: #c9a84c; font-size: 0.75rem; }

/* Season Progress Modal */
.spm-challenge {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,168,76,0.1);
  border-radius: 6px;
}

.spm-ch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.spm-ch-name {
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
  color: #e8dcc8;
}

.spm-ch-reward {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: #c9a84c;
}

.spm-ch-reward.spm-done { color: #4caf50; }

.spm-ch-bar {
  height: 4px;
  background: rgba(201,168,76,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

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

.spm-ch-status {
  font-family: 'Crimson Pro', serif;
  font-size: 0.7rem;
  color: #8a7a52;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lobby-season-badge:hover {
  border-color: rgba(76,175,80,0.6);
  background: rgba(76,175,80,0.2);
}

/* ── Toast gold type ──────────────────────────────────────────────────────── */
.toast-gold { border-color: #c9a84c; color: #c9a84c; }
.toast-warning { border-color: #e0a020; color: #f0c040; }

/* ── Economy Disclaimer ──────────────────────────────────────────────────── */
.economy-disclaimer {
  background: rgba(200,160,40,0.08);
  border: 1px solid rgba(200,160,40,0.3);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
  color: #c9a84c;
  margin: 12px 0;
  line-height: 1.5;
}

/* ── Rent Badge & Countdown ──────────────────────────────────────────────── */
.rent-badge {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: #4a9fd4;
  background: rgba(74,159,212,0.15);
  border: 1px solid rgba(74,159,212,0.3);
  border-radius: 3px;
  padding: 2px 6px;
  letter-spacing: 1px;
}

.rent-countdown {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: #4a9fd4;
}

/* ── Marketplace Store Grid ──────────────────────────────────────────────── */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.mp-card-item {
  background: linear-gradient(175deg, #1a0f08, #100703);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.2s;
}

.mp-card-item:hover { border-color: rgba(201,168,76,0.4); }

.mp-card-art {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 4px;
}

.mp-card-art img, .mp-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-card-name {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  color: #e8dcc8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  padding: 0 2px;
  line-height: 1.3;
}

.mp-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 2px 0;
  font-size: 0.5rem;
}

.mp-card-class {
  color: var(--text-dim);
  font-family: 'Crimson Pro', serif;
  text-transform: capitalize;
}

.mp-rarity-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid;
  border-radius: 2px;
  padding: 1px 4px;
  text-transform: capitalize;
}

.mp-card-price {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  color: var(--gold);
  font-weight: 700;
  margin: 3px 0;
}

.mp-card-dimmed { opacity: 0.45; }
.mp-card-item .mp-sell-price {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 4px 0;
}
.mp-card-item .mp-card-qty {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.mp-txn-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Crimson Pro', serif;
  font-size: 0.85rem;
}
.mp-txn-table th {
  text-align: left;
  padding: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.mp-txn-table td {
  padding: 8px;
  color: var(--text);
  border-bottom: 1px solid rgba(201,168,76,0.08);
}
.mp-txn-type {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}
.mp-txn-buy { color: #e04020; background: rgba(224,64,32,0.12); }
.mp-txn-sell { color: #44cc44; background: rgba(68,204,68,0.12); }
.mp-txn-rent { color: #4a9fd4; background: rgba(74,159,212,0.12); }
.mp-sell-btn { background: rgba(68,204,68,0.15) !important; border-color: rgba(68,204,68,0.3) !important; color: #44cc44 !important; }

/* ── Landing Board Preview (Tavern Board section) ────────────────────────── */
#landing-board-preview {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

#landing-board-preview .lbp-bg {
  position: absolute; inset: 0;
  background: url('../assets/board/bg-final.webp') center center / cover no-repeat;
  z-index: 0;
}

#landing-board-preview .lbp-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 48%,
    rgba(5,3,10,0.12) 0%, rgba(5,3,10,0.35) 100%);
}

#landing-board-preview .lbp-fx {
  z-index: 2;
}