* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #12151b;
  --surface: #1b1f27;
  --surface-raised: #232833;
  --border: #2e3440;
  --text: #eae8e0;
  --text-secondary: #b8bcc4;
  --text-muted: #8b8f98;
  --lime: #c4f542;
  --lime-dim: #6d7d2a;
  --amber: #ffb238;
  --red: #ff6b5e;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --hcard-w: 650px;   /* standard Hypecall box size — My feed, Trending, On the Clock, Ready to Open */
  --hcard-h: 150px;
  --zoom-w: min(500px, 82vw); /* enlarged card width used by the card-zoom / pack-opening reveal */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}

.app { max-width: 640px; margin: 0 auto; padding: 0 0 4rem; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.brand-beta {
  font-family: var(--font-body); font-weight: 700; font-size: 10px;
  letter-spacing: 0.03em; color: var(--text-muted); margin-left: 3px;
  text-transform: uppercase; top: -0.6em; position: relative;
}

.brand-logo { width: 28px; height: 28px; display: block; }

.shell { display: block; min-height: 100vh; max-width: none; }

.sidebar {
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.75rem;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
  scrollbar-width: thin; /* Firefox: slim scrollbar */
  scrollbar-color: var(--border) transparent; /* Firefox: thumb/track colors, matches site */
}
/* Webkit (Chrome/Edge/Safari) scrollbar for the sidebar — small and matched to site surface, not lime */
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: var(--surface-raised);
}
.sidebar-brand { padding: 0 0.5rem; margin-bottom: 12px; }
.sidebar-brand .brand-logo { width: 32px; height: 32px; }
.sidebar-brand .brand-name { font-size: 22px; }

.profile-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0.5rem;
  margin: 0 0 1.25rem;
  cursor: pointer;
  border-radius: 10px;
}
.profile-strip:hover { background: var(--surface-raised); }

