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

/* ── 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-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: 'Cinzel', 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); }

/* ── 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: 100%; max-width: 420px; max-height: 90vh;
  overflow-y: auto; position: relative; box-shadow: 0 20px 80px rgba(0,0,0,0.7); }
.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: 'Cinzel', 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; }
.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: var(--text); font-family: 'Cinzel', serif; font-size: 0.85rem;
  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: 0.8rem; }
.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; }
.verify-step-indicator {
  font-family: 'Cinzel', 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: 'Cinzel', 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: var(--text-dim); margin-bottom: 2rem; }
.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: 'Cinzel', 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 {
  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) {
  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) {
  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.jpeg');
  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: 'Cinzel', 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 { height: 100vh; overflow: hidden; padding-top: 72px; position: relative; }
#game-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
#screen-game > *:not(#game-bg-video) { position: relative; z-index: 2; }
.game-layout { display: grid; grid-template-columns: 160px 1fr 120px;
  height: calc(100vh - 72px); overflow: hidden; }

/* Log panel */
.game-log {
  background: rgba(10,6,2,0.85);
  border-right: 1px solid rgba(180,120,40,0.3);
  display: flex; flex-direction: column; overflow: hidden; }
.game-log-header { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim); padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(240,192,64,0.08); }
#game-log-messages { flex: 1; overflow-y: auto; padding: 0.5rem; }
#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 */
.game-sidebar {
  background: rgba(10,6,2,0.85);
  border-left: 1px solid rgba(180,120,40,0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px 10px; }

/* Player zones */
.player-zone { flex: 1; display: flex; flex-direction: column; padding: 0.3rem 0.6rem;
  position: relative; z-index: 1; min-height: 0; }
.player-zone.opp-zone { justify-content: flex-start; }
.player-zone.my-zone  { justify-content: flex-end; }

/* Hero rows */
.hero-row { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.2rem; }
.game-hero { display: flex; align-items: center; gap: 0.8rem; }

/* Hero portraits — large, prominent */
.game-hero-portrait { width: 80px; height: 80px; border-radius: 8px;
  background: linear-gradient(145deg, #2a1a0a, #1a0e05); border: 2px solid rgba(180,120,40,0.4);
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
  cursor: pointer; transition: all 0.2s; position: relative; flex-shrink: 0; }
.game-hero-portrait .hero-portrait-img { width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover; }
.game-hero-portrait .hero-emoji { font-size: 2rem; }
#opp-portrait { }
#my-portrait  { }
.game-hero-portrait.targetable { border-color: #ff4020;
  box-shadow: 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; }

/* HP & armor */
.game-hero-hp { display: flex; align-items: center; gap: 0.5rem; }
.hp-val { width: 48px; height: 48px; background: url('../assets/stat-health.png') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: 1rem; color: white;
  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 6px rgba(0,0,0,0.6)); }
.armor-val { font-family: 'Cinzel Decorative', serif; font-size: 0.8rem; color: #80c0ff;
  background: rgba(64,128,255,0.1); border: 1px solid rgba(64,128,255,0.3);
  border-radius: 3px; padding: 0.1rem 0.3rem; }

/* 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.72rem; letter-spacing: 0.2em; 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 { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.8rem;
  z-index: 1; position: relative;
  background: linear-gradient(to right, transparent, rgba(61,31,10,0.25), transparent); }
.bd-line { flex: 1; height: 2px;
  background: linear-gradient(to right,transparent,rgba(240,192,64,0.15),rgba(240,192,64,0.5),rgba(240,192,64,0.15),transparent);
  border-radius: 1px; }

/* End turn button — special dramatic treatment with texture */
.end-turn-btn {
  background-image: url('../assets/btn-primary.webp');
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  color: #ffcc44;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.6rem;
  min-width: 160px;
  min-height: 48px;
  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 */
.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;
  background: transparent;
  border: 2px solid rgba(80, 160, 255, 0.25);
  box-shadow: 0 0 18px rgba(80, 160, 255, 0.1), inset 0 0 18px rgba(80, 160, 255, 0.05);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3); }
.board-zone.board-drop-zone { background: transparent; cursor: pointer;
  border-color: rgba(120, 200, 255, 0.8);
  box-shadow: 0 0 30px rgba(80, 160, 255, 0.4), inset 0 0 20px rgba(80, 160, 255, 0.15); }
#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 */
.hand-area { border-top: 1px solid rgba(240,192,64,0.1);
  display: flex; justify-content: center; align-items: flex-end;
  padding: 14px 24px 16px; flex-wrap: nowrap;
  overflow: visible; min-height: 148px; z-index: 3; position: relative;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  flex-shrink: 0; }
#my-hand .hand-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
#my-hand .hand-card:nth-child(1) { transform: rotate(-6deg) translateY(6px) translateZ(0); }
#my-hand .hand-card:nth-child(2) { transform: rotate(-3deg) translateY(3px) translateZ(0); }
#my-hand .hand-card:nth-child(3) { transform: rotate(0deg) translateY(0px) translateZ(0); }
#my-hand .hand-card:nth-child(4) { transform: rotate(3deg) translateY(3px) translateZ(0); }
#my-hand .hand-card:nth-child(5) { transform: rotate(6deg) translateY(6px) translateZ(0); }
#my-hand .hand-card:nth-child(6) { transform: rotate(-8deg) translateY(8px) translateZ(0); }
#my-hand .hand-card:nth-child(7) { transform: rotate(8deg) translateY(8px) translateZ(0); }
#my-hand .hand-card:hover { transform: rotate(0deg) translateY(-18px) scale(1.08) !important; z-index: 99; box-shadow: 0 12px 40px rgba(100,180,255,0.5); }
.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: 1px solid rgba(180,120,40,0.35); 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;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.hand-card.playable { border-color: rgba(240,192,64,0.6); cursor: pointer;
  box-shadow: 0 4px 18px rgba(240,192,64,0.18); }
.hand-card.playable:hover { transform: translateY(-18px) scale(1.06);
  box-shadow: 0 10px 28px rgba(240,192,64,0.45); }
.hand-card.selected-hand { transform: translateY(-22px) scale(1.1); border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(240,192,64,0.5), 0 0 28px rgba(240,192,64,0.8); cursor: pointer; }
/* Affordability */
.hand-card.not-affordable { opacity: 0.55; cursor: not-allowed; }
.hand-card.not-affordable:hover { transform: none !important; box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; }