.subtab-panel { display: none; }
.subtab-panel.active { display: block; }
.profile-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--lime-dim);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: #12151b;
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-strip-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-strip-name { font-size: 16px; font-weight: 700; color: var(--lime); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-strip-lvl { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-muted); }
.profile-strip-stats { display: flex; align-items: center; gap: 10px; }
.profile-strip-stat { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); }
.stat-icon { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.stat-icon.balance { background: var(--lime); color: #12151b; }
.stat-icon.picks { background: var(--amber); color: #12151b; }

.nav-groups { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.nav-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 10px 6px;
  cursor: pointer;
}
.nav-group-head .chevron { transition: transform 0.15s; font-size: 10px; }
.nav-group.collapsed .chevron { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-group-items { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.nav-item:hover { background: var(--surface-raised); }
.nav-item.active { background: rgba(196,245,66,0.12); color: var(--lime); font-weight: 500; }

.sidebar-foot { padding-top: 1rem; border-top: 1px solid var(--border); }
.refill-timer {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  padding: 6px 0.75rem; margin: -4px 0 12px;
}

.content { margin-left: 240px; width: calc(100% - 240px); display: flex; justify-content: flex-start; padding: 2rem 2.5rem; }
.tab-panel { width: 100%; max-width: 640px; }

.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.xp-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.xp-bar-label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 14px; }
.xp-bar-track { height: 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.xp-bar-fill { height: 100%; background: var(--accent, #c4f542); border-radius: 6px; transition: width .3s ease; }
.stat-card .stat-value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }

.profile-editor { display: flex; align-items: center; gap: 16px; margin-bottom: 1.5rem; }
.profile-avatar-large {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--lime-dim);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: #12151b;
  overflow: hidden; flex-shrink: 0;
}
.profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.field-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.bio-textarea {
  width: 100%; min-height: 70px; resize: vertical;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 12px; font-family: var(--font-body); font-size: 13px;
}

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; }
.faq-item summary { cursor: pointer; font-size: 14px; font-weight: 500; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+ '; color: var(--lime); font-weight: 700; }
.faq-item[open] summary::before { content: '– '; }
.faq-item p { font-size: 13px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }

.legal-text h3 { font-size: 14px; margin: 18px 0 6px; color: var(--lime); }
.legal-text p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 6px; }

.updates-list { display: flex; flex-direction: column; gap: 14px; }
.xp-log-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.xp-log-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }
.xp-log-row.leveled-up { border-color: var(--lime-dim); }
.xp-log-time { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.xp-log-amount { color: var(--lime); font-weight: 700; font-family: var(--font-mono); }
.xp-log-levelup { color: var(--lime); font-weight: 600; font-size: 11.5px; }
.collections-manage-row { display: flex; gap: 8px; }
.folder-block { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.folder-body { margin-top: 10px; }
.folder-cards-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.folder-card-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.folder-card-remove-btn { width: 168px; }
.folder-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.folder-add-row select { flex: 1; min-width: 160px; }
.friends-search-row { display: flex; gap: 8px; margin-bottom: 14px; max-width: 420px; }
.friends-search-row input { flex: 1; }
.friends-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; }
.friend-row-user { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.friend-row-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--lime-dim); color: #12151b; font-family: var(--font-mono); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.friend-row-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.friend-row-lvl { display: block; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.friend-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.friends-activity-list { display: flex; flex-direction: column; gap: 6px; }
.friend-activity-row { display: flex; align-items: baseline; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }
.friend-activity-row .friend-activity-user { font-weight: 700; color: var(--lime); flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; font-size: inherit; }
.friend-activity-row .friend-activity-text { color: var(--text-secondary); flex: 1; }
.friend-activity-row .friend-activity-time { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; }
.board-category-groups { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 16px; }
.board-cat-group-label { display: block; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.board-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.board-cat-chip { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 7px 13px; cursor: pointer; }
.board-cat-chip:hover { background: var(--surface-raised); color: var(--text); }
.board-cat-chip.active { background: rgba(196, 245, 66, 0.14); border-color: var(--lime-dim); color: var(--lime); }
.board-podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 22px 0 26px; flex-wrap: wrap; }
.board-podium-slot { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; text-align: center; width: 150px; }
.board-podium-slot.rank-1 { order: 2; padding-top: 24px; border-color: #ffd35c; }
.board-podium-slot.rank-2 { order: 1; }
.board-podium-slot.rank-3 { order: 3; }
.board-podium-slot.me { border-color: var(--lime); }
.board-podium-medal { font-size: 26px; margin-bottom: 6px; }
.board-podium-name { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-podium-value { font-family: var(--font-mono); font-weight: 700; color: var(--lime); font-size: 15px; }
.board-podium-empty { color: var(--text-muted); font-size: 13px; }
.update-entry { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.update-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.update-title { font-size: 14px; font-weight: 600; margin: 4px 0 6px; }
.update-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.shop-grid { display: grid; grid-template-columns: 1fr; max-width: 380px; gap: 14px; }
.shop-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; position: relative; }
.shop-card-vip { border-color: var(--lime); }
.vip-ribbon { position: absolute; top: 14px; right: 14px; background: var(--lime); color: #12151b; font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.shop-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.shop-price { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--lime); margin-bottom: 14px; }
.shop-price span { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.shop-perks { list-style: none; margin-bottom: 16px; }
.shop-perks li { font-size: 13px; color: var(--text-secondary); padding: 5px 0 5px 18px; position: relative; }
.shop-perks li::before { content: '✓'; position: absolute; left: 0; color: var(--lime); font-weight: 700; }

.vip-badge { color: var(--amber); margin-right: 3px; }

/* ============================================
   PACK SHOP (Packs tab)
   ============================================ */
.pack-shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 780px; gap: 16px; }
.pack-shop-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pack-shop-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.pack-shop-price { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--lime); margin-bottom: 12px; }
.pack-shop-price span { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.pack-shop-details { list-style: none; margin-bottom: 16px; width: 100%; }
.pack-shop-details li { font-size: 12.5px; color: var(--text-secondary); padding: 4px 0 4px 18px; position: relative; text-align: left; }
.pack-shop-details li::before { content: '✓'; position: absolute; left: 0; color: var(--lime); font-weight: 700; }
.pack-shop-qty-row { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 8px; margin-top: auto; }
.pack-shop-card > .btn:last-child { margin-top: auto; }
.pack-shop-qty-row label { font-size: 12px; color: var(--text-muted); }
.pack-shop-qty-input {
  width: 64px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 6px 8px; font-family: var(--font-mono); font-size: 13px; text-align: center;
}

.pack-shop-art {
  width: 140px; aspect-ratio: 5/7; border-radius: 16px; margin-bottom: 14px; position: relative; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.4), inset 0 0 30px rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  animation: pack-float 3s ease-in-out infinite;
}
.pack-shop-art::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 45%, transparent 60%);
  background-size: 220% 220%;
  animation: holo-shimmer 3.2s ease-in-out infinite;
}
.pack-shop-art-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pack-shop-art-logo { width: 42px; height: 42px; opacity: 0.9; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }

/* Silver — matches the existing pack-opening reveal art exactly */
.pack-shop-card-silver .pack-shop-art {
  background: linear-gradient(160deg, #f4f5f7 0%, #c8cbd1 30%, #8b8f97 55%, #d7dade 75%, #a7abb2 100%);
  border: 1px solid rgba(255,255,255,0.45);
}

/* Gold — warm metallic, matches .tier-gold card background */
.pack-shop-card-gold { border-color: rgba(224,178,60,0.4); }
.pack-shop-card-gold .pack-shop-art {
  background: linear-gradient(160deg, #ffefc0 0%, #e0ab2e 45%, #96690a 75%, #c99420 100%);
  border: 1px solid rgba(255,238,180,0.5);
}

/* Diamond — cool icy metallic, matches .tier-diamond card background */
.pack-shop-card-diamond { border-color: rgba(143,216,245,0.4); }
.pack-shop-card-diamond .pack-shop-art {
  background: linear-gradient(160deg, #eaf9ff 0%, #a9e2f7 30%, #4f9fc2 55%, #cdf1ff 75%, #7cbfdd 100%);
  border: 1px solid rgba(255,255,255,0.55);
}

/* Test pack (admin only) — dark/lime, distinct from the paid tiers */
.pack-shop-card-test { border-color: var(--lime); position: relative; }
.pack-shop-card-test .pack-shop-art {
  background: linear-gradient(160deg, #1c2029 0%, #12151b 45%, #0c0e12 75%, #1c2029 100%);
  border: 1px solid rgba(196,245,66,0.4);
}
.pack-shop-card-test .pack-shop-art::before {
  background: linear-gradient(120deg, transparent 30%, rgba(196,245,66,0.5) 45%, transparent 60%);
}

@media (max-width: 720px) {
  .pack-shop-grid { grid-template-columns: 1fr; max-width: 380px; }
}

.site-footer {
  margin-left: 240px;
  background: #0c0e12;
  border-top: 1px solid var(--border);
  padding: 20px 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.footer-links, .footer-social { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.footer-link {
  background: none; border: none; font-size: 11px; color: var(--text-muted);
  cursor: pointer; padding: 0; text-decoration: none; font-family: var(--font-body);
}
.footer-link:hover { color: var(--text-secondary); }
.footer-copy { font-size: 10px; color: var(--text-muted); opacity: 0.7; margin-top: 4px; }

@media (max-width: 720px) {
  .site-footer { margin-left: 0; padding: 16px 1.25rem; }
  .shop-grid { grid-template-columns: 1fr; }
}

.refer-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; max-width: 380px; }
.refer-code-row { display: flex; gap: 8px; align-items: center; }
.refer-code { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--lime); background: var(--surface-raised); border-radius: 8px; padding: 8px 14px; flex: 1; }

.refer-instructions { font-size: 14px; margin-bottom: 8px; }
.refer-code-label { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: var(--lime); color: #12151b; padding: 3px 9px; border-radius: 6px; margin-top: 10px; }
.refer-code-big { font-family: var(--font-mono); font-size: 24px; font-weight: 700; margin: 6px 0 14px; }
.refer-btn-row { display: flex; gap: 8px; }
.refer-btn-row .btn { flex: 1; }

.home-page-columns { display: flex; gap: 24px; align-items: flex-start; }
.home-left-col { flex: 0 0 650px; width: 650px; min-width: 0; }
.home-right-col { flex: 0 0 650px; width: 650px; min-width: 0; }
.home-hero { text-align: center; padding: 1rem 0 2rem; }
.home-logo { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 10px; }
.home-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 2rem; }
.home-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color 0.15s; }
.home-card:hover { border-color: var(--lime); }
.home-card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.home-card-big { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--lime); }
.home-section-title { font-size: 15px; font-weight: 700; margin: 1.5rem 0 10px; }

.theme-list, .accent-list { display: flex; flex-direction: column; gap: 4px; }
.theme-row, .accent-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; font-family: var(--font-body); font-size: 14px; color: var(--text); cursor: pointer;
}
.theme-row.selected, .accent-row.selected { border-color: var(--lime); }
.theme-check, .accent-check { color: var(--lime); opacity: 0; }
.theme-row.selected .theme-check, .accent-row.selected .accent-check { opacity: 1; }
.accent-swatch { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }
.custom-color-box { display: flex; align-items: center; gap: 10px; }
.custom-color-box input[type=color] { width: 44px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: none; padding: 0; }

.clash-row { display: flex; gap: 10px; flex-wrap: wrap; }
.clash-card {
  width: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.clash-card.win { border-color: var(--lime); }
.clash-card.loss { border-color: var(--red); opacity: 0.75; }
.clash-card-round { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.clash-card-rule { font-size: 12px; font-weight: 600; }
.clash-card-power { font-family: var(--font-mono); font-size: 22px; font-weight: 700; margin: 4px 0; }
.clash-card-result { font-size: 12px; font-weight: 700; }

/* ---- mobile off-canvas sidebar drawer ---- */
.mobile-menu-btn { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 720px) {

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 120;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .sidebar-overlay.open { opacity: 1; pointer-events: auto; }

  .sidebar {
    width: min(82vw, 280px);
    max-width: 280px;
    height: 100vh;
    position: fixed;
    border-right: 1px solid var(--border);
    border-bottom: none;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    z-index: 200;
    box-shadow: 6px 0 24px rgba(0,0,0,0.45);
  }
  .sidebar.open { transform: translateX(0); }

  .content {
    margin-left: 0;
    width: 100%;
    padding: 1rem;
    padding-top: 4rem;
    display: block;
  }
  .site-footer { margin-left: 0; padding: 16px 1.25rem; }

  /* fit dashboard-style grids on narrow screens instead of squeezing 3-across */
  .home-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-grid { grid-template-columns: repeat(2, 1fr); }

  .ah-search-btn-wrap { margin-left: 0 !important; }

  .home-title { font-size: 24px; }
  .panel-head h1 { font-size: 20px; }

  .admin-table-wrap { overflow-x: auto; }

  /* Everything else that used to live here (ach-layout, sell-layout,
     ah-filter-row, gate-box, auth-box, showcase-picker-box, hypecall-hero,
     beginner-guide, guest-steps/-step) moved to the mobile block at the
     end of this file — their base rules are declared further down than
     here, so an override placed at this point in the cascade was always
     losing to them. See the note down there before adding more here. */

  /* Challenge-a-player inputs: side-by-side flex sizing leaves each too
     narrow to show its placeholder on a phone screen — stack them instead. */
  #battle-challenge-opponent, #battle-wager-credits { width: 100%; }
}

/* ---- On the Clock refresh button ---- */
.mine-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 12px;
  font-size: 13px;
}
.mine-refresh-btn .refresh-icon { display: inline-block; transition: transform 0.5s ease; }
.mine-refresh-btn.spinning .refresh-icon { transform: rotate(360deg); }
.mine-refresh-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- admin cards table ---- */
.admin-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow-y: auto; overflow-x: auto; margin-bottom: 8px; max-height: 420px; }
.admin-table-wrap-tall { max-height: 720px; resize: both; overflow: auto; min-width: 320px; min-height: 240px; }
.admin-col-resize-handle { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 2; }
.admin-col-resize-handle:hover { background: var(--lime); opacity: 0.5; }
body.admin-col-resizing { cursor: col-resize !important; user-select: none; }
body.admin-col-resizing .admin-col-resize-handle { background: var(--lime); opacity: 0.5; }
.admin-table thead th { position: sticky; top: 0; z-index: 1; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-table th { background: var(--surface-raised); color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; user-select: none; }
.admin-table th[data-sort-key]:hover { color: var(--text); }
.admin-table th.admin-sort-active { color: var(--lime); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface-raised); }
.admin-table td:first-child, .admin-table th:first-child { width: 32px; }
#admin-cards-table { min-width: 1500px; }

.calls-remaining {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 20px;
}
#calls-left { color: var(--lime); font-weight: 700; }
.calls-label { color: var(--text-muted); }

.tabs {
  display: flex;
  gap: 4px;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--lime); }
.tab-btn:hover { color: var(--text); }

main { padding: 1.25rem; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel-head { margin-bottom: 1.25rem; }
.panel-head h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.sub { color: var(--text-muted); font-size: 14px; }

.add-custom {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.add-custom input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
}
#custom-title { flex: 2; min-width: 160px; }
#custom-likes { flex: 1; min-width: 100px; }

.btn {
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--lime); color: #12151b; border-color: var(--lime); }
.btn-primary:hover { background: #d4ff5e; }
.btn-primary:disabled { background: var(--surface-raised); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text-muted); }

.card-list { display: flex; flex-direction: column; gap: 10px; }

.vid-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.vid-title { font-size: 14px; font-weight: 500; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vid-title-row .vid-title { margin-bottom: 0; flex: 1; }
.vid-owner-badge { background: none; border: none; padding: 0; margin-left: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.vid-owner-badge:hover { color: var(--lime); text-decoration: underline; }
.vid-channel-badge { position: absolute; bottom: 10px; right: 14px; margin-left: 0; cursor: default; pointer-events: none; }
.vid-channel-badge:hover { color: var(--text-muted); text-decoration: none; }
.shorts-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; background: var(--surface-raised); color: var(--text-muted); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; text-transform: uppercase; }
.vid-btn-row { display: flex; gap: 8px; margin-top: 10px; }
.watch-btn { font-size: 12px; padding: 8px 12px; }
.vid-card { position: relative; }

/* ============================================
   HYPECALL CARD STANDARD — one fixed box size shared by every place a
   Hypecall pick appears: My feed, Trending, On the Clock, Ready to Open,
   and anywhere new that follows.
   ============================================ */
.hypecall-card-list { display: flex; flex-wrap: wrap; gap: 14px; }
.hypecall-card {
  width: var(--hcard-w); height: var(--hcard-h); flex-shrink: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.hypecall-card .vid-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hypecall-card .vid-stats { gap: 10px; row-gap: 6px; }
.hypecall-card .vid-btn-row { margin-top: auto; }

/* Ready to Open card action row — small buttons anchored bottom-left, not a full-box button */
.ready-to-open-btn-row {
  justify-content: flex-start;
  align-items: center;
}
.ready-to-open-btn-row .btn-open-pack {
  padding: 7px 14px;
  font-size: 12px;
  flex: 0 0 auto;
  width: auto;
}

.hide-opened-label {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary);
  margin-bottom: 16px; cursor: pointer; user-select: none;
}
.hide-opened-label input { width: 16px; height: 16px; accent-color: var(--lime); cursor: pointer; }
.vid-remove-btn {
  position: absolute; bottom: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.vid-remove-btn:hover { color: var(--red); border-color: var(--red); }

.gate-box { max-width: 400px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 40px 30px; margin: 3rem auto 0; }

.guest-hero { background: linear-gradient(160deg, var(--surface), var(--surface-raised)); border: 1px solid var(--border); border-radius: 16px; padding: 36px; text-align: center; margin-bottom: 1.5rem; }
.guest-hero h1 { font-family: var(--font-display); font-size: 30px; margin-bottom: 8px; }
.guest-steps { display: flex; gap: 14px; margin: 1.5rem 0; flex-wrap: wrap; }
.guest-step { flex: 1; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.guest-step-num { font-family: var(--font-mono); color: var(--lime); font-weight: 700; font-size: 18px; }
.qsg-tab-link { color: var(--lime); text-decoration: underline; cursor: pointer; }
.qsg-tab-link:hover { color: #d4ff5e; }

.beginner-guide { background: linear-gradient(160deg, var(--surface), var(--surface-raised)); border: 1px solid var(--lime); border-radius: 16px; padding: 24px; margin-bottom: 1.5rem; }
.beginner-guide-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vid-stats { display: flex; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; }
.stat-block { display: flex; flex-direction: column; }
.stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.stat-value.growth-up { color: var(--lime); }
.stat-value.xp-gained-text, .xp-gained-text { color: var(--lime); }

.tier-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  display: inline-block;
}
.t3 { background: rgba(196,245,66,0.15); color: var(--lime); }
.t2 { background: rgba(255,178,56,0.15); color: var(--amber); }
.t1 { background: rgba(139,143,152,0.15); color: var(--text-muted); }
.t0 { background: rgba(139,143,152,0.1); color: var(--text-muted); }

.add-custom select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
}
.share-hint { font-size: 12px; color: var(--text-muted); margin: -8px 0 1rem; }

.gem-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(196,245,66,0.15);
  color: var(--lime);
  display: inline-block;
  margin-bottom: 8px;
}
.scout-count { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.sim-btn { margin-bottom: 1rem; }

.board-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.board-tab-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 20px; padding: 6px 14px; font-size: 12px; font-family: var(--font-body); cursor: pointer;
}
.board-tab-btn.active { background: var(--lime); color: #12151b; border-color: var(--lime); font-weight: 500; }

.board-list { display: flex; flex-direction: column; gap: 6px; }
.board-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.board-rank { font-family: var(--font-mono); color: var(--text-muted); width: 20px; }
.board-name { flex: 1; font-size: 14px; }
.board-pts { font-family: var(--font-mono); font-weight: 700; color: var(--lime); }
.board-row.me { border-color: var(--lime); }

.chat-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1rem; max-height: 400px; overflow-y: auto; }
.chat-msg { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.chat-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.chat-badge { font-size: 13px; }
.chat-name { font-size: 13px; font-weight: 600; }
.chat-pts { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.chat-text { font-size: 13px; color: var(--text-secondary); }
.chat-input-row { display: flex; gap: 8px; }
#chat-input { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px 12px; font-family: var(--font-body); font-size: 13px; }

.auth-popover {
  display: none;
  position: fixed;
  top: 64px;
  left: 12px;
  z-index: 1000;
}
.auth-popover.open { display: flex; }
.modal-screen {
  display: none;
  position: fixed;
  inset: 0;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
}
.auth-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 20px 20px;
  width: 280px;
  max-width: calc(100vw - 24px);
  position: relative;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.auth-popover-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.auth-popover-close:hover { color: var(--text); }
.topleft-login-btn {
  margin-left: auto;
  background: var(--lime);
  color: #12151b;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.topleft-login-btn:hover { filter: brightness(0.95); }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--surface-raised); border-radius: 8px; padding: 4px; }
.auth-tab-btn { flex: 1; background: none; border: none; color: var(--text-muted); font-family: var(--font-body); font-size: 13px; padding: 8px 0; border-radius: 6px; cursor: pointer; }
.auth-tab-btn.active { background: var(--lime); color: #12151b; font-weight: 500; }
.auth-box input:not([type="checkbox"]) {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  margin-bottom: 10px;
}
.auth-box input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.auth-error { color: var(--red); font-size: 12px; margin-top: 8px; min-height: 14px; }

.formula-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 1.25rem;
  text-align: center;
}
.formula-line { font-family: var(--font-mono); font-size: 16px; color: var(--lime); margin-bottom: 8px; }
.formula-sub { font-size: 12px; color: var(--text-muted); }

.tier-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.tier-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--border); }
.tier-row:last-child { border-bottom: none; }
.tier-head { background: var(--surface); color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

.footnote { font-size: 13px; color: var(--text-muted); }
#battle-hand-total.cap-over { color: var(--red); font-weight: 700; }
#battle-hand-total.cap-ok { color: var(--lime); font-weight: 700; }

.empty-state { color: var(--text-muted); font-size: 14px; padding: 2rem 0; text-align: center; }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--lime);
  color: #12151b;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.rarity-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; display: inline-block; text-transform: uppercase; }
.linklike { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--lime); text-decoration: underline; cursor: pointer; }
.rarity-silver { background: rgba(180,185,195,0.18); color: #c8ccd4; }
.rarity-gold { background: rgba(212,160,23,0.18); color: #e0b23c; }
.rarity-diamond { background: rgba(120,200,240,0.18); color: #8fd8f5; }
.rarity-perfect { background: rgba(185,140,255,0.2); color: #c9a8ff; }

.trading-card {
  width: 168px; flex-shrink: 0; aspect-ratio: 5/7; border-radius: 14px; position: relative;
  display: flex; flex-direction: column; justify-content: space-between; padding: 12px;
  text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.25);
  isolation: isolate;
}
.trading-card.tier-silver { background: linear-gradient(160deg, #f1f2f4 0%, #b6bac1 45%, #7c8189 75%, #9aa0a8 100%); }
.trading-card.tier-gold { background: linear-gradient(160deg, #ffefc0 0%, #e0ab2e 45%, #96690a 75%, #c99420 100%); }
.trading-card.tier-diamond {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55) 0%, transparent 22%),
    linear-gradient(315deg, rgba(255,255,255,0.35) 0%, transparent 25%),
    linear-gradient(160deg, #eaf8ff 0%, #a9def2 40%, #5fa8c9 70%, #cdeefb 100%);
}
.trading-card.tier-perfect {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 20%),
    linear-gradient(160deg, #ffffff 0%, #e8d9ff 25%, #b98cff 55%, #6a3fd9 85%, #4a1fa8 100%);
}
.trading-card.tier-perfect .trading-card-boost-uses { }

.trading-card.is-holo { position: relative; }
.trading-card.is-holo::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-radius: 14px;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.5) 35%, rgba(0,255,255,0.35) 45%, rgba(255,0,200,0.35) 55%, transparent 70%);
  background-size: 250% 250%;
  opacity: 0.7;
  animation: holo-shimmer 5s ease-in-out infinite;
}
@keyframes holo-shimmer {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.holo-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 8px; font-weight: 700; background: rgba(255,255,255,0.85); color: #12151b; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em; }
.trading-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.trading-card-type-badge { position: absolute; top: 8px; left: 8px; font-size: 12px; z-index: 2; }
.trading-card-creator { font-size: 9px; font-weight: 700; color: #3a3d44; text-transform: uppercase; letter-spacing: 0.03em; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trading-card-play { width: 18px; height: 18px; border-radius: 50%; background: rgba(18,21,27,0.55); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; flex-shrink: 0; }
.trading-card-title { font-size: 11px; font-weight: 600; color: rgba(18,21,27,0.85); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.trading-card-score-label { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(18,21,27,0.55); margin-bottom: -2px; }
.trading-card-score { text-align: center; font-family: var(--font-mono); font-size: 34px; font-weight: 700; color: rgba(18,21,27,0.9); text-shadow: 0 1px 2px rgba(255,255,255,0.3); }
.trading-card-score.dupe-score-glow {
  text-shadow: 0 0 10px rgba(196,245,66,0.85), 0 0 22px rgba(196,245,66,0.55), 0 1px 2px rgba(255,255,255,0.3);
}
.trading-card-quicksell-btn {
  display: block; margin: 0 auto; font-family: var(--font-mono); font-size: 22px; font-weight: 800;
  color: #12151b; background: var(--lime); border: none; border-radius: 10px; padding: 6px 16px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trading-card-quicksell-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.trading-card-quicksell-btn:active { transform: translateY(0); }
.trading-card-boost-uses { text-align: center; font-size: 9px; color: rgba(18,21,27,0.55); margin-top: -2px; }
.trading-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.trading-card-tier { font-size: 9px; font-weight: 700; text-transform: uppercase; color: rgba(18,21,27,0.6); }
.trading-card-serial { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: rgba(18,21,27,0.7); }
.trading-card-menu-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(0,0,0,0.55); position: absolute; top: 4px; right: 4px; z-index: 100;
  letter-spacing: -1px; font-size: 16px; line-height: 1; padding: 8px;
  pointer-events: auto;
}
.trading-card-menu { position: absolute; top: 32px; right: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.4); z-index: 51; display: none; min-width: 130px; }
.trading-card-menu.open { display: block; }
.trading-card-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 12px; padding: 9px 12px; cursor: pointer; }
.trading-card-menu button:hover { background: var(--surface-raised); }
.trading-card-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; position: relative; }

.ach-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
.ach-points-box { background: var(--surface); border: 1px solid var(--lime); border-radius: 10px; padding: 10px 18px; text-align: center; }
.ach-points-box .stat-value { color: var(--lime); font-size: 22px; }
.ach-layout { display: flex; gap: 16px; }
.ach-category-list { width: 170px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.ach-cat-btn {
  text-align: left; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 13px; padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.ach-cat-btn.active { background: rgba(196,245,66,0.12); border-color: var(--lime); color: var(--lime); font-weight: 600; }
.ach-main { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ach-row {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.ach-row.done { border-color: var(--lime); }
.ach-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.ach-row-text { flex: 1; min-width: 0; }
.ach-row-title { font-size: 14px; font-weight: 600; }
.ach-row-desc { font-size: 12px; color: var(--text-muted); }
.ach-row-reward { text-align: right; flex-shrink: 0; }
.ach-row-pts { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--lime); }
.ach-row-give { font-size: 11px; color: var(--text-muted); }

.sell-layout { display: flex; gap: 16px; margin-bottom: 1.5rem; }
.sell-card-list { width: 260px; flex-shrink: 0; max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sell-card-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; font-size: 12px;
}
.sell-card-row.selected { border-color: var(--lime); }
.sell-card-row.locked { opacity: 0.45; cursor: not-allowed; }
.sell-form-panel { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.sell-form-panel .field-label { margin-top: 12px; }
.sell-form-panel input, .sell-form-panel select {
  width: 100%; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-family: var(--font-body); font-size: 13px;
}

.hypecall-hero {
  background: linear-gradient(160deg, var(--surface), var(--surface-raised));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 1.5rem;
}
.hypecall-hero-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.hypecall-fetch-row { display: flex; gap: 8px; margin-top: 16px; }
.hypecall-fetch-row input { flex: 1; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 12px 14px; font-family: var(--font-body); font-size: 14px; }
.btn-lg { padding: 12px 22px; font-size: 14px; }

#tab-hypecall.tab-panel { max-width: 1324px; }
#tab-packs.tab-panel, #tab-cardshop.tab-panel { max-width: 820px; }
#tab-home.tab-panel { max-width: 860px; }
#tab-unsettled.tab-panel { max-width: none; width: 100%; }
#tab-auction.tab-panel { max-width: 1280px; }
#tab-admin.tab-panel { max-width: 1600px; }
#tab-inventory.tab-panel { max-width: none; width: 100%; }
#inventory-list.trading-card-grid { width: 100%; }
.hypecall-columns { display: flex; gap: 24px; align-items: flex-start; }
.hypecall-col { flex: 0 0 650px; width: 650px; min-width: 0; }
/* On the Clock: widen just the column (search/filter row + wrapping card
   list) without touching --hcard-w, so the 650px Hypecall boxes underneath
   stay exactly the same size — only the extra breathing room around them
   grows, which is what lets the search/sort controls fit comfortably. */
.hypecall-col-wide { flex: 0 0 900px; width: 900px; }
/* On the Clock: fills whatever width the window gives it so the 650px
   cards wrap into extra columns instead of stacking into one long list. */
.hypecall-col-fluid { flex: 1 1 auto; width: 100%; min-width: 0; }
.hypecall-col-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hypecall-col-header span { font-size: 18px; }
.hypecall-col-header h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; }

.trend-rank { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; flex-shrink: 0; color: #12151b; }
.trend-rank.r1 { background: #ffd35c; }
.trend-rank.r2 { background: #c7ccd6; }
.trend-rank.r3 { background: #e0a25f; }
.trend-rank.rn { background: var(--surface-raised); color: var(--text-muted); }
.trend-callers { font-family: var(--font-mono); font-size: 11px; color: var(--lime); margin-bottom: 10px; }

@media (max-width: 900px) {
  .hypecall-columns { flex-direction: column; }
  .hypecall-col-wide { width: 100%; flex: 1 1 auto; }
  .hypecall-col { width: 100%; flex: 1 1 auto; }
  .home-page-columns { flex-direction: column; }
  .home-left-col { width: 100%; flex: 1 1 auto; }
  .home-right-col { width: 100%; flex: 1 1 auto; }
  /* The 650px hcard-w standard box is fine once its column stacks full-width
     above ~700px, but keeps forcing horizontal scroll below that — let it
     shrink to fit and grow past its fixed height instead of clipping. */
  .hypecall-card { width: 100%; height: auto; min-height: var(--hcard-h); flex-shrink: 1; }
}

.inv-filter-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.inv-filter-row input, .inv-filter-row select {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-family: var(--font-body); font-size: 13px;
}
.inv-search-wrap { position: relative; flex: 2; min-width: 160px; }
.inv-search-wrap input#inv-search { width: 100%; }
.inv-search-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px;
  max-height: 240px; overflow-y: auto; display: none;
}
.inv-search-suggestions.open { display: block; }
.inv-search-suggestion {
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.inv-search-suggestion:hover { background: var(--surface); }
.inv-search-suggestion-tag { color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; }
.inv-filter-row select { flex: 1; min-width: 120px; }
.inv-filter-row .ms-dropdown { flex: 1; min-width: 140px; }
.inv-filter-row .ms-dropdown-btn { width: 100%; min-width: 0; }
#active-search {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-family: var(--font-body); font-size: 13px; width: 100%;
}

.unsettled-sort-select { flex: 0 0 auto; min-width: 190px; }
.sort-dir-btn { flex: 0 0 auto; padding: 8px 12px; font-size: 15px; font-weight: 700; }

.ready-to-open-delete-x {
  position: absolute; bottom: 10px; right: 10px; z-index: 5;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-secondary);
  width: 26px; height: 26px; border-radius: 50%; font-size: 13px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ready-to-open-delete-x:hover { background: #e5484d; border-color: #e5484d; color: #fff; }

.home-promo-close-x {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-secondary);
  width: 26px; height: 26px; border-radius: 50%; font-size: 13px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.home-promo-close-x:hover { background: #e5484d; border-color: #e5484d; color: #fff; }

.growth-tag { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-weight: 700; }
.growth-0 { color: var(--text-muted); }
.growth-1 { color: #8fd48a; }
.growth-2 { color: #4fd15a; }
.growth-3 { color: #22c55e; }
.growth-4 { color: #0fe85a; text-shadow: 0 0 8px rgba(15,232,90,0.5); }

.boost-select, .salvage-selects select {
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-family: var(--font-body); font-size: 13px;
}
.boost-select { width: 100%; margin-bottom: 1.25rem; }
.salvage-box { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); max-width: 480px; }
.salvage-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.salvage-selects select { flex: 1 1 140px; min-width: 0; max-width: 220px; }

.bid-row { display: flex; gap: 8px; margin-top: 8px; }
.bid-row input { flex: 1; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-family: var(--font-mono); font-size: 13px; }

.bid-amount-lime { color: var(--lime); }
.seller-link { background: none; border: none; color: var(--lime); font-family: var(--font-body); font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }

/* ============================================
   AUCTION HOUSE — filter panel
   ============================================ */
.ah-filters {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 1rem;
}
.ah-filter-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.ah-filter-row:last-child { margin-bottom: 0; }
.ah-filter-field { display: flex; flex-direction: column; min-width: 150px; }
.ah-filter-field input[type="text"],
.ah-filter-field input[type="number"],
.ah-filter-field select {
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-family: var(--font-body); font-size: 13px;
}
.ah-filter-checks { flex-direction: column; gap: 6px; justify-content: flex-end; min-width: 240px; }
.ah-check-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.ah-search-btn-wrap { margin-left: auto; justify-content: flex-end; }
.ah-sort-row { display: flex; gap: 6px; }
.ah-sort-row select { flex: 1; }
.ah-sort-dir-btn { padding: 8px 12px; font-size: 15px; line-height: 1; }

/* Multi-select checkbox dropdown */
.ms-dropdown { position: relative; }
.ms-dropdown-btn {
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 150px;
}
.ms-caret { font-size: 10px; color: var(--text-muted); }
.ms-dropdown-divider { height: 1px; background: var(--border); margin: 6px 2px; }
.ms-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4); min-width: 170px; padding: 6px;
}
.ms-dropdown-menu.open { display: block; }
.ms-dropdown-menu label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  padding: 7px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.ms-dropdown-menu label:hover { background: var(--surface-raised); }

/* Results table */
.ah-results-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.ah-results-count { font-size: 13px; color: var(--text-muted); }
.ah-table th[data-ah-sort] { cursor: pointer; user-select: none; }
.ah-table th[data-ah-sort]:hover { color: var(--text); }
.ah-table th.ah-sort-active { color: var(--lime); }
.ah-sort-arrow { margin-left: 4px; }
.ah-card-cell { display: flex; align-items: center; gap: 10px; }
.ah-card-title { font-size: 13px; font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-bid-cell { display: flex; flex-direction: column; gap: 6px; }
.ah-bid-inline { display: flex; gap: 6px; }
.ah-bid-inline input {
  width: 80px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 5px 8px; font-family: var(--font-mono); font-size: 12px;
}
.ah-buyout-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ah-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }

.ah-table td:first-child, .ah-table th:first-child { width: auto; }

/* ============================================
   ADMIN — card preview + user activity panels
   ============================================ */
.admin-cards-layout { display: flex; gap: 16px; align-items: flex-start; }
.admin-card-preview {
  width: 220px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.admin-row-active { background: rgba(196,245,66,0.08); }
.admin-table tbody tr[data-card-id]:hover { background: var(--surface-raised); }

.admin-user-layout { display: flex; gap: 16px; align-items: flex-start; }
.admin-user-activity {
  width: 260px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.admin-activity-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.admin-activity-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.admin-activity-row:last-child { border-bottom: none; }
.admin-activity-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }

@media (max-width: 720px) {
  .admin-cards-layout, .admin-user-layout { flex-direction: column; }
  .admin-card-preview, .admin-user-activity { width: 100%; }
}
.btn-sm { padding: 5px 10px; font-size: 12px; }

.showcase-slot-empty {
  width: 168px; aspect-ratio: 5/7; border-radius: 14px; border: 2px dashed var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  font-size: 24px; cursor: pointer; background: var(--surface);
}
.showcase-slot-empty:hover { border-color: var(--lime); color: var(--lime); }
.showcase-picker-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 50;
}
.showcase-picker-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; max-width: 760px; max-height: 75vh; overflow-y: auto; position: relative; }
.showcase-picker-close-x {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ============================================
   PACK OPENING OVERLAY (Ready to Open → "Open")
   ============================================ */
.pack-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.pack-overlay.open { opacity: 1; pointer-events: auto; }
.pack-overlay-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.pack-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  width: 100%; max-height: 92vh; overflow-y: auto; padding: 24px 16px;
}

.pack-flash {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(196,245,66,0.55) 40%, transparent 70%);
}
.pack-flash.flashing { animation: pack-flash-burst 0.5s ease-out forwards; }
@keyframes pack-flash-burst {
  0% { opacity: 0; transform: scale(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(22); }
}

#pack-sealed {
  width: 220px; aspect-ratio: 5/7; border-radius: 20px; position: relative; z-index: 2;
  cursor: pointer; overflow: hidden;
  background: linear-gradient(160deg, #f4f5f7 0%, #c8cbd1 30%, #8b8f97 55%, #d7dade 75%, #a7abb2 100%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 0 50px rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  animation: pack-float 3s ease-in-out infinite;
}
#pack-sealed::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.6) 45%, transparent 60%);
  background-size: 220% 220%;
  animation: holo-shimmer 3.2s ease-in-out infinite;
}
#pack-sealed::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.28) 0 6px, transparent 6px 13px);
}
.pack-sealed-logo { width: 60px; height: 60px; opacity: 0.9; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); position: relative; z-index: 2; }
#pack-sealed.ripping { animation: pack-shake 0.32s ease-in-out, pack-burst 0.42s ease-in 0.32s forwards; }
@keyframes pack-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pack-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
}
@keyframes pack-burst {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  55% { transform: scale(1.18) rotate(5deg); opacity: 1; }
  100% { transform: scale(0.2) rotate(14deg); opacity: 0; }
}

/* XP float — "+N XP" text that rises and fades near the revealed card */
.xp-float-pop {
  position: fixed; z-index: 9999; pointer-events: none;
  font-family: var(--font-mono); font-weight: 800; font-size: 60px;
  color: var(--lime); text-shadow: 0 0 10px rgba(196,245,66,0.9), 0 0 24px rgba(196,245,66,0.6);
  animation: xp-float-rise 1.4s ease-out forwards;
}
@keyframes xp-float-rise {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.05); }
  30% { transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(1); }
}

/* Level-up pulse — soft green glow shooting inward from all 4 screen edges */
.level-up-pulse {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(196,245,66,0);
  animation: level-up-pulse-anim 1.1s ease-out forwards;
}
@keyframes level-up-pulse-anim {
  0% { box-shadow: inset 0 0 0 0 rgba(196,245,66,0); }
  35% { box-shadow: inset 0 0 60px 18px rgba(196,245,66,0.55); }
  100% { box-shadow: inset 0 0 140px 50px rgba(196,245,66,0); }
}

/* Confetti burst — rarity-colored pieces exploding from the card center */
.confetti-piece {
  position: fixed; z-index: 9997; top: 0; left: 0; pointer-events: none;
  width: 8px; height: 14px; opacity: 0;
  animation: confetti-fall 1.4s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(var(--cx), var(--cy)) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(var(--cx) + var(--tx)), calc(var(--cy) + var(--ty))) rotate(var(--tr)); }
}

.pack-caption {
  text-align: center;
  font-family: var(--font-mono); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 22px; color: var(--lime); cursor: pointer; z-index: 3;
  animation: pack-caption-pulse 2s ease-in-out infinite;
}
@keyframes pack-caption-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* What the user is currently opening -- floats above the sealed pack with
   the same bob animation as #pack-sealed, hidden once it's ripped open. */
.pack-open-title {
  text-align: center; max-width: 90vw;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  position: relative; z-index: 2;
  animation: pack-float 3s ease-in-out infinite;
}
.pack-open-title:empty { display: none; }

/* Open All's Stop control -- the pack overlay sits above everything
   (z-index 400) including the Ready to Open page's own Stop button, so it
   needs its own reachable control inside the overlay itself. */
.pack-overlay-stop-btn {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  background: #e5484d; border: none; color: #fff; border-radius: 8px;
  padding: 8px 14px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.pack-overlay-stop-btn:hover { background: #c73e42; }

/* ============================================
   SHARED "CARD ZOOM" COMPONENT
   Used by the pack-opening reveal (after the rip) AND the site-wide
   click-any-card-to-enlarge feature, so both look and behave identically.
   The flip button always sits BELOW the card (never beside it) so it can
   never pull the card off-center — that was the earlier left-shift bug.
   ============================================ */
.card-zoom-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  position: relative; z-index: 2;
}
.card-zoom-wrap.show { animation: pack-card-in 0.5s cubic-bezier(.2,.85,.3,1.2) both; }
@keyframes pack-card-in {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}

.card-zoom-flip {
  position: relative; width: var(--zoom-w); aspect-ratio: 5/7; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.4,.2,.2,1);
}
.card-zoom-flip.flipped { transform: rotateY(180deg); }
.card-zoom-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.card-zoom-face.back { transform: rotateY(180deg); }
/* Scale the *actual* 168px trading-card up to fill the zoom face — every element
   (fonts, padding, the ••• menu, its dropdown) stays at the exact same relative
   position as the small version, since it's the same box, just magnified. */
.card-zoom-face.front .trading-card {
  transform: scale(calc(var(--zoom-w) / 168px));
  transform-origin: top left;
}
/* The generic .trading-card:hover lift would otherwise replace this scale and
   snap the card back to its tiny natural size the moment the mouse is over it. */
.card-zoom-face.front .trading-card:hover {
  transform: scale(calc(var(--zoom-w) / 168px));
}
/* The ••• dropdown menu is a child of .trading-card, so it inherits the same
   2.9x+ zoom scale as the card itself — without this it renders comically
   oversized. Counter-scale it back down and re-anchor to the visually
   scaled button position so only the button (not the popup) appears zoomed. */
.card-zoom-face.front .trading-card-menu {
  transform: scale(calc(168px / var(--zoom-w)));
  transform-origin: top right;
}

.card-zoom-backface {
  width: 100%; height: 100%; border-radius: 20px; background: var(--surface-raised);
  border: 2px solid var(--border); padding: 18px 24px 24px; display: flex; flex-direction: column;
  justify-content: flex-start; overflow-y: auto;
}
.card-zoom-backface.tier-silver { border-color: #b6bac1; }
.card-zoom-backface.tier-gold { border-color: #e0ab2e; }
.card-zoom-backface.tier-diamond { border-color: #5fa8c9; }
.card-zoom-backface.tier-perfect { border-color: #b98cff; }
.pack-back-title {
  font-weight: 700; font-size: 18px; margin: 2px 0 10px; color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default;
}
.pack-back-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 15px; padding: 9px 0;
  border-bottom: 1px solid var(--border); color: var(--text-secondary);
}
.pack-back-row span:last-child { color: var(--text); font-weight: 600; text-align: right; }
.pack-back-row .growth-up { color: var(--lime); }
.pack-back-divider { height: 8px; }

.card-zoom-flip-btn {
  background: var(--surface-raised); border: 1px solid var(--lime); color: var(--lime);
  padding: 10px 20px; border-radius: 24px; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  animation: pack-flip-bounce 1.6s ease-in-out infinite;
}
@keyframes pack-flip-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============================================
   MULTI-CARD PACK REVEAL
   Used when a pack contains more than one card (Test Pack, and future
   Silver/Gold/Diamond packs). Cards start face-down in a row; each is
   flipped individually by clicking it, same flip mechanic as the single-
   card reveal, just at trading-card scale instead of the big zoom size.
   ============================================ */
.pack-multi-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: 16px; max-width: 1100px; position: relative; z-index: 2;
}
.pack-multi-row.show .pack-multi-slot { animation: pack-card-in 0.5s cubic-bezier(.2,.85,.3,1.2) both; }
.pack-multi-row.show .pack-multi-slot:nth-child(1) { animation-delay: 0.02s; }
.pack-multi-row.show .pack-multi-slot:nth-child(2) { animation-delay: 0.08s; }
.pack-multi-row.show .pack-multi-slot:nth-child(3) { animation-delay: 0.14s; }
.pack-multi-row.show .pack-multi-slot:nth-child(4) { animation-delay: 0.20s; }
.pack-multi-row.show .pack-multi-slot:nth-child(5) { animation-delay: 0.26s; }

.pack-multi-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* --multi-w is set inline per-open (JS) so N cards always fit one row without
   overlapping the viewport — falls back to 220px if unset. Single-card packs
   don't use this path at all (they reuse the full --zoom-w reveal). */
.pack-multi-flip {
  position: relative; width: var(--multi-w, 220px); aspect-ratio: 5/7; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.4,.2,.2,1);
}
.pack-multi-flip.flipped { transform: rotateY(180deg); cursor: default; }
.pack-multi-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
.pack-multi-face.back { transform: rotateY(180deg); }
/* Scale the actual 168px trading-card up/down to fill the face, same
   technique as .card-zoom-face.front .trading-card. */
.pack-multi-face.back .trading-card {
  transform: scale(calc(var(--multi-w, 220px) / 168px));
  transform-origin: top left;
}
.pack-multi-face.back .trading-card:hover {
  transform: scale(calc(var(--multi-w, 220px) / 168px));
}
.pack-multi-face.back .trading-card-menu {
  transform: scale(calc(168px / var(--multi-w, 220px)));
  transform-origin: top right;
}

/* Face-down card back — same visual language as #pack-sealed (unopened pack) */
.pack-multi-face.front {
  background: linear-gradient(160deg, #1c2029 0%, #12151b 45%, #0c0e12 75%, #1c2029 100%);
  border: 1px solid rgba(196,245,66,0.35);
  display: flex; align-items: center; justify-content: center;
}
.pack-multi-face.front::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(196,245,66,0.4) 45%, transparent 60%);
  background-size: 220% 220%;
  animation: holo-shimmer 3.2s ease-in-out infinite;
}
.pack-multi-face.front img { width: 28%; height: 28%; opacity: 0.85; position: relative; z-index: 2; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }
.pack-multi-tap-hint {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--lime);
  text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75;
}

/* ============================================
   THEMED CONFIRM DIALOG — replaces browser confirm()
   ============================================ */
.confirm-dialog-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.confirm-dialog-overlay.open { opacity: 1; pointer-events: auto; }
.confirm-dialog-box {
  width: min(92vw, 380px);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  transform: scale(0.92); transition: transform 0.2s ease;
}
.confirm-dialog-overlay.open .confirm-dialog-box { transform: scale(1); }
.confirm-dialog-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.confirm-dialog-body { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 20px; }
.confirm-dialog-btn-row { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-dialog-btn-row .btn { min-width: 96px; }

/* Boost picker (reuses .confirm-dialog-overlay/.confirm-dialog-box shell) */
#boost-picker-overlay .confirm-dialog-box { width: min(92vw, 560px); }
.boost-picker-tier-row { display: flex; flex-direction: column; gap: 8px; }
.boost-picker-tier-btn, .boost-picker-card-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 12px 14px;
}
.boost-picker-tier-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.boost-picker-tier-name { font-weight: 700; }
.boost-picker-tier-pct { color: var(--lime); font-weight: 700; }
.boost-picker-tier-count { color: var(--text-muted); font-size: 12px; margin-left: auto; padding-left: 10px; }
.boost-picker-card-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.boost-picker-card-uses { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.boost-picker-back-btn { display: inline-block; margin-bottom: 10px; font-size: 13px; }
.boost-picker-warning { color: var(--text); background: rgba(196,245,66,0.08); border: 1px solid rgba(196,245,66,0.3); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.boost-picker-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.boost-picker-sort-btn { font-size: 12.5px; padding: 8px 10px; margin-left: auto; }
.boost-picker-rarity-filter { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; color: var(--text-secondary); }
.boost-picker-rarity-filter label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.boost-picker-table-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.boost-picker-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.boost-picker-table th { position: sticky; top: 0; background: var(--surface-raised); text-align: left; padding: 8px 10px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.boost-picker-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.boost-picker-table tr:last-child td { border-bottom: none; }
.boost-picker-apply-btn { padding: 6px 12px; font-size: 12.5px; min-width: unset; }
.boost-picker-row-used td { opacity: 0.45; text-decoration: line-through; }
.boost-picker-row-used td:last-child { text-decoration: none; }
.boost-picker-used-label { color: var(--lime); font-weight: 700; font-size: 12px; }
.boost-picker-inuse-btn { color: var(--lime); cursor: not-allowed; }
.boost-picker-name-cell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rto-controls-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 14px; flex-wrap: wrap; }
.rto-controls-row .ms-dropdown-btn,
.rto-controls-row #rto-sort-select,
.rto-controls-row #rto-sort-dir-btn {
  height: 37px; padding: 0 12px; box-sizing: border-box; font-size: 13px;
}
.rto-controls-row #rto-sort-select { width: auto; margin-bottom: 0; }
#rto-sort-dir-btn { padding: 0 12px; font-size: 14px; min-width: unset; }

/* Boosted-stat superscript on Hypecall cards (Payout/Score) */
.boost-super { color: var(--lime); font-size: 10px; font-weight: 700; margin-left: 3px; vertical-align: super; }
.boost-applied-btn { opacity: 0.6; cursor: pointer; }

/* ============================================
   SITE-WIDE CARD ZOOM OVERLAY
   ============================================ */
.card-zoom-overlay {
  position: fixed; inset: 0; z-index: 450;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.card-zoom-overlay.open { opacity: 1; pointer-events: auto; }
.card-zoom-overlay-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.card-zoom-stage {
  position: relative; z-index: 2; width: 100%; max-height: 92vh; overflow-y: auto;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}

/* Clickable-card affordance, everywhere a .trading-card is rendered */
.trading-card { transition: border-color 0.15s ease, transform 0.15s ease; cursor: pointer; }
.trading-card:hover { border-color: var(--lime); transform: translateY(-2px); }


/* ============================================
   BATTLE SYSTEM
   ============================================ */
.battle-stat-strip {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px;
}
.battle-stat-pill {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 14px; font-size: 13px; color: var(--text-secondary);
}
.battle-stat-pill strong { color: var(--lime); font-weight: 700; }

.battle-panel { display: flex; flex-direction: column; gap: 14px; }

.battle-slot-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.battle-slot {
  width: 96px; height: 128px; border: 2px dashed var(--border); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; text-align: center; padding: 6px; font-size: 11px; color: var(--text-muted);
  transition: border-color 0.15s ease, transform 0.15s ease; background: var(--surface);
  position: relative;
}
.battle-slot-clear-btn {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  border-radius: 50%; border: none; background: var(--surface-raised); color: var(--text-secondary);
  font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.battle-slot-clear-btn:hover { background: #e5484d; color: #fff; }
.battle-slot:hover { border-color: var(--lime); transform: translateY(-2px); }
.battle-slot.filled { border-style: solid; border-color: var(--lime-dim); color: var(--text); }
.battle-slot.filled .battle-slot-power { color: var(--lime); font-weight: 700; font-size: 16px; }
.battle-slot-title { font-size: 10px; line-height: 1.2; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.battle-slot-tier { font-size: 9px; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.battle-card-picker { max-height: 60vh; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.battle-card-picker .battle-slot { width: 100%; }

/* Arena */
.battle-arena {
  position: fixed; inset: 0; z-index: 460; background: rgba(6,7,10,0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 20px 16px; gap: 18px;
}
.battle-forfeit-btn {
  position: absolute; top: 16px; right: 16px; z-index: 470;
  background: #e5484d; border: none; color: #fff; border-radius: 8px;
  padding: 8px 14px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.battle-forfeit-btn:hover { background: #c73e42; }
.battle-arena-head { text-align: center; }
.battle-round-tracker { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
.battle-round-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted);
}
.battle-round-dot.won { border-color: var(--lime); color: var(--lime); background: rgba(196,245,66,0.1); }
.battle-round-dot.lost { border-color: var(--red); color: var(--red); background: rgba(255,107,94,0.1); }
.battle-round-dot.current { border-color: var(--amber); color: var(--amber); }

.battle-vs-row { display: flex; align-items: center; gap: 18px; }
.battle-side { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 140px; }
.battle-vs-mark { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-muted); }
.battle-card-slot {
  width: 130px; height: 176px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--surface-raised); display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.battle-card-slot-empty { font-size: 11px; color: var(--text-muted); }
.battle-card-slot.boosted { border-color: var(--amber); box-shadow: 0 0 16px rgba(255,178,56,0.45); }
.battle-card-slot.round-winner { border-color: var(--lime); box-shadow: 0 0 16px rgba(196,245,66,0.45); }
.battle-power-label { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.battle-action-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 40px; }
.battle-boost-decision-btn {
  width: 280px; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.battle-result-zone { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.battle-card-reveal { animation: battle-card-flip 0.35s ease; }
@keyframes battle-card-flip {
  0% { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}
.battle-coin {
  width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--lime), var(--lime-dim));
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #12151b;
  animation: battle-coin-flip 0.9s ease;
}
@keyframes battle-coin-flip {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(900deg) scale(1.15); }
  100% { transform: rotateY(1440deg) scale(1); }
}
.battle-boost-flash { animation: battle-boost-pulse 0.5s ease; }
@keyframes battle-boost-pulse {
  0% { box-shadow: 0 0 0 rgba(255,178,56,0); }
  50% { box-shadow: 0 0 26px rgba(255,178,56,0.8); }
  100% { box-shadow: 0 0 16px rgba(255,178,56,0.45); }
}

.battle-clock-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
.battle-clock-pill {
  font-family: var(--font-mono); font-size: 13px; padding: 4px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary);
}
.battle-clock-pill.ticking { border-color: var(--lime); color: var(--lime); }
.battle-clock-pill.low { border-color: var(--red); color: var(--red); animation: battle-boost-pulse 1s ease infinite; }

.boost-picker-table th[data-battle-sort-key] { cursor: pointer; user-select: none; }
.boost-picker-table th[data-battle-sort-key]:hover { color: var(--text); }
.boost-picker-table th.battle-sort-active { color: var(--lime); }
.boost-picker-row-ineligible td { opacity: 0.4; }

/* ============================================
   BATTLE ARENA v2 — bigger stage, intro, chat/log, zoom
   ============================================ */
.battle-arena { padding: 16px 12px; overflow-y: auto; }
.battle-arena-inner {
  display: grid;
  grid-template-columns: 320px minmax(0, 780px) 320px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    ".     header  ."
    "left  mat      log"
    "left  footer   log";
  align-items: start;
  gap: 16px 20px; width: 100%; max-width: 1520px; margin: 0 auto;
}
/* Left column starts at the mat's top (not the header's) so it lines up
   with the Battle Log on the right instead of hugging the very top of the
   arena -- Chat sits above Boosts inside it. */
.battle-left-col { grid-area: left; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.battle-center-header { grid-area: header; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.battle-mat-row { grid-area: mat; }
.battle-center-footer { grid-area: footer; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.battle-panel-log { grid-area: log; }
.battle-boosts-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; align-items: center;
}
.battle-boosts-panel .battle-slot-row { justify-content: center; }
@media (max-width: 1180px) {
  .battle-arena-inner {
    grid-template-columns: minmax(0, 780px);
    grid-template-areas: "header" "mat" "footer" "left" "log";
    justify-items: center;
  }
  .battle-side-panel.battle-panel-chat, .battle-side-panel.battle-panel-log { width: 100%; max-width: 780px; height: 220px; }
  .battle-center-header, .battle-mat-row, .battle-center-footer, .battle-left-col { width: 100%; max-width: 780px; }
}

.battle-intro-overlay, .battle-coinflip-overlay {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 60vh; text-align: center; animation: battle-intro-fade 0.4s ease;
}
@keyframes battle-intro-fade { from { opacity: 0; } to { opacity: 1; } }
.battle-intro-vs {
  font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.01em;
  animation: battle-intro-slam 0.6s cubic-bezier(.2,1.4,.4,1);
}
.battle-intro-vs span { color: var(--lime); margin: 0 10px; }
@keyframes battle-intro-slam {
  0% { transform: scale(2.2); opacity: 0; }
  60% { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); }
}
.battle-intro-sub { color: var(--text-muted); font-size: 14px; animation: pack-caption-pulse 1.2s ease infinite; }

.battle-round-tracker-big { display: flex; gap: 12px; justify-content: center; margin-bottom: 8px; }
.battle-round-dot {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--text-muted);
  background: var(--surface); transition: all 0.2s ease;
}
.battle-round-dot.won { border-color: var(--lime); color: var(--lime); background: rgba(196,245,66,0.12); box-shadow: 0 0 14px rgba(196,245,66,0.35); }
.battle-round-dot.lost { border-color: var(--red); color: var(--red); background: rgba(255,107,94,0.12); }
.battle-round-dot.current { border-color: var(--amber); color: var(--amber); animation: battle-round-pulse 1.1s ease infinite; }
@keyframes battle-round-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,178,56,0.5); }
  50% { transform: scale(1.14); box-shadow: 0 0 18px rgba(255,178,56,0.7); }
}

.battle-turn-banner {
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--lime);
  text-align: center; margin-top: 8px; letter-spacing: 0.02em;
  animation: battle-turn-pulse 1.3s ease infinite;
}
@keyframes battle-turn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.battle-side-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
}
.battle-side-panel.battle-panel-chat, .battle-side-panel.battle-panel-log {
  flex: 0 0 320px; width: 320px; height: 580px;
}
.battle-panel-head-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.battle-panel-head-row h3 { font-size: 13px; font-weight: 700; }
.battle-scroll-log { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.battle-log-line { color: var(--text-secondary); line-height: 1.4; }
.battle-log-line strong { color: var(--text); }
.battle-chat-line { color: var(--text); line-height: 1.4; }
.battle-chat-line strong { color: var(--lime); }
.battle-chat-input-row { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.battle-chat-input-row input { flex: 1; min-width: 0; }
.battle-chat-input-row button { padding: 8px 12px; font-size: 12.5px; min-width: unset; }

/* card fly-in from hand */
.battle-played-card { width: 100% !important; height: 100% !important; }
.battle-card-enter { animation: battle-card-enter 0.4s cubic-bezier(.2,1.1,.4,1); }
@keyframes battle-card-enter {
  0% { transform: translateY(40px) scale(0.6) rotate(-8deg); opacity: 0; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
/* clash resolution */
.battle-card-victor { animation: battle-card-victor 0.9s ease; }
@keyframes battle-card-victor {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.18) translateX(6px); }
  50% { transform: scale(1.1) translateX(-4px); }
  70% { transform: scale(1.14) translateX(3px); }
}
.battle-card-shattered { animation: battle-card-shatter 0.7s ease forwards; }
@keyframes battle-card-shatter {
  0% { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); }
  40% { transform: scale(1.05) rotate(-4deg); filter: brightness(1.6); }
  100% { transform: scale(0.4) rotate(18deg); opacity: 0; filter: brightness(0.4); }
}

/* card inspect / flip zoom */
.battle-card-zoom-overlay {
  position: fixed; inset: 0; z-index: 480;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.battle-card-zoom-overlay.open { opacity: 1; pointer-events: auto; }
.battle-card-zoom-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.battle-card-zoom-flipper {
  width: 240px; height: 330px; position: relative; transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.3,1,.4,1); cursor: pointer;
}
.battle-card-zoom-flipper.flipped { transform: rotateY(180deg); }
.battle-card-zoom-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px;
  border: 2px solid var(--lime-dim); background: var(--surface-raised);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; text-align: center; gap: 8px;
}
.battle-card-zoom-back { transform: rotateY(180deg); }
.battle-card-zoom-face .bcz-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.battle-card-zoom-face .bcz-score { font-family: var(--font-display); font-weight: 800; font-size: 42px; color: var(--lime); }
.battle-card-zoom-face .bcz-row { display: flex; justify-content: space-between; width: 100%; font-size: 12.5px; color: var(--text-secondary); }

/* ============================================
   BATTLE MAT + PERSISTENT HAND
   ============================================ */
.battle-mat-row { display: flex; gap: 16px; align-items: stretch; width: 100%; flex-wrap: wrap; }
.battle-mat {
  flex: 1 1 340px;
  min-width: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(196,245,66,0.06), transparent 60%),
    linear-gradient(180deg, #182219 0%, #10160f 100%);
  border: 3px solid var(--lime-dim);
  border-radius: 22px;
  padding: 28px 12px;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.55), 0 0 30px rgba(196,245,66,0.08);
  display: flex; align-items: center; justify-content: center;
}
/* Round-by-round summary -- sits to the right of the cardmat once the
   battle is complete, wraps below it on narrow viewports. */
.battle-round-summary {
  position: relative; z-index: 1;
  flex: 1 1 240px; max-width: 300px; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto;
}
.battle-round-summary h3 { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.battle-round-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface-raised); font-size: 12.5px;
}
.battle-round-summary-row.won { border: 1px solid rgba(196,245,66,0.4); }
.battle-round-summary-row.lost { border: 1px solid rgba(255,107,94,0.3); }
.battle-round-summary-round { font-family: var(--font-mono); font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.battle-round-summary-detail { flex: 1; min-width: 0; color: var(--text-secondary); }
.battle-round-summary-detail strong { color: var(--text); }
.battle-round-summary-result { font-weight: 700; flex-shrink: 0; }
.battle-round-summary-row.won .battle-round-summary-result { color: var(--lime); }
.battle-round-summary-row.lost .battle-round-summary-result { color: var(--red); }
.battle-vs-row { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 28px); width: 100%; }
.battle-side { display: flex; flex-direction: column; align-items: center; gap: 10px; width: clamp(140px, 40vw, 220px); }
.battle-vs-mark { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 5vw, 28px); color: var(--text-muted); }
.battle-card-slot {
  width: clamp(130px, 38vw, 210px); height: clamp(176px, 51vw, 284px);
  border-radius: 16px; border: 2px solid var(--border);
  background: var(--surface-raised); display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.battle-power-label { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 6vw, 30px); }
.battle-played-card .trading-card-title {
  display: block; -webkit-line-clamp: unset;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.battle-hand-strip-wrap { margin-top: 4px; width: 100%; }

/* Enlarged in-arena Hand/Boost cards -- same w:h ratio as the original
   96x128 .battle-slot (3:4), scoped to the arena strips only so the Set
   Up screen's picker slots stay their normal compact size. */
.battle-arena-slot { width: 188px; height: 250px; padding: 10px; }
.battle-arena-slot .battle-slot-power { font-size: 26px !important; }
.battle-arena-slot .battle-slot-title { font-size: 13px; margin-top: 6px; }
.battle-arena-slot .battle-slot-tier { font-size: 11px; margin-top: 4px; }

/* Hand strip: always exactly one row, tied to the mat's available width --
   5 cards share the row fluidly instead of wrapping to a second row. */
.battle-hand-strip-wrap-hand .battle-slot-row {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; width: 100%;
}
.battle-hand-strip-wrap-hand .battle-arena-slot {
  flex: 1 1 0; width: auto; max-width: 150px; min-width: 52px; height: auto; aspect-ratio: 3 / 4; padding: 8px;
}
.battle-hand-strip-wrap-hand .battle-arena-slot .battle-slot-power { font-size: clamp(14px, 4vw, 26px) !important; }
.battle-hand-strip-wrap-hand .battle-arena-slot .battle-slot-title { font-size: clamp(9px, 2vw, 13px); }
.battle-hand-strip-wrap-hand .battle-arena-slot .battle-slot-tier { font-size: 10px; }

/* Boost panel cards -- fixed compact size, sized to fit the 320px column. */
.battle-boosts-panel .battle-arena-slot { width: 130px; height: 173px; padding: 8px; }
.battle-boosts-panel .battle-arena-slot .battle-slot-power { font-size: 20px !important; }

@media (max-width: 560px) {
  .battle-arena-slot { width: 120px; height: 160px; }
  .battle-arena-slot .battle-slot-power { font-size: 18px !important; }
}
.battle-slot.battle-hand-playable { border-color: var(--lime); box-shadow: 0 0 12px rgba(196,245,66,0.35); }
.battle-slot.battle-hand-used { opacity: 0.35; cursor: default; border-style: dashed; }
.battle-slot.battle-hand-used:hover { transform: none; border-color: var(--border); }

/* player identity strip */
.battle-players-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.battle-player-id { display: flex; align-items: center; gap: 8px; }
.battle-player-id-opp { flex-direction: row-reverse; }
.battle-player-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--surface-raised); border: 2px solid var(--lime-dim);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--lime);
}
.battle-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.battle-player-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* win/lose result screen */
.battle-result-winner-avatar {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin: 0 auto 4px;
  border: 3px solid var(--lime); box-shadow: 0 0 24px rgba(196,245,66,0.45);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; color: var(--lime);
  background: var(--surface-raised);
}
.battle-result-winner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.battle-result-winner-avatar.lose { border-color: var(--red); box-shadow: 0 0 20px rgba(255,107,94,0.35); }

/* full-page Card Details title truncation */
.card-details-title-trunc {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; display: block; cursor: default;
}

/* Battle setup — hover preview of a filled Hand/Boost slot */
.battle-slot-hover-preview {
  position: fixed; z-index: 500; pointer-events: none;
  width: 168px; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
  animation: battle-slot-preview-in 0.12s ease;
}
@keyframes battle-slot-preview-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ============================================
   MOBILE FOLLOW-UP FIXES — the @media (max-width: 720px) block near the
   top of this file predates several rules that were added later (Auction
   filters, Achievements/Sell layouts, the showcase picker modal, etc).
   Since those later base rules share the same selectors at equal
   specificity, source order made them silently win over the earlier
   mobile overrides at every width, mobile included. Re-declaring the
   overrides down here (after every base rule they touch) makes them
   actually apply. Keep new mobile overrides down here, not in the old
   block, unless the selector they target is also defined further up.
   ============================================ */
@media (max-width: 720px) {
  .ah-filter-row { flex-direction: column; align-items: stretch; }
  .ach-layout, .sell-layout { flex-direction: column; }
  .ach-category-list, .sell-card-list {
    width: 100%;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ach-cat-btn { flex: 1 1 auto; }
  .showcase-picker-box { width: 92vw; max-width: 92vw; padding: 18px; }
  .gate-box { padding: 28px 20px; margin-top: 1.5rem; }
  .auth-box { padding: 22px; width: min(280px, 88vw); }
  .hypecall-hero { padding: 20px; }
  .hypecall-hero-title { font-size: 21px; }
  .beginner-guide { padding: 18px; }
  .guest-steps { gap: 10px; margin: 1rem 0; }
  .guest-step { min-width: 130px; padding: 12px; }

  .collections-manage-row { flex-direction: column; }
  .collections-manage-row input, .collections-manage-row button { width: 100%; }

  /* The Forfeit button is absolutely positioned at the arena's top-right
     corner. On desktop the players-row sits in a centered, narrower
     column so it never reaches that corner; on mobile the row goes
     full-width and the opponent's name+avatar run straight under the
     button. Shrink the button and reserve space for it instead. */
  .battle-forfeit-btn { padding: 6px 10px; font-size: 11px; top: 10px; right: 10px; }
  .battle-players-row { padding-right: 108px; }
}