/* Card play animations */
@keyframes cardPlay {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  30%  { transform: translateY(-40px) scale(1.15); opacity: 1; }
  70%  { transform: translateY(-10px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes cardLand {
  0%   { transform: scale(1.15); box-shadow: 0 0 0 rgba(100,180,255,0); }
  40%  { transform: scale(1.08); box-shadow: 0 0 30px rgba(100,180,255,0.8); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(100,180,255,0); }
}
@keyframes spellBurst {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 40px rgba(100,180,255,0.9), inset 0 0 20px rgba(255,255,255,0.5); }
  100% { transform: scale(0); opacity: 0; box-shadow: 0 0 60px rgba(100,180,255,0), inset 0 0 30px rgba(255,255,255,0); }
}
@keyframes cardSlideToBoard {
  0%   { transform: translateY(0px) scale(1); opacity: 1; }
  50%  { transform: translateY(-60px) scale(1.12); opacity: 1; }
  100% { transform: translateY(0px) scale(1); opacity: 1; }
}
.card-playing {
  animation: cardSlideToBoard 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  z-index: 999 !important;
  pointer-events: none;
  will-change: transform, opacity;
}
.card-landing {
  animation: cardLand 0.4s ease-out forwards;
  will-change: transform;
}
.card-spell-burst {
  animation: spellBurst 0.5s ease-out forwards;
  pointer-events: none;
  will-change: transform, opacity;
}
/* 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 minionAttackRight {
  0%   { transform: translateX(0) scale(1); }
  35%  { transform: translateX(28px) scale(1.12); box-shadow: 0 0 20px rgba(255,200,60,0.8); }
  60%  { transform: translateX(-8px) scale(0.97); box-shadow: 0 0 0 rgba(255,200,60,0); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes minionAttackLeft {
  0%   { transform: translateX(0) scale(1); }
  35%  { transform: translateX(-28px) scale(1.12); box-shadow: 0 0 20px rgba(255,200,60,0.8); }
  60%  { transform: translateX(8px) scale(0.97); box-shadow: 0 0 0 rgba(255,200,60,0); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes minionAttackUp {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-32px) scale(1.12); box-shadow: 0 0 24px rgba(255,200,60,0.9); }
  60%  { transform: translateY(8px) scale(0.97); box-shadow: 0 0 0 rgba(255,200,60,0); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes takeDamage {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(255,0,0,0); }
  20%  { transform: scale(1.08); box-shadow: inset 0 0 20px rgba(255,0,0,0.7), 0 0 16px rgba(255,0,0,0.5); }
  50%  { transform: translateX(-5px) scale(0.97); box-shadow: inset 0 0 14px rgba(255,0,0,0.4); }
  75%  { transform: translateX(5px); box-shadow: inset 0 0 8px rgba(255,0,0,0.2); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,0,0,0); }
}
@keyframes heroTakeDamage {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(255,0,0,0); }
  25%  { transform: scale(1.15) rotate(-3deg); box-shadow: inset 0 0 30px rgba(255,0,0,0.8), 0 0 20px rgba(255,0,0,0.6); }
  50%  { transform: scale(0.95) rotate(2deg); box-shadow: inset 0 0 15px rgba(255,0,0,0.3); }
  100% { transform: scale(1) rotate(0); box-shadow: 0 0 0 rgba(255,0,0,0); }
}
.minion-attacking-up   { animation: minionAttackUp    0.45s cubic-bezier(0.25,0.46,0.45,0.94) forwards; z-index: 99 !important; will-change: transform; }
.minion-attacking-left { animation: minionAttackLeft  0.45s cubic-bezier(0.25,0.46,0.45,0.94) forwards; z-index: 99 !important; will-change: transform; }
.minion-attacking-right{ animation: minionAttackRight 0.45s cubic-bezier(0.25,0.46,0.45,0.94) forwards; z-index: 99 !important; will-change: transform; }
.taking-damage  { animation: takeDamage     0.4s ease-out forwards; will-change: transform; }
.hero-hit       { animation: heroTakeDamage 0.45s ease-out forwards; will-change: transform; }

.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; }
/* Mana gem — big and prominent */
.hc-cost { width: 34px; height: 34px; background: url('../assets/stat-mana.png') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-size: 15px; font-weight: 900; color: white;
  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: #fff; }
.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: #fff; }
.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: #fff; 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.png') center/contain no-repeat;
  color: #fff; 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.png') center/contain no-repeat;
  color: #fff; 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: 1px solid rgba(180,120,40,0.35); 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; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.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; }
.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; text-transform: uppercase;
  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.png') 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: white; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.m-hp  { width: 28px; height: 28px; background: url('../assets/stat-health.png') 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: white; 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: 'Cinzel', 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: 300; background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center; }
.game-over-box { background: linear-gradient(175deg, #1a0f08, #0d0805); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 12px; padding: 3rem 2.5rem; text-align: center; max-width: 460px; width: 90%;
  box-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 30px rgba(240,192,64,0.15); animation: gameOverReveal 0.4s cubic-bezier(0.22,1,0.36,1); }
@keyframes gameOverReveal { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
.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; }

/* ── Deck Screens ─────────────────────────────────────────────────────────────── */
.deck-list { display: flex; flex-direction: column; gap: 0.6rem; }
.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;
  padding: 1rem; background: rgba(0,0,0,0.2); border: 1px solid rgba(240,192,64,0.1); border-radius: 4px; 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: 'Cinzel', serif; font-size: 0.8rem;
  padding: 0.6rem 0.8rem; outline: none; width: 100%; }

/* ── 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.jpeg') 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: 'Cinzel', serif; font-size: 0.72rem; padding: 0.4rem 0.6rem; outline: none; }
.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: 1px solid rgba(180,120,40,0.3);
  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; }
.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.png') 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: white; 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.png') 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: white; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.bc-hp  { width: 22px; height: 22px; background: url('../assets/stat-health.png') 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: white; 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.png') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-size: 0.62rem; color: white; 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: 'Cinzel', 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: 1px solid rgba(180,120,40,0.3);
  border-radius: 10px; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  position: relative; cursor: default; }
.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.png') 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: white; 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: 'Cinzel', 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.png') 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: white; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.cc-hp  { width: 28px; height: 28px; background: url('../assets/stat-health.png') 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: white; 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: 'Cinzel', 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: 0; border-bottom: 1px solid rgba(240,192,64,0.15); margin-bottom: 1.5rem; }
.mp-tab { background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 1.2rem; cursor: pointer;
  transition: all 0.2s; margin-bottom: -1px; }
.mp-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.mp-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.8rem;
  background: linear-gradient(175deg, #221508, #100703); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 8px;
  margin-bottom: 0.4rem; }
.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); }

/* ── Leaderboard ──────────────────────────────────────────────────────────────── */
.lb-tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(240,192,64,0.15); margin-bottom: 1.5rem; }
.lb-tab { background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 1.2rem; cursor: pointer;
  transition: all 0.2s; margin-bottom: -1px; }
.lb-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
#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); }

/* ════════════════════════════════════════════════════════════════════════════ */
/* ── 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: 'Cinzel', 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(255,255,255,0.03) !important;
}

.mp-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  margin-top: 0.5rem;
}
.mp-page-num {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: var(--text-dim, #b8a47c);
  min-width: 5rem;
  text-align: center;
}
.mp-page-btn {
  font-family: 'Cinzel', 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: 0 1fr 80px; }
  .game-log { display: none; }
  .game-sidebar { padding: 0.5rem 0.2rem; gap: 0.5rem; }
  .hero-power-btn { width: 76px; font-size: 0.52rem; padding: 0.5rem 0.3rem; }
  .game-hero-portrait { width: 58px; height: 58px; 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 1.2rem; height: 60px; }
  .screen-body { padding: 4.5rem 1rem 2rem; min-height: calc(100vh - 60px); }
  #screen-game { padding-top: 60px; }
  .game-layout { height: calc(100vh - 60px); }
  #nav-game-links { gap: 1rem; }
  #nav-game-links .nav-link { font-size: 0.62rem; letter-spacing: 0.1em; }
  .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 — add aria-hidden to decorative icons */
.feature-icon { aria-hidden: true; }

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

/* Tab hover states (missing from original CSS) */
.mp-tab:hover, .lb-tab:hover, .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); }

/* AI 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 */

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

/* ── Screen override ────────────────────────────────────────────────────── */
#screen-lobby.active {
  display: block;
  position: relative;
  z-index: 1;           /* creates stacking context so video z-index:-1 works correctly */
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 58%, rgba(200,78,8,0.28) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 80%, rgba(100,40,5,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #0e0503 0%, #1c0c04 25%, #211006 55%, #140804 100%);
}

/* Lobby video: fixed so it covers the full viewport behind all UI layers */
#screen-lobby .screen-video-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

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

.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: 1; }
.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: 2;
}
.tvn-center {
  width: 100%;
  max-width: 600px;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 4.5rem 1.5rem 1.5rem;
  overflow-y: auto;
  margin: 0 auto;
}

/* ── 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;
  transform: var(--tilt, rotate(-1deg));
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.tvn-sign:hover {
  filter: drop-shadow(0 6px 16px rgba(220,100,10,0.45));
  animation: tvn-sign-swing 0.55s ease-in-out 1;
}
.sign-casual  { --tilt: rotate(-2deg); }
.sign-ranked  { --tilt: rotate(0deg); }
.sign-ai      { --tilt: rotate(1.5deg); }

.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-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;
  gap: 0;
  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: 'Cinzel', serif;
}
.qb-note-desc {
  font-size: 0.65rem;
  color: rgba(40,15,3,0.7);
  line-height: 1.35;
  margin-bottom: 0.3rem;
  font-style: italic;
}
.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: 'Cinzel', 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: 'Cinzel', 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: 5rem 1rem 1rem; }
  .qb-quests  { grid-template-columns: 1fr; }
  .keeper-overlay { bottom: 10px; right: 10px; }
  .keeper-portrait-img { width: 120px !important; height: 120px !important; }
  .keeper-bubble { width: 150px; font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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.jpeg');
  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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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.jpeg');
  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.jpeg');
  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.jpeg');
  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: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;          /* below ::before/:after effects (z-index:0) and .screen-body (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.jpeg');
  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; }
.hero-power-img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: 4px; }


/* ── 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: 'Cinzel', 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; }

/* Card art styles */
.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: 100%; height: 100%; }
.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; }
.hero-power-img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

/* ── 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', serif;
}

/* ── 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.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(240,192,64,0.1);
  margin-bottom: 0.5rem;
}

.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: 'Cinzel', serif;
  font-size: 0.7rem;
  padding: 0.35rem 0.6rem;
  outline: none;
}

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

.mp-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 90px;
}

.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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
}

.shop-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

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

.shop-item-name {
  font-family: 'Cinzel', 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 ───────────────────────────────────────────────────────── */
.pack-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  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: 1.5rem;
}

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

.pack-card {
  background: linear-gradient(175deg, #221508, #100703); border: 1px solid rgba(180,120,40,0.3);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cardReveal 0.4s ease backwards;
}

.pack-card:nth-child(1) { animation-delay: 0.1s; }
.pack-card:nth-child(2) { animation-delay: 0.2s; }
.pack-card:nth-child(3) { animation-delay: 0.3s; }
.pack-card:nth-child(4) { animation-delay: 0.4s; }
.pack-card:nth-child(5) { animation-delay: 0.5s; }

@keyframes cardReveal {
  from { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  to   { transform: rotateY(0deg) scale(1); 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: 'Cinzel', 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: 100%; font-size: 0.9rem; padding: 0.75rem; }

/* ── Gold Tier Cards ────────────────────────────────────────────────────────── */
.gold-tier-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 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;
}

.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 { width: 100%; font-size: 0.75rem; padding: 0.5rem; }

/* ── 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: monospace;
}

.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;
}

/* ── APM (Blik, Klarna) ────────────────────────────────────────────────────── */
.pay-apm-section { margin-top: 12px; }
.pay-apm-divider {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 12px;
  color: var(--text-dim, #b8a47c); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.pay-apm-divider::before, .pay-apm-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(240,192,64,0.15);
}
.pay-apm-buttons { display: flex; gap: 8px; }
.pay-apm-btn {
  flex: 1; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: border-color 0.2s, background 0.2s;
}
.pay-apm-btn:hover { border-color: rgba(255,255,255,0.3); }
.pay-apm-blik { background: #1a1a1a; }
.pay-apm-blik:hover { background: #2a2a2a; }
.pay-apm-klarna { background: #ffb3c7; border-color: #ffb3c7; }
.pay-apm-klarna:hover { background: #ffc4d4; }
.pay-apm-logo { font-weight: 900; font-size: 0.9rem; letter-spacing: 0.02em; }
.pay-apm-logo-blik { color: #fff; font-family: Arial, sans-serif; }
.pay-apm-logo-klarna { color: #0a0a0a; font-family: Arial, sans-serif; font-style: italic; }
.pay-apm-flow { text-align: center; padding: 1.5rem 1rem; }
.pay-apm-flow-desc {
  font-family: 'Crimson Pro', serif; font-size: 0.85rem;
  color: var(--text-dim, #b8a47c); margin-bottom: 1.2rem;
}
.pay-apm-blik-code {
  width: 140px; text-align: center; font-size: 1.5rem; font-weight: 700;
  font-family: monospace; letter-spacing: 0.4em; padding: 10px;
  background: rgba(0,0,0,0.4); border: 2px solid rgba(240,192,64,0.2);
  border-radius: 8px; color: var(--gold, #c9a44a); outline: none; margin-bottom: 1rem;
}
.pay-apm-blik-code:focus { border-color: var(--gold, #c9a44a); }
.pay-apm-blik-inputs { margin-bottom: 1rem; }
.pay-apm-flow-logo { display: block; text-align: center; }

/* ── 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: 'Cinzel', 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: 'Cinzel', 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-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: 2px solid rgba(180,120,40,0.3);
  padding-bottom: 0;
}
.shop-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #aaa;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: 0.05em;
  margin-bottom: -2px;
}
.shop-tab:hover { color: #ffcc44; }
.shop-tab.active { color: #ffcc44; border-bottom-color: #ffcc44; }

.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;
}
.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; }

/* ── 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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-tab-body { }

/* ── 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: 'Cinzel', 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: 'Cinzel', serif;
}

.forge-sel-info {
  font-family: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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-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;
}

.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 { 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: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.forge-cost-row {
  font-family: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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 { width: 60px; height: 24px; }
.mp-market-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; }
.trending-badge {
  position: absolute; top: 4px; right: 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; right: 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: 16px; margin-bottom: 28px; padding: 20px;
  background: rgba(20,12,5,0.8);
  border: 1px solid rgba(180,120,40,0.3); border-radius: 12px;
}
.market-stat { text-align: center; }
.market-stat-value { font-size: 18px; font-weight: 900; color: #ffcc44; font-family: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', serif; margin-bottom: 2px; }
.mw-spark { width: 80px; height: 30px; margin-top: 4px; }
.mw-badge-trending {
  position: absolute; top: 6px; right: 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; right: 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: 'Cinzel', 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: 'Cinzel', serif; }
.mw-stat-lbl { font-size: 10px; color: #888; margin-top: 4px; letter-spacing: 0.05em; }

.mw-modal-chart-section { margin-bottom: 20px; }
.mw-chart-title {
  font-family: 'Cinzel', 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 {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(180,120,40,0.12);
  border-radius: 8px; padding: 12px; min-height: 200px;
  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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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-compliance {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.compliance-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(240,192,64,0.15);
  border-radius: 4px;
  background: rgba(0,0,0,0.3);
}
.compliance-icon { font-size: 0.85rem; }
.compliance-label {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  color: var(--text-dim, #b8a47c);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.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: 'Cinzel', 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: 6px;
  z-index: 200;
}
.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); }

/* ── Mobile Breakpoint ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Nav becomes burger ── */
  .burger-btn { display: flex; }

  nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 0 1rem;
  }
  nav > .nav-logo { order: 1; }
  nav > .burger-btn { order: 3; margin-left: auto; }
  nav > #nav-logged-out,
  nav > #nav-logged-in { order: 2; margin-left: auto; margin-right: 0.5rem; }

  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);
  }
  nav.nav-mobile-open > .nav-links {
    display: flex !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);
  }

  /* Logged-in nav info */
  .nav-user-info {
    font-size: 0.6rem;
    gap: 0.4rem;
  }
  .nav-logout-btn { font-size: 0.6rem; padding: 0.3rem 0.6rem; }

  /* ── Hero section ── */
  .hero {
    min-height: auto;
    padding: 6rem 1.2rem 3rem;
  }
  .hero-desc { font-size: 0.9rem; }
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-secondary {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  /* ── Cards section — horizontal slider ── */
  .cards-showcase {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem 0.5rem 1.5rem;
    margin: 0 -1rem;
  }
  .cards-showcase::-webkit-scrollbar { display: none; }
  .cards-showcase > .card {
    flex: 0 0 160px;
    scroll-snap-align: center;
  }

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

  /* ── Board section ── */
  .board-section { padding: 3rem 1rem; }
  .board-preview { padding: 1rem; }
  .board-row { gap: 0.4rem; }
  .mini-card { width: 48px; height: 68px; }
  .mini-card-emoji { font-size: 1.2rem; }

  /* ── Stats grid ── */
  .stats-section { padding: 3rem 1rem; }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
  .stat-number { font-size: 1.8rem; }

  /* ── Classes section — horizontal slider ── */
  .classes-section { padding: 3rem 1rem; }
  .classes-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem 0 1.5rem;
  }
  .classes-grid::-webkit-scrollbar { display: none; }
  .classes-grid > .class-card {
    flex: 0 0 140px;
    scroll-snap-align: center;
  }
  .class-portrait { width: 56px; height: 56px; }
  .class-name { font-size: 0.65rem; }

  /* ── Footer ── */
  .hf-footer { padding: 2rem 1rem 1.5rem; }
  .footer-links {
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
  }

  /* ── Section titles ── */
  .section-subtitle { margin-bottom: 2rem; font-size: 0.9rem; }

  /* ── Legal modals ── */
  .legal-modal-overlay { padding: 1rem; }
  .legal-modal { max-width: 100%; }
  .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; }
}

/* ── 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-tokens::before {
  content: '\2694';
  font-size: 0.8rem;
}
.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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', serif;
  font-size: 0.8rem;
  color: var(--gold, #c9a44a);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.btn-token-buy {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: #1a0800;
  background: linear-gradient(135deg, var(--gold, #c9a44a), #e0a020);
  border: none;
  border-radius: 4px;
  padding: 0.4rem 1rem;
  cursor: pointer;
  text-transform: uppercase;
  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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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: 'Cinzel', 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; }
}