/* ================================================================
   BOBA Playbook — Master Stylesheet v2
   Design: Retro-Futurism × Cyberpunk × Trading Card Collector Culture
   Mobile-first. WCAG AA. Element-reactive. Treatment-distinct.
================================================================ */

/* Ensure [hidden] always hides regardless of CSS display property */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------
   ACCESSIBILITY — reduced transparency + reduced motion
   (WEB-DESIGN.md §6 binding rule)

   When the user opts into reduced transparency (Settings →
   Accessibility on macOS/iOS, or the equivalent on other OSes),
   drop every backdrop-filter to none. The underlying rgba()
   backgrounds get bumped to opaque on the canonical chrome
   surfaces below so the result is a flat dark color instead of
   a translucent-without-blur muddle.

   When reduced motion is on, View Transitions short-circuit in
   JS (showView/applyView paths) AND the ::view-transition-* CSS
   animations zero out — belt-and-suspenders so neither layer
   animates against the user's setting.
---------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  /* Hammer: every surface that uses blur drops the blur. The
     spec intent is "no transparency effects" — we comply across
     the board rather than per-class. */
  .channels-sidebar,
  .sidebar-overlay,
  .mobile-header,
  .modal-overlay,
  .avatar-crop-dialog::backdrop,
  .avatar-menu-dialog::backdrop,
  dialog::backdrop,
  .multiselect-toolbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Bump the canonical chrome surfaces to opaque so the loss of
     blur doesn't leave them as flat-translucent (which reads worse
     than either glass or solid). Other rgba surfaces stay as-is —
     most are content-area dimmers where the rgba alpha was never
     critical. */
  .channels-sidebar,
  .mobile-header,
  .avatar-crop-dialog,
  .avatar-menu-dialog {
    background: var(--boba-surface) !important;
  }
}

/* ---- Design Tokens ---- */
:root {
  /* Brand palette */
  --boba-orange:       #FF4D00;
  --boba-orange-glow:  rgba(255,77,0,0.5);
  --boba-cyan:         #00F5FF;
  --boba-cyan-glow:    rgba(0,245,255,0.5);
  --boba-violet:       #8B00FF;
  --boba-violet-glow:  rgba(139,0,255,0.5);
  --boba-near-black:   #080810;
  --boba-surface:      #0D0D1A;
  --boba-surface-2:    #13132A;
  --boba-surface-3:    #1A1A35;
  --boba-glass:        rgba(255,255,255,0.06);
  --boba-glass-hover:  rgba(255,255,255,0.10);
  --boba-glass-border: rgba(255,255,255,0.11);
  --boba-text:         #F0F0FF;
  --boba-text-2:       #C8C8E8;
  --boba-text-muted:   #7878A0;
  --boba-text-dim:     #4A4A6A;

  /* Element colors */
  --el-FIRE:   #FF4D00; --el-FIRE-glow:  rgba(255,77,0,0.35);
  --el-ICE:    #00BFFF; --el-ICE-glow:   rgba(0,191,255,0.35);
  --el-HEX:    #9B30FF; --el-HEX-glow:   rgba(155,48,255,0.35);
  --el-STEEL:  #9BB0C8; --el-STEEL-glow: rgba(155,176,200,0.25);
  --el-BRAWL:  #D93020; --el-BRAWL-glow: rgba(217,48,32,0.35);
  --el-GLOW:   #FFD700; --el-GLOW-glow:  rgba(255,215,0,0.35);
  --el-GUM:    #FF69B4; --el-GUM-glow:   rgba(255,105,180,0.35);
  --el-SUPER:  #FF00FF; --el-SUPER-glow: rgba(255,0,255,0.35);
  --el-NONE:   #555578; --el-NONE-glow:  rgba(85,85,120,0.2);
  --el-ALT:    #AABBDD;

  /* Typography — 3-font system */
  --font-arena:   'Bebas Neue', 'Russo One', system-ui, sans-serif; /* wordmark BOBA only */
  --font-display: 'Russo One', system-ui, sans-serif;               /* headings, card names, nav */
  --font-mono:    'Chakra Petch', system-ui, sans-serif;            /* stats, labels, numbers, data */
  --font-body:    'Chakra Petch', system-ui, sans-serif;            /* body text */

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --header-h:  52px;

  /* Scanline overlay (subtle retro-futurism) */
  --scanline: repeating-linear-gradient(
    transparent,
    transparent 3px,
    rgba(0,0,0,0.05) 3px,
    rgba(0,0,0,0.05) 4px
  );
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Fill the overscroll (bounce) area at the top with the surface color
     so iOS Safari's rubber-band doesn't reveal a white gap */
  background-color: var(--boba-surface);
}

body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.5;
  color: var(--boba-text);
  background: var(--boba-near-black);
  /* Bsky Dreams pattern: body is a fixed-height flex column.
     Content scrolls inside <main>, not on the body itself.
     This is the only reliable way to prevent content from
     bleeding into the Dynamic Island in Safari browser mode. */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
select { cursor: pointer; }

/* ---- Accessibility ---- */
.skip-link {
  position: absolute; top: -100%; left: 0;
  padding: 10px 20px;
  background: var(--boba-orange); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  z-index: 9999; border-radius: 0 0 8px 0;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--boba-cyan); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* #safe-area-cover intentionally removed.
   Without viewport-fit=cover, env(safe-area-inset-top) is always 0
   and the browser automatically clips content to the safe area. */

/* ================================================================
   MOBILE HEADER
================================================================ */
.mobile-header {
  display: flex; align-items: center; gap: var(--sp-3);
  /* position: relative so z-index takes effect — header must paint above
     the position:fixed sidebar (z-index: 1200) when it slides in on mobile.
     Bumped from 400 to 1300 alongside the sidebar bump that lifts it
     above Leaflet's internal panes/controls (~1000) on the Find a Store
     view. No sticky/fixed needed: body is a flex column with
     overflow:hidden, so the header naturally stays pinned at the top. */
  position: relative;
  flex-shrink: 0;
  height: var(--header-h);
  padding: 0 var(--sp-4);
  background: var(--boba-surface);
  border-bottom: 1px solid var(--boba-glass-border);
  z-index: 1300;
}
@media (min-width: 768px) { .mobile-header { display: none; } }

/* Offline pill in mobile header (parity with iOS BOBAOfflinePill).
   Pushed to the right via margin-left: auto so it stays separate
   from the title. Cyan stroke icon + uppercase mono label. */
.offline-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.18);
  color: var(--boba-text-muted);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em;
}
/* Show on desktop too — networks die at every screen size. */
@media (min-width: 768px) {
  .offline-pill {
    position: fixed; top: var(--sp-3); right: var(--sp-3);
    z-index: 1000;
    background: var(--boba-surface);
    border-color: rgba(255,255,255,0.25);
  }
}

.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.hamburger span {
  display: block; height: 2px; background: var(--boba-text-2); border-radius: 2px;
  transition: background 0.15s;
}
/* Only apply hover highlight on real-hover devices (mouse).
   On touch screens (iOS Safari), :hover persists after tap and the
   button would stay cyan-highlighted after closing the sidebar. */
@media (hover: hover) {
  .hamburger:hover span { background: var(--boba-cyan); }
}
.hamburger:focus-visible { outline: none; }

.mobile-title {
  display: flex; align-items: center; gap: 6px;
}
.mobile-title-boba {
  font-family: var(--font-arena);
  font-size: 1.6rem; font-weight: 400;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  color: var(--boba-orange);
  text-shadow: 0 0 14px rgba(255,77,0,0.5);
}
.mobile-title-playbook {
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--boba-text-2);
}

/* ================================================================
   SIDEBAR OVERLAY
================================================================ */
/* z-index: sit above Leaflet's internal panes (200-700) and
   default control container (~1000) so the navigation drawer reads
   on top of the Find a Store map. Bumping below the system chrome
   (e.g. iOS status bar) but above any embedded canvas/iframe. */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(3px);
  z-index: 1199;
}
.sidebar-overlay.visible { display: block; }

/* ================================================================
   SIDEBAR
================================================================ */
.channels-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--boba-surface);
  border-right: 1px solid var(--boba-glass-border);
  z-index: 1200;
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              width 0.2s cubic-bezier(0.4,0,0.2,1);
}
.channels-sidebar.open { transform: translateX(0); }
/* On mobile, push sidebar content below the sticky header so it isn't obscured. */
@media (max-width: 767px) {
  .channels-sidebar { padding-top: var(--header-h); }
}
@media (min-width: 768px) { .channels-sidebar { transform: translateX(0); } }

/* Desktop collapse toggle — hidden on mobile (mobile uses the header
   hamburger to open/close the overlay sidebar). Absolutely positioned
   at the top-left of the sidebar so it sits in the same horizontal
   column as the nav icons below it without disturbing the centered
   wordmark layout. */
.sidebar-collapse-toggle { display: none; }
@media (min-width: 768px) {
  .sidebar-collapse-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 4px;
    position: absolute; top: 22px; left: var(--sp-5);
    width: 32px; height: 32px; padding: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    z-index: 5;
  }
  .sidebar-collapse-toggle:hover {
    background: rgba(255,77,0,0.12);
    border-color: rgba(255,77,0,0.4);
  }
  .sidebar-collapse-toggle span {
    display: block; width: 16px; height: 2px;
    background: var(--boba-text-2); border-radius: 1px;
    transition: background 0.15s;
  }
  .sidebar-collapse-toggle:hover span { background: var(--boba-orange); }
}

/* Collapsed sidebar — wordmark, tagline, and nav-item labels disappear;
   only the toggle and icons remain visible. Main content gets the
   reclaimed horizontal space. The toggle stays at the same horizontal
   position as the (now centered) icons below it. */
@media (min-width: 768px) {
  body.sidebar-collapsed .channels-sidebar { width: var(--sidebar-w-collapsed); }
  body.sidebar-collapsed main { margin-left: var(--sidebar-w-collapsed); }
  body.sidebar-collapsed .sidebar-header { display: none; }
  body.sidebar-collapsed .sidebar-collapse-toggle {
    /* Center horizontally to line up with the icon-only nav items. */
    position: relative; top: auto; left: auto;
    margin: 12px auto 8px;
  }
  body.sidebar-collapsed .sidebar-nav-item {
    justify-content: center;
    padding: 12px 0;
  }
  body.sidebar-collapsed .sidebar-nav-item > span { display: none; }
  body.sidebar-collapsed .sidebar-nav-item .nav-icon {
    width: 20px; height: 20px;
  }
}

/* Sidebar brand */
.sidebar-header {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--boba-glass-border);
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative;
}
.sidebar-header::after {
  content: '';
  position: absolute; bottom: -1px; left: var(--sp-5); right: var(--sp-5); height: 1px;
  background: linear-gradient(90deg, var(--boba-orange), transparent);
}

/* Sidebar brand */
.sidebar-wordmark {
  display: flex; flex-direction: column; gap: 0;
  align-items: center; /* center BOBA and Playbook horizontally */
}

/*
 * BOBA — Bebas Neue: the Battle Arena voice.
 * Condensed, all-caps, built for scoreboards and arena marquees.
 * No overflow at 3.4rem because Bebas Neue is narrow by design.
 */
.sidebar-boba {
  font-family: var(--font-arena);
  font-size: 3.4rem; font-weight: 400; /* Bebas Neue is weight 400 */
  letter-spacing: 0.06em; line-height: 0.95;
  color: var(--boba-orange);
  text-transform: uppercase;
  text-shadow:
    0 0  1px rgba(255,77,0,1),
    0 0 16px rgba(255,77,0,0.5),
    0 0 40px rgba(255,77,0,0.15);
}

/*
 * PLAYBOOK — Barlow Condensed: the expert reference.
 * Wide letter-spacing optically matches the width of BOBA above.
 */
.sidebar-playbook {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--boba-text-2);
  margin-top: 2px;
}

.sidebar-tagline {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--boba-text-dim);
  letter-spacing: 0.06em;
  margin-top: var(--sp-3);
}

/* Sidebar nav */
.sidebar-nav { display: flex; flex-direction: column; padding: var(--sp-3) 0; flex: 1; }

.sidebar-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px var(--sp-5);
  font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--boba-text-muted);
  text-align: left;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sidebar-nav-item:hover {
  color: var(--boba-text-2);
  background: var(--boba-glass);
}
.sidebar-nav-item.active {
  color: var(--boba-orange);
  background: rgba(255,77,0,0.08);
  border-left-color: var(--boba-orange);
}
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ================================================================
   PURCHASE VIEW
================================================================ */
.purchase-view-inner {
  max-width: 880px; margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-7);
}
.purchase-header { display: flex; flex-direction: column; gap: var(--sp-2); }
.purchase-title {
  font-family: var(--font-arena); font-size: 2.4rem; color: var(--boba-orange);
  letter-spacing: 0.04em; text-transform: uppercase; margin: 0;
  text-shadow: 0 0 16px rgba(255,77,0,0.35);
}
.purchase-tagline {
  font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--boba-text-2); margin: 0;
}
/* Header row + manual refresh button. The button is the always-on
   way to re-run the worker; pull-to-refresh below covers mobile. */
.purchase-header-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
}
.purchase-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.purchase-refresh-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--boba-glass, rgba(255,255,255,0.06));
  border: 1px solid var(--boba-glass-border, rgba(255,255,255,0.1));
  color: var(--boba-orange);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.purchase-refresh-btn:hover { background: rgba(255,77,0,0.18); transform: rotate(45deg); }
.purchase-refresh-btn--spinning svg { animation: purchase-spin 0.8s linear infinite; }
@keyframes purchase-spin { to { transform: rotate(360deg); } }

/* Pull-to-refresh indicator — fades in as the user drags down. */
.purchase-pull-indicator {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px;
  margin-top: -32px;        /* Hidden above the list by default */
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.15s, transform 0.2s;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--boba-text-muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.purchase-pull-indicator--active { opacity: 1 !important; transform: translateY(8px) !important; }
.purchase-pull-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,77,0,0.25);
  border-top-color: var(--boba-orange);
  border-radius: 50%;
  animation: purchase-spin 0.8s linear infinite;
}

/* Show list — 2-column grid on wider screens, single column on
   narrow. Thumbnails are portrait (Whatnot serves them at ~5:7 to
   match trading-card art) so we keep that aspect rather than
   cropping the show art into a landscape banner. */
.purchase-shows-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.purchase-shows-loading,
.purchase-shows-empty,
.purchase-shows-error {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--sp-7) var(--sp-4);
  background: var(--boba-surface); border-radius: 14px;
  border: 1px solid var(--boba-glass-border);
  font-family: var(--font-mono); color: var(--boba-text-muted); font-size: 0.8rem;
}
.purchase-shows-empty-icon { font-size: 2rem; }
.purchase-shows-empty-title { font-family: var(--font-display); font-size: 1rem; color: var(--boba-text-2); }
.purchase-shows-empty-sub  { font-size: 0.75rem; }
.purchase-shows-retry {
  margin-top: var(--sp-3);
  padding: 8px 16px; border-radius: 8px;
  background: rgba(255,77,0,0.18); border: 1px solid rgba(255,77,0,0.5);
  color: var(--boba-orange); font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 0.06em; cursor: pointer; transition: all 0.15s;
}
.purchase-shows-retry:hover { background: rgba(255,77,0,0.32); }

/* Show card — portrait thumb on top + meta below. */
.pshow-card {
  display: flex; flex-direction: column;
  background: var(--boba-surface); border-radius: 14px;
  border: 1px solid var(--boba-glass-border);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.pshow-card:hover {
  border-color: rgba(255,77,0,0.45);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,77,0,0.1);
  transform: translateY(-1px);
}
.pshow-thumb-wrap {
  width: 100%; aspect-ratio: 5 / 7;
  background: rgba(255,255,255,0.03);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.pshow-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.pshow-thumb-fallback { font-size: 3rem; opacity: 0.4; }
.pshow-live-pill {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: #C0392B; color: #fff;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(8,8,16,0.6);
}
.pshow-live-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.9);
  animation: pshow-pulse 1.4s ease-in-out infinite;
}
@keyframes pshow-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.pshow-body {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
}
.pshow-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.62rem;
}
.pshow-host  { color: var(--boba-cyan); font-weight: 700; }
.pshow-time  { color: var(--boba-orange); font-weight: 700; }
.pshow-title {
  font-family: var(--font-display); font-size: 0.92rem;
  color: var(--boba-text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pshow-foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.58rem;
  color: var(--boba-text-muted);
  margin-top: 2px;
}
.pshow-cat { letter-spacing: 1px; font-weight: 700; }

/* Section divider between LIVE and UPCOMING groups */
.purchase-shows-section-divider {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 2px; color: var(--boba-text-muted);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--boba-glass-border);
}

/* ================================================================
   MAIN LAYOUT
================================================================ */
main {
  /* Bsky Dreams pattern: main is the scroll container, not the body.
     flex:1 fills remaining height after the mobile header.
     overflow-y:auto lets content scroll within this box.
     min-height:0 is required for overflow-y:auto to work in a flex child. */
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: none;
}
@media (min-width: 768px) {
  main { margin-left: var(--sidebar-w); }
}

.view { min-height: 100%; }
.view[hidden] { display: none; }

.view-inner {
  max-width: 720px; margin: 0 auto;
  padding: var(--sp-8) var(--sp-4);
}
.view-heading {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--boba-text);
  margin-bottom: var(--sp-4);
}
.placeholder-text { color: var(--boba-text-muted); font-size: 0.95rem; line-height: 1.6; }

/* ================================================================
   SEARCH HEADER (scrolls with content)
================================================================ */
.search-header {
  position: relative;
  z-index: 1;
  background: var(--boba-near-black);
  border-bottom: 1px solid var(--boba-glass-border);
  padding: var(--sp-3) var(--sp-4) 0;
}

/* Search controls row: input + filter toggle */
.search-controls {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.search-controls .search-bar-wrap { flex: 1; margin-bottom: 0; }

/* Filter toggle button (mobile only) */
.filter-toggle-btn {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  color: var(--boba-text-muted);
  transition: all 0.15s;
}
.filter-toggle-btn:hover { color: var(--boba-text-2); border-color: rgba(255,255,255,0.25); }
.filter-toggle-btn.has-filters { border-color: var(--boba-orange); color: var(--boba-orange); }
.filter-toggle-btn[aria-expanded="true"] {
  background: rgba(0,245,255,0.08); border-color: var(--boba-cyan); color: var(--boba-cyan);
}
.filter-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--boba-orange); border-radius: 100px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 6px var(--boba-orange-glow);
}
/* Filter panel — collapsible at every breakpoint. The filter icon
   is the only way to reveal the panel; opens with the same animation
   as mobile so the desktop and phone behaviors match. */
.filter-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: rgba(8,8,16,0.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--boba-glass-border);
  padding: 0 var(--sp-4);
}
.filter-panel.open { max-height: 720px; padding: var(--sp-3) var(--sp-4); }

/* Search bar */
.search-bar-wrap {
  position: relative;
  display: flex; align-items: center;
  margin-bottom: var(--sp-3);
}
.search-icon {
  position: absolute; left: 12px;
  width: 17px; height: 17px;
  color: var(--boba-text-muted); pointer-events: none; flex-shrink: 0;
}
.search-input {
  width: 100%;
  padding: 11px 40px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  color: var(--boba-text);
  font-size: 0.95rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.search-input::placeholder { color: var(--boba-text-muted); }
.search-input:focus {
  outline: none;
  border-color: var(--boba-cyan);
  background: var(--boba-glass-hover);
  box-shadow: 0 0 0 3px rgba(0,245,255,0.12), 0 0 12px rgba(0,245,255,0.08);
}
.search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute; right: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--boba-text-muted);
  transition: color 0.15s, background 0.15s;
}
.search-clear:hover { color: var(--boba-text-2); background: var(--boba-glass); }

/* ---- Filter Bar ---- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: center;
  padding-bottom: var(--sp-2);
}

/* Element pills */
.filter-scroll {
  display: flex; gap: var(--sp-1);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filter-scroll::-webkit-scrollbar { display: none; }

.element-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 100px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  color: var(--boba-text-muted);
  white-space: nowrap;
  transition: all 0.15s;
}
.element-pill:hover { color: var(--boba-text-2); border-color: rgba(255,255,255,0.25); }

.element-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pill-clr, #555578); flex-shrink: 0;
}

/* Element pill colors */
.element-pill[data-element="FIRE"]  { --pill-clr: var(--el-FIRE); }
.element-pill[data-element="ICE"]   { --pill-clr: var(--el-ICE); }
.element-pill[data-element="HEX"]   { --pill-clr: var(--el-HEX); }
.element-pill[data-element="STEEL"] { --pill-clr: var(--el-STEEL); }
.element-pill[data-element="BRAWL"] { --pill-clr: var(--el-BRAWL); }
.element-pill[data-element="GLOW"]  { --pill-clr: var(--el-GLOW); }
.element-pill[data-element="GUM"]   { --pill-clr: var(--el-GUM); }
.element-pill[data-element="SUPER"] { --pill-clr: var(--el-SUPER); }
.element-pill[data-element="NONE"]  { --pill-clr: var(--el-NONE); }
.element-pill[data-element="ALT"]   { --pill-clr: var(--el-ALT); }
.element-pill[data-element=""]      { --pill-clr: var(--boba-orange); }

.element-pill.active {
  background: var(--pill-clr);
  border-color: transparent;
  color: #000;
  box-shadow: 0 0 12px rgba(from var(--pill-clr) r g b / 0.4);
}

/* Quick Add pill — sits in the results-bar next to the card count.
   Flips between "Tap to View" (muted, default) and "Quick Add"
   (orange, active). When active, tapping a grid card writes a
   user_cards row instead of opening the modal. */
.results-bar { display: flex; align-items: center; gap: 10px; }

.quick-add-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 100px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  color: var(--boba-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}
.quick-add-pill:hover { color: var(--boba-text-2); border-color: rgba(255,255,255,0.25); }
.quick-add-pill.active {
  background: rgba(255,77,0,0.15);
  border-color: rgba(255,77,0,0.5);
  color: var(--boba-orange);
}
.quick-add-icon { font-size: 0.78rem; }

/* Quick-add toast — brief success confirmation pinned to the bottom
   of the viewport. Fade-out handled via .quick-add-toast--fadeout. */
.quick-add-toast {
  position: fixed;
  left: 50%; bottom: 96px;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: var(--boba-surface, #0D0D1A);
  border: 1px solid rgba(76, 175, 80, 0.6);
  border-radius: 10px;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  color: #4CAF50;
  box-shadow: 0 6px 28px rgba(0,0,0,0.55);
  z-index: 9999;
  animation: quickAddIn 0.18s ease-out;
  pointer-events: none;
}
.quick-add-toast--error {
  border-color: rgba(192, 57, 43, 0.6);
  color: #E05B4F;
}
.quick-add-toast--fadeout {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
@keyframes quickAddIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* Showcase chips — WOBA + sport filters. Same pill shape as the weapon
   chips but tinted with bobaCyan so the two rows stay visually distinct. */
.showcase-pill {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 100px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  color: var(--boba-text-muted);
  white-space: nowrap;
  transition: all 0.15s;
}
.showcase-pill:hover { color: var(--boba-text-2); border-color: rgba(255,255,255,0.25); }
.showcase-pill.active {
  background: var(--boba-cyan);
  border-color: transparent;
  color: #000;
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.3);
}
.element-pill[data-element=""].active,
.element-pill[data-element="HEX"].active,
.element-pill[data-element="BRAWL"].active,
.element-pill[data-element="SUPER"].active { color: #fff; }
.element-pill[data-element="NONE"].active { color: var(--boba-text-2); }
.element-pill.active .element-pill-dot { background: rgba(0,0,0,0.3); }
.element-pill[data-element=""].active .element-pill-dot { background: rgba(255,255,255,0.4); }

/* Selects */
.filter-selects { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.filter-select {
  padding: 5px 28px 5px 10px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 6px;
  color: var(--boba-text-2);
  font-family: var(--font-body); font-size: 0.8rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237878A0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  min-width: 120px; max-width: 180px;
  transition: border-color 0.15s;
}
.filter-select:focus { outline: none; border-color: var(--boba-cyan); }
.filter-select option { background: var(--boba-surface-2); color: var(--boba-text); }

/* Power range */
.power-range-group {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
}
.filter-label-text {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  color: var(--boba-text-muted); letter-spacing: 0.1em;
  text-transform: uppercase;
}
.power-input {
  width: 64px; padding: 5px 8px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 6px;
  color: var(--boba-text-2);
  font-family: var(--font-mono); font-size: 0.8rem;
  text-align: center;
  transition: border-color 0.15s;
  /* Hide arrows */
  -moz-appearance: textfield;
}
.power-input::-webkit-outer-spin-button,
.power-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.power-input:focus { outline: none; border-color: var(--boba-orange); }
.power-range-sep { color: var(--boba-text-dim); font-family: var(--font-mono); font-size: 0.85rem; }

.power-presets { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.power-preset {
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 100px;
  border: 1px solid var(--boba-glass-border);
  color: var(--boba-text-muted);
  background: var(--boba-glass);
  transition: all 0.15s;
}
.power-preset:hover { color: var(--boba-text-2); border-color: rgba(255,255,255,0.25); }
.power-preset.active {
  background: var(--boba-orange); border-color: transparent; color: #fff;
  box-shadow: 0 0 10px var(--boba-orange-glow);
}

/* Results bar */
.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) 0 var(--sp-3);
}
.results-count {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-text-muted);
}

.filter-check-row {
  padding: 6px 0 2px;
}
.filter-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--boba-text-muted);
  cursor: pointer;
  user-select: none;
}
.filter-checkbox {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--boba-glass-border);
  border-radius: 4px;
  background: var(--boba-glass);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.filter-checkbox:checked {
  background: var(--boba-cyan);
  border-color: var(--boba-cyan);
}
.filter-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: 2px solid #000;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* ================================================================
   LOADING / EMPTY STATES
================================================================ */
.loading-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: 80px var(--sp-4);
  color: var(--boba-text-muted);
  font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.loading-spinner {
  width: 40px; height: 40px;
  border: 2px solid var(--boba-glass-border);
  border-top-color: var(--boba-cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  box-shadow: 0 0 12px var(--boba-cyan-glow);
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: 80px var(--sp-4);
  color: var(--boba-text-muted); font-size: 0.95rem;
}
.btn-ghost-sm {
  padding: 7px 18px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 6px; border: 1px solid var(--boba-glass-border);
  color: var(--boba-cyan);
  transition: background 0.15s, box-shadow 0.15s;
}
.btn-ghost-sm:hover {
  background: rgba(0,245,255,0.08);
  box-shadow: 0 0 8px var(--boba-cyan-glow);
}
/* Clear-all action row inside the filter panel */
.filter-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: var(--sp-2);
}
.filter-clear-all {
  color: var(--boba-orange);
  border-color: rgba(255,77,0,0.45);
}
.filter-clear-all:hover {
  background: rgba(255,77,0,0.08);
  box-shadow: 0 0 8px rgba(255,77,0,0.4);
}

/* ================================================================
   CARD GRID
================================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
}
@media (min-width: 480px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-4); }
}
/* Card-size overrides — wired by JS based on the user's
   localStorage choice (bp_findGridDensity_v1). These adjust the
   `minmax` MIN width so the auto-fill grid still fills the viewport
   — a wide desktop at "S" can render 8+ columns rather than the
   prior 1/2/3 absolute caps. */
body[data-find-density="s"] #view-search .card-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-2); }
body[data-find-density="m"] #view-search .card-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
body[data-find-density="l"] #view-search .card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }

/* ----------------------------------------------------------------
   POPOVER MENU (WEB-DESIGN.md §13 — adopt Popover API)
   Uses native CSS Nesting (Baseline 2024) per §13 ADOPT — see
   WEB-DESIGN.md §15 P1 #6. Replaces the hand-rolled dropdown +
   click-outside pattern with a transient `<div popover="auto">`
   the browser owns (top layer, ESC dismiss, focus return).
---------------------------------------------------------------- */
.popover-menu {
  /* Native popover defaults already include border + padding;
     we override to match the BOBA dark glass aesthetic. */
  background: var(--boba-surface, #0D0D1A);
  border: 1px solid var(--boba-glass-border, rgba(255,255,255,0.12));
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  max-width: 320px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  margin: 0;  /* override <div popover> default centering */
  color: var(--boba-text-primary, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-family: var(--font-mono, monospace);

  & .popover-menu-title {
    padding: 8px 12px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--boba-text-muted, rgba(255,255,255,0.5));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 4px;
  }

  & .popover-menu-item {
    width: 100%;
    display: flex; flex-direction: column; gap: 2px;
    align-items: flex-start;
    background: transparent;
    color: inherit;
    border: none;
    padding: 9px 12px;
    border-radius: 6px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background 0.12s;

    &:hover, &:focus-visible {
      background: rgba(0,245,255,0.1);
      outline: none;
    }
    &:active { background: rgba(0,245,255,0.18); }

    & .popover-menu-label {
      font-size: 0.85rem;
      font-weight: 600;
    }
    & .popover-menu-sublabel {
      font-size: 0.7rem;
      color: var(--boba-text-muted, rgba(255,255,255,0.5));
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
  }

  /* Native popover ::backdrop is invisible by default — that's fine
     for a menu (clicking outside dismisses without a scrim). */
  &::backdrop {
    background: transparent;
  }
}

/* ----------------------------------------------------------------
   VIEW TRANSITIONS (WEB-DESIGN.md §13 — adopt View Transitions API)
   Wraps every showView() in document.startViewTransition so the
   browser cross-fades old → new instead of cutting hard. CSS here
   tunes the timing + opts out under prefers-reduced-motion (the JS
   side also short-circuits, but the @media is a belt-and-suspenders
   guarantee that the browser doesn't animate the root either).
---------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* Card grid → modal hero zoom — when a cell has the
   data-zooming-id attribute set (by the click handler in
   buildCardElement), pair it with the modal hero image carrying the
   matching view-transition-name so the browser morphs them. The
   name is set inline via JS just before the transition starts and
   cleared after; CSS only describes the animation feel. */
::view-transition-old(card-hero),
::view-transition-new(card-hero) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  animation-fill-mode: both;
}

/* ----------------------------------------------------------------
   MULTI-SELECT — selected card state, marquee rect, action toolbar
---------------------------------------------------------------- */
.card-item--selected {
  outline: 2px solid var(--boba-cyan, #00F5FF);
  outline-offset: -2px;
  box-shadow: 0 0 0 1px rgba(0,245,255,0.35), 0 0 12px rgba(0,245,255,0.25);
}
.card-item--selected::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--boba-cyan, #00F5FF);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.card-item { position: relative; }  /* in case not already set — required for ::after */

/* Card grid never allows native text selection or image drag — both
   compete with the marquee gesture. Cards aren't meant to be
   text-copied; their data lives on the modal/detail surfaces. */
.card-grid, .card-grid * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.card-grid img { -webkit-user-drag: none; user-drag: none; }

/* "Select" pill — cyan accent when active so it reads distinctly
   from the orange Quick Add pill (different verbs, different states). */
.multiselect-toggle.active {
  background: rgba(0,245,255,0.15) !important;
  border-color: rgba(0,245,255,0.5) !important;
  color: var(--boba-cyan, #00F5FF) !important;
}

.marquee-rect {
  position: fixed;
  border: 1px solid var(--boba-cyan, #00F5FF);
  background: rgba(0,245,255,0.08);
  pointer-events: none;
  z-index: 1500;
}

.multiselect-toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-2) var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(0,245,255,0.10);
  border: 1px solid rgba(0,245,255,0.35);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}
.multiselect-toolbar[hidden] { display: none; }
.multiselect-count {
  font-size: 0.78rem; font-weight: 700;
  color: var(--boba-cyan, #00F5FF);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.multiselect-actions {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-left: auto;
}
.multiselect-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--boba-cyan, #00F5FF);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}
.multiselect-action:hover { filter: brightness(1.1); }
.multiselect-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  color: var(--boba-text-muted, #888);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.multiselect-clear:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

/* Inline toast for bulk-add confirmation (used when no other toast
   helper is present on the page). */
.app-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 16px);
  padding: 10px 16px;
  background: rgba(0,0,0,0.9);
  border: 1px solid rgba(0,245,255,0.4);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-mono); font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 2500;
}
.app-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Column-count picker (segmented-style) */
.grid-cols-picker {
  display: inline-flex; gap: 2px;
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.grid-cols-btn {
  background: transparent; border: none;
  padding: 4px 10px; min-width: 28px;
  color: var(--boba-text-muted);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  cursor: pointer; border-radius: 4px;
}
.grid-cols-btn:hover { color: var(--boba-text-primary); }
.grid-cols-btn.active {
  background: var(--boba-cyan); color: #000;
}

/* ---- Card Item ---- */
.card-item {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  /* Explicit z-index prevents hover-triggered transforms from creating an
     ambiguous stacking context that Safari can misorder vs the fixed header */
  z-index: 0;
  transition: transform 0.2s cubic-bezier(0.34,1.3,0.64,1),
              box-shadow 0.2s ease,
              border-color 0.2s ease;
  /* Container query target — descendants react to THIS card's
     rendered width (not the viewport). Per WEB-DESIGN.md §13 ADOPT,
     this lets the same .card-item render correctly in the search
     grid (110-220px depending on density), the public-collection
     grid, and any future Wall view (~220px) without forks. */
  container-type: inline-size;
  container-name: card-cell;
}
.card-item:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: var(--card-glow-clr, rgba(255,255,255,0.2));
  box-shadow: 0 10px 30px rgba(0,0,0,0.5),
              0 0 20px var(--card-glow, rgba(255,77,0,0.15));
}
.card-item:focus-visible { outline: 2px solid var(--boba-cyan); outline-offset: 2px; }

/* Element glow on hover */
.card-item[data-element="FIRE"]  { --card-glow: var(--el-FIRE-glow);  --card-glow-clr: rgba(255,77,0,0.4); }
.card-item[data-element="ICE"]   { --card-glow: var(--el-ICE-glow);   --card-glow-clr: rgba(0,191,255,0.4); }
.card-item[data-element="HEX"]   { --card-glow: var(--el-HEX-glow);   --card-glow-clr: rgba(155,48,255,0.4); }
.card-item[data-element="STEEL"] { --card-glow: var(--el-STEEL-glow); --card-glow-clr: rgba(155,176,200,0.3); }
.card-item[data-element="BRAWL"] { --card-glow: var(--el-BRAWL-glow); --card-glow-clr: rgba(217,48,32,0.4); }
.card-item[data-element="GLOW"]  { --card-glow: var(--el-GLOW-glow);  --card-glow-clr: rgba(255,215,0,0.4); }
.card-item[data-element="GUM"]   { --card-glow: var(--el-GUM-glow);   --card-glow-clr: rgba(255,105,180,0.4); }
.card-item[data-element="SUPER"] { --card-glow: var(--el-SUPER-glow); --card-glow-clr: rgba(255,0,255,0.4); }

/* Element bottom bar — color indicator */
.card-element-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--card-el-clr, var(--el-NONE));
}
.card-item[data-element="FIRE"]  .card-element-bar { background: var(--el-FIRE); box-shadow: 0 0 8px var(--el-FIRE); }
.card-item[data-element="ICE"]   .card-element-bar { background: var(--el-ICE);  box-shadow: 0 0 8px var(--el-ICE); }
.card-item[data-element="HEX"]   .card-element-bar { background: var(--el-HEX);  box-shadow: 0 0 8px var(--el-HEX); }
.card-item[data-element="STEEL"] .card-element-bar { background: var(--el-STEEL); }
.card-item[data-element="BRAWL"] .card-element-bar { background: var(--el-BRAWL); box-shadow: 0 0 8px var(--el-BRAWL); }
.card-item[data-element="GLOW"]  .card-element-bar { background: var(--el-GLOW);  box-shadow: 0 0 8px var(--el-GLOW); }
.card-item[data-element="GUM"]   .card-element-bar { background: var(--el-GUM);   box-shadow: 0 0 6px var(--el-GUM); }
.card-item[data-element="SUPER"] .card-element-bar { background: linear-gradient(90deg, #FF00FF, #00F5FF); box-shadow: 0 0 8px rgba(255,0,255,0.6); }
.card-item[data-element="NONE"]  .card-element-bar { background: var(--el-NONE); }

/* Card image */
.card-img-wrap {
  position: relative;
  aspect-ratio: 5 / 7;
  background: var(--boba-near-black);
  overflow: hidden;
}

.card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.card-item:hover .card-img { transform: scale(1.06); }

/* Treatment ribbon overlay on card image */
.card-treatment-ribbon {
  position: absolute; top: 8px; right: -2px;
  padding: 3px 8px 3px 10px;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  clip-path: polygon(8px 0%, 100% 0%, 100% 100%, 0% 100%);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  z-index: 2;
}

/* Treatment ribbon colors */
.tf-colosseum    .card-treatment-ribbon { background: linear-gradient(90deg,#5C1A00,#A0522D); color: #FFD5B0; }
.tf-battlefoil   .card-treatment-ribbon { background: linear-gradient(90deg,#8B6914,#C9A227); color: #000; }
.tf-blizzard     .card-treatment-ribbon { background: linear-gradient(90deg,#004080,#00BFFF); color: #fff; }
.tf-superfoil    .card-treatment-ribbon { background: linear-gradient(90deg,#ff006e,#8b00ff,#00f5ff); color: #fff; }
.tf-inspired     .card-treatment-ribbon { background: linear-gradient(90deg,#3D0066,#9B30FF); color: #fff; }
.tf-inspired-m   .card-treatment-ribbon { background: linear-gradient(90deg,#3D3D3D,#9B30FF); color: #fff; }
.tf-logofoil     .card-treatment-ribbon { background: linear-gradient(90deg,#444,#C0C0C0,#E8E8E8); color: #000; }
.tf-blast        .card-treatment-ribbon { background: linear-gradient(90deg,#CC2200,#FF4D00); color: #fff; }
.tf-paper        .card-treatment-ribbon { background: #E8D5A0; color: #3B2800; }
.tf-base         .card-treatment-ribbon { display: none; }
.tf-special      .card-treatment-ribbon { background: linear-gradient(90deg,rgba(139,0,255,0.6),rgba(0,245,255,0.6)); color: #fff; }

/* Card info */
.card-info {
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-3) + 3px); /* extra for element bar */
}
.card-number {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  color: var(--boba-text-dim); letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.card-name {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  color: var(--boba-text-2); line-height: 1.2; margin-bottom: var(--sp-2);
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card-meta {
  display: flex; align-items: center; justify-content: space-between;
}
.card-power {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  color: var(--boba-text-2);
}

/* Container queries — scale typography to the cell's own width.
   Defaults above target ~155px ("M" density). Overrides below
   handle "S" (~110px) and "L" (~220px+) without media queries.
   See WEB-DESIGN.md §13 + §15 P1 #5. */
@container card-cell (max-width: 130px) {
  .card-info { padding: 6px 8px 9px; }
  .card-number { font-size: 0.55rem; margin-bottom: 1px; }
  .card-name {
    font-size: 0.72rem;
    -webkit-line-clamp: 1;
    margin-bottom: 4px;
  }
  .card-power { font-size: 0.7rem; }
  .card-treatment-ribbon { font-size: 0.5rem; padding: 2px 6px 2px 8px; max-width: 70px; }
}
@container card-cell (min-width: 200px) {
  .card-info { padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + 4px); }
  .card-number { font-size: 0.7rem; }
  .card-name { font-size: 0.95rem; }
  .card-power { font-size: 0.95rem; }
  .card-treatment-ribbon { font-size: 0.65rem; max-width: 110px; }
}

/* ================================================================
   ELEMENT BADGE
================================================================ */
.element-badge {
  display: inline-block; padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6;
}
.element-badge[data-element="FIRE"]  { background: var(--el-FIRE);  color: #fff; }
.element-badge[data-element="ICE"]   { background: var(--el-ICE);   color: #000; }
.element-badge[data-element="HEX"]   { background: var(--el-HEX);   color: #fff; }
.element-badge[data-element="STEEL"] { background: var(--el-STEEL); color: #000; }
.element-badge[data-element="BRAWL"] { background: var(--el-BRAWL); color: #fff; }
.element-badge[data-element="GLOW"]  { background: var(--el-GLOW);  color: #000; }
.element-badge[data-element="GUM"]   { background: var(--el-GUM);   color: #000; }
.element-badge[data-element="SUPER"] { background: var(--el-SUPER); color: #fff; }
.element-badge[data-element="NONE"]   { background: var(--el-NONE);   color: var(--boba-text-2); }
.element-badge[data-element="ALT"]    { background: var(--el-ALT);    color: #000; }
.element-badge[data-element="SEALED"] { background: var(--boba-orange); color: #fff; }

/* Card-type badges for Play and Hot Dog cards */
.card-type-badge {
  display: inline-block; padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.6;
}
.play-badge   { background: rgba(139,0,255,0.18); color: #b36bff; border: 1px solid rgba(139,0,255,0.3); }
.bonus-badge  { background: rgba(0,245,255,0.12); color: #00c8d4; border: 1px solid rgba(0,245,255,0.25); }
.hotdog-badge { background: rgba(76,175,80,0.15); color: #7ecb82; border: 1px solid rgba(76,175,80,0.3); }
.play-cost {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  color: var(--boba-cyan);
}
.play-cost.free { color: #7ecb82; }
/* Modal play-cost display (mirrors .modal-power-display) */
.modal-cost-display {
  display: flex; align-items: baseline; gap: 8px; margin: 2px 0;
}
.cost-label-txt {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--boba-text-3); text-transform: uppercase;
}
.cost-number {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--boba-cyan);
}
.cost-number.free { color: #7ecb82; }
.cost-unit {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--boba-text-3);
}
/* Hot Dog modal header */
.modal-hotdog-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  background: rgba(76,175,80,0.10); border: 1px solid rgba(76,175,80,0.25);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; color: #7ecb82; text-transform: uppercase;
}

/* ================================================================
   MISSING IMAGE PLACEHOLDER
================================================================ */
.card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 8px,
      rgba(255,77,0,0.035) 8px, rgba(255,77,0,0.035) 16px),
    var(--boba-near-black);
  position: relative; overflow: hidden;
}

/* Element-tinted diagonal stripe */
.card-item[data-element="ICE"]   .card-img-placeholder { background:
  repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,191,255,0.04) 8px, rgba(0,191,255,0.04) 16px),
  var(--boba-near-black); }
.card-item[data-element="HEX"]   .card-img-placeholder { background:
  repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(155,48,255,0.04) 8px, rgba(155,48,255,0.04) 16px),
  var(--boba-near-black); }
.card-item[data-element="GLOW"]  .card-img-placeholder { background:
  repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,215,0,0.04) 8px, rgba(255,215,0,0.04) 16px),
  var(--boba-near-black); }
.card-item[data-element="GUM"]   .card-img-placeholder { background:
  repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,105,180,0.04) 8px, rgba(255,105,180,0.04) 16px),
  var(--boba-near-black); }
.card-item[data-element="SUPER"] .card-img-placeholder { background:
  repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,0,255,0.04) 8px, rgba(255,0,255,0.04) 16px),
  var(--boba-near-black); }

.placeholder-brand {
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,77,0,0.4);
  text-shadow: 0 0 10px rgba(255,77,0,0.2);
}
.placeholder-status {
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,77,0,0.55);
  padding: 2px 6px;
  border: 1px solid rgba(255,77,0,0.25);
  border-radius: 2px;
}

/* Modal-size placeholder — fills the full .modal-art panel */
.modal-img-placeholder {
  /* align-self: stretch makes this fill the full height of .modal-art even
     when the parent has align-items: center. width: 100% fills the width. */
  align-self: stretch;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 12px,
      rgba(255,77,0,0.04) 12px, rgba(255,77,0,0.04) 24px),
    var(--boba-near-black);
}
.modal-img-placeholder .placeholder-brand {
  font-size: 1.1rem; letter-spacing: 0.25em;
  color: rgba(255,77,0,0.5);
  text-shadow: 0 0 20px rgba(255,77,0,0.3);
}
.modal-img-placeholder .placeholder-card-num {
  font-family: var(--font-mono); font-size: 0.8rem;
  color: rgba(255,77,0,0.4);
  letter-spacing: 0.1em;
}
.modal-img-placeholder .placeholder-status { font-size: 0.65rem; }

/* ================================================================
   LOAD MORE SENTINEL
================================================================ */
.load-sentinel { height: 80px; }

/* ================================================================
   CARD DETAIL MODAL
================================================================ */
/* Card-modal markup is now <dialog> per WEB-DESIGN.md §13 — but
   .modal-overlay class still styles non-dialog modals (auth,
   add-collection, etc.) until they migrate. The selectors below
   handle BOTH cases:
   - <dialog class="modal-overlay">  → ::backdrop owns the scrim;
     dialog itself is the centered shell. Reset native dialog
     borders/padding so it inherits our flex layout.
   - <div class="modal-overlay" hidden> → legacy fallback. */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.18s ease;
}
.modal-overlay[hidden] { display: none; }
/* CRITICAL: closed <dialog class="modal-overlay"> must be hidden.
   The browser uses [open], not [hidden], for native dialogs — so
   the .modal-overlay { display: flex } rule above would otherwise
   force every closed dialog to render as a full-viewport blurred
   overlay. (This shipped briefly between de5aeb8 and the next
   commit; users saw "every tab is blurred" because three closed
   dialogs were all painting their backdrop-filter at once.) */
dialog.modal-overlay:not([open]) { display: none; }

/* When .modal-overlay is a <dialog>, the browser adds default
   margins/borders/max-width/max-height we don't want — reset to
   match the legacy <div> overlay shape. */
dialog.modal-overlay {
  width: 100vw; height: 100vh;
  max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0;
  background: transparent;  /* the ::backdrop carries the scrim */
  backdrop-filter: none;     /* same — no double-blur on the dialog itself */
  -webkit-backdrop-filter: none;
  border: none;
  color: inherit;
}
dialog.modal-overlay::backdrop {
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.18s ease;
}
/* The flex layout that centers the inner .modal lives on the
   dialog; restate so the native dialog inherits it cleanly. */
dialog.modal-overlay[open] {
  display: flex; align-items: flex-end; justify-content: center;
  background: transparent;  /* still — only ::backdrop dims */
}
@media (prefers-reduced-transparency: reduce) {
  dialog.modal-overlay::backdrop {
    background: rgba(0,0,0,0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: var(--sp-6); }
}

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

.modal {
  position: relative;
  width: 100%; max-width: 800px;
  max-height: 94dvh;
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 16px 16px 0 0;
  overflow-y: auto; overscroll-behavior: contain;
  animation: slideUp 0.22s cubic-bezier(0.34,1.2,0.64,1);
}
@media (min-width: 640px) {
  .modal { border-radius: 16px; max-height: 90dvh; animation: scaleIn 0.2s ease; }
}

@keyframes slideUp { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--boba-glass-border);
  border-radius: 50%; color: var(--boba-text-muted); z-index: 10;
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--boba-text); background: var(--boba-glass-hover); }

/* Nav buttons use position: fixed so they are always viewport-anchored
   and never scroll with modal content (position: absolute inside an
   overflow: auto ancestor can scroll on Safari). z-index: 501 places
   them above the modal overlay (z-index: 500). */
.modal-nav {
  position: fixed;
  /* Mobile: bottom-sheet modal starts ~18dvh from top; art panel is 52dvh
     → art center ≈ 44dvh. Portrait card never fills full width so buttons
     land in the black letterbox areas beside the card image. */
  top: 44dvh; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.65); border: 1px solid var(--boba-glass-border);
  border-radius: 50%; color: var(--boba-text-muted); z-index: 501;
  transition: color 0.15s, background 0.15s;
}
.modal-nav:hover { color: var(--boba-text); background: var(--boba-glass-hover); }
.modal-nav-prev { left: var(--sp-2); }
.modal-nav-next { right: var(--sp-2); }

@media (min-width: 640px) {
  /* Centered modal — vertically center buttons in the viewport */
  .modal-nav { top: 50%; transform: translateY(-50%); }
  .modal-nav-prev { left: var(--sp-3); }
  .modal-nav-next { right: var(--sp-3); }
}
@media (min-width: 896px) {
  /* Wide enough for buttons to sit entirely outside the 800px modal.
     Modal occupies [50% − 400px, 50% + 400px]; buttons are 36px wide.
     Button right edge = 50% − 408px → button left: calc(50% − 444px).
     Gives an 8px gap between button and modal edge. */
  .modal-nav-prev { left: calc(50% - 444px); }
  .modal-nav-next { right: calc(50% - 444px); }
}

/* ---- Modal Layout ---- */
.modal-layout {
  display: flex; flex-direction: column;
}
@media (min-width: 640px) { .modal-layout { flex-direction: row; } }

/* Art panel */
.modal-art {
  flex-shrink: 0;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  touch-action: none; /* we handle all touch ourselves */
}
@media (max-width: 639px) {
  /* Explicit height gives the flex container a constrained box for centering */
  .modal-art { height: 52dvh; }
}
@media (min-width: 640px) {
  /* stretch: art panel fills the modal height so align-items: center can
     vertically center the card image. max-height: 90dvh caps it at the
     viewport so the panel never extends below what's visible when sticky. */
  .modal-art { width: 260px; align-self: stretch; max-height: 90dvh; position: sticky; top: 0; }
}


/* Mobile: auto-sized so the 52dvh flex container's align-items: center
   actually has something to center (image is smaller than the container). */
.modal-card-img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
/* Desktop: art panel stretches to modal height, so the image must fill it
   (width/height 100%) and object-fit: contain scales + centers within. */
@media (min-width: 640px) {
  .modal-card-img { width: 100%; height: 100%; max-height: 90dvh; }
}
/* Cursor states during zoom */
.modal-art.can-pan  { cursor: grab; }
.modal-art.dragging { cursor: grabbing; }

/* ---- Element-reactive detail panel ---- */
.modal-details {
  flex: 1; min-width: 0;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: relative;
}

/* Element accent gradient behind detail content */
.modal-details::before {
  content: ''; position: absolute; inset: 0;
  background: var(--modal-el-gradient, transparent);
  pointer-events: none; border-radius: 0 0 16px 0;
  opacity: 0.6;
}
@media (max-width: 639px) {
  .modal-details::before { border-radius: 0; }
}

/* Per-element gradients in modal */
.modal-layout[data-element="FIRE"]  { --modal-el-gradient: linear-gradient(135deg,rgba(255,77,0,0.07) 0%,transparent 60%); }
.modal-layout[data-element="ICE"]   { --modal-el-gradient: linear-gradient(135deg,rgba(0,191,255,0.07) 0%,transparent 60%); }
.modal-layout[data-element="HEX"]   { --modal-el-gradient: linear-gradient(135deg,rgba(155,48,255,0.07) 0%,transparent 60%); }
.modal-layout[data-element="STEEL"] { --modal-el-gradient: linear-gradient(135deg,rgba(155,176,200,0.05) 0%,transparent 60%); }
.modal-layout[data-element="BRAWL"] { --modal-el-gradient: linear-gradient(135deg,rgba(217,48,32,0.07) 0%,transparent 60%); }
.modal-layout[data-element="GLOW"]  { --modal-el-gradient: linear-gradient(135deg,rgba(255,215,0,0.06) 0%,transparent 60%); }
.modal-layout[data-element="GUM"]   { --modal-el-gradient: linear-gradient(135deg,rgba(255,105,180,0.07) 0%,transparent 60%); }
.modal-layout[data-element="SUPER"] { --modal-el-gradient: linear-gradient(135deg,rgba(255,0,255,0.07) 0%,transparent 60%); }

/* Badges row */
.modal-badges { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Uniform badge height for all badge types in the modal */
.element-badge-lg,
.set-badge,
.treatment-banner {
  height: 28px;
  padding: 0 12px;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Set badge ---- */
.set-badge {
  border-radius: 6px;
}
.set-alpha     { background: rgba(255,77,0,0.15);    color: #FF7744; border: 1px solid rgba(255,77,0,0.35); }
.set-griffey   { background: rgba(61,140,52,0.15);   color: #5CC94A; border: 1px solid rgba(61,140,52,0.35); }
.set-champions { background: rgba(201,162,39,0.15);  color: #FFD700; border: 1px solid rgba(201,162,39,0.35); }
.set-starter   { background: rgba(74,144,217,0.15);  color: #70BEFF; border: 1px solid rgba(74,144,217,0.35); }
.set-special   { background: rgba(139,0,255,0.15);   color: #BB55FF; border: 1px solid rgba(139,0,255,0.35); }
.set-other     { background: rgba(120,120,160,0.12); color: #9090B0; border: 1px solid rgba(120,120,160,0.2); }

/* ---- Treatment banner ---- */
.treatment-banner {
  position: relative; overflow: hidden;
}
/* Treatment banner specific styles */
.tf-colosseum    .treatment-banner,
.treatment-banner.tf-colosseum  { background: linear-gradient(90deg,#2A0A00,#A0522D,#D4956A,#A0522D,#2A0A00); color: #FFE5CC; text-shadow: 0 1px 0 rgba(160,82,45,0.4); }
.tf-battlefoil   .treatment-banner,
.treatment-banner.tf-battlefoil { background: linear-gradient(90deg,#5C3D00,#C9A227,#F5D68F,#C9A227,#5C3D00); color: #1A0F00; text-shadow: 0 1px 0 rgba(255,220,100,0.4); }
.tf-blizzard     .treatment-banner,
.treatment-banner.tf-blizzard   { background: linear-gradient(90deg,#001a40,#0055AA,#00BFFF,#0055AA,#001a40); color: #D0F5FF; text-shadow: 0 0 8px rgba(0,191,255,0.6); }
.tf-superfoil    .treatment-banner,
.treatment-banner.tf-superfoil  { background: linear-gradient(90deg,#ff006e,#ff4d00,#ffd700,#00f5ff,#8b00ff); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.tf-inspired     .treatment-banner,
.treatment-banner.tf-inspired   { background: linear-gradient(90deg,#200040,#8B00FF,#00C8A0); color: #E0C0FF; text-shadow: 0 0 6px rgba(155,48,255,0.5); }
.tf-inspired-m   .treatment-banner,
.treatment-banner.tf-inspired-m { background: linear-gradient(90deg,#1A1A1A,#555,#9B30FF,#555,#1A1A1A); color: #C8B0FF; }
.tf-logofoil     .treatment-banner,
.treatment-banner.tf-logofoil   { background: linear-gradient(90deg,#222,#666,#D0D0D0,#E8E8E8,#D0D0D0,#666,#222); color: #000; }
.tf-blast        .treatment-banner,
.treatment-banner.tf-blast      { background: linear-gradient(90deg,#660000,#CC2200,#FF4D00,#FF8C00); color: #FFF0E0; text-shadow: 0 0 6px rgba(255,77,0,0.5); }
.tf-paper        .treatment-banner,
.treatment-banner.tf-paper      { background: #E8D5A0; color: #3B2800; border: 1px solid #C8A050; }
.tf-base         .treatment-banner,
.treatment-banner.tf-base       { background: var(--boba-glass); color: var(--boba-text-muted); border: 1px solid var(--boba-glass-border); }
.tf-special      .treatment-banner,
.treatment-banner.tf-special    { background: linear-gradient(90deg,rgba(139,0,255,0.3),rgba(0,245,255,0.3)); color: var(--boba-text-2); border: 1px solid rgba(139,0,255,0.3); }

.inspired-ink-badge {
  display: inline-block; padding: 3px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, #FFD700, #FF4D00);
  color: #000;
}

/* ---- Modal title block ---- */
.modal-card-name {
  font-family: var(--font-display); font-size: clamp(1.3rem,4vw,1.8rem); font-weight: 800;
  line-height: 1.1; color: var(--boba-text);
  letter-spacing: 0.02em;
}
.modal-card-number {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  color: var(--boba-text-muted); margin-top: 4px;
  letter-spacing: 0.06em;
}

/* ---- Power display ---- */
.modal-power-display {
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.power-label-txt {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  color: var(--boba-text-muted); letter-spacing: 0.15em;
}
.power-number {
  font-family: var(--font-mono); font-size: 3rem; font-weight: 700; line-height: 1;
  color: var(--modal-el-color, var(--boba-orange));
  text-shadow: 0 0 20px var(--modal-el-shadow, var(--boba-orange-glow));
}
.modal-layout[data-element="FIRE"]  { --modal-el-color: #FF6633; --modal-el-shadow: rgba(255,77,0,0.5); }
.modal-layout[data-element="ICE"]   { --modal-el-color: #33CCFF; --modal-el-shadow: rgba(0,191,255,0.5); }
.modal-layout[data-element="HEX"]   { --modal-el-color: #BB55FF; --modal-el-shadow: rgba(155,48,255,0.5); }
.modal-layout[data-element="STEEL"] { --modal-el-color: #B0C8E0; --modal-el-shadow: rgba(155,176,200,0.3); }
.modal-layout[data-element="BRAWL"] { --modal-el-color: #FF4433; --modal-el-shadow: rgba(217,48,32,0.5); }
.modal-layout[data-element="GLOW"]  { --modal-el-color: #FFD700; --modal-el-shadow: rgba(255,215,0,0.5); }
.modal-layout[data-element="GUM"]   { --modal-el-color: #FF77C0; --modal-el-shadow: rgba(255,105,180,0.5); }
.modal-layout[data-element="SUPER"] { --modal-el-color: #FF55FF; --modal-el-shadow: rgba(255,0,255,0.5); }

/* ---- Stats grid ---- */
.modal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--boba-glass-border);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  overflow: hidden;
}
.stat-cell {
  background: var(--boba-surface-2);
  padding: var(--sp-3);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 62px;
}
.stat-cell.full { grid-column: 1 / -1; min-height: 62px; }
.stat-label-sm {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--boba-text-muted);
  margin-bottom: 4px; flex-shrink: 0;
}
.stat-val {
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 500;
  color: var(--boba-text-2); line-height: 1.3;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* Full-width cells (athlete, ability) can wrap */
.stat-cell.full .stat-val {
  white-space: normal; text-overflow: unset; overflow: visible;
}
.stat-val.ability {
  font-style: italic; color: var(--boba-cyan); line-height: 1.45;
}

/* ---- Hero associations ---- */
.hero-associations {
  border-top: 1px solid var(--boba-glass-border);
  padding-top: var(--sp-4);
}
.hero-cards {
  display: flex; flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.hero-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3);
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
}
.hero-card-name {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 700;
  color: var(--boba-text);
}
.hero-card-athlete {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-text-muted);
}
.hero-association-note {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--boba-text-muted); line-height: 1.5;
  margin-bottom: var(--sp-2);
}

/* ---- Section label ---- */
.section-label {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--boba-text-muted);
}

/* ---- Pricing ---- */
.pricing-section {
  border-top: 1px solid var(--boba-glass-border);
  padding-top: var(--sp-4);
}
.pricing-note {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-text-dim); margin-top: var(--sp-2);
}

/* ---- Sealed Products ---- */
.sealed-highlights { margin-top: var(--sp-4); }
.sealed-highlights-list {
  list-style: none; padding: 0; margin: var(--sp-2) 0 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.sealed-highlight {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-text-2); padding-left: 1rem; position: relative;
}
.sealed-highlight::before {
  content: '·'; position: absolute; left: 0;
  color: var(--boba-orange); font-weight: 700;
}
.sealed-links {
  display: flex; gap: var(--sp-3); margin-top: var(--sp-4);
}
.btn-ebay-sealed,
.btn-radish-sealed {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  flex: 1; padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background 0.15s;
}
.btn-ebay-sealed {
  background: rgba(255,77,0,0.12); color: var(--boba-orange);
  border: 1px solid rgba(255,77,0,0.4);
}
.btn-ebay-sealed:hover { background: rgba(255,77,0,0.22); }
.btn-radish-sealed {
  background: rgba(0,245,255,0.08); color: var(--boba-cyan);
  border: 1px solid rgba(0,245,255,0.3);
}
.btn-radish-sealed:hover { background: rgba(0,245,255,0.16); }

/* ================================================================
   M2 — AUTH MODAL
================================================================ */

/* Reuse .modal-overlay for auth modal — same backdrop.
   Auth modal box is narrower and centered. */
.auth-modal-box {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 94dvh;
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 16px 16px 0 0;
  overflow-y: auto; overscroll-behavior: contain;
  animation: slideUp 0.22s cubic-bezier(0.34,1.2,0.64,1);
}
@media (min-width: 640px) {
  .auth-modal-box { border-radius: 16px; animation: scaleIn 0.2s ease; }
}

.auth-modal-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}

/* Wordmark */
.auth-wordmark {
  font-family: var(--font-arena);
  font-size: 2rem; line-height: 1; letter-spacing: 0.02em;
}
.auth-wordmark-boba { color: var(--boba-orange); }
.auth-wordmark-pb   { color: var(--boba-text); }

.auth-tagline {
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--boba-text-muted); text-align: center;
  margin-top: calc(-1 * var(--sp-2));
}

/* Apple sign-in button */
.btn-apple-signin {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  width: 100%; height: 50px;
  background: #fff; color: #000;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700;
  border-radius: 10px;
  transition: background 0.15s;
}
.btn-apple-signin:hover { background: #e8e8e8; }

/* Discord sign-in button */
.btn-discord-signin {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  width: 100%; height: 50px;
  background: #5865F2; color: #fff;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700;
  border-radius: 10px;
  transition: background 0.15s;
  margin-top: var(--sp-2);
}
.btn-discord-signin:hover { background: #4752C4; }

/* "or" divider */
.auth-divider {
  display: flex; align-items: center; width: 100%;
  gap: var(--sp-3);
  color: var(--boba-text-dim);
  font-family: var(--font-mono); font-size: 0.72rem;
}
.auth-divider::before,
.auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--boba-glass-border);
}

/* Mode tabs */
.auth-mode-tabs {
  display: flex; width: 100%;
  background: var(--boba-surface-2);
  border-radius: 10px; overflow: hidden;
  padding: 3px;
}
.auth-mode-tab {
  flex: 1; height: 38px;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--boba-text-muted);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.auth-mode-tab.active {
  background: var(--boba-orange); color: #000; font-weight: 700;
}

/* Form fields */
.auth-form { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }

.form-field { display: flex; flex-direction: column; gap: var(--sp-1); }

.form-label {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.15em; color: var(--boba-text-muted);
}

.form-input {
  width: 100%; height: 44px;
  padding: 0 var(--sp-3);
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.9rem;
  color: var(--boba-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color: var(--boba-orange);
  box-shadow: 0 0 0 2px var(--boba-orange-glow);
  outline: none;
}
.form-input::placeholder { color: var(--boba-text-dim); }

.form-select { cursor: pointer; }

.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}

/* Primary button */
.btn-primary {
  width: 100%; height: 50px;
  background: var(--boba-orange); color: #000;
  font-family: var(--font-display); font-size: 1rem;
  border-radius: 10px;
  transition: filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Error / info messages */
.auth-error, .add-error {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: #ff6b6b; text-align: center;
  padding: var(--sp-2) 0;
}
.auth-info {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--boba-cyan); text-align: center;
  padding: var(--sp-2) 0;
}

/* Nav "signed-in" indicator */
.sidebar-nav-item.signed-in::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--boba-orange);
  border-radius: 50%;
  margin-left: var(--sp-2);
  vertical-align: middle;
}

/* ================================================================
   M2 — ADD TO COLLECTION SHEET (same overlay, wider box)
================================================================ */

.add-collection-box {
  max-width: 480px;
}

.add-sheet-inner {
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}

.add-sheet-title {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--boba-text); margin-bottom: var(--sp-3);
}

.add-card-label {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.add-card-name {
  font-family: var(--font-display); font-size: 1rem; color: var(--boba-text);
}
.add-card-num {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--boba-text-muted);
}

.add-existing-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,77,0,0.08);
  border: 1px solid rgba(255,77,0,0.2);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-4);
}

.add-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }

/* ================================================================
   M2 — CARD MODAL COLLECTION ACTION
================================================================ */

.modal-collection-action {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--boba-glass-border);
}

.btn-collection-add {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1; height: 44px;
  padding: 0 var(--sp-4);
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-orange);
  transition: background 0.15s, border-color 0.15s;
}
.btn-collection-add:hover {
  background: rgba(255,77,0,0.1);
  border-color: rgba(255,77,0,0.3);
}

.btn-share-card {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-3);
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-cyan);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn-share-card:hover {
  background: rgba(0,245,255,0.08);
  border-color: rgba(0,245,255,0.3);
}

/* ---- Mod edit button (in modal) ---- */
.mod-edit-section {
  padding: var(--sp-2) 0 0;
}
.btn-mod-edit {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(0,245,255,0.07);
  border: 1px solid rgba(0,245,255,0.25);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--boba-cyan);
  transition: background 0.15s, border-color 0.15s;
}
.btn-mod-edit:hover {
  background: rgba(0,245,255,0.14);
  border-color: rgba(0,245,255,0.45);
}

/* ---- Mod edit overlay / dialog ---- */
.mod-edit-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.mod-edit-panel {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 12px;
  width: 100%; max-width: 480px;
  max-height: 85dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mod-edit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--boba-glass-border);
}
.mod-edit-title {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--boba-cyan); letter-spacing: 0.04em;
}
.mod-edit-close {
  font-size: 1.4rem; line-height: 1;
  color: var(--boba-text-muted);
  background: none; border: none; cursor: pointer;
  padding: 0 4px;
}
.mod-edit-body {
  overflow-y: auto; flex: 1;
  padding: var(--sp-4) 18px;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.mod-edit-note {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-text-muted); margin: 0;
}
.mod-edit-fields {
  display: flex; flex-direction: column; gap: 10px;
}
.mod-edit-row {
  display: flex; align-items: center; gap: 10px;
}
.mod-edit-label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  color: var(--boba-text-muted); letter-spacing: 0.04em;
  min-width: 90px;
}
.mod-edit-input, .mod-edit-select, .mod-edit-textarea, .mod-edit-file-input {
  flex: 1;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 6px;
  color: var(--boba-text-1);
  font-family: var(--font-mono); font-size: 0.82rem;
  padding: 6px 10px;
}
.mod-edit-textarea { resize: vertical; min-height: 60px; }
.mod-edit-image-section, .mod-edit-notes-section {
  display: flex; flex-direction: column; gap: 6px;
}
.mod-edit-status {
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.78rem;
}
.mod-edit-status.success { background: rgba(0,245,255,0.1); color: var(--boba-cyan); }
.mod-edit-status.error   { background: rgba(255,60,60,0.1); color: #ff6060; }
.mod-edit-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--boba-glass-border);
}
.mod-submit-btn {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  padding: 8px 18px;
}

/* ---- Other Versions ---- */
.other-versions {
  border-top: 1px solid var(--boba-glass-border);
  padding-top: var(--sp-4);
}
.other-versions-label {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-3);
}
.versions-scroll {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.versions-scroll::-webkit-scrollbar { display: none; }
.version-tile {
  flex-shrink: 0; width: 72px;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  cursor: pointer; background: none; border: none; padding: 0;
  text-align: center;
}
.version-tile:hover .version-thumb { border-color: var(--boba-cyan); }
.version-thumb {
  width: 72px; height: 96px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--boba-glass-border);
  background: var(--boba-surface);
  display: block;
}
.version-thumb-placeholder {
  width: 72px; height: 96px;
  border-radius: 4px;
  border: 1px solid var(--boba-glass-border);
  background: var(--boba-surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.5rem;
  color: var(--boba-text-muted);
}
.version-label {
  font-family: var(--font-mono); font-size: 0.58rem;
  color: var(--boba-text-muted); line-height: 1.2;
  max-width: 72px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ================================================================
   M2 — COLLECTION VIEW
================================================================ */

.collection-view { display: flex; flex-direction: column; min-height: 100%; }

.collection-header {
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--boba-glass-border);
}

.collection-stats-bar {
  display: flex; gap: var(--sp-4);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}

.cstat {
  display: flex; flex-direction: column; gap: 2px;
}
.cstat-val {
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--boba-orange);
}
.cstat-label {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--boba-text-muted); letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Totals toggle — Collection vs Filter (parity with iOS @AppStorage
   bp_collectionTotalsMode_v1). Sits below the stats bar so the user
   sees which scope the stats reflect. */
.collection-totals-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.collection-totals-label {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--boba-text-muted); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.collection-totals-btn {
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: var(--sp-1) var(--sp-3);
  background: transparent;
  color: var(--boba-text-muted);
  border: 1px solid var(--boba-glass-border);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.collection-totals-btn:hover { color: var(--boba-text); }
.collection-totals-btn.active {
  background: var(--boba-orange);
  color: #0A0A0A;
  border-color: var(--boba-orange);
  font-weight: 600;
}
.collection-totals-btn:focus-visible {
  outline: 2px solid var(--boba-cyan);
  outline-offset: 2px;
}

/* Designation tabs */
.desig-tabs {
  display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: var(--sp-1); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--boba-glass-border);
  scrollbar-width: none;
}
.desig-tabs::-webkit-scrollbar { display: none; }

.desig-tab {
  display: flex; align-items: center; gap: var(--sp-1);
  flex-shrink: 0;
  padding: 6px 14px;
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--boba-text-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.desig-tab.active {
  background: var(--boba-orange); color: #000;
  border-color: var(--boba-orange); font-weight: 700;
}
.desig-tab-count {
  background: rgba(255,255,255,0.15);
  border-radius: 100px; padding: 1px 6px;
  font-size: 0.65rem;
}
.desig-tab.active .desig-tab-count { background: rgba(0,0,0,0.2); }

/* Collection card list */
.collection-card-list {
  display: flex; flex-direction: column;
  padding: var(--sp-3) var(--sp-4); gap: var(--sp-2);
}

.collection-empty {
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-text-muted); padding: var(--sp-6) 0;
  text-align: center;
}

.collection-card-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
}

/* Card thumbnail */
.ccard-thumb {
  flex-shrink: 0;
  width: 52px; height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--boba-glass-border);
}

.ccard-thumb-placeholder {
  flex-shrink: 0;
  width: 52px; height: 72px;
  border-radius: 6px;
  border: 1px solid rgba(255,77,0,0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 4px,
      rgba(255,77,0,0.04) 4px, rgba(255,77,0,0.04) 8px),
    var(--boba-near-black);
  overflow: hidden;
}
.ccard-thumb-placeholder .placeholder-brand {
  font-size: 0.42rem; letter-spacing: 0.12em;
  line-height: 1.1; text-align: center;
}
.ccard-thumb-placeholder .placeholder-status { display: none; }

.ccard-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }

.ccard-name {
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--boba-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ccard-num {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--boba-text-muted);
}

.ccard-badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 2px;
}

.ccard-condition {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--boba-text-dim);
  padding: 2px 6px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 100px;
}

.ccard-meta {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-text-muted);
}

.ccard-price {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--boba-cyan);
}

.ccard-notes {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--boba-text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ccard-delete-btn {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--boba-text-dim);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.ccard-delete-btn:hover { color: #ff6b6b; background: rgba(255,107,107,0.1); }

/* Enriched collection row — quantity, weapon/power strip, treatment,
   value/paid breakdown, date added. Mirrors the iOS collection row.   */
.ccard-name-row {
  display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0;
}
.ccard-qty {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  color: var(--boba-cyan);
  padding: 1px 6px;
  background: rgba(0,245,255,0.12);
  border-radius: 100px;
}
.ccard-qty-here {
  font-weight: 400;
  color: var(--boba-text-dim);
  margin-left: 2px;
}
.ccard-stat-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 1px;
}
.ccard-stat {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
}
.ccard-stat.ccard-element[data-element="FIRE"]  { color: var(--el-FIRE);  }
.ccard-stat.ccard-element[data-element="ICE"]   { color: var(--el-ICE);   }
.ccard-stat.ccard-element[data-element="HEX"]   { color: var(--el-HEX);   }
.ccard-stat.ccard-element[data-element="STEEL"] { color: var(--el-STEEL); }
.ccard-stat.ccard-element[data-element="BRAWL"] { color: var(--el-BRAWL); }
.ccard-stat.ccard-element[data-element="GLOW"]  { color: var(--el-GLOW);  }
.ccard-stat.ccard-element[data-element="GUM"]   { color: var(--el-GUM);   }
.ccard-stat.ccard-element[data-element="SUPER"] { color: var(--el-SUPER); }
.ccard-stat.ccard-power {
  color: var(--boba-text-secondary);
}
.ccard-treatment {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--boba-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ccard-price-tag {
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--boba-text-dim);
  margin-left: 4px;
}
.ccard-price-paid {
  font-family: var(--font-mono); font-size: 0.6rem;
  color: var(--boba-text-dim);
  margin-left: 6px;
}
.ccard-price-value { color: var(--boba-orange); font-weight: 700; }
.ccard-added {
  font-family: var(--font-mono); font-size: 0.6rem;
  color: var(--boba-text-dim);
}

/* Sort dropdown that appears between the designation tabs and the
   list. Lives only on the Collection view; the Find tab uses its own
   sort select inside the filter panel. */
.collection-toolbar {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.collection-sort-label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--boba-text-muted);
}
.collection-sort-select {
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--boba-text);
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 6px;
  cursor: pointer;
}

/* Designation badge (inline label) */
.desig-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  color: var(--boba-text-muted);
}
.desig-personal  { color: var(--boba-cyan);   border-color: rgba(0,245,255,0.3); background: rgba(0,245,255,0.08); }
.desig-for_sale  { color: var(--boba-orange);  border-color: rgba(255,77,0,0.3);  background: rgba(255,77,0,0.08); }
.desig-for_trade { color: #a8e063;              border-color: rgba(168,224,99,0.3); background: rgba(168,224,99,0.08); }
.desig-wanted    { color: var(--boba-violet);  border-color: rgba(139,0,255,0.3); background: rgba(139,0,255,0.08); }
.desig-grails    { color: #FFD700;              border-color: rgba(255,215,0,0.3);  background: rgba(255,215,0,0.08); }

/* ================================================================
   M2 — AUTH GATE (shared signed-out state)
================================================================ */

.view-inner.auth-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60dvh; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}

.view-subtitle {
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-text-muted); max-width: 320px; line-height: 1.6;
}

.view-inner.auth-gate .btn-primary { max-width: 260px; }

/* ================================================================
   M2 — PROFILE VIEW
================================================================ */

.profile-page {
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  max-width: 560px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--sp-5);
}
@media (min-width: 768px) {
  /* More breathing room on desktop where there's no mobile header offset */
  .profile-page { padding: var(--sp-8) var(--sp-6) var(--sp-8); }
}

.profile-page-heading {
  margin-bottom: var(--sp-1);
}

/* Account card */
.profile-account-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4);
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 14px;
}

.profile-avatar {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,77,0,0.15);
  border: 1px solid rgba(255,77,0,0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--boba-orange);
  position: relative;
  overflow: visible;
}
.profile-avatar-button {
  cursor: pointer;
  padding: 0;
}
.profile-avatar-button:hover { filter: brightness(1.1); }
.profile-avatar-content {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}
.profile-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar-camera {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--boba-orange);
  color: var(--boba-near-black);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--boba-near-black);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Crop dialog — circular preview, drag-position canvas, action row. */
.avatar-crop-dialog {
  background: var(--boba-near-black);
  color: var(--boba-text-primary, #fff);
  border: 1px solid var(--boba-glass-border);
  border-radius: 14px;
  padding: 0;
  max-width: 360px;
  width: calc(100vw - 32px);
}
.avatar-crop-dialog::backdrop {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.avatar-crop-header {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.avatar-crop-title {
  font-family: var(--font-display, sans-serif);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
.avatar-crop-hint {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--boba-text-muted);
}
.avatar-crop-stage {
  position: relative;
  width: 280px; height: 280px;
  margin: var(--sp-3) auto;
}
#avatar-crop-canvas {
  display: block;
  background: #000;
  cursor: grab;
  border-radius: 50%;
}
#avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop-mask {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  pointer-events: none;
  box-shadow: 0 0 0 99999px rgba(0,0,0,0.55);  /* halo dim */
  margin: 0;
}
.avatar-crop-actions {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.avatar-crop-cancel,
.avatar-crop-confirm {
  flex: 1;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
}
.avatar-crop-cancel {
  background: transparent;
  color: var(--boba-text-muted);
  border: 1px solid rgba(255,255,255,0.18);
}
.avatar-crop-cancel:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.avatar-crop-confirm {
  background: var(--boba-orange);
  color: var(--boba-near-black);
  border: none;
}
.avatar-crop-confirm:hover { filter: brightness(1.1); }
.avatar-crop-confirm:disabled { opacity: 0.5; cursor: wait; }

/* Menu dialog — list of action rows (Choose / Discord / Remove / Cancel). */
.avatar-menu-dialog {
  background: var(--boba-near-black);
  color: var(--boba-text-primary, #fff);
  border: 1px solid var(--boba-glass-border);
  border-radius: 14px;
  padding: 0;
  max-width: 320px;
  width: calc(100vw - 32px);
}
.avatar-menu-dialog::backdrop {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.avatar-menu-list {
  display: flex; flex-direction: column;
  padding: var(--sp-2);
}
.avatar-menu-row {
  background: transparent;
  color: var(--boba-text-primary, #fff);
  border: none;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-mono, monospace);
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
}
.avatar-menu-row:hover { background: rgba(255,255,255,0.06); }
.avatar-menu-row.destructive { color: #FF6B6B; }
.avatar-menu-row[hidden] { display: none; }

/* Public-collection header — owner avatar + @username + count.
   Mounted at /u/{username}; read-only (no Profile sheet trigger). */
.public-collection-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.public-collection-avatar {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,77,0,0.15);
  border: 1.5px solid rgba(255,77,0,0.5);
  color: var(--boba-orange);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.public-collection-avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.public-collection-titlebox {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
#public-collection-title {
  margin: 0;
  color: var(--boba-orange);
  font-family: var(--font-display, sans-serif);
  font-size: 1.75rem;
}
#public-collection-subtitle {
  margin: 0;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  font-family: var(--font-mono, monospace);
}

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

.profile-account-email {
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.03em;
  color: var(--boba-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.profile-account-role {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--boba-text-muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.role-badge {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mod-badge   { background: var(--boba-cyan);   color: #000; }
.admin-badge { background: var(--boba-orange);  color: #000; }

/* Sign-in method pill (parity with iOS provider pill).
   Apple: black background with subtle white border.
   Discord: brand blurple background. */
.provider-pill { display: inline-flex; align-items: center; gap: 3px; }
.provider-apple   { background: #000; color: #fff;
                    border: 0.5px solid rgba(255,255,255,0.3); }
.provider-discord { background: #5865F2; color: #fff; }

/* Username row — inline TextField + status pill, mirrors iOS
   UsernameRow. The @ prefix is decorative; the input itself is the
   editable surface. */
.profile-username-row {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
}
.profile-username-prefix {
  color: var(--boba-cyan); font-family: var(--font-mono);
  font-size: 1rem; font-weight: 700;
}
.profile-username-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--boba-text-primary);
  font-family: var(--font-mono); font-size: 0.95rem;
  padding: 0;
}
.profile-username-status {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  white-space: nowrap;
}
.profile-username-status.idle    { color: var(--boba-text-muted); }
.profile-username-status.checking { color: var(--boba-text-muted); }
.profile-username-status.ok      { color: #4CAF50; }
.profile-username-status.mine    { color: #4CAF50; }
.profile-username-status.error   { color: #FF5555; }
.profile-username-hint {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--boba-text-muted); padding: 0 var(--sp-1);
  line-height: 1.4;
}
.profile-username-hint a { color: var(--boba-cyan); }

/* About + Delete rows (Privacy / Terms / Send Feedback / Delete) */
.profile-about-row,
.profile-delete-row {
  display: flex; align-items: center; gap: var(--sp-2);
  background: transparent; border: none;
  padding: var(--sp-3); width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.9rem;
  text-decoration: none;
}
.profile-about-row  { color: var(--boba-cyan); }
.profile-about-row:hover  { background: rgba(0,245,255,0.06); }
.profile-delete-row { color: #FF5555; }
.profile-delete-row:hover { background: rgba(255,85,85,0.08); }
.profile-delete-hint {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--boba-text-muted); padding: 0 var(--sp-1);
}
.profile-delete-hint a { color: var(--boba-cyan); }

.profile-account-username {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--boba-text-primary);
}

/* Section */
.profile-section {
  display: flex; flex-direction: column; gap: var(--sp-2);
}

.profile-section-label {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
  color: var(--boba-text-muted); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0 var(--sp-1);
}

/* Stat list card */
.profile-stat-list {
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 14px;
  overflow: hidden;
}

.profile-stat-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--boba-glass-border);
}
.profile-stat-row:last-child { border-bottom: none; }

.profile-stat-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--boba-glass);
  color: var(--boba-text-muted);
}
/* Icon accent colors */
.profile-stat-icon.icon-cyan   { background: rgba(0,245,255,0.12);  color: var(--boba-cyan); }
.profile-stat-icon.icon-orange { background: rgba(255,77,0,0.12);   color: var(--boba-orange); }
.profile-stat-icon.icon-green  { background: rgba(34,197,94,0.12);  color: #4ade80; }
.profile-stat-icon.icon-violet { background: rgba(139,0,255,0.12);  color: #bb55ff; }
.profile-stat-icon.icon-gold   { background: rgba(255,215,0,0.12);  color: #ffd700; }

.profile-stat-label {
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-text); flex: 1;
}

.profile-stat-value {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--boba-text-muted);
}

.profile-stat-divider {
  height: 1px; background: var(--boba-glass-border);
  margin: 0 var(--sp-4);
}

/* Sign out row */
.profile-signout-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono); font-size: 0.82rem;
  color: #f87171;
  transition: background 0.15s;
}
.profile-signout-row:hover { background: rgba(248,113,113,0.06); }

.profile-mod-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-cyan);
  transition: background 0.15s;
}
.profile-mod-row:hover { background: rgba(0,245,255,0.06); }

.profile-admin-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-orange);
  transition: background 0.15s;
}
.profile-admin-row:hover { background: rgba(255,77,0,0.06); }

/* Recalculate action row */
.profile-action-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-cyan);
  transition: background 0.15s;
}
.profile-action-row:hover:not(:disabled) { background: rgba(0,245,255,0.06); }
.profile-action-row:disabled { opacity: 0.5; cursor: not-allowed; }
.profile-recalc-status,
.profile-change-password-status {
  padding: 0 var(--sp-4) var(--sp-3);
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text-muted);
}
.profile-recalc-status.hidden,
.profile-change-password-status.hidden { display: none; }

/* ----------------------------------------------------------------
   Public-collection sharing toggle + URL display
---------------------------------------------------------------- */
.profile-toggle-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
}
.profile-toggle-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.profile-toggle-title {
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600;
  color: var(--text-primary);
}
.profile-toggle-sub {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-muted);
}
.profile-toggle-switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.profile-toggle-switch input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.profile-toggle-track {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 13px;
  transition: background 0.18s;
}
.profile-toggle-track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  transition: transform 0.18s;
}
.profile-toggle-switch input:checked + .profile-toggle-track {
  background: var(--boba-cyan, #00F5FF);
}
.profile-toggle-switch input:checked + .profile-toggle-track::after {
  transform: translateX(18px);
}

.profile-public-url {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
}
.profile-public-url.hidden { display: none; }
.profile-public-url-text {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--boba-cyan, #00F5FF);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-public-url-copy {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,245,255,0.08);
  border: 1px solid rgba(0,245,255,0.3);
  border-radius: 6px;
  color: var(--boba-cyan, #00F5FF);
  cursor: pointer;
  transition: background 0.15s;
}
.profile-public-url-copy:hover { background: rgba(0,245,255,0.18); }

/* Admin panel */
.admin-panel { max-width: 560px; }
.admin-panel-body { gap: var(--sp-4); }
.admin-metrics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
.admin-metric-card {
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
}
.admin-metric-value {
  font-family: var(--font-display); font-size: 1.8rem;
  color: var(--boba-cyan);
  line-height: 1;
}
.admin-metric-label {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--boba-text-muted); letter-spacing: 0.05em;
  margin-top: 4px;
}
.admin-section-label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  color: var(--boba-text-muted); letter-spacing: 0.12em;
}
.admin-user-list { display: flex; flex-direction: column; gap: 6px; }
.admin-loading { font-family: var(--font-mono); font-size: 0.8rem; color: var(--boba-text-muted); }
.admin-user-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
}
.admin-user-info { min-width: 0; flex: 1; }
.admin-user-name {
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700;
  color: var(--boba-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-user-email {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  color: var(--boba-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-user-meta {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--boba-text-muted); margin-top: 3px;
}
.admin-user-collection {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-cyan); margin-top: 3px;
}

/* Admin avatar — same resolver as Profile / public-collection. */
.admin-user-avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  color: var(--boba-text-muted);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.admin-user-avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* @username row + PUBLIC pill (only when sharing is on). */
.admin-user-handle {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.admin-user-handle-name {
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--boba-cyan);
}
.admin-public-pill {
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--boba-near-black, #080810);
  background: var(--boba-cyan);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Public-collection link row — only rendered when sharing is on.
   Cyan link + a tiny copy button. */
.admin-user-public-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--boba-cyan);
  max-width: 100%;
  min-width: 0;
}
.admin-user-public-link a {
  color: var(--boba-cyan);
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.admin-user-public-link a:hover { filter: brightness(1.1); }
.admin-user-copy-btn {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,245,255,0.08);
  border: 1px solid rgba(0,245,255,0.3);
  color: var(--boba-cyan);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.admin-user-copy-btn:hover { background: rgba(0,245,255,0.18); }
.admin-user-role { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.admin-role-badge {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
}
.badge-admin   { background: var(--boba-orange); color: #000; }
.badge-mod     { background: var(--boba-cyan);   color: #000; }
.badge-user    { background: var(--boba-glass-border); color: var(--boba-text-muted); }
.admin-role-btn {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-cyan); background: none; border: 1px solid var(--boba-cyan);
  border-radius: 4px; padding: 2px 7px; cursor: pointer;
  transition: background 0.15s;
}
.admin-role-btn:hover { background: rgba(0,245,255,0.12); }
.admin-you-badge {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
  background: var(--boba-orange); color: #000;
  padding: 1px 5px; border-radius: 3px; margin-left: 5px;
}

/* Admin corrections review */
.admin-correction-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 6px;
}
.admin-correction-card {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--boba-cyan);
}
.admin-correction-fields {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--boba-text-1);
  margin-top: 2px;
}
.correction-field { margin-right: 8px; color: var(--boba-text-muted); }
.correction-field strong { color: var(--boba-text-1); }
.admin-correction-notes {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--boba-text-muted); font-style: italic; margin-top: 2px;
}
.admin-correction-actions {
  display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.admin-approve-btn, .admin-reject-btn {
  font-family: var(--font-mono); font-size: 0.72rem;
  border-radius: 4px; padding: 3px 10px; cursor: pointer;
  border: 1px solid; transition: background 0.15s;
}
.admin-approve-btn {
  background: none; color: #4ade80; border-color: #4ade80;
}
.admin-approve-btn:hover { background: rgba(74,222,128,0.15); }
.admin-reject-btn {
  background: none; color: var(--boba-orange); border-color: var(--boba-orange);
}
.admin-reject-btn:hover { background: rgba(255,77,0,0.15); }
.admin-approve-btn:disabled, .admin-reject-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mod panel search results */
.mod-panel-results {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.mod-result-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--boba-text-1);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.mod-result-row:hover { background: rgba(255,255,255,0.06); }
.mod-result-hero { font-weight: 700; }
.mod-result-num  { color: var(--boba-text-muted); font-size: 0.72rem; }

/* ================================================================
   M2 — COLLECTION CARD DETAIL OVERLAY
================================================================ */

.cdetail-box {
  position: relative;
  width: 100%; max-width: 540px;
  max-height: 92dvh;
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 16px 16px 0 0;
  overflow-y: auto; overscroll-behavior: contain;
  animation: slideUp 0.22s cubic-bezier(0.34,1.2,0.64,1);
}
@media (min-width: 640px) {
  .cdetail-box { border-radius: 16px; animation: scaleIn 0.2s ease; }
}

.cdetail-inner {
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
  display: flex; flex-direction: column; gap: var(--sp-5);
}

/* ── Card header ── */

.cdetail-header {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding-top: 28px; /* clear close button */
}

.cdetail-card-img {
  width: 100px; height: 140px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--boba-glass-border);
  flex-shrink: 0;
}

.cdetail-card-img-placeholder {
  width: 100px; height: 140px;
  border-radius: 8px;
  border: 1px solid rgba(255,77,0,0.25);
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 8px,
      rgba(255,77,0,0.04) 8px, rgba(255,77,0,0.04) 16px),
    var(--boba-near-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  overflow: hidden;
}
.cdetail-card-img-placeholder .placeholder-brand {
  font-size: 0.62rem; letter-spacing: 0.2em;
  color: rgba(255,77,0,0.4);
  text-shadow: 0 0 10px rgba(255,77,0,0.2);
}

.cdetail-card-info {
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0; flex: 1;
}

.cdetail-card-name {
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em;
  color: var(--boba-text); line-height: 1.2;
}

.cdetail-card-num {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--boba-text-muted);
}

.cdetail-badges-row {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}

/* Normalise both badge types to the same height in the detail header */
.cdetail-badges-row .element-badge,
.cdetail-badges-row .treatment-banner {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 0.6rem;
  line-height: 1;
}

.cdetail-card-power {
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  color: var(--boba-text-muted);
  letter-spacing: 0.06em;
}

/* ── Sections ── */

.cdetail-section {
  border-top: 1px solid var(--boba-glass-border);
  padding-top: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}

.cdetail-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
}

.cdetail-section-title {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
  color: var(--boba-text-muted); letter-spacing: 0.14em; text-transform: uppercase;
}

.cdetail-add-btn {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  color: var(--boba-orange);
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border: 1px solid rgba(255,77,0,0.4);
  border-radius: 100px;
  background: rgba(255,77,0,0.08);
  transition: background 0.15s, border-color 0.15s;
}
.cdetail-add-btn:hover { background: rgba(255,77,0,0.15); border-color: rgba(255,77,0,0.6); }

.cdetail-empty {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--boba-text-muted); padding: var(--sp-3) 0;
}

/* ── Entry rows ── */

.cdetail-entry {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
}

.cdetail-entry-main {
  display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0;
}

.cdetail-entry-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}

.cdetail-serial {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--boba-cyan);
  padding: 2px 7px;
  border: 1px solid rgba(0,245,255,0.3);
  border-radius: 100px;
  background: rgba(0,245,255,0.06);
}

.cdetail-entry-price {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  color: var(--boba-cyan);
}
.cdetail-entry-price-label {
  font-size: 0.6rem; font-weight: 400;
  color: var(--boba-text-muted); letter-spacing: 0.08em;
}

.cdetail-entry-notes {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--boba-text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cdetail-entry-actions {
  display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}

.cdetail-entry-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 6px;
  color: var(--boba-text-dim);
  transition: color 0.15s, background 0.15s;
}
.cdetail-entry-btn:hover { color: var(--boba-text); background: var(--boba-glass); }
.cdetail-entry-btn-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.1); }

/* ── Variations horizontal scroll ── */

.cdetail-variations-scroll {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: var(--sp-2);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cdetail-variations-scroll::-webkit-scrollbar { display: none; }

.cdetail-var-tile {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  scroll-snap-align: start;
  cursor: pointer;
}

.cdetail-var-img-wrap {
  position: relative;
  width: 72px; height: 100px;
}

.cdetail-var-img {
  width: 72px; height: 100px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--boba-glass-border);
  transition: border-color 0.15s;
}
.cdetail-var-tile:hover .cdetail-var-img { border-color: rgba(255,255,255,0.3); }

.cdetail-var-img-ph {
  width: 72px; height: 100px;
  border-radius: 6px;
  border: 1px solid var(--boba-glass-border);
  background: var(--boba-glass);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1rem;
  color: rgba(255,255,255,0.25);
}

.cdetail-var-own {
  position: absolute; bottom: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700;
}
.cdetail-var-own.owned  { background: #22c55e; color: #000; }
.cdetail-var-own.wanted { background: var(--boba-orange); color: #fff; }

.cdetail-var-label {
  font-family: var(--font-mono); font-size: 0.6rem;
  color: var(--boba-text-muted);
  max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}

/* ── Edit form header ── */

.cdetail-edit-hdr {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding-top: 28px; /* clear close button */
}

.cdetail-back-btn {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--boba-glass-border);
  color: var(--boba-text-muted);
  background: var(--boba-glass);
  transition: color 0.15s, background 0.15s;
}
.cdetail-back-btn:hover { color: var(--boba-text); background: rgba(255,255,255,0.1); }

.cdetail-edit-title {
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.03em;
  color: var(--boba-text); line-height: 1;
}
.cdetail-edit-subtitle {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--boba-text-muted); margin-top: 3px;
}

/* ================================================================
   SCAN VIEW
================================================================ */
.scan-wrap {
  display: flex;
  gap: 2rem;
  padding: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  min-height: 100%;
  align-items: flex-start;
}

.scan-camera-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.scan-video-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 4/3;
}

.scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scan-guide-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48%;
  height: 88%;
  border: 2px solid var(--boba-cyan);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
  pointer-events: none;
}

.scan-guide-frame::before,
.scan-guide-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--boba-cyan);
  border-style: solid;
}

.scan-guide-frame::before {
  top: -2px; left: -2px;
  border-width: 3px 0 0 3px;
}

.scan-guide-frame::after {
  bottom: -2px; right: -2px;
  border-width: 0 3px 3px 0;
}

.scan-status {
  font-size: 0.85rem;
  color: var(--boba-text-muted);
  text-align: center;
  max-width: 360px;
  font-family: var(--font-mono);
}

.scan-capture-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--boba-orange);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter 0.15s;
}

.scan-capture-btn:hover:not(:disabled) { filter: brightness(1.12); }
.scan-capture-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.scan-result {
  width: 100%;
  max-width: 480px;
}

.scan-result-card {
  display: flex;
  gap: 1rem;
  background: var(--boba-surface);
  border: 1px solid var(--boba-cyan);
  border-radius: 12px;
  padding: 1rem;
  align-items: center;
}

.scan-result-img {
  width: 80px;
  height: 112px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.scan-result-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.scan-result-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--boba-text);
}

.scan-result-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--boba-text-muted);
}

.scan-result-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

/* Desktop aside */
.scan-desktop-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--boba-surface);
  border: 1px solid var(--boba-border);
  border-radius: 12px;
  width: 220px;
  flex-shrink: 0;
  text-align: center;
}

.scan-aside-label {
  font-size: 0.85rem;
  color: var(--boba-text-muted);
  font-family: var(--font-mono);
}

.scan-aside-sub {
  font-size: 0.8rem;
  color: var(--boba-text-muted);
  line-height: 1.5;
}

.scan-qr-img {
  border-radius: 8px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}

.scan-qr-img canvas,
.scan-qr-img img {
  display: block;
  border-radius: 8px;
}

.scan-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 1023px) {
  .scan-desktop-aside { display: none; }
  .scan-wrap { padding: 1rem; }
}

/* ================================================================
   PRICING SECTION (modal)
================================================================ */
.pricing-section {
  border-top: 1px solid var(--boba-border);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

.pricing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.pricing-day-picker {
  display: flex;
  gap: 0.25rem;
}

.day-btn {
  background: transparent;
  border: 1px solid var(--boba-border);
  color: var(--boba-text-muted);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.15s;
}

.day-btn.active,
.day-btn:hover {
  border-color: var(--boba-cyan);
  color: var(--boba-cyan);
  background: rgba(0,245,255,0.08);
}

.pricing-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--boba-text-muted);
  font-size: 0.85rem;
  font-family: var(--font-mono);
  padding: 0.5rem 0;
}

.loading-spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--boba-border);
  border-top-color: var(--boba-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pricing-stat {
  background: var(--boba-near-black);
  border: 1px solid var(--boba-border);
  border-radius: 8px;
  padding: 0.5rem 0.25rem;
  text-align: center;
}

.pricing-stat-center {
  border-color: var(--boba-cyan);
  background: rgba(0,245,255,0.06);
}

.pricing-label {
  display: block;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--boba-text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 0.2rem;
}

.pricing-val {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--boba-text);
}

.pricing-val-avg {
  color: var(--boba-cyan);
}

.pricing-sale-count {
  font-size: 0.75rem;
  color: var(--boba-text-muted);
  font-family: var(--font-mono);
  margin: 0.25rem 0 0.6rem;
}

.pricing-links {
  display: flex;
  gap: 0.5rem;
}

.btn-pricing-ebay,
.btn-pricing-radish {
  flex: 1;
  display: block;
  text-align: center;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: filter 0.15s;
}

.btn-pricing-ebay {
  background: rgba(255,77,0,0.12);
  color: var(--boba-orange);
  border: 1px solid rgba(255,77,0,0.4);
}

.btn-pricing-radish {
  background: rgba(0,245,255,0.15);
  color: var(--boba-cyan);
  border: 1px solid var(--boba-cyan);
}

.btn-pricing-ebay:hover,
.btn-pricing-radish:hover { filter: brightness(1.1); }

.pricing-error,
.pricing-none {
  font-size: 0.82rem;
  color: var(--boba-text-muted);
  font-family: var(--font-mono);
  padding: 0.5rem 0;
}

/* ── Pricing item rows ────────────────────────────────────────────────────── */
.pricing-items {
  margin-top: 0.25rem;
}

.pricing-items-label {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--boba-text-muted);
  letter-spacing: 0.12em;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.pricing-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: var(--boba-surface2, #13131f);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-decoration: none;
  transition: background 0.12s;
}

.pricing-item-row:first-of-type { border-radius: 8px 8px 0 0; }
.pricing-item-row:last-of-type  { border-radius: 0 0 8px 8px; border-bottom: none; }
.pricing-item-row:only-of-type  { border-radius: 8px; }
.pricing-item-row:hover         { background: rgba(255,255,255,0.06); }

.pricing-item-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--boba-text-primary, #f0f0ff);
  min-width: 3.6rem;
  flex-shrink: 0;
}

.pricing-item-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--boba-text-secondary, #a0a0c0);
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pricing-item-date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--boba-text-muted);
  flex-shrink: 0;
  min-width: 3.2rem;
  text-align: right;
}

/* Probable-match (Worker enriched matcher — confidence 0.45–0.70).
   Amber pill inlined after the listing title; hover title surfaces
   the per-signal match reasons. */
.sold-item-probable {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #E0A000;
  background: rgba(224, 160, 0, 0.12);
  border: 1px solid rgba(224, 160, 0, 0.45);
  vertical-align: middle;
  cursor: help;
}
.sold-item--probable { opacity: 0.9; }
.sold-item--probable:hover { opacity: 1; }

.pricing-item-arrow {
  font-size: 0.75rem;
  color: var(--boba-text-muted);
  flex-shrink: 0;
}

/* ── Dual sold/active pricing sections ───────────────────────────────────── */
.pricing-section + .pricing-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--boba-border);
}

/* "BUY NOW" section header uses orange to signal actionability */
.pricing-section-active .pricing-items-label { color: var(--boba-orange); }
.pricing-val-active { color: var(--boba-orange); }

/* Stale fallback — only one sale, older than the requested window.
   Single-cell grid + amber STALE pill in the header so users know
   the price is a market anchor, not a recent transaction. */
.pricing-grid-single { grid-template-columns: 1fr; }
.pricing-stale-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 5px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #E0A000;
  background: rgba(224, 160, 0, 0.12);
  border: 1px solid rgba(224, 160, 0, 0.45);
  border-radius: 999px;
  vertical-align: middle;
}

/* Market Est. — no real sales, range from comparable cards. Cyan
   pill differentiates it from stale (amber) and confirmed sales. */
.pricing-est-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 5px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--boba-cyan);
  background: rgba(0, 245, 255, 0.10);
  border: 1px solid rgba(0, 245, 255, 0.40);
  border-radius: 999px;
  vertical-align: middle;
}

/* COMC asking-price strip — sits beneath the eBay BUY NOW bucket
   on the BUY NOW panel. Cyan accent so users immediately see this
   is a different source, and "asking" pill makes it clear these
   are list prices not transacted prices. */
.pricing-comc-label { color: var(--boba-cyan); }
.pricing-comc-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 5px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--boba-cyan);
  background: rgba(0, 245, 255, 0.10);
  border: 1px solid rgba(0, 245, 255, 0.40);
  border-radius: 999px;
  vertical-align: middle;
}

/* ── Scan candidates picker ───────────────────────────────────────────────── */

.scan-candidates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 480px;
}

.scan-candidates-label {
  font-size: 0.8rem;
  color: var(--boba-text-muted);
  text-align: center;
  margin: 0;
}

.scan-candidates-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.scan-candidate-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--boba-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.scan-candidate-item:hover,
.scan-candidate-item:focus-visible {
  border-color: var(--boba-cyan);
  background: rgba(0,245,255,0.06);
  outline: none;
}

.scan-candidate-img {
  width: 48px;
  height: 67px;   /* ~5:7 card ratio */
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
}

.scan-candidate-placeholder {
  background: rgba(255,255,255,0.05);
}

.scan-candidate-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.scan-candidate-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--boba-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scan-candidate-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.scan-candidate-power {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--boba-text);
}

.scan-candidate-set {
  font-size: 0.75rem;
  color: var(--boba-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.scan-candidate-number {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--boba-text-muted);
}

/* ── Play View ──────────────────────────────────────────────────── */

.play-view {
  padding-bottom: var(--sp-8);
}

/* ── Mode Overview Cards ── */
/* ── Battle Flow Diagram ── */
.battle-flow {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.battle-flow-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-3);
}

.battle-flow-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.battle-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  transition: opacity 0.2s;
}

.battle-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--boba-orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.battle-step-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--boba-orange);
}

.battle-step-desc {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--boba-text-2);
  line-height: 1.3;
}

.battle-step-arrow {
  color: rgba(255, 77, 0, 0.4);
  font-size: 1.1rem;
  padding: 10px 2px 0;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

/* Mode badge pill inside each battle step */
.battle-step-mode {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

/* Honors footnote */
.battle-flow-honors {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--boba-text-muted);
  line-height: 1.5;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--boba-glass-border);
}

.battle-flow-honors-star {
  color: #FFD700;
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Top tab pills (Rules / Strategy) ── */
.play-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--boba-glass-border);
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.play-tabs::-webkit-scrollbar { display: none; }
.play-tab { white-space: nowrap; }

.play-tab {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  color: var(--boba-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.play-tab:hover {
  color: var(--boba-text);
}

.play-tab.active {
  color: var(--boba-orange);
  border-bottom-color: var(--boba-orange);
}

/* ── Panel containers ── */
.play-panel {
  /* no extra margin — sections inside handle spacing */
}

/* ── Mode tabs (Rookie / Substitution / Playmaker) ── */
.rules-mode-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.rules-mode-btn {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px var(--sp-4);
  border-radius: 20px;
  border: 1px solid var(--boba-glass-border);
  background: var(--boba-glass);
  color: var(--boba-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.rules-mode-btn:hover {
  background: var(--boba-glass-hover);
  color: var(--boba-text);
}

.rules-mode-btn.active {
  background: rgba(0, 245, 255, 0.12);
  border-color: var(--boba-cyan);
  color: var(--boba-cyan);
}

/* ── Rules content block (per mode) ── */
.rules-content {
  margin-bottom: var(--sp-5);
}

/* ── Battle Scenarios ── */
.battle-scenario {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.scenario-header {
  margin-bottom: var(--sp-3);
}

.scenario-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boba-text-dim);
  margin-bottom: 3px;
}

.scenario-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--boba-text-2);
  line-height: 1.4;
}

.scenario-phase {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--boba-text-dim);
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-3);
}

.scenario-cards {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-3);
}

.scenario-vs {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--boba-text-dim);
  padding-bottom: 30px;
}

.mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 80px;
}

.mini-card-img {
  width: 80px;
  height: 112px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--boba-glass-border);
}

.mini-card.win .mini-card-img {
  border: 2.5px solid #4CAF50;
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.45);
}

.mini-card.lose .mini-card-img {
  border: 2.5px solid rgba(192, 57, 43, 0.8);
}

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

.mini-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  background: var(--boba-surface-2);
}

.mini-card-name {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--boba-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  text-align: center;
}

.mini-card-stats {
  display: flex;
  align-items: center;
  gap: 3px;
}

.mini-card-el {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
}

.mini-card-sep {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--boba-text-dim);
}

.mini-card-power {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--boba-text);
}

.mini-card-power.win-power  { color: #4CAF50; }
.mini-card-power.lose-power { color: #C0392B; }

.scenario-result {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--boba-text-2);
  line-height: 1.5;
  margin-top: var(--sp-2);
}

.scenario-result.win {
  background: rgba(76, 175, 80, 0.07);
  border: 1px solid rgba(76, 175, 80, 0.25);
}

.scenario-result.sub {
  background: rgba(255, 215, 0, 0.07);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.scenario-result.play {
  background: rgba(0, 245, 255, 0.06);
  border: 1px solid rgba(0, 245, 255, 0.25);
}

.scenario-result-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.scenario-play-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(139, 0, 255, 0.06);
  border: 1px solid rgba(139, 0, 255, 0.25);
  border-radius: 8px;
  margin-bottom: var(--sp-2);
}

.scenario-play-art {
  width: 52px;
  height: 72px;
  border-radius: 6px;
  background: rgba(139, 0, 255, 0.14);
  border: 1.5px solid rgba(139, 0, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}

.scenario-play-art-icon {
  font-size: 1rem;
}

.scenario-play-art-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  color: #8B00FF;
  letter-spacing: 0.08em;
}

.scenario-play-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.scenario-play-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #8B00FF;
}

.scenario-play-cost {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--boba-text-dim);
}

.scenario-play-cost strong { color: #FFD700; }

.scenario-play-effect {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--boba-text-2);
  line-height: 1.4;
}

.scenario-play-calc {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--boba-cyan);
}

.scenario-power-updated {
  display: flex;
  align-items: center;
  gap: 5px;
}

.scenario-power-old {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--boba-text-dim);
  text-decoration: line-through;
}

.scenario-power-arrow {
  font-size: 0.7rem;
  color: var(--boba-cyan);
}

.scenario-power-new {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #4CAF50;
}

/* ── Archetype strategy paragraph ── */
.archetype-strategy {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--boba-text-2);
  margin: 0;
}

/* ── Callout banner (Substitution / Playmaker "adds:") ── */
.rules-callout {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 8px;
  border-left: 3px solid var(--boba-cyan);
  background: rgba(0, 245, 255, 0.07);
  margin-bottom: var(--sp-4);
}

.rules-callout-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--boba-cyan);
  white-space: nowrap;
}

.rules-callout-detail {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--boba-text);
}

/* ── Section blocks ── */
.rules-section {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
}

.rules-section:last-child {
  margin-bottom: 0;
}

.rules-section-heading {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-3);
}

.rules-section p,
.rules-section ul {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--boba-text-2);
}

.rules-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rules-list li {
  padding-left: var(--sp-4);
  position: relative;
}

.rules-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--boba-orange);
  font-weight: 700;
}

/* ── Deckbuilding table ── */
.rules-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rules-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.rules-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--boba-text-muted);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--boba-glass-border);
}

.rules-table td {
  padding: var(--sp-2) var(--sp-3);
  color: var(--boba-text-2);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
  line-height: 1.5;
}

.rules-table td:first-child {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--boba-text);
  white-space: nowrap;
}

.rules-table td:nth-child(2) {
  white-space: nowrap;
  color: var(--boba-orange);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.rules-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Card Zones list ── */
.rules-zone-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rules-zone-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.zone-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--boba-cyan);
  white-space: nowrap;
  min-width: 140px;
}

.zone-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--boba-text-muted);
}

/* ── Strategy accordion ── */
.strategy-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.strategy-accordion details {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.strategy-accordion details[open] {
  border-color: rgba(0, 245, 255, 0.25);
}

.strategy-accordion summary {
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  align-items: start;
  user-select: none;
  -webkit-user-select: none;
}

.strategy-accordion summary::-webkit-details-marker {
  display: none;
}

.strategy-accordion summary::after {
  content: '+';
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--boba-text-muted);
  transition: transform 0.2s, color 0.2s;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.strategy-accordion details[open] summary::after {
  content: '−';
  color: var(--boba-cyan);
}

.strategy-accordion summary:hover {
  color: var(--boba-cyan);
}

.strategy-detail {
  padding: var(--sp-2) var(--sp-5) var(--sp-4);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--boba-text-2);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.strategy-detail p {
  margin-bottom: var(--sp-3);
}

.strategy-detail p:last-child {
  margin-bottom: 0;
}

.strategy-detail ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.strategy-detail li {
  padding-left: var(--sp-4);
  position: relative;
}

.strategy-detail li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--boba-cyan);
  font-weight: 700;
}

/* ── Archetype cards ── */
.archetype-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 600px) {
  .archetype-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .archetype-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.archetype-card {
  background: var(--boba-surface-2);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color 0.15s;
}

/* Element accent on left border */
.archetype-card[data-element="FIRE"]  { border-left: 3px solid var(--el-FIRE); }
.archetype-card[data-element="ICE"]   { border-left: 3px solid var(--el-ICE); }
.archetype-card[data-element="STEEL"] { border-left: 3px solid var(--el-STEEL); }
.archetype-card[data-element="GLOW"]  { border-left: 3px solid var(--el-GLOW); }
.archetype-card[data-element="NONE"]  { border-left: 3px solid var(--el-NONE); }

.archetype-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.archetype-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.archetype-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--boba-text);
  letter-spacing: 0.02em;
}

.archetype-tagline {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--boba-text-muted);
  line-height: 1.5;
  margin: 0;
}

.archetype-key-plays,
.archetype-weakness {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--boba-text-2);
}

.archetype-plays-list {
  color: var(--boba-cyan);
  font-size: 0.82rem;
}

.archetype-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--boba-text-dim);
  margin-bottom: 3px;
}

.archetype-weakness {
  color: var(--boba-text-muted);
}

/* ── Strategy section heading ── */
.strategy-section {
  margin-top: var(--sp-6);
}

.strategy-section-heading {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-4);
}
.strategy-section-note {
  font-size: 0.86rem;
  color: var(--boba-text-secondary);
  line-height: 1.55;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4) 0;
  max-width: 70ch;
}

/* ── Strategy summary title + subtitle ── */
.strategy-summary-title {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--boba-text);
  grid-column: 1;
  grid-row: 1;
}

.strategy-summary-sub {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--boba-text-muted);
  font-weight: 400;
  grid-column: 1;
  grid-row: 2;
  padding-top: 2px;
}

/* ── Weapon synergy grid ── */
.weapon-synergy-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.weapon-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--boba-text-2);
  line-height: 1.5;
}

.weapon-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 48px;
  padding-top: 1px;
}

.weapon-row[data-el="FIRE"]  .weapon-label { color: var(--el-FIRE); }
.weapon-row[data-el="ICE"]   .weapon-label { color: var(--el-ICE); }
.weapon-row[data-el="STEEL"] .weapon-label { color: var(--el-STEEL); }
.weapon-row[data-el="NONE"]  .weapon-label { color: var(--el-NONE); }

/* ── Substitution strategy mini-cards ── */
.strategy-mini-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) 0;
}

.strategy-hotdog-border {
  border-color: #4CAF50 !important;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.strategy-mini-cost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.strategy-mini-cost-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: #4CAF50;
  line-height: 1;
}

.strategy-mini-cost-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--boba-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Play type grid ── */
.play-type-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.play-type-row {
  background: var(--boba-surface-2);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.play-type-card-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.play-type-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

/* Mini play card (styled placeholder — purple card back with cost) */
.mini-play-card {
  flex-shrink: 0;
  width: 64px;
  height: 90px;
  border-radius: 7px;
  background: linear-gradient(160deg, #2a0a4a 0%, #1a0535 100%);
  border: 1.5px solid var(--boba-cyan);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.15);
}

.mini-play-card-cost {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--boba-cyan);
  line-height: 1;
}

.mini-play-card-label {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  font-weight: 700;
  color: var(--boba-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.mini-play-card-name {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  font-weight: 700;
  color: var(--boba-text);
  text-align: center;
  margin-top: 2px;
  line-height: 1.2;
}

.mini-play-card-free .mini-play-card-cost {
  font-size: 0.9rem;
  color: #4CAF50;
}

.mini-play-card-free {
  border-color: #4CAF50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.15);
}

.mini-play-card-game-changer {
  border-color: var(--boba-orange);
  box-shadow: 0 0 8px rgba(255, 77, 0, 0.2);
}

.mini-play-card-game-changer .mini-play-card-cost {
  color: var(--boba-orange);
}

.play-type-row.highlight {
  border-left: 3px solid var(--boba-orange);
}

.play-type-name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--boba-orange);
}

.play-type-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--boba-text-2);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   BROWSE PANEL
══════════════════════════════════════════════════════════════════ */

.browse-section {
  margin-bottom: var(--sp-7);
}

.browse-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-4);
}

/* Collection cards */
.browse-collection-card {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  cursor: pointer;
  transition: border-color 0.15s;
}
.browse-collection-card:hover {
  border-color: var(--boba-orange);
}
.browse-collection-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.browse-collection-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.browse-collection-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--boba-text-muted);
  background: var(--boba-glass);
  border-radius: 10px;
  padding: 1px 8px;
}
.browse-collection-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--boba-text-2);
  margin-bottom: var(--sp-3);
  line-height: 1.55;
}

.browse-collection-preview {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  pointer-events: none; /* clicks bubble to parent card */
}

.browse-hero-names {
  display: none; /* hidden — chips replace this */
}
.browse-woba-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.browse-hero-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #FF69B450;
  background: #FF69B415;
  color: #FF69B4;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.browse-hero-chip:hover {
  background: #FF69B430;
  border-color: #FF69B4;
}
.browse-search-btn {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--boba-orange);
  background: transparent;
  color: var(--boba-orange);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.browse-search-btn:hover {
  background: var(--boba-orange);
  color: var(--boba-near-black);
}

/* Weapon type pills */
.browse-element-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.browse-element-pill {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--el-color) 40%, transparent);
  background: color-mix(in srgb, var(--el-color) 12%, transparent);
  color: var(--el-color);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.browse-element-pill:hover {
  background: color-mix(in srgb, var(--el-color) 25%, transparent);
  border-color: var(--el-color);
}

/* Sport cards */
.browse-sport-note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-4);
}
.browse-sport-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 640px) {
  .browse-sport-list { grid-template-columns: 1fr; }
}
.browse-sport-card {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
}
.browse-sport-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--boba-text);
  margin-bottom: var(--sp-2);
}
.browse-sport-athletes {
  display: none; /* replaced by hero chips */
}
.browse-sport-card .browse-search-btn {
  font-size: 0.75rem;
  padding: 4px 12px;
}
.browse-sport-card .browse-woba-chips {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════
   COLLECT PANEL
══════════════════════════════════════════════════════════════════ */

.collect-section {
  margin-bottom: var(--sp-7);
}
.collect-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-3);
}
.collect-intro {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--boba-text-2);
  margin-bottom: var(--sp-4);
  line-height: 1.55;
}

/* Rarity tier list */
.rarity-tier-list {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--boba-glass-border);
}
.rarity-tier-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--boba-surface);
  border-bottom: 1px solid var(--boba-glass-border);
}
.rarity-tier-row:last-child { border-bottom: none; }
.rarity-tier-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--tier-color);
  background: color-mix(in srgb, var(--tier-color) 15%, transparent);
}
.rarity-tier-info {
  flex: 1;
  min-width: 0;
}
.rarity-tier-name {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--tier-color);
}
.rarity-tier-desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--boba-text-2);
  margin-top: 2px;
}
.rarity-tier-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--tier-color);
  background: color-mix(in srgb, var(--tier-color) 12%, transparent);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Treatment list */
/* Variation cards (expanded detail layout) */
.variation-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.variation-card {
  background: color-mix(in srgb, var(--var-color) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--var-color) 20%, transparent);
  border-radius: 10px;
  padding: var(--sp-4);
}
.variation-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.variation-card-name {
  font-family: var(--font-mono);
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--var-color);
}
.variation-card-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--var-color);
  background: color-mix(in srgb, var(--var-color) 12%, transparent);
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.variation-card-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.variation-card-bullets li {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--boba-text-2);
  line-height: 1.5;
  padding-left: 1em;
  position: relative;
}
.variation-card-bullets li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: color-mix(in srgb, var(--var-color) 60%, transparent);
}
.variation-card-bullets em {
  font-style: italic;
  color: var(--boba-text-1);
}

.collect-treatment-list {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
/* New Treatments + Parallels lists (post 2026-04-24 taxonomy split).
   Each row carries a prefix chip (mappable to the prefix on a real
   card number) plus the canonical name + description. The --t-color
   custom property drives the prefix chip's accent color. */
.treatment-group-heading {
  margin: 18px 0 6px;
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--boba-text-muted);
}
.treatment-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--boba-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.1));
}
.treatment-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--boba-surface, #0D0D1A);
}
.treatment-prefix {
  flex-shrink: 0;
  min-width: 60px;
  padding: 3px 7px;
  border-radius: 999px;
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--t-color, var(--boba-cyan));
  background: color-mix(in srgb, var(--t-color, var(--boba-cyan)) 14%, transparent);
  border: 0.75px solid color-mix(in srgb, var(--t-color, var(--boba-cyan)) 45%, transparent);
  text-align: center;
  margin-top: 2px;
}
.treatment-info { flex: 1; min-width: 0; }
.treatment-name {
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--t-color, var(--boba-cyan));
  margin-bottom: 2px;
}
.treatment-desc {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  line-height: 1.45;
  color: var(--boba-text-secondary, #a0a0b0);
}

/* Inspired Ink callout — pink-accented info block with the
   weapon-tied serial-number chips (Hex/5, Glow/10, Fire/25, Ice/50). */
.treatment-callout {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(255, 105, 180, 0.08);
  border: 1px solid rgba(255, 105, 180, 0.35);
  border-radius: var(--radius-md, 10px);
}
.treatment-callout-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.treatment-callout-glyph { color: #FF69B4; font-size: 14px; }
.treatment-callout-label {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em;
  color: #FF69B4;
}
.treatment-callout-body {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: var(--boba-text-secondary, #a0a0b0);
  margin: 0 0 8px;
}
.treatment-serial-row { display: flex; gap: 6px; flex-wrap: wrap; }
.treatment-serial-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--serial-color, #FF69B4) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--serial-color, #FF69B4) 50%, transparent);
}
.treatment-serial-chip .serial-weapon {
  font-family: 'Chakra Petch', monospace;
  font-size: 9px; font-weight: 700;
  color: var(--serial-color, #FF69B4);
}
.treatment-serial-chip .serial-num {
  font-family: 'Chakra Petch', monospace;
  font-size: 13px; font-weight: 700;
  color: #fff;
}

.collect-treatment-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.collect-treatment-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--treat-color);
  margin-top: 5px;
  flex-shrink: 0;
}
.collect-treatment-name {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--treat-color);
}
.collect-treatment-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--boba-text-2);
  margin-top: 2px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   TOURNAMENT PANEL
══════════════════════════════════════════════════════════════════ */

.tournament-section {
  margin-bottom: var(--sp-7);
}
.tournament-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--boba-text-muted);
  margin-bottom: var(--sp-3);
}

/* Penalty details */
.penalty-details {
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 10px;
  overflow: hidden;
}
.penalty-summary {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--boba-text);
  padding: var(--sp-4);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}
.penalty-summary::-webkit-details-marker { display: none; }
.penalty-summary::after {
  content: '›';
  font-size: 1.2rem;
  color: var(--boba-orange);
  transition: transform 0.18s;
}
.penalty-details[open] .penalty-summary::after {
  transform: rotate(90deg);
}
.penalty-summary:hover { background: var(--boba-glass); }
.penalty-list {
  border-top: 1px solid var(--boba-glass-border);
}
.penalty-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--boba-surface);
  border-bottom: 1px solid var(--boba-glass-border);
}
.penalty-row:last-child { border-bottom: none; }
.penalty-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--pen-color);
  background: color-mix(in srgb, var(--pen-color) 15%, transparent);
}
.penalty-info { flex: 1; }
.penalty-name {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pen-color);
}
.penalty-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--boba-text-2);
  margin-top: 2px;
  line-height: 1.5;
}


/* ================================================================
   DISCORD TRADE ROOM
================================================================ */

/* ── FAB ─────────────────────────────────────────────────────── */
.discord-fab {
  position: fixed;
  bottom: 88px;   /* above mobile nav bar */
  right: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #5865F2;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(88,101,242,0.5);
  z-index: 900;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.discord-fab:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(88,101,242,0.65); }
.discord-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #F23F43;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Panel ───────────────────────────────────────────────────── */
.discord-panel {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (min-width: 600px) {
  .discord-panel {
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
  }
}
.discord-panel-inner {
  width: 100%;
  max-width: 480px;
  height: 88vh;
  max-height: 700px;
  background: #313338;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 600px) {
  .discord-panel-inner {
    border-radius: 16px;
    height: 80vh;
  }
}

/* ── Header ──────────────────────────────────────────────────── */
.discord-header {
  background: #2B2D31;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.discord-header-left { display: flex; align-items: center; gap: 6px; }
.discord-hash { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.4); line-height: 1; }
.discord-channel-name { font-size: 15px; font-weight: 600; color: #fff; }
.discord-header-right { display: flex; align-items: center; gap: 10px; }
.discord-user-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.6);
}
.discord-user-chip img {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
}
.discord-close-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.5); padding: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.discord-close-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ── Content area ────────────────────────────────────────────── */
.discord-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Gate screens (connect / invite) ─────────────────────────── */
.discord-gate {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
}
.discord-gate-icon { font-size: 48px; }
.discord-gate h2 { margin: 0; font-size: 20px; font-weight: 700; color: #fff; }
.discord-gate p  { margin: 0; font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.discord-gate-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 15px; font-weight: 600; color: #fff;
  border: none; cursor: pointer;
  text-decoration: none;
}
.discord-gate-btn.blurple { background: #5865F2; }
.discord-gate-btn.green   { background: #23A55A; }
.discord-gate-btn:hover   { opacity: 0.88; }
.discord-gate-secondary {
  font-size: 13px; color: #5865F2; background: none; border: none; cursor: pointer;
}
.discord-gate-secondary:hover { text-decoration: underline; }
.discord-gate-disconnect {
  font-size: 12px; color: rgba(255,255,255,0.3); background: none; border: none; cursor: pointer; margin-top: 4px;
}
.discord-gate-disconnect:hover { color: rgba(255,255,255,0.55); }

/* ── Channel layout ──────────────────────────────────────────── */
.discord-msg-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scroll-behavior: smooth;
}
.discord-load-more {
  text-align: center; padding: 10px;
  font-size: 13px; color: rgba(255,255,255,0.4);
  background: none; border: none; cursor: pointer; width: 100%;
}
.discord-load-more:hover { color: rgba(255,255,255,0.7); }
.discord-beginning {
  text-align: center; padding: 16px 20px;
  color: rgba(255,255,255,0.35); font-size: 13px; line-height: 1.5;
}

/* ── Message row ─────────────────────────────────────────────── */
.discord-msg {
  display: flex; gap: 10px;
  padding: 1px 12px;
  transition: background 0.1s;
}
.discord-msg:hover { background: rgba(255,255,255,0.03); }
.discord-msg.compact { padding-top: 1px; padding-bottom: 1px; }
.discord-msg-avatar { width: 36px; flex-shrink: 0; }
.discord-msg-avatar img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; margin-top: 3px;
}
.discord-msg-avatar-spacer { width: 36px; flex-shrink: 0; }
.discord-msg-body { flex: 1; min-width: 0; }

.discord-msg-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.discord-msg-author { font-size: 14px; font-weight: 600; }
.discord-msg-ts {
  font-size: 11px; color: rgba(255,255,255,0.35);
}
.discord-msg-content {
  font-size: 15px; color: rgba(255,255,255,0.88);
  line-height: 1.45; word-break: break-word; white-space: pre-wrap;
}
.discord-msg-content strong { color: #fff; }
.discord-msg-content em { font-style: italic; }
.discord-msg-content code {
  background: rgba(0,0,0,0.3); border-radius: 3px;
  padding: 1px 4px; font-family: monospace; font-size: 13px;
}
.discord-msg-content del { opacity: 0.5; }

/* Reply bar */
.discord-reply-bar {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px; font-size: 12px; color: rgba(255,255,255,0.45);
  max-height: 18px; overflow: hidden;
}
.discord-reply-bar .reply-author { font-weight: 600; }

/* Reactions */
.discord-reactions {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.discord-reaction {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 6px; cursor: pointer; border: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px; color: rgba(255,255,255,0.8);
  transition: background 0.1s;
}
.discord-reaction:hover { background: rgba(255,255,255,0.12); }
.discord-reaction.me {
  background: rgba(88,101,242,0.2);
  border-color: rgba(88,101,242,0.5);
  color: #5865F2;
}
.discord-reaction-emoji { font-size: 14px; }
.discord-reaction-count { font-size: 12px; font-weight: 500; }
.discord-add-reaction {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; font-size: 14px; color: rgba(255,255,255,0.4);
}
.discord-add-reaction:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Image attachment */
.discord-attachment img {
  max-width: 280px; max-height: 180px;
  border-radius: 4px; display: block; margin-top: 6px;
  object-fit: contain;
}

/* ── Reply indicator above input ─────────────────────────────── */
.discord-reply-indicator {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(88,101,242,0.15);
  font-size: 13px; color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
.discord-reply-indicator .ri-name { color: #fff; font-weight: 600; }
.discord-reply-indicator .ri-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4); font-size: 16px; line-height: 1; padding: 2px;
}
.discord-reply-indicator .ri-close:hover { color: #fff; }

/* ── Input bar ───────────────────────────────────────────────── */
.discord-input-bar {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 12px; flex-shrink: 0;
  background: #313338;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.discord-input {
  flex: 1;
  background: #383A40;
  border: none; border-radius: 22px;
  padding: 10px 14px;
  font-size: 15px; color: #fff;
  resize: none; outline: none;
  max-height: 120px; min-height: 40px;
  field-sizing: content;
  line-height: 1.45;
  font-family: inherit;
}
.discord-input::placeholder { color: rgba(255,255,255,0.35); }
.discord-send-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: none; color: rgba(255,255,255,0.2);
  transition: color 0.15s;
  padding: 0;
}
.discord-send-btn.active { color: #5865F2; }
.discord-send-btn:disabled { cursor: default; }

/* ── Emoji picker ────────────────────────────────────────────── */
.discord-emoji-picker {
  position: fixed;
  z-index: 1000;
  background: #1E1F22;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  width: 320px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  overflow: hidden;
}
.dep-search-row { padding: 8px; }
.dep-search {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.08);
  border: none; border-radius: 6px;
  padding: 7px 10px; font-size: 13px; color: #fff; outline: none;
}
.dep-search::placeholder { color: rgba(255,255,255,0.35); }
.dep-categories {
  display: flex; padding: 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #2B2D31; flex-shrink: 0;
}
.dep-cat-btn {
  flex: 1; background: none; border: none; cursor: pointer;
  padding: 6px 4px; font-size: 15px; color: rgba(255,255,255,0.4);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dep-cat-btn.active { color: #5865F2; border-bottom-color: #5865F2; }
.dep-grid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px;
  padding: 6px;
}
.dep-emoji-btn {
  font-size: 22px; background: none; border: none; cursor: pointer;
  border-radius: 4px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.dep-emoji-btn:hover { background: rgba(255,255,255,0.1); }

/* ── Author color palette ─────────────────────────────────────── */
.dc-color-0 { color: #F23F43; }
.dc-color-1 { color: #F0B232; }
.dc-color-2 { color: #23A55A; }
.dc-color-3 { color: #00B0F4; }
.dc-color-4 { color: #5865F2; }
.dc-color-5 { color: #EB459E; }
.dc-color-6 { color: #ED4245; }
.dc-color-7 { color: #3BA55D; }
.dc-color-8 { color: #FAA61A; }

/* ================================================================
   PLAY LAUNCH ROW — Inline launch buttons for Deck Builder + Practice
   ================================================================ */

.play-launch-row {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0;
  flex-wrap: wrap;
}
.play-launch-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,77,0,0.12);
  border: 1px solid rgba(255,77,0,0.35);
  border-radius: 8px;
  color: var(--boba-orange);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.play-launch-btn:hover {
  background: rgba(255,77,0,0.2);
  border-color: rgba(255,77,0,0.6);
}
.play-launch-btn svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Deck Builder + Practice — full view headers ── */
.view-tool-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.view-tool-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--boba-orange);
  margin: 0;
}

#view-decks {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
#view-decks .deck-builder-body {
  flex: 1;
  overflow: hidden;
}

/* ================================================================
   DECK BUILDER
   ================================================================ */

.deck-builder-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.db-formats {
  display: flex;
  gap: 6px;
  padding: 0.75rem 1.25rem 0.5rem;
  overflow-x: auto;
  flex-shrink: 0;
}
.db-format-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.db-format-btn.active {
  background: rgba(255,77,0,0.2);
  border-color: rgba(255,77,0,0.5);
  color: #FF4D00;
}

.db-stats {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  overflow-x: auto;
}
.db-stat {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.db-stat-legality { color: rgba(255,77,0,0.8); }
.db-stat-legality.legal { color: #4CAF50; }

.db-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 640px) {
  .db-layout { grid-template-columns: 1fr; }
}

/* Browser */
.db-browser {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.db-browser-tabs {
  display: flex;
  gap: 4px;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.db-btab {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: all 0.15s;
}
.db-btab.active {
  background: rgba(0,245,255,0.12);
  border-color: rgba(0,245,255,0.4);
  color: #00F5FF;
}
.db-search {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
  margin: 0.5rem 0.75rem;
  flex-shrink: 0;
}
.db-search:focus { outline: none; border-color: rgba(0,245,255,0.4); }

.db-grid {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  align-content: start;
}

.db-card-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  border-radius: 6px;
  padding: 3px;
  transition: background 0.12s;
}
.db-card-cell:hover { background: rgba(255,255,255,0.06); }
.db-card-cell.in-deck { opacity: 0.5; }
.db-card-cell.violates { opacity: 0.3; pointer-events: none; }

.db-card-img {
  width: 70px;
  height: 98px;
  border-radius: 5px;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
}
.db-card-cell.in-deck .db-card-img { border-color: #00F5FF; }
.db-card-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-align: center;
  line-height: 1.2;
  max-width: 74px;
}
.db-card-sub {
  font-family: var(--font-mono, monospace);
  font-size: 0.58rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

/* Deck list */
.db-decklist {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem;
  gap: 0.75rem;
  min-width: 240px;
  position: relative; /* anchor for saved-decks-panel overlay */
  min-height: 0;      /* allow grid cell to clamp height and enable scroll */
}
.db-decklist-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.db-deck-name {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
}
.db-deck-name:focus { outline: none; border-color: rgba(255,77,0,0.5); }
.db-clear-btn, .db-export-btn, .db-save-btn, .db-load-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}
.db-clear-btn:hover { color: #ff6b55; background: rgba(192,57,43,0.15); border-color: rgba(192,57,43,0.3); }
.db-export-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.db-save-btn:hover { color: #4CAF50; background: rgba(76,175,80,0.1); border-color: rgba(76,175,80,0.3); }
.db-load-btn:hover { color: #00F5FF; background: rgba(0,245,255,0.08); border-color: rgba(0,245,255,0.25); }
.db-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Override global "img, svg { display:block; max-width:100% }" for deck builder button icons.
   Without this, SVGs in flex buttons collapse to 0 width because max-width:100% resolves
   to 0 when the button has no explicit width. */
.db-clear-btn svg, .db-export-btn svg, .db-save-btn svg, .db-load-btn svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  overflow: visible;
}

/* Saved decks overlay panel — fills entire decklist area when open so user sees all decks */
.db-saved-decks-panel {
  background: rgba(13,13,26,0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 0.75rem;
  position: absolute; inset: 0.5rem;
  overflow-y: auto; overflow-x: hidden;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: 5;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.db-saved-decks-list { width: 100%; min-width: 0; flex: 1; overflow-y: auto; }
.db-saved-decks-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.db-saved-decks-title { font-family: var(--font-mono, monospace); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6); }
.db-saved-decks-close { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.55); border-radius: 4px; width: 22px; height: 22px; cursor: pointer; font-size: 0.75rem; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.db-saved-decks-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.db-saved-decks-empty { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: rgba(255,255,255,0.3); text-align: center; padding: 0.5rem; }
.db-saved-deck-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 5px; transition: background 0.15s; width: 100%; box-sizing: border-box; }
.db-saved-deck-row:hover { background: rgba(255,255,255,0.04); }
.db-saved-deck-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.db-saved-deck-name { font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-saved-deck-meta { font-family: var(--font-mono, monospace); font-size: 0.55rem; color: rgba(255,255,255,0.35); }
.db-saved-deck-actions { display: flex; gap: 4px; flex-shrink: 0; }
.db-saved-deck-load { font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255,77,0,0.35); background: rgba(255,77,0,0.08); color: #FF4D00; cursor: pointer; transition: all 0.15s; }
.db-saved-deck-load:hover { background: rgba(255,77,0,0.15); }
.db-saved-deck-delete { font-family: var(--font-mono, monospace); font-size: 0.65rem; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(255,255,255,0.3); cursor: pointer; transition: all 0.15s; }
.db-saved-deck-delete:hover { color: #ff6b55; border-color: rgba(192,57,43,0.3); }

.db-section { display: flex; flex-direction: column; gap: 4px; }
.db-section-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.db-section-cards { display: flex; flex-direction: column; gap: 2px; }

.db-card-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 3px 4px;
  border-radius: 5px;
  transition: background 0.12s;
}
.db-card-row:hover { background: rgba(255,255,255,0.04); }
.db-card-row-name {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-card-row-meta {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}
.db-card-row-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.2);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  transition: color 0.12s;
}
.db-card-row-remove:hover { color: rgba(200,50,50,0.9); }

.db-templates { display: flex; flex-direction: column; gap: 6px; }
.db-template-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  padding: 0.4rem 0.75rem;
  text-align: left;
  transition: all 0.15s;
}
.db-template-btn:hover { background: rgba(255,77,0,0.08); border-color: rgba(255,77,0,0.3); color: #FF4D00; }

/* Validation error banner — shown prominently above the deck layout */
.db-errors {
  padding: 0.6rem 0.9rem;
  background: rgba(192,57,43,0.18);
  border: 1.5px solid rgba(192,57,43,0.5);
  border-radius: 8px;
  margin: 0 0 0.5rem;
}
.db-errors-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 700;
  color: #ff6b55;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}
.db-error-item {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: rgba(255,150,120,0.95);
  padding: 1px 0;
  line-height: 1.4;
}

.db-export-out { display: flex; flex-direction: column; gap: 6px; }
.db-export-text {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  height: 180px;
  padding: 0.5rem;
  resize: none;
}
.db-copy-btn {
  background: rgba(0,245,255,0.1);
  border: 1px solid rgba(0,245,255,0.3);
  border-radius: 8px;
  color: #00F5FF;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.4rem;
  transition: all 0.15s;
}
.db-copy-btn:hover { background: rgba(0,245,255,0.2); }

/* ================================================================
   PRACTICE SETUP
   ================================================================ */

.practice-setup { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }

.practice-section-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
}

.practice-modes { display: flex; flex-direction: column; gap: 0.5rem; }
.practice-mode-option { cursor: pointer; }
.practice-mode-option input { display: none; }
.practice-mode-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  transition: all 0.15s;
}
.practice-mode-option input:checked + .practice-mode-card {
  border-color: rgba(255,77,0,0.5);
  background: rgba(255,77,0,0.08);
}
.practice-mode-name {
  font-family: var(--font-display, sans-serif);
  font-size: 0.95rem;
  color: #fff;
  letter-spacing: 0.04em;
}
.practice-mode-desc {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
}

.practice-deck-select {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  padding: 0.55rem 0.75rem;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300F5FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
.practice-deck-select:focus { outline: none; border-color: rgba(0,245,255,0.5); }
.practice-deck-select optgroup { color: rgba(255,255,255,0.55); font-style: normal; font-weight: 700; }
.practice-deck-select option { color: #fff; background: #0D0D1A; }

.practice-deck-choice { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.practice-deck-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  transition: all 0.15s;
}
.practice-deck-btn.active {
  background: rgba(0,245,255,0.1);
  border-color: rgba(0,245,255,0.4);
  color: #00F5FF;
}

.practice-start-btn {
  margin-top: 1rem;
  background: #FF4D00;
  border: none;
  border-radius: 12px;
  color: #080810;
  cursor: pointer;
  font-family: var(--font-display, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.85rem;
  width: 100%;
  transition: opacity 0.15s;
}
.practice-start-btn:hover { opacity: 0.9; }
.practice-resume-btn {
  background: rgba(0,245,255,0.15); border: 1px solid rgba(0,245,255,0.4);
  color: #00F5FF; margin-top: 0.5rem;
}
.practice-resume-btn:hover { background: rgba(0,245,255,0.25); }
.practice-resume-btn[hidden] { display: none; }

/* ── 3-tab practice setup (mirrors iOS PracticeSetupView) ── */
.practice-setup-tabs {
  display: flex; gap: 0.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 0.25rem;
  margin-bottom: 0.5rem;
}
.practice-setup-tab {
  flex: 1; padding: 0.5rem 0.75rem;
  background: transparent; border: none; border-radius: 8px;
  color: rgba(255,255,255,0.6); cursor: pointer;
  font-family: var(--font-mono, sans-serif); font-size: 0.78rem;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.practice-setup-tab:hover { color: rgba(255,255,255,0.85); }
.practice-setup-tab.active {
  background: rgba(0,245,255,0.15);
  color: #00F5FF;
}

.practice-setup-pane { display: flex; flex-direction: column; gap: 0.75rem; }
.practice-setup-pane[hidden] { display: none; }

/* ── Custom rules disclosure ── */
.practice-custom-rules-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(139,0,255,0.10);
  border: 1px solid rgba(139,0,255,0.35);
  border-radius: 10px;
  color: #C9A0FF;
  cursor: pointer;
  font-family: var(--font-display, sans-serif);
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.65rem 0.85rem; margin-top: 0.5rem;
  transition: background 0.15s;
}
.practice-custom-rules-toggle:hover { background: rgba(139,0,255,0.18); }
.practice-custom-rules-toggle[aria-expanded="true"] .practice-custom-rules-chevron { transform: rotate(180deg); }
.practice-custom-rules-title { flex: 1; text-align: left; }
.practice-custom-rules-badge {
  background: rgba(255,77,0,0.20); border: 1px solid rgba(255,77,0,0.45);
  border-radius: 999px; color: #FF8E5A;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
}
.practice-custom-rules-badge[hidden] { display: none; }
.practice-custom-rules-chevron { transition: transform 0.2s; flex-shrink: 0; }

.practice-custom-rules {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.85rem; display: flex; flex-direction: column; gap: 0.65rem;
}
.practice-custom-rules[hidden] { display: none; }
.practice-custom-rule-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
}
.practice-custom-rule-label {
  color: rgba(255,255,255,0.85);
  font-family: var(--font-mono, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
}
.practice-custom-rule-toggle input[type="checkbox"] { accent-color: #00F5FF; transform: scale(1.15); }
.practice-custom-rule-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; color: #fff;
  font-family: var(--font-mono, sans-serif);
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
}
.practice-segmented {
  display: inline-flex; gap: 0.15rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px; padding: 0.15rem;
}
.practice-seg {
  background: transparent; border: none; border-radius: 6px;
  color: rgba(255,255,255,0.65); cursor: pointer;
  font-family: var(--font-mono, sans-serif);
  font-size: 0.78rem; font-weight: 600;
  padding: 0.32rem 0.6rem; transition: background 0.15s, color 0.15s;
}
.practice-seg.active { background: rgba(0,245,255,0.18); color: #00F5FF; }
.practice-custom-rules-footnote {
  color: rgba(255,255,255,0.50);
  font-size: 0.75rem; margin: 0.25rem 0 0; line-height: 1.45;
}

/* ── Format-compliance banner (shown in deck tabs) ── */
.practice-format-banner {
  border-radius: 8px; padding: 0.55rem 0.75rem;
  font-family: var(--font-mono, sans-serif);
  font-size: 0.78rem; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.practice-format-banner[hidden] { display: none; }
.practice-format-banner.compliant {
  background: rgba(0,245,255,0.10);
  border: 1px solid rgba(0,245,255,0.35);
  color: #9EEAF5;
}
.practice-format-banner.warning {
  background: rgba(255,179,0,0.10);
  border: 1px solid rgba(255,179,0,0.45);
  color: #FFD68A;
}

/* ── Coming-soon hint (deck tabs) ── */
.practice-coming-soon {
  background: rgba(139,0,255,0.08);
  border: 1px dashed rgba(139,0,255,0.35);
  border-radius: 10px; padding: 0.75rem;
  margin-top: 0.5rem;
}
.practice-coming-soon-title {
  color: #C9A0FF; font-family: var(--font-display, sans-serif);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 0.2rem;
}
.practice-coming-soon-desc {
  color: rgba(255,255,255,0.65); font-size: 0.78rem; line-height: 1.4;
}

/* Playmat container */
.practice-playmat {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-near-black, #080810);
}
.practice-playmat[hidden] { display: none; }

/* Practice view base layout */
#view-practice {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Full-screen when playmat is active — practice-setup hides, playmat fills the view */
#view-practice.playmat-mode { padding: 0; }

/* ── Sprite icon utility ── */
.pm-icon {
  display: inline-block; vertical-align: middle;
  width: 16px; height: 16px; flex-shrink: 0;
  color: rgba(255,255,255,0.82); /* ensures currentColor fallback is always visible */
  overflow: visible;
}
.pm-icon-lg { width: 22px; height: 22px; }
.pm-icon-sm { width: 12px; height: 12px; }
.pm-phase-icon { width: 14px; height: 14px; margin-right: 4px; }

/* ================================================================
   PM ROOT — full playmat (namespaced from playmat-v3 design)
   ================================================================ */
#practice-playmat.pm-root {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #080810;
}
/* CRITICAL: hidden attribute must override display:flex!important */
#practice-playmat.pm-root[hidden] { display: none !important; }

/* TOP BAR */
.pm-root .pm-top-bar {
  flex: 0 0 44px; display: flex; align-items: center; padding: 0 10px;
  background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 20; gap: 8px;
}
.pm-root .pm-mode-tabs { display: flex; gap: 2px; flex-shrink: 0; }
.pm-root .pm-mode-tab {
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 8px;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.15s;
}
.pm-root .pm-mode-tab:hover { color: rgba(255,255,255,0.7); }
.pm-root .pm-mode-tab.active { background: rgba(255,77,0,0.12); border-color: rgba(255,77,0,0.3); color: #FF4D00; }
.pm-root .pm-scoreboard { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pm-root .pm-score-label { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); }
.pm-root .pm-score-pips { display: flex; gap: 3px; align-items: center; }
.pm-root .pm-score-pip {
  width: 18px; height: 18px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, sans-serif); font-size: 0.6rem; color: rgba(255,255,255,0.4); transition: all 0.2s;
}
.pm-root .pm-score-pip.you-won { background: rgba(76,175,80,0.2); border-color: #4CAF50; color: #4CAF50; }
.pm-root .pm-score-pip.opp-won { background: rgba(229,57,53,0.2); border-color: #C0392B; color: #C0392B; }
.pm-root .pm-score-pip.current { border-color: #FF4D00; box-shadow: 0 0 6px rgba(255,77,0,0.3); }
.pm-root .pm-score-totals {
  font-family: var(--font-display, sans-serif); font-size: 1.1rem; letter-spacing: 1px;
  display: flex; align-items: center; gap: 4px; margin-left: 4px;
}
.pm-root .pm-score-you { color: #4CAF50; }
.pm-root .pm-score-dash { color: rgba(255,255,255,0.4); font-size: 0.8rem; }
.pm-root .pm-score-opp-val { color: #C0392B; }
.pm-root .pm-top-logo { margin: 0 8px; flex-shrink: 0; }
.pm-root .pm-phase-area { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.pm-root .pm-phase-indicator {
  font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: #00F5FF;
  padding: 4px 8px; background: rgba(0,245,255,0.08); border: 1px solid rgba(0,245,255,0.2); border-radius: 4px;
  display: flex; align-items: center; gap: 4px;
}
.pm-root .pm-honors-badge {
  font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 6px; border-radius: 3px;
  background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.25); color: #FFD700;
  display: flex; align-items: center; gap: 3px;
}
.pm-root .pm-top-exit,
.pm-root .pm-top-help {
  flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,0.3);
  cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
}
.pm-root .pm-top-exit:hover,
.pm-root .pm-top-help:hover { color: #fff; }
.pm-root .pm-top-help {
  font-family: var(--font-display, sans-serif);
  font-weight: 700; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.85rem;
}
.pm-root .pm-top-help:hover { border-color: rgba(255,77,0,0.5); color: #FF4D00; }

/* Active persistent-effects banner — horizontally-scrolling pill
   strip that sits between the top bar and the play area. Hidden when
   no effects are in scope. Each pill carries an owner-color tab on the
   leading edge (cyan = you, violet = CPU). */
.pm-root .pm-active-effects {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
  /* Surface tone matches the top bar; orange wash on the leading
     edge ties the band into the arena's orange-bordered container
     below so it reads as part of the playmat instead of an
     unstyled rectangle. */
  background:
    linear-gradient(90deg,
      rgba(255, 77, 0, 0.10) 0%,
      rgba(255, 77, 0, 0.02) 35%,
      transparent 65%),
    rgba(13, 13, 26, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 77, 0, 0.45);
  height: 36px;
}
.pm-root .pm-active-effects[hidden] { display: none; }
/* "ACTIVE" eyebrow on the leading edge — anchors the band visually
   so coaches read it as the active-effects strip. */
.pm-root .pm-active-effects-eyebrow {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  padding: 0 8px 0 14px;
  border-right: 1px solid rgba(255, 77, 0, 0.35);
  height: 22px;
  font-family: 'Chakra Petch', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--boba-orange, #FF4D00);
  text-transform: uppercase;
}
.pm-root .pm-active-effects-eyebrow svg {
  width: 9px; height: 9px;
  stroke: var(--boba-orange, #FF4D00);
}
.pm-root .pm-active-effects-strip {
  flex: 1;
  display: flex; gap: 6px;
  align-items: center;
  padding: 4px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.pm-root .pm-effect-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--effect-color, #00F5FF);
  /* Layered fill: dark base + colored wash + colored border for
     contrast against the surface band behind. */
  background:
    color-mix(in srgb, var(--effect-color, #00F5FF) 10%, rgba(8, 8, 16, 0.55));
  border: 1px solid color-mix(in srgb, var(--effect-color, #00F5FF) 55%, transparent);
}
.pm-root .pm-effect-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
.pm-root .pm-effect-pill--you { box-shadow: inset 3px 0 0 #00F5FF; }
.pm-root .pm-effect-pill--opp { box-shadow: inset 3px 0 0 #8B00FF; }
.pm-root .pm-effect-pill .pm-effect-pill-tick {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  margin-left: 2px;
}

/* PLAY AREA */
.pm-root .pm-play-area { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; overflow: hidden; }

/* UX#8 — discard inspector modal. Anchored over the playmat;
   scrollable per-card list. Modeled after the existing modal-overlay
   so it inherits backdrop dimming. */
.pm-discard-inspector {
  width: min(440px, calc(100% - 32px));
  max-height: 80vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--boba-surface, #0D0D1A);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 14px;
}
.pm-di-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pm-di-titlebar h2 {
  margin: 0;
  font-family: 'Russo One', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #fff;
}
.pm-di-close {
  background: transparent; border: none; color: rgba(255,255,255,0.6);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.pm-di-body {
  overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.pm-di-header {
  font-family: 'Chakra Petch', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.pm-di-battle-label {
  font-family: 'Chakra Petch', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: #8B00FF; margin: 6px 0 2px;
}
/* Tappable expandable row — uses <details>/<summary> for free state.
   Closed: thumb + name + meta. Open: also shows the larger card image
   and the full ability text so the player can review what each card
   actually did during the battle. Mirrors iOS DiscardCardRow. */
.pm-di-row {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  margin-bottom: 6px;
  overflow: hidden;
}
.pm-di-row[open] {
  border-color: rgba(0,245,255,0.4);
  background: rgba(0,245,255,0.04);
}
.pm-di-row > summary { list-style: none; cursor: pointer; }
.pm-di-row > summary::-webkit-details-marker { display: none; }
.pm-di-row-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
}
.pm-di-row-thumb {
  width: 32px; height: 46px; object-fit: cover;
  border-radius: 4px; background: rgba(8,8,16,0.5);
  flex-shrink: 0;
}
.pm-di-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-di-row-chev {
  font-size: 12px; color: rgba(255,255,255,0.45);
  transition: transform 0.18s ease;
}
.pm-di-row[open] .pm-di-row-chev { transform: rotate(180deg); color: #00F5FF; }
.pm-di-row-detail {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 0 10px 10px 10px;
}
.pm-di-detail-img {
  width: 90px; height: auto; aspect-ratio: 5/7; object-fit: cover;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.pm-di-row-effect {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pm-di-row-effect-label {
  font-family: 'Chakra Petch', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.15em; color: rgba(255,255,255,0.4);
}
.pm-di-row-effect-text {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px; line-height: 1.4;
  color: rgba(255,255,255,0.85);
}
.pm-di-row-name {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px; font-weight: 700; color: #fff;
}
.pm-di-row-meta { display: flex; gap: 6px; align-items: center; }
.pm-di-row-cost {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px; font-weight: 700;
  color: #00F5FF;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,245,255,0.12);
}
.pm-di-row-cost--free { color: #4CAF50; background: rgba(76,175,80,0.12); }
.pm-di-row-bonus {
  font-family: 'Chakra Petch', monospace;
  font-size: 9px; font-weight: 700;
  color: #080810; background: #FFD700;
  padding: 1px 5px;
  border-radius: 999px;
}
/* Card-type-aware chip variants for the discard inspector. Heroes
   show power + weapon; Hot Dogs show a single HOT DOG tag. Plays
   keep the existing pm-di-row-cost / pm-di-row-bonus styling. */
.pm-di-row-chip {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.pm-di-row-chip--power {
  color: #fff;
  background: var(--boba-orange, #FF4D00);
}
.pm-di-row-chip--weapon {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
  letter-spacing: 0.05em;
}
.pm-di-row-chip--hotdog {
  color: #4CAF50;
  background: rgba(76,175,80,0.12);
  letter-spacing: 0.06em;
}
/* Stat block — used in the expanded detail for heroes and hot
   dogs. Two-column label/value rows with a left-aligned label
   and the value flowing on the right. */
.pm-di-stat-block {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 2px;
}
.pm-di-stat-row {
  display: flex; gap: 6px; align-items: flex-start;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px; line-height: 1.35;
}
.pm-di-stat-label {
  flex: 0 0 auto;
  width: 80px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
  padding-top: 2px;
}
.pm-di-stat-value {
  flex: 1;
  color: rgba(255,255,255,0.85);
}
.pm-di-empty {
  padding: 32px 16px;
  text-align: center;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Make the discard chip on the playmat look button-like */
.pm-root .pm-discard-stack {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; padding: 0; cursor: pointer;
}
.pm-root .pm-discard-stack:hover .pm-deck-icon { opacity: 0.7; }

/* Recycle confirm modal — §6.A rules clarification. Visually similar
   to the discard inspector but with explicit destructive-action
   button styling so users register that confirming has consequences. */
.pm-recycle-modal {
  width: min(420px, calc(100% - 32px));
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--boba-surface, #0D0D1A);
  border: 1px solid rgba(255, 209, 102, 0.45);
  border-radius: 14px;
}
.pm-recycle-modal h2 {
  margin: 0;
  font-family: 'Russo One', sans-serif;
  font-size: 16px;
  color: #FFD166;
  letter-spacing: 0.04em;
}
.pm-recycle-modal p {
  margin: 0;
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}
.pm-recycle-list {
  margin: 0;
  padding-left: 20px;
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--boba-text, #fff);
}
.pm-recycle-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 8px;
}
.pm-recycle-cancel,
.pm-recycle-go {
  font-family: 'Chakra Petch', monospace;
  font-weight: 700; font-size: 13px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
}
.pm-recycle-cancel {
  background: var(--boba-glass, rgba(255, 255, 255, 0.06));
  color: var(--boba-text-secondary, #a0a0b0);
}
.pm-recycle-go {
  background: #C0392B;
  color: #fff;
}
.pm-recycle-go:hover { background: #E74C3C; }

/* Pre-Game Spy peek-opponent-hand modal — full card visuals,
   user dismisses when done. Replaces the previous 2s toast that
   was unreadable for two card names. */
.pm-peeked-hand-modal {
  width: min(440px, calc(100% - 32px));
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--boba-surface, #0D0D1A);
  border: 1px solid rgba(0, 245, 255, 0.45);
  border-radius: 14px;
}
.pm-peeked-source {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px; font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.18em;
  text-align: center;
}
.pm-peeked-hand-modal h2 {
  margin: 0;
  font-family: 'Russo One', sans-serif;
  font-size: 22px;
  color: var(--boba-text, #fff);
  letter-spacing: 0.04em;
  text-align: center;
}
.pm-peeked-sub {
  margin: 0;
  text-align: center;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.pm-peeked-cards {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px;
}
.pm-peeked-card {
  display: flex; gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
}
.pm-peeked-card-img {
  width: 90px; height: 126px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(0, 245, 255, 0.4);
  background: rgba(0, 0, 0, 0.3);
}
.pm-peeked-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-peeked-card-info {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; flex: 1;
}
.pm-peeked-card-name {
  font-family: 'Russo One', sans-serif;
  font-size: 15px;
  color: var(--boba-text, #fff);
  line-height: 1.2;
}
.pm-peeked-card-cost {
  display: inline-block; align-self: flex-start;
  background: rgba(0, 245, 255, 0.7);
  color: #fff;
  font-family: 'Chakra Petch', monospace;
  font-weight: 700; font-size: 10px;
  padding: 2px 6px; border-radius: 999px;
}
.pm-peeked-card-ability {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
}
.pm-peeked-done {
  align-self: stretch; margin-top: 4px;
  background: var(--boba-orange, #FF4D00);
  color: #080810;
  font-family: 'Chakra Petch', monospace;
  font-weight: 700; font-size: 13px;
  padding: 10px 18px;
  border: none; border-radius: 999px;
  cursor: pointer;
}
.pm-peeked-done:hover { background: #FF6A1F; }

/* Future-battle pick modal — Delayed Recovery's "choose one of
   your unrevealed Heroes" chooser. Each row tappable. */
.pm-future-pick-modal {
  width: min(420px, calc(100% - 32px));
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--boba-surface, #0D0D1A);
  border: 1px solid rgba(0, 245, 255, 0.45);
  border-radius: 14px;
}
.pm-future-pick-modal h2 {
  margin: 0;
  font-family: 'Russo One', sans-serif;
  font-size: 20px;
  text-align: center;
  color: var(--boba-text, #fff);
  letter-spacing: 0.04em;
}
.pm-future-pick-sub {
  margin: 0;
  text-align: center;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.pm-future-pick-list {
  display: flex; flex-direction: column; gap: 8px;
}
.pm-future-pick-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.pm-future-pick-row:hover {
  background: rgba(0, 245, 255, 0.08);
  border-color: rgba(0, 245, 255, 0.45);
}
.pm-future-pick-img {
  width: 64px; height: 90px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(0, 245, 255, 0.4);
  background: rgba(0, 0, 0, 0.3);
}
.pm-future-pick-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-future-pick-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pm-future-pick-eyebrow {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
}
.pm-future-pick-name {
  font-family: 'Russo One', sans-serif;
  font-size: 15px;
  color: var(--boba-text, #fff);
}
.pm-future-pick-meta {
  display: flex; gap: 8px; align-items: center;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
}
.pm-future-pick-pow {
  background: rgba(0, 245, 255, 0.7);
  color: #fff; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
}
.pm-future-pick-element {
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
}
.pm-future-pick-chevron {
  color: rgba(0, 245, 255, 0.7);
  font-size: 22px;
  flex-shrink: 0;
}
.pm-future-pick-cancel {
  align-self: stretch; margin-top: 4px;
  background: var(--boba-glass, rgba(255, 255, 255, 0.06));
  color: var(--boba-text-secondary, #a0a0b0);
  font-family: 'Chakra Petch', monospace;
  font-weight: 700; font-size: 13px;
  padding: 10px 18px;
  border: none; border-radius: 999px;
  cursor: pointer;
}

/* UX#10 — bonus-play distinction. Gold border on the play card and a
   small ★ BONUS chip in the top-left corner. Bonus plays don't count
   against the 30-card playbook total; calling them out makes the
   accounting visible. */
.pm-root .pm-play-card.is-bonus {
  outline: 2px solid #FFD700;
  outline-offset: -2px;
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.45), 0 0 8px rgba(255, 215, 0, 0.25);
}
.pm-root .pm-play-card .pm-pc-bonus-tag {
  position: absolute;
  top: 3px; left: 3px;
  z-index: 2;
  font-family: 'Chakra Petch', monospace;
  font-size: 8px;
  font-weight: 700;
  color: var(--boba-near-black, #080810);
  background: #FFD700;
  padding: 1px 4px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* UX#5 — effective-cost variants on hand cards. Strike-through
   original + colored arrow + new cost. Three flavors:
   discount (green), inflated-but-affordable (amber), unaffordable (red). */
.pm-root .pm-pc-cost--discount { color: #4CAF50; font-weight: 700; }
.pm-root .pm-pc-cost--inflated { color: #FFD166; font-weight: 700; }
.pm-root .pm-pc-cost--over     { color: #C0392B; font-weight: 700; }
.pm-root .pm-play-card .pm-pc-cost s { color: rgba(255, 255, 255, 0.55); margin-right: 1px; }

/* UX#1 — plays-used row inside the active battle column. Two
   horizontal sub-rows (you + opp); each chip is the play's name.
   Kept compact so it doesn't crowd the arena. */
.pm-root .pm-bc-plays-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 2px 4px 4px;
}
.pm-root .pm-bc-plays-side {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.pm-root .pm-bc-plays-count {
  font-family: 'Chakra Petch', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 3px;
  flex-shrink: 0;
}
.pm-root .pm-bc-play-chip {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: #fff;
  background: rgba(8,8,16,0.72);
  font: inherit; font-size: 10px; font-weight: 700;
  font-family: 'Chakra Petch', monospace;
  transition: transform 0.12s ease, background 0.12s ease;
}
.pm-root .pm-bc-play-chip:hover { background: rgba(8,8,16,0.95); transform: translateY(-1px); }
.pm-root .pm-bc-play-chip:active { transform: translateY(0); }
.pm-root .pm-bc-play-chip--you {
  border: 1px solid rgba(0, 245, 255, 0.85);
}
.pm-root .pm-bc-play-chip--opp {
  border: 1px solid rgba(199, 125, 255, 0.85);
}

/* Setup honors-roll overlay (M4 setup parity) — compact landscape
   layout. Single die per side, horizontal row, minimal vertical
   footprint so the popup never clips on iPhone landscape (~330pt
   usable height). */
.pm-setup-honors-overlay { z-index: 1100; }
.pm-setup-honors {
  background: rgba(13,13,26,0.97);
  border: 2px solid rgba(255,77,0,0.55);
  border-radius: 14px;
  padding: 16px 22px;
  max-width: min(420px, 92vw);
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
  align-items: stretch;
  box-shadow: 0 12px 36px rgba(0,0,0,0.7);
}
.pm-shr-title {
  margin: 0;
  font-family: 'Bebas Neue', 'Russo One', sans-serif;
  font-size: 20px; font-weight: 700;
  color: #FF4D00;
  letter-spacing: 0.08em;
}
.pm-shr-sub {
  margin: 0;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}
.pm-shr-grid {
  display: flex; gap: 14px; justify-content: center;
}
.pm-shr-col {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(8,8,16,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}
.pm-shr-col.won { border-color: currentColor; background: rgba(0,0,0,0.55); }
.pm-shr-col--you { color: #00F5FF; }
.pm-shr-col--cpu { color: #C77DFF; }
.pm-shr-label {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
}
.pm-shr-col.won .pm-shr-label { color: currentColor; }
.pm-shr-die {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  font-size: 28px; line-height: 1;
  color: #fff;
  background: rgba(8,8,16,0.7);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.pm-shr-die.settled {
  border-color: currentColor;
  transform: scale(1.06);
}
.pm-shr-result {
  display: flex; flex-direction: row; gap: 12px; justify-content: center; align-items: center;
  padding-top: 4px; flex-wrap: wrap;
}
.pm-shr-result[hidden] { display: none; }
.pm-shr-winner {
  font-family: 'Bebas Neue', 'Russo One', sans-serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.06em;
}
.pm-shr-winner--player { color: #00F5FF; }
.pm-shr-winner--cpu    { color: #C77DFF; }
.pm-shr-begin {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em;
  color: #080810;
  background: #FF4D00;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}
.pm-shr-begin:hover { background: #ff6020; }

/* UX#7 — Play card review modal opened by tapping a played chip. */
.pm-play-review {
  background: rgba(13,13,26,0.98);
  border: 1px solid rgba(0,245,255,0.4);
  border-radius: 14px;
  max-width: min(420px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 0;
}
.pm-prs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky; top: 0;
  background: rgba(13,13,26,0.98);
  z-index: 1;
}
.pm-prs-header h2 {
  margin: 0;
  font-family: 'Chakra Petch', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.pm-prs-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.pm-prs-close:hover { color: #FF4D00; }
.pm-prs-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pm-prs-image {
  width: 160px;
  height: auto; aspect-ratio: 5/7; object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(139,0,255,0.5);
  align-self: center;
}
.pm-prs-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-prs-chip {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px; font-weight: 700;
  color: #00F5FF;
  background: rgba(0,245,255,0.15);
  padding: 2px 8px;
  border-radius: 999px;
}
.pm-prs-chip--free { color: #4CAF50; background: rgba(76,175,80,0.15); }
.pm-prs-chip--bonus { color: #080810; background: #FFD700; }
.pm-prs-effect-label {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
}
.pm-prs-effect-text {
  font-family: 'Chakra Petch', monospace;
  font-size: 13px; line-height: 1.45;
  color: rgba(255,255,255,0.88);
}

/* Opponent zone */
.pm-root .pm-opponent-zone {
  flex: 0 0 48px; display: flex; align-items: center; padding: 4px 10px; gap: 8px;
  background: rgba(229,57,53,0.04); border-bottom: 1px solid rgba(229,57,53,0.12);
}
.pm-root .pm-opp-section-label {
  font-family: var(--font-mono, monospace); font-size: 0.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: rgba(192,57,43,0.7);
  writing-mode: vertical-lr; transform: rotate(180deg);
}
.pm-root .pm-opp-bench-area { display: flex; gap: 4px; align-items: center; }
.pm-root .pm-opp-sub-label {
  font-family: var(--font-mono, monospace); font-size: 0.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); margin-right: 4px;
}
.pm-root .pm-opp-card {
  width: 32px; height: 44px; border-radius: 4px; border: 1px solid rgba(229,57,53,0.2);
  background: repeating-linear-gradient(45deg, rgba(229,57,53,0.05), rgba(229,57,53,0.05) 2px, transparent 2px, transparent 5px);
}
.pm-root .pm-opp-plays-area {
  display: flex; gap: 4px; align-items: center; margin-left: 12px;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.pm-root .pm-opp-plays-area:hover .pm-resource-chip { background: rgba(139, 0, 255, 0.15); }
.pm-root .pm-opp-resources { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.pm-root .pm-resource-chip {
  display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
}
.pm-root .pm-rc-val { font-family: var(--font-display, sans-serif); font-size: 0.85rem; color: #fff; }
.pm-root .pm-rc-label { font-family: var(--font-mono, monospace); font-size: 0.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.4); }

/* ACTIVE BATTLE COLUMN — replaces the inline mini layout when a column
   is the focal battle. Wide horizontal layout: player card (left) → VS
   indicator (center) → CPU card (right), with breakdown panel above
   when resolved. Mirrors iOS ActiveBattleView. The width is derived
   from the available height: each card stays in 60:84 aspect ratio,
   so the column fits 2 cards + VS gap + padding wide. */
.pm-root .pm-bc.active {
  flex: 0 0 auto !important;
  /* iOS uses 82% of arena width for the active card; the arena fills
     the available horizontal space minus the player + opponent zones.
     On web we mirror that proportionally with min(82vw, 760px), then
     fall back to a sensible min so cards never get cramped. */
  width: clamp(320px, 82vw, 760px) !important;
  max-width: none !important;
  scroll-snap-align: center;
  align-items: stretch;
}
.pm-root .pm-bc-active-inner {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 77, 0, 0.06);
  border: 2px solid rgba(255, 77, 0, 0.4);
  min-height: 0; min-width: 0;
  box-sizing: border-box;
}
.pm-root .pm-bc-active-header {
  font-family: var(--font-display, sans-serif); font-size: 0.95rem;
  color: #FF4D00; letter-spacing: 1.5px; text-align: center;
  padding-top: 2px; flex-shrink: 0;
}
.pm-root .pm-bc-active-row {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch; justify-content: center; gap: 8px;
}
.pm-root .pm-active-hero {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; min-height: 0;
  flex: 1 1 0;
}
.pm-root .pm-active-hero-card {
  position: relative;
  /* Lock to the BoBA card aspect ratio so the frame stays card-shaped
     (taller than wide) regardless of cell shape. height: 100% +
     aspect-ratio derives width from height; max-width: 100% caps
     width if the cell isn't tall enough to fit the height-derived
     width. The browser picks the constraining dimension and the card
     centers in any leftover space. */
  flex: 0 1 auto;
  height: 100%;
  width: auto;
  aspect-ratio: 60 / 84;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  border-radius: 10px; border: 2px solid rgba(255,255,255,0.2);
  background: #080810; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.pm-root .pm-active-hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
}
.pm-root .pm-active-hero-power {
  position: absolute; bottom: 6px; right: 8px;
  font-family: var(--font-display, sans-serif); font-size: 1.85rem;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.9);
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.65);
}
.pm-root .pm-active-hero-bonus {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--font-mono, monospace); font-size: 0.85rem; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.pm-root .pm-active-hero-pending {
  position: absolute; top: 6px; right: 8px;
  font-family: var(--font-mono, monospace); font-size: 0.85rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.pm-root .pm-active-hero-card-back {
  display: flex; align-items: center; justify-content: center;
}
.pm-root .pm-active-hero-card-back svg { width: 70%; height: 70%; }
.pm-root .pm-active-hero-name {
  font-family: var(--font-mono, monospace); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.5px; color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  flex-shrink: 0;
}
.pm-root .pm-active-hero-weapon {
  font-family: var(--font-mono, monospace); font-size: 0.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid;
  flex-shrink: 0;
}
.pm-root .pm-active-hero--empty {
  align-items: center; justify-content: center;
  color: rgba(255,255,255,0.2); font-size: 1.5rem;
}
.pm-root .pm-bc-active-vs {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, sans-serif); font-size: 1.4rem; color: rgba(255,255,255,0.55);
  letter-spacing: 2px; flex: 0 0 44px;
}
.pm-root .pm-bc-active-vs--win  { color: #4CAF50; text-shadow: 0 0 12px rgba(76,175,80,0.6); }
.pm-root .pm-bc-active-vs--lose { color: #C0392B; text-shadow: 0 0 12px rgba(192,57,43,0.6); }
.pm-root .pm-bc-active-vs--tie  { color: #FFD700; text-shadow: 0 0 12px rgba(255,215,0,0.5); }

/* Hero pulse — fires when effect power changes since the last render.
   Spring-ish scale + cyan/violet glow, matching iOS .task(id:) pulse. */
@keyframes pm-hero-pulse-player {
  0%   { transform: scale(1);    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0   rgba(0,245,255,0); }
  35%  { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 18px rgba(0,245,255,0.85); }
  100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0   rgba(0,245,255,0); }
}
@keyframes pm-hero-pulse-cpu {
  0%   { transform: scale(1);    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0   rgba(199,125,255,0); }
  35%  { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 18px rgba(199,125,255,0.85); }
  100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0   rgba(199,125,255,0); }
}
.pm-root .pm-active-hero--pulse.pm-active-hero--player .pm-active-hero-card {
  animation: pm-hero-pulse-player 0.62s ease-out;
}
.pm-root .pm-active-hero--pulse.pm-active-hero--cpu .pm-active-hero-card {
  animation: pm-hero-pulse-cpu 0.62s ease-out;
}

/* SUPER weapon tiebreaker banner — Rules §4.5 explanation, post-
   resolution only when applicable. Mirrors iOS superTiebreakerBanner. */
.pm-root .pm-super-tiebreaker-banner {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 0, 255, 0.10);
  border: 1px solid rgba(255, 0, 255, 0.45);
  flex-shrink: 0;
}
.pm-root .pm-super-tiebreaker-bolt {
  font-size: 1.1rem; line-height: 1.2;
  flex-shrink: 0;
}
.pm-root .pm-super-tiebreaker-text { flex: 1; min-width: 0; }
.pm-root .pm-super-tiebreaker-title {
  font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 700;
  color: #FF00FF; letter-spacing: 1.0px; line-height: 1.3;
}
.pm-root .pm-super-tiebreaker-body {
  font-family: var(--font-mono, monospace); font-size: 0.62rem;
  color: rgba(255,255,255,0.7); margin-top: 2px; line-height: 1.4;
}

/* DICE / COIN REVEAL OVERLAY — animated reveal for coin flips and
   dice rolls. Mirrors iOS DiceCoinRevealOverlay. Glyphs cycle during
   spin then settle on the actual result. */
.pm-dice-coin-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  animation: pm-dice-fade-in 0.18s ease-out;
}
@keyframes pm-dice-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pm-dice-coin-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13,13,26,0.95), rgba(8,8,16,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  min-width: 260px;
}
.pm-dice-coin-source {
  font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 2px; color: rgba(255,255,255,0.4);
}
.pm-dice-coin-title {
  font-family: var(--font-display, sans-serif); font-size: 1.4rem;
  letter-spacing: 1.5px;
}
.pm-dice-coin-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.pm-dice-coin-die,
.pm-dice-coin-coin {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 16px; min-width: 76px;
  border: 2px solid; border-radius: 10px;
  background: rgba(255,255,255,0.04);
  animation: pm-dice-spin 0.85s ease-out;
}
@keyframes pm-dice-spin {
  0%   { transform: rotateY(0deg) scale(0.85);   filter: blur(2px); }
  60%  { transform: rotateY(720deg) scale(1.02); filter: blur(0); }
  100% { transform: rotateY(720deg) scale(1);    filter: blur(0); }
}
.pm-dice-coin-glyph {
  font-size: 2.6rem; line-height: 1;
}
.pm-dice-coin-value {
  font-family: var(--font-display, sans-serif); font-size: 1.1rem;
  color: #fff;
}
.pm-dice-coin-coin-glyph {
  font-size: 2rem; line-height: 1;
}
.pm-dice-coin-coin-label {
  font-family: var(--font-display, sans-serif); font-size: 0.95rem; letter-spacing: 1.2px;
  color: #fff;
}
.pm-dice-coin-hint {
  font-family: var(--font-mono, monospace); font-size: 0.55rem;
  color: rgba(255,255,255,0.35); letter-spacing: 1.5px; opacity: 0;
  transition: opacity 0.2s ease-in;
}
.pm-dice-coin-overlay--settled .pm-dice-coin-hint { opacity: 1; }

/* BREAKDOWN PANEL — itemized power contributions, rendered post-resolution */
.pm-root .pm-breakdown-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px;
  border-radius: 8px; background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}
.pm-root .pm-breakdown-col {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; border-radius: 6px; background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}
.pm-root .pm-breakdown-col--winner { border-color: rgba(76,175,80,0.5); background: rgba(76,175,80,0.06); }
.pm-root .pm-breakdown-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pm-root .pm-breakdown-side {
  font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 1.5px; color: #00F5FF;
}
.pm-root .pm-breakdown-col:nth-child(2) .pm-breakdown-side { color: #C0392B; }
.pm-root .pm-breakdown-base {
  font-family: var(--font-mono, monospace); font-size: 0.55rem;
  color: rgba(255,255,255,0.5); letter-spacing: 0.5px;
}
.pm-root .pm-breakdown-rows { display: flex; flex-direction: column; gap: 2px; }
.pm-root .pm-breakdown-empty {
  font-family: var(--font-mono, monospace); font-size: 0.55rem;
  color: rgba(255,255,255,0.3); padding: 4px 0;
}
.pm-root .pm-breakdown-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
  background: transparent; border: none;
  font-family: var(--font-mono, monospace); font-size: 0.65rem;
  color: rgba(255,255,255,0.85); text-align: left;
}
.pm-root .pm-breakdown-row:hover { background: rgba(0,245,255,0.06); }
.pm-root .pm-breakdown-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-root .pm-breakdown-delta { font-weight: 700; padding-left: 6px; }
.pm-root .pm-breakdown-pos { color: #4CAF50; }
.pm-root .pm-breakdown-neg { color: #C0392B; }
.pm-root .pm-breakdown-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-mono, monospace); font-size: 0.6rem;
  letter-spacing: 1px; color: rgba(255,255,255,0.6);
}
.pm-root .pm-breakdown-final {
  font-family: var(--font-display, sans-serif); font-size: 1.1rem;
  color: #fff;
}

/* Arena — horizontal scroll. The active battle column is wide; all
   others stay narrow. iOS uses ScrollView(.horizontal) with a single
   HStack. Mirrors PracticeView.arenaView. */
.pm-root .pm-arena-zone {
  flex: 1; display: flex; align-items: stretch; justify-content: flex-start;
  gap: 8px; padding: 6px 10px; min-height: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Hide native scrollbar on web; the active column auto-centers. */
  scrollbar-width: thin;
}
.pm-root .pm-arena-zone::-webkit-scrollbar { height: 4px; }
.pm-root .pm-arena-zone::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Battle columns */
.pm-root .pm-bc {
  /* Mirrors iOS BattleColumnView at inactive size (90pt fixed). The
     active column overrides this with its own clamp() in .pm-bc.active. */
  flex: 0 0 auto; width: 90px; display: flex; flex-direction: column; align-items: center; gap: 0;
  scroll-snap-align: center;
}
.pm-root .pm-bc-number {
  font-family: var(--font-display, sans-serif); font-size: 0.55rem; color: rgba(255,255,255,0.4);
  letter-spacing: 1px; margin-bottom: 2px; flex-shrink: 0;
}
.pm-root .pm-bc-opp {
  flex: 1; width: 100%; border-radius: 6px 6px 0 0; border: 1.5px solid rgba(255,255,255,0.1); border-bottom: none;
  background: #080810; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 60px;
}
.pm-root .pm-bc-opp .pm-bc-power { font-family: var(--font-display, sans-serif); font-size: 1.4rem; color: rgba(255,255,255,0.5); }
.pm-root .pm-bc-opp .pm-bc-name { font-family: var(--font-mono, monospace); font-size: 0.45rem; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.pm-root .pm-bc-vs {
  flex: 0 0 36px; width: 100%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.025); border-left: 1.5px solid rgba(255,255,255,0.1); border-right: 1.5px solid rgba(255,255,255,0.1);
}
.pm-root .pm-bc-vs span { font-family: var(--font-display, sans-serif); font-size: 0.8rem; color: rgba(255,255,255,0.4); letter-spacing: 2px; }
.pm-root .pm-bc-player {
  flex: 1; width: 100%; border-radius: 0 0 6px 6px; border: 1.5px solid rgba(255,255,255,0.1); border-top: none;
  background: #080810; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 60px;
}
.pm-root .pm-bc-player .pm-bc-power { font-family: var(--font-display, sans-serif); font-size: 2rem; color: #fff; line-height: 1; }
.pm-root .pm-bc-player .pm-bc-name { font-family: var(--font-mono, monospace); font-size: 0.5rem; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.pm-root .pm-bc-element { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 6px 6px; }
.pm-root .pm-slot-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; z-index: 0;
}
/* Gradient overlay so power number stays legible over card art */
.pm-root .pm-bc-opp::after,
.pm-root .pm-bc-player::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.pm-root .pm-bc-opp::after {
  background: linear-gradient(to top, rgba(8,8,16,0.95) 0%, rgba(8,8,16,0.6) 35%, rgba(8,8,16,0.1) 65%, transparent 100%);
}
.pm-root .pm-bc-player::after {
  background: linear-gradient(to top, rgba(8,8,16,0.95) 0%, rgba(8,8,16,0.6) 35%, rgba(8,8,16,0.1) 65%, transparent 100%);
}
.pm-root .pm-bc-opp .pm-bc-power,
.pm-root .pm-bc-opp .pm-bc-name,
.pm-root .pm-bc-player .pm-bc-power,
.pm-root .pm-bc-player .pm-bc-name,
.pm-root .pm-bc-bonus,
.pm-root .pm-bc-pending { position: relative; z-index: 2; }
.pm-root .pm-bc-pending {
  font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 1px 4px; border-radius: 4px;
  border: 1px dashed currentColor; background: rgba(0,0,0,0.6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.pm-root .pm-bc-element { z-index: 3; }
/* Text-shadow ensures legibility regardless of card art color */
.pm-root .pm-bc-power {
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.9), 1px 1px 0 rgba(0,0,0,1);
}
.pm-root .pm-bc-name {
  text-shadow: 0 1px 3px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,0.9);
}

/* Battle column states */
.pm-root .pm-bc.active .pm-bc-player { border-color: rgba(255,77,0,0.6); background: rgba(255,77,0,0.06); box-shadow: 0 0 16px rgba(255,77,0,0.12); }
.pm-root .pm-bc.active .pm-bc-opp { border-color: rgba(255,77,0,0.3); }
.pm-root .pm-bc.active .pm-bc-vs { border-color: rgba(255,77,0,0.3); background: rgba(255,77,0,0.06); }
.pm-root .pm-bc.won .pm-bc-vs { background: rgba(76,175,80,0.12); border-color: rgba(76,175,80,0.3); }
.pm-root .pm-bc.won .pm-bc-vs span { color: #4CAF50; }
.pm-root .pm-bc.lost .pm-bc-vs { background: rgba(229,57,53,0.12); border-color: rgba(229,57,53,0.3); }
.pm-root .pm-bc.lost .pm-bc-vs span { color: #C0392B; }
.pm-root .pm-bc.tied .pm-bc-vs span { color: #FFD700; }
.pm-root .pm-bc.pending { opacity: 0.4; }

/* PLAYER ZONE */
.pm-root .pm-player-zone {
  flex: 0 0 auto; background: rgba(0,0,0,0.35); border-top: 1px solid rgba(255,255,255,0.1);
  padding: 6px 10px; display: flex; align-items: center; gap: 8px; z-index: 10; overflow-x: auto;
}
.pm-root .pm-deck-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.pm-root .pm-deck-icon {
  width: 40px; height: 54px; border-radius: 5px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,0.1); position: relative;
}
.pm-root .pm-hero-deck-icon { background: rgba(192,57,43,0.08); }
.pm-root .pm-play-deck-icon { background: rgba(139,0,255,0.08); }
.pm-root .pm-hd-deck-icon { background: rgba(76,175,80,0.08); }
.pm-root .pm-di-count { font-family: var(--font-display, sans-serif); font-size: 0.65rem; color: rgba(255,255,255,0.7); }
.pm-root .pm-deck-label { font-family: var(--font-mono, monospace); font-size: 0.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); }
.pm-root .pm-zone-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

/* Bench */
.pm-root .pm-bench-area { display: flex; flex-direction: column; gap: 2px; }
.pm-root .pm-bench-label { font-family: var(--font-mono, monospace); font-size: 0.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); }
.pm-root .pm-bench-cards { display: flex; gap: 4px; }
.pm-root .pm-bench-card {
  width: 52px; height: 72px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.pm-root .pm-bench-card:hover { border-color: #00F5FF; transform: translateY(-2px); }
.pm-root .pm-bench-card.selected { border-color: #00F5FF; box-shadow: 0 0 12px rgba(0,245,255,0.25); transform: translateY(-4px); }
/* Card image fills the bench slot */
.pm-root .pm-bc-sub-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.pm-root .pm-bc-sub-initials { font-family: var(--font-display, sans-serif); font-size: 1rem; color: rgba(255,255,255,0.3); }
/* Overlay: element dot + power number at bottom */
.pm-root .pm-bc-sub-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 60%, transparent);
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px; border-radius: 0 0 4px 4px;
}
.pm-root .pm-bc-sub-power { font-family: var(--font-display, sans-serif); font-size: 0.9rem; color: #fff; line-height: 1; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); position: relative; z-index: 1; }
.pm-root .pm-bc-sub-el { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1; }

/* Play hand */
.pm-root .pm-hand-area { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pm-root .pm-hand-label { font-family: var(--font-mono, monospace); font-size: 0.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); }
.pm-root .pm-hand-cards { display: flex; gap: 4px; overflow-x: auto; }
.pm-root .pm-play-card {
  width: 72px; min-width: 72px; height: 96px; border-radius: 5px;
  border: 1.5px solid rgba(139,0,255,0.35); background: rgba(8,8,16,0.6);
  display: flex; flex-direction: column; padding: 0; cursor: pointer;
  transition: all 0.15s; position: relative; overflow: hidden;
}
.pm-root .pm-play-card:hover { border-color: #8B00FF; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(139,0,255,0.25); }
.pm-root .pm-play-card.cannot-afford { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* Card image fills background */
.pm-root .pm-pc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55; z-index: 0; display: block;
}
/* Gradient over image so text is readable */
.pm-root .pm-play-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,16,0.92) 0%, rgba(8,8,16,0.3) 55%, transparent 100%);
}
.pm-root .pm-pc-header {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; flex-direction: column; padding: 3px 4px 4px;
  gap: 1px;
}
.pm-root .pm-pc-name {
  font-family: var(--font-mono, monospace); font-size: 0.38rem; font-weight: 700;
  text-transform: uppercase; color: #fff; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.pm-root .pm-pc-cost {
  font-family: var(--font-mono, monospace); font-size: 0.38rem; font-weight: 700; color: #00F5FF;
}
.pm-root .pm-pc-effect { display: none; } /* effect text moved to popup */

/* Play card popup — shown when user taps a play card */
.pm-play-popup {
  position: absolute; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(8,8,16,0.9); backdrop-filter: blur(8px);
}
.pm-play-popup-inner {
  display: flex; gap: 20px;
  background: #0D0D1A;
  border: 1px solid rgba(139,0,255,0.5);
  border-radius: 16px; padding: 20px;
  max-width: 580px; width: 100%; max-height: calc(100% - 32px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 40px rgba(139,0,255,0.15);
}
.pm-play-popup-img-wrap {
  flex-shrink: 0; width: 160px;
  display: flex; align-items: center; justify-content: center;
}
.pm-play-popup-img {
  width: 160px; height: 224px; object-fit: cover;
  border-radius: 10px; display: block;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 20px rgba(139,0,255,0.2);
}
.pm-play-popup-body {
  flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.pm-play-popup-header {
  display: flex; align-items: flex-start; gap: 8px;
}
.pm-play-popup-name {
  font-family: var(--font-display, sans-serif); font-size: 1.4rem; color: #fff; line-height: 1.1; flex: 1;
}
.pm-play-popup-element {
  font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 4px; flex-shrink: 0;
  background: rgba(139,0,255,0.15); border: 1px solid rgba(139,0,255,0.3); color: #8B00FF;
}
.pm-play-popup-cost-row {
  display: flex; align-items: center; gap: 8px;
}
.pm-play-popup-cost-pill {
  font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(0,245,255,0.12); border: 1px solid rgba(0,245,255,0.35); color: #00F5FF;
}
.pm-play-popup-cost-pill.cannot-afford {
  background: rgba(192,57,43,0.12); border-color: rgba(192,57,43,0.35); color: #ff6b55;
}
.pm-play-popup-afford-warn {
  font-family: var(--font-mono, monospace); font-size: 0.65rem; color: rgba(192,57,43,0.8);
}
.pm-play-popup-partial-note {
  font-family: var(--font-mono, monospace); font-size: 0.65rem;
  color: #FFD166; background: rgba(255,209,102,0.08);
  border: 1px solid rgba(255,209,102,0.25); border-radius: 6px;
  padding: 6px 10px; line-height: 1.3;
}
.pm-play-popup-divider {
  height: 1px; background: rgba(255,255,255,0.08); flex-shrink: 0;
}
.pm-play-popup-effect-label {
  font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.3); text-transform: uppercase;
}
.pm-play-popup-effect {
  font-family: var(--font-mono, monospace); font-size: 0.8rem; color: rgba(255,255,255,0.85);
  line-height: 1.55; flex: 1; overflow-y: auto;
}
.pm-play-popup-actions { display: flex; gap: 10px; margin-top: auto; flex-shrink: 0; }
.pm-play-popup-cancel {
  flex: 1; padding: 10px 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; font-family: var(--font-mono, monospace);
  font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.5); cursor: pointer;
  transition: background 0.15s;
}
.pm-play-popup-cancel:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }
.pm-play-popup-play {
  flex: 2; padding: 10px 16px;
  background: rgba(139,0,255,0.25); border: 1.5px solid rgba(139,0,255,0.6);
  border-radius: 8px; font-family: var(--font-mono, monospace);
  font-size: 0.75rem; font-weight: 700; color: #fff; cursor: pointer;
  transition: all 0.15s;
}
.pm-play-popup-play:hover:not(:disabled) { background: rgba(139,0,255,0.45); box-shadow: 0 0 16px rgba(139,0,255,0.3); }
.pm-play-popup-play:disabled { opacity: 0.35; cursor: not-allowed; }

/* HD pips */
.pm-root .pm-hd-area { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.pm-root .pm-hd-label { font-family: var(--font-mono, monospace); font-size: 0.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 3px; }
.pm-root .pm-hd-count-display { font-family: var(--font-display, sans-serif); font-size: 0.7rem; color: #4CAF50; }
.pm-root .pm-hd-pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.pm-root .pm-hd-pip { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid rgba(76,175,80,0.3); background: rgba(76,175,80,0.08); cursor: pointer; transition: all 0.15s; }
.pm-root .pm-hd-pip.available { background: rgba(76,175,80,0.2); border-color: #4CAF50; }
.pm-root .pm-hd-pip.spent { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.08); opacity: 0.3; }

/* Action buttons */
.pm-root .pm-action-area { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.pm-root .pm-btn-sub {
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.5rem;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px; border-radius: 4px;
  border: 1.5px solid #00F5FF; background: rgba(0,245,255,0.08); color: #00F5FF;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.pm-root .pm-btn-sub:hover:not(:disabled) { background: rgba(0,245,255,0.15); }
.pm-root .pm-btn-sub:disabled { opacity: 0.3; cursor: not-allowed; }
.pm-root .pm-btn-done {
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.5rem;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px; border-radius: 4px;
  border: 1.5px solid #FF4D00; background: rgba(255,77,0,0.08); color: #FF4D00;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.pm-root .pm-btn-done:hover { background: rgba(255,77,0,0.15); }

/* Discard */
.pm-root .pm-discard-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }

/* Phase banner overlay */
.pm-root .pm-phase-banner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono, monospace); font-size: 1.2rem; text-transform: uppercase;
  letter-spacing: 4px; color: #00F5FF; background: rgba(8,8,16,0.9);
  padding: 12px 32px; border-radius: 8px; border: 1px solid rgba(0,245,255,0.2);
  z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
.pm-root .pm-phase-banner.visible { opacity: 1; }

/* Match over overlay */
.pm-root .pm-match-over-overlay {
  position: absolute; inset: 0; background: rgba(8,8,16,0.85); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 50;
}
.pm-root .pm-match-over-overlay[hidden] { display: none; }
.pm-root .pm-result-title { font-family: var(--font-display, sans-serif); font-size: 2.5rem; letter-spacing: 0.08em; }
.pm-root .pm-result-title.win { color: #4CAF50; }
.pm-root .pm-result-title.lose { color: #C0392B; }
.pm-root .pm-result-title.tie { color: #FF4D00; }
.pm-root .pm-result-score { font-family: var(--font-display, sans-serif); font-size: 2rem; color: #fff; }
.pm-root .pm-result-btns { display: flex; gap: 1rem; }
.pm-root .pm-result-btn {
  background: rgba(255,77,0,0.2); border: 1px solid rgba(255,77,0,0.5); border-radius: 10px;
  color: #FF4D00; cursor: pointer; font-family: var(--font-mono, monospace); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.06em; padding: 0.5rem 1.25rem; transition: all 0.15s;
}
.pm-root .pm-result-btn:hover { background: rgba(255,77,0,0.35); }
.pm-root .pm-result-btn.secondary { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); }

/* Match-over card — surface for the verdict + trophy strip + per-
   battle summary list. Mirrors iOS matchOverOverlay. */
.pm-root .pm-match-over-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  padding: 24px 22px 20px;
  border-radius: 20px;
  background: var(--boba-surface);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}
.pm-root .pm-result-title--win  { color: #4CAF50; }
.pm-root .pm-result-title--lose { color: #C0392B; }
.pm-root .pm-result-title--tie  { color: #FF4D00; }
.pm-root .pm-result-sub {
  font-family: var(--font-mono, monospace); font-size: 0.85rem;
  color: rgba(255,255,255,0.65); margin-top: -6px;
}

/* Trophy strip — one icon per battle. */
.pm-root .pm-trophy-section {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%;
}
.pm-root .pm-trophy-label {
  font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 1.5px; color: rgba(255,255,255,0.4);
}
.pm-root .pm-trophy-strip {
  display: flex; gap: 6px; justify-content: center;
}
.pm-root .pm-trophy {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 28px;
}
.pm-root .pm-trophy-glyph {
  font-size: 1.3rem; line-height: 1;
}
.pm-root .pm-trophy-num {
  font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
  color: rgba(255,255,255,0.4);
}
.pm-root .pm-trophy--win .pm-trophy-glyph     { color: #4CAF50; filter: drop-shadow(0 0 6px rgba(76,175,80,0.5)); }
.pm-root .pm-trophy--lose .pm-trophy-glyph    { color: #C0392B; }
.pm-root .pm-trophy--tie .pm-trophy-glyph     { color: #FF4D00; }
.pm-root .pm-trophy--pending .pm-trophy-glyph { color: rgba(255,255,255,0.2); }

/* Per-battle summary scroll — capped height so 7 battles never push
   the buttons off-screen. */
.pm-root .pm-summary-scroll {
  width: 100%;
  max-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 2px;
}
.pm-root .pm-summary-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.pm-root .pm-summary-row-head {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 700;
}
.pm-root .pm-summary-battle { color: #fff; letter-spacing: 1px; }
.pm-root .pm-summary-dot { color: rgba(255,255,255,0.4); }
.pm-root .pm-summary-verdict--win   { color: #4CAF50; }
.pm-root .pm-summary-verdict--lose  { color: #C0392B; }
.pm-root .pm-summary-verdict--tie   { color: #FF4D00; }
.pm-root .pm-summary-verdict--muted { color: rgba(255,255,255,0.4); }
.pm-root .pm-summary-power {
  margin-left: auto;
  color: rgba(255,255,255,0.55); font-weight: 400;
}
.pm-root .pm-summary-side {
  display: flex; align-items: flex-start; gap: 8px;
}
.pm-root .pm-summary-side-label {
  font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
  color: rgba(255,255,255,0.4); width: 28px; letter-spacing: 1px;
  padding-top: 2px;
}
.pm-root .pm-summary-side-body { flex: 1; min-width: 0; }
.pm-root .pm-summary-hero {
  font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 700;
  color: rgba(255,255,255,0.7);
}
.pm-root .pm-summary-plays {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-family: var(--font-mono, monospace); font-size: 0.6rem;
  line-height: 1.4;
}
.pm-root .pm-summary-plays--empty { color: rgba(255,255,255,0.3); }
.pm-root .pm-summary-play-chip {
  font-family: var(--font-mono, monospace); font-size: 0.58rem;
  font-weight: 700; letter-spacing: 0.3px;
  color: #00F5FF; background: rgba(0, 245, 255, 0.08);
  border: 1px solid rgba(0, 245, 255, 0.3); border-radius: 999px;
  padding: 2px 8px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pm-root .pm-summary-play-chip:hover {
  background: rgba(0, 245, 255, 0.18);
  border-color: rgba(0, 245, 255, 0.55);
}

/* CPU play overlay */
.pm-cpu-overlay {
  position: absolute; inset: 0; background: rgba(8,8,16,0.8); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 45;
  padding: 0.5rem;   /* keeps the inner panel off the viewport edges in landscape */
}
.pm-cpu-overlay[hidden] { display: none; }
.pm-cpu-overlay-inner {
  background: var(--boba-surface, #0D0D1A); border: 1px solid rgba(139,0,255,0.4);
  border-radius: 12px; padding: 1.25rem; max-width: 280px; width: 90%;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  max-height: 95vh;           /* scroll when content would clip the OK button */
  overflow-y: auto;
}

/* Rotate-to-landscape hint — hidden by default, revealed only when
   the playmat is running on a phone-width portrait viewport. Users
   can dismiss it (body.practice-rotate-dismissed hides it again for
   the session). */
.practice-rotate-hint { display: none; }
body.practice-active:not(.practice-rotate-dismissed) .practice-rotate-hint {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(8, 8, 16, 0.92);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
}
@media (max-width: 820px) and (orientation: portrait) {
  body.practice-active:not(.practice-rotate-dismissed) .practice-rotate-hint {
    display: flex;
  }
}
.practice-rotate-hint-inner {
  max-width: 320px; width: 100%;
  background: var(--boba-surface, #0D0D1A);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}
.practice-rotate-icon {
  width: 56px; height: 56px;
  color: var(--boba-cyan, #00F5FF);
  animation: practice-rotate-wiggle 2.2s ease-in-out infinite;
}
.practice-rotate-icon svg { width: 100%; height: 100%; }
@keyframes practice-rotate-wiggle {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-90deg); }
}
.practice-rotate-hint-inner h3 {
  font-family: var(--font-display, sans-serif);
  color: #fff; font-size: 1.1rem; margin: 0;
  letter-spacing: 0.05em;
}
.practice-rotate-hint-inner p {
  font-family: var(--font-mono, monospace);
  color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; line-height: 1.5;
  margin: 0;
}
.practice-rotate-dismiss {
  background: rgba(0, 245, 255, 0.18);
  border: 1px solid rgba(0, 245, 255, 0.4);
  color: var(--boba-cyan, #00F5FF);
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.08em;
  padding: 0.5rem 1.6rem;
  border-radius: 20px;
  cursor: pointer;
}

/* Mobile landscape: the overlay card was going vertical-taller than
   the viewport, putting the OK button off-screen. Constrain image +
   collapse spacing so everything fits between top and bottom of a
   390×844-ish phone on its side. */
@media (max-width: 932px) and (orientation: landscape) {
  .pm-cpu-overlay-inner {
    padding: 0.6rem 0.9rem;
    gap: 0.4rem;
    max-height: 94vh;
  }
  .pm-cpu-card-img { width: 90px; }
  .pm-cpu-overlay-label { font-size: 0.55rem; }
  .pm-cpu-card-name { font-size: 0.9rem; }
  .pm-cpu-card-effect {
    font-size: 0.55rem; max-height: 2.8em;
  }
  .pm-cpu-card-notifs { font-size: 0.55rem; padding: 4px 8px; }
  .pm-cpu-overlay-dismiss { padding: 0.35rem 1.2rem; font-size: 0.7rem; }
}
.pm-cpu-overlay-label {
  font-family: var(--font-mono, monospace); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; color: #8B00FF; opacity: 0.8;
}
.pm-cpu-overlay-card {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.pm-cpu-card-img { width: 140px; height: auto; border-radius: 6px; }
.pm-cpu-card-name {
  font-family: var(--font-display, sans-serif); font-size: 1rem; color: #fff;
  text-align: center; letter-spacing: 0.04em;
}
.pm-cpu-card-cost {
  font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 700;
  color: #4CAF50; letter-spacing: 0.06em;
}
.pm-cpu-card-effect {
  font-family: var(--font-mono, monospace); font-size: 0.6rem; color: rgba(255,255,255,0.6);
  text-align: center; line-height: 1.4; max-height: 3.5em; overflow: hidden;
}
.pm-cpu-card-deltas {
  display: flex; gap: 1rem; font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 700;
}
.pm-cpu-card-notifs {
  display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; max-width: 280px;
  font-family: var(--font-mono, monospace); font-size: 0.6rem; color: #FFD166;
  background: rgba(255,209,102,0.08); border: 1px solid rgba(255,209,102,0.25);
  border-radius: 6px; padding: 6px 10px; line-height: 1.35;
}
.pm-cpu-card-notifs span { display: block; }
.pm-cpu-card-delta-opp { color: #8B00FF; }
.pm-cpu-card-delta-you { color: #C0392B; }
.pm-cpu-overlay-dismiss {
  background: rgba(139,0,255,0.2); border: 1px solid rgba(139,0,255,0.4); border-radius: 8px;
  color: #8B00FF; cursor: pointer; font-family: var(--font-mono, monospace); font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.06em; padding: 0.4rem 1.5rem; transition: all 0.15s;
}
.pm-cpu-overlay-dismiss:hover { background: rgba(139,0,255,0.35); }

/* Effect result toast (shown after playing a card) */
.pm-effect-toast {
  position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: rgba(8,8,16,0.92); border: 1px solid rgba(0,245,255,0.25); border-radius: 10px;
  padding: 8px 16px; z-index: 35; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
}
.pm-effect-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.pm-effect-toast-icon { font-size: 1.1rem; }
.pm-effect-toast-name {
  font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; white-space: nowrap;
}
.pm-effect-toast-desc {
  font-family: var(--font-mono, monospace); font-size: 0.65rem; color: rgba(255,255,255,0.7);
  white-space: nowrap;
}

/* CPU sub callout */
.pm-cpu-sub-callout {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(8,8,16,0.92); border: 1px solid rgba(255,77,0,0.4); border-radius: 14px;
  padding: 1rem 1.25rem; z-index: 40; animation: pmFadeInOut 3.2s ease-in-out forwards;
  max-width: min(340px, 90vw);
}
.pm-cpu-sub-callout[hidden] { display: none; }
.pm-cpu-sub-inner {
  display: flex; align-items: center; gap: 0.75rem; flex-direction: column;
}
.pm-cpu-sub-icon { font-size: 1.6rem; }
.pm-cpu-sub-body {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.pm-cpu-sub-text {
  font-family: var(--font-mono, monospace); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.12em; color: #FF4D00; text-align: center;
}
.pm-cpu-sub-img {
  width: 84px; height: auto; aspect-ratio: 5/7; object-fit: cover;
  border-radius: 6px; border: 2px solid rgba(255,77,0,0.5);
  background: rgba(8,8,16,0.5);
}
.pm-cpu-sub-detail {
  font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.85); text-align: center; line-height: 1.35;
}
@keyframes pmFadeInOut {
  0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; }
}

/* MODE VISIBILITY — hides sections irrelevant to game mode */
.pm-root.mode-rookie .pm-bench-area,
.pm-root.mode-rookie .pm-hand-area,
.pm-root.mode-rookie .pm-hd-area,
.pm-root.mode-rookie .pm-play-deck-stack,
.pm-root.mode-rookie .pm-hd-deck-stack,
.pm-root.mode-rookie .pm-btn-sub,
.pm-root.mode-rookie .pm-opp-plays-area,
.pm-root.mode-rookie .pm-divider-bench,
.pm-root.mode-rookie .pm-divider-hand { display: none !important; }

.pm-root.mode-substitution .pm-hand-area,
.pm-root.mode-substitution .pm-play-deck-stack,
.pm-root.mode-substitution .pm-opp-plays-area,
.pm-root.mode-substitution .pm-divider-hand { display: none !important; }

/* PHASE VISIBILITY — progressive disclosure */
.pm-root.phase-reveal .pm-bench-area,
.pm-root.phase-play .pm-bench-area,
.pm-root.phase-resolution .pm-bench-area,
.pm-root.phase-cleanup .pm-bench-area { opacity: 0.3; pointer-events: none; }
.pm-root.phase-sub .pm-bench-area { opacity: 1; pointer-events: auto; }

.pm-root.phase-reveal .pm-hand-area,
.pm-root.phase-sub .pm-hand-area,
.pm-root.phase-resolution .pm-hand-area,
.pm-root.phase-cleanup .pm-hand-area { opacity: 0.4; pointer-events: none; }
.pm-root.phase-play .pm-hand-area { opacity: 1; pointer-events: auto; }

/* Phase-aware sub/plays button — shown only when actionable; the JS
   sets `hidden` on it directly. The CHOOSE PLAYS variant uses cyan
   to match the iOS bobaCyan styling for that phase's CTA. */
.pm-root .pm-btn-sub[data-phase="play"] {
  background: rgba(0, 245, 255, 0.16);
  border-color: rgba(0, 245, 255, 0.55);
  color: #00F5FF;
}
.pm-root .pm-btn-sub[data-phase="play"]:hover { background: rgba(0, 245, 255, 0.26); }

/* Deck builder card detail popup */
.db-card-popup {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(8,8,16,0.88); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.db-card-popup[hidden] { display: none; }
.db-card-popup-inner {
  background: var(--color-surface, #0D0D1A); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; width: 100%; max-width: 340px; overflow: hidden;
  display: flex; flex-direction: column;
}
.db-popup-img-wrap { position: relative; background: #080810; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.db-popup-img { width: 100%; max-height: 280px; object-fit: contain; display: block; }
.db-popup-img-placeholder { font-family: var(--font-display, sans-serif); font-size: 3rem; color: rgba(255,255,255,0.15); }
.db-popup-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.db-popup-name { font-family: var(--font-display, sans-serif); font-size: 1.2rem; color: #fff; }
.db-popup-meta { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: rgba(255,255,255,0.6); display: flex; gap: 0.75rem; flex-wrap: wrap; }
.db-popup-desc { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: rgba(255,255,255,0.75); line-height: 1.5; }
.db-popup-actions { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.db-popup-add-btn {
  flex: 1; background: #FF4D00; border: none; border-radius: 8px; color: #080810;
  cursor: pointer; font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 700;
  padding: 0.6rem; transition: opacity 0.15s; text-transform: uppercase; letter-spacing: 0.05em;
}
.db-popup-add-btn:hover { opacity: 0.85; }
.db-popup-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.db-popup-close-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  color: rgba(255,255,255,0.5); cursor: pointer; font-family: var(--font-mono, monospace);
  font-size: 0.75rem; font-weight: 700; padding: 0.6rem 1rem; transition: all 0.15s;
}
.db-popup-close-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Quick-add toggle */
.db-quick-add-toggle {
  font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15); background: transparent;
  color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.db-quick-add-toggle.active { background: rgba(255,77,0,0.12); border-color: rgba(255,77,0,0.3); color: #FF4D00; }

/* Mobile responsive */
@media (max-width: 900px) and (max-height: 500px) {
  .pm-root .pm-top-bar { flex: 0 0 36px; padding: 0 6px; gap: 4px; }
  .pm-root .pm-mode-tab { font-size: 0.5rem; padding: 3px 5px; }
  .pm-root .pm-score-pip { width: 14px; height: 14px; font-size: 0.5rem; }
  .pm-root .pm-opponent-zone { flex: 0 0 36px; padding: 2px 6px; }
  .pm-root .pm-arena-zone { gap: 3px; padding: 3px 6px; }
  .pm-root .pm-bc-opp .pm-bc-power { font-size: 1.1rem; }
  .pm-root .pm-bc-player .pm-bc-power { font-size: 1.5rem; }
  .pm-root .pm-player-zone { padding: 4px 6px; gap: 4px; }
  .pm-root .pm-bench-card { width: 42px; height: 58px; }
  .pm-root .pm-play-card { width: 58px; min-width: 58px; height: 48px; }
  .pm-root .pm-hd-pip { width: 13px; height: 13px; }
  /* Compact play card popup for small landscape screens */
  .pm-play-popup { padding: 8px; }
  .pm-play-popup-inner { gap: 12px; padding: 12px; }
  .pm-play-popup-img-wrap { width: 100px; }
  .pm-play-popup-img { width: 100px; height: 140px; }
  .pm-play-popup-name { font-size: 1rem; }
  .pm-play-popup-effect { font-size: 0.68rem; }
}
@media (min-width: 1200px) and (min-height: 700px) {
  .pm-root .pm-top-bar { flex: 0 0 52px; gap: 12px; }
  .pm-root .pm-arena-zone { gap: 10px; padding: 8px 20px; }
  .pm-root .pm-bc { max-width: 160px; }
  .pm-root .pm-bc-opp .pm-bc-power { font-size: 1.8rem; }
  .pm-root .pm-bc-player .pm-bc-power { font-size: 2.8rem; }
  .pm-root .pm-bench-card { width: 64px; height: 88px; }
  .pm-root .pm-play-card { width: 90px; min-width: 90px; height: 72px; }
}

/* ─────────────────────────────────────────────────────────────────
   Practice Battle — First-run Tutorial (Spotlight)
   No blur; content behind stays visible. Glowing ring marks the
   target; tooltip card sits adjacent with a directional arrow.
   ─────────────────────────────────────────────────────────────── */
.pm-tutorial {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;       /* children opt back in */
  animation: pmTutorialFadeIn 0.2s ease;
}
@keyframes pmTutorialFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Faint scrim — blocks interaction without hiding content.
   Opacity kept low so the playmat behind remains legible. */
.pm-tutorial-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 16, 0.32);
  pointer-events: auto;
  cursor: pointer;
}

/* Glowing ring traces the target element */
.pm-tutorial-ring {
  position: fixed;
  pointer-events: none;
  border-radius: 10px;
  border: 2px solid var(--boba-orange);
  box-shadow:
    0 0 0 4px rgba(255, 77, 0, 0.25),
    0 0 24px 4px rgba(255, 77, 0, 0.55),
    0 0 2px 1px rgba(255, 77, 0, 0.9) inset;
  animation: pmTutorialRingPulse 1.6s ease-in-out infinite;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
@keyframes pmTutorialRingPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 77, 0, 0.2),
                         0 0 18px 4px rgba(255, 77, 0, 0.45),
                         0 0 2px 1px rgba(255, 77, 0, 0.9) inset; }
  50%      { box-shadow: 0 0 0 6px rgba(255, 77, 0, 0.32),
                         0 0 32px 8px rgba(255, 77, 0, 0.7),
                         0 0 2px 1px rgba(255, 77, 0, 1) inset; }
}

/* Tooltip card */
.pm-tutorial-card {
  position: fixed;
  pointer-events: auto;
  max-width: 420px;
  background: var(--boba-surface);
  border: 1px solid rgba(0, 245, 255, 0.35);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  animation: pmTutorialCardIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pmTutorialCardIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Arrow — a rotated square pointing from card toward the ring */
.pm-tutorial-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--boba-surface);
  border-top: 1px solid rgba(0, 245, 255, 0.35);
  border-left: 1px solid rgba(0, 245, 255, 0.35);
}
.pm-tutorial-card[data-arrow="up"]    .pm-tutorial-arrow { transform: rotate(45deg); }
.pm-tutorial-card[data-arrow="down"]  .pm-tutorial-arrow { transform: rotate(-135deg); }
.pm-tutorial-card[data-arrow="left"]  .pm-tutorial-arrow { transform: rotate(-45deg); }
.pm-tutorial-card[data-arrow="right"] .pm-tutorial-arrow { transform: rotate(135deg); }

.pm-tutorial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pm-tutorial-step {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--boba-cyan);
  background: rgba(0, 245, 255, 0.12);
  padding: 3px 7px;
  border-radius: 4px;
}
.pm-tutorial-skip {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--boba-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  transition: color 0.15s;
}
.pm-tutorial-skip:hover { color: var(--boba-text-2); }

.pm-tutorial-title {
  font-family: 'Bebas Neue', 'Russo One', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--boba-text);
  margin-bottom: 8px;
  text-align: left;
}
.pm-tutorial-message {
  font-family: 'Chakra Petch', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--boba-text-2);
  margin-bottom: 14px;
  text-align: left;
}
.pm-tutorial-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
.pm-tutorial-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--boba-text-muted);
  opacity: 0.4;
  transition: all 0.2s;
}
.pm-tutorial-dot.active {
  background: var(--boba-orange);
  opacity: 1;
  transform: scale(1.25);
}
.pm-tutorial-next {
  display: block;
  width: 100%;
  padding: 10px 20px;
  background: var(--boba-orange);
  color: var(--boba-near-black);
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.pm-tutorial-next:hover { filter: brightness(1.1); }
.pm-tutorial-next:active { transform: scale(0.98); }

@media (max-width: 520px) {
  .pm-tutorial-card { padding: 14px; max-width: calc(100vw - 24px); }
  .pm-tutorial-title { font-size: 1.15rem; }
  .pm-tutorial-message { font-size: 0.8rem; }
}

/* ─────────────────────────────────────────────────────────────────
   Profile — Mod Access Request Block
   ─────────────────────────────────────────────────────────────── */
.profile-mod-request-body {
  padding: 16px;
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 12px;
}
.profile-mod-request-loading {
  margin: 0;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: var(--boba-text-muted);
}
.profile-mod-request-blurb {
  margin: 0 0 12px 0;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--boba-text-2);
}
.profile-mod-request-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--boba-cyan);
  background: rgba(0, 245, 255, 0.08);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.profile-mod-request-btn:hover {
  background: rgba(0, 245, 255, 0.15);
  border-color: rgba(0, 245, 255, 0.5);
}
.profile-mod-request-pending {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--boba-cyan);
}
.profile-mod-request-pending-title {
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--boba-text);
  margin-bottom: 2px;
}
.profile-mod-request-pending-sub {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: var(--boba-text-muted);
}

/* Mod Access Request Modal */
.mod-request-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 8, 16, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  animation: pmTutorialFadeIn 0.2s ease;
}
.mod-request-card {
  width: 100%;
  max-width: 480px;
  background: var(--boba-surface);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.mod-request-header { margin-bottom: 20px; }
.mod-request-icon { color: var(--boba-cyan); margin-bottom: 8px; }
.mod-request-header h3 {
  margin: 0 0 8px 0;
  font-family: 'Bebas Neue', 'Russo One', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--boba-text);
}
.mod-request-header p {
  margin: 0;
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--boba-text-2);
}
.mod-request-features {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  margin-bottom: 20px;
}
.mod-request-features-label {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--boba-cyan);
  margin-bottom: 12px;
}
.mod-request-feature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--boba-glass-border);
}
.mod-request-feature:first-of-type { border-top: none; padding-top: 0; }
.mod-request-feature strong {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--boba-text);
}
.mod-request-feature span {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: var(--boba-text-muted);
  line-height: 1.4;
}
.mod-request-field {
  display: block;
  margin-bottom: 16px;
}
.mod-request-field-label {
  display: block;
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--boba-cyan);
  margin-bottom: 4px;
}
.mod-request-field-hint {
  display: block;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: var(--boba-text-muted);
  line-height: 1.4;
  margin-bottom: 8px;
}
.mod-request-field textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--boba-text);
  background: var(--boba-near-black);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  resize: vertical;
  box-sizing: border-box;
}
.mod-request-field textarea:focus {
  outline: none;
  border-color: var(--boba-cyan);
}
.mod-request-counter {
  display: block;
  text-align: right;
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  color: var(--boba-text-muted);
  margin-top: 4px;
}
.mod-request-counter.met { color: var(--boba-cyan); }
.mod-request-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.mod-request-cancel,
.mod-request-submit {
  padding: 10px 18px;
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.mod-request-cancel {
  background: transparent;
  color: var(--boba-text-muted);
  border: 1px solid var(--boba-glass-border);
}
.mod-request-cancel:hover { color: var(--boba-text-2); border-color: rgba(255,255,255,0.25); }
.mod-request-submit {
  background: var(--boba-orange);
  color: var(--boba-near-black);
  border: none;
}
.mod-request-submit:hover:not(:disabled) { filter: brightness(1.1); }
.mod-request-submit:disabled {
  background: var(--boba-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}
.mod-request-error {
  margin-top: 12px;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: var(--boba-orange);
}

/* ─────────────────────────────────────────────────────────────────
   Deck Builder — DBS stat + Rules button + Rules modal
   (2026 Nationals PDF rule-set architecture — mirrors iOS DeckRulesSheet)
   ─────────────────────────────────────────────────────────────── */

.db-stat-dbs {
  background: rgba(255, 77, 0, 0.08);
  border-color: rgba(255, 77, 0, 0.35);
  color: var(--boba-orange);
}
.db-stat-dbs.over {
  background: rgba(217, 48, 32, 0.12);
  border-color: rgba(217, 48, 32, 0.5);
  color: #F23F43;
}

.db-rules-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--boba-cyan);
  background: rgba(0, 245, 255, 0.08);
  border: 1px solid rgba(0, 245, 255, 0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.db-rules-btn:hover {
  background: rgba(0, 245, 255, 0.16);
  border-color: rgba(0, 245, 255, 0.55);
}

/* Modal */
.db-rules-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.db-rules-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 16, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.db-rules-panel {
  position: relative;
  width: min(480px, 100%);
  background: var(--boba-surface);
  border-left: 1px solid var(--boba-glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dbrSlideIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes dbrSlideIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.db-rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--boba-glass-border);
  background: var(--boba-near-black);
}
.db-rules-header h3 {
  margin: 0;
  font-family: 'Bebas Neue', 'Russo One', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--boba-text);
}
.db-rules-header-actions { display: flex; gap: 10px; }
.db-rules-reset, .db-rules-close {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--boba-text-muted);
  background: transparent;
  border: 1px solid var(--boba-glass-border);
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.db-rules-reset:hover:not(:disabled),
.db-rules-close:hover { color: var(--boba-text-2); border-color: rgba(255,255,255,0.25); }
.db-rules-reset:disabled { opacity: 0.35; cursor: not-allowed; }
.db-rules-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 32px;
}

.dbr-section { margin-bottom: 24px; }
.dbr-section-label {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--boba-cyan);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.dbr-section-foot {
  margin-top: 10px;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: var(--boba-text-muted);
}

.dbr-presets-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--boba-glass-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.dbr-presets-group summary {
  cursor: pointer;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: var(--boba-text);
}
.dbr-presets-group summary strong { color: var(--boba-text); }
.dbr-presets-group summary span { color: var(--boba-text-muted); font-size: 11px; margin-left: 8px; }
.dbr-presets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.dbr-preset {
  display: flex;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--boba-text);
  transition: background 0.12s, border-color 0.12s;
}
.dbr-preset:hover { background: var(--boba-glass); }
.dbr-preset-selected {
  background: rgba(255, 77, 0, 0.08);
  border-color: rgba(255, 77, 0, 0.4);
}
.dbr-preset-check {
  color: var(--boba-orange);
  font-size: 14px;
  padding-top: 1px;
  width: 14px;
  flex-shrink: 0;
}
.dbr-preset-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dbr-preset-title {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--boba-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dbr-preset-purse {
  font-size: 9px;
  font-weight: 700;
  color: var(--boba-cyan);
  background: rgba(0,245,255,0.12);
  padding: 2px 5px;
  border-radius: 3px;
}
.dbr-preset-desc {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  color: var(--boba-text-muted);
  line-height: 1.4;
}
.dbr-custom-indicator {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 77, 0, 0.08);
  border: 1px solid rgba(255, 77, 0, 0.35);
  border-radius: 6px;
}
.dbr-custom-indicator strong {
  display: block;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: var(--boba-orange);
  margin-bottom: 3px;
}
.dbr-custom-indicator span {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: var(--boba-text-muted);
}

.dbr-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dbr-rule, .dbr-special {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 5px;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: var(--boba-text);
}
.dbr-special { flex-wrap: wrap; }
.dbr-rule-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--boba-cyan);
}
.dbr-rule-override .dbr-rule-dot { background: var(--boba-orange); }
.dbr-rule-label { flex: 1; }
.dbr-rule-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--boba-orange);
  background: rgba(255, 77, 0, 0.15);
  padding: 2px 5px;
  border-radius: 3px;
}
.dbr-rule-selfverify {
  color: var(--boba-orange);
  background: rgba(255, 77, 0, 0.15);
}
.dbr-rule-note {
  flex-basis: 100%;
  font-size: 10px;
  color: var(--boba-text-muted);
  line-height: 1.4;
  padding-left: 14px;
}

.dbr-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 6px;
}
.dbr-toggle input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--boba-orange);
}
.dbr-toggle-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dbr-toggle-title {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--boba-text);
}
.dbr-toggle-desc {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  color: var(--boba-text-muted);
  line-height: 1.4;
}

.dbr-segmented {
  padding: 10px 12px;
  background: var(--boba-surface);
  border: 1px solid var(--boba-glass-border);
  border-radius: 5px;
  margin-bottom: 6px;
}
.dbr-segmented-label {
  display: block;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--boba-text);
  margin-bottom: 8px;
}
.dbr-segmented-options {
  display: flex;
  gap: 4px;
  background: var(--boba-near-black);
  border-radius: 5px;
  padding: 3px;
}
.dbr-segmented-options button {
  flex: 1;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: var(--boba-text-muted);
  background: transparent;
  border: none;
  border-radius: 3px;
  padding: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.dbr-segmented-options button.active {
  background: var(--boba-orange);
  color: var(--boba-near-black);
  font-weight: 700;
}

body.db-rules-open { overflow: hidden; }

@media (max-width: 520px) {
  .db-rules-panel { width: 100%; }
}

/* CSV import banner inside the deck builder export area */
.db-import-banner {
  margin-top: 0.5rem;
  padding: 8px 10px;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.4);
  border-radius: 6px;
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: var(--boba-text);
}

/* ===================================================================
   Store Locator — Find a Store view
=================================================================== */
.store-locator {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  min-height: 100%;
  background: var(--boba-near-black);
}
.store-locator-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.store-locator .store-bigbox-toggle { flex-basis: 100%; }
.store-search-wrap {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--boba-glass, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  min-width: 0;
}
.store-search-icon {
  width: 16px;
  height: 16px;
  color: var(--boba-text-muted, #7a7a8c);
  flex-shrink: 0;
}
.store-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--boba-text, #e6e6f0);
  font-family: 'Chakra Petch', monospace;
  font-size: 14px;
  min-width: 0;
}
.store-state-filter,
.store-near-me {
  padding: 8px 12px;
  height: 40px;
  background: var(--boba-glass, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  color: var(--boba-text, #e6e6f0);
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  cursor: pointer;
}
.store-near-me {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.store-near-me svg { width: 16px; height: 16px; }
.store-near-me.active {
  background: var(--boba-cyan, #00F5FF);
  color: var(--boba-near-black, #080810);
  border-color: transparent;
}
.store-near-me.loading { opacity: 0.6; pointer-events: none; }
.store-map {
  width: 100%;
  height: 60dvh;
  max-height: 560px;
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a2a;
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.1));
}
.store-summary {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: var(--boba-text-muted, #7a7a8c);
  letter-spacing: 0.5px;
}
.store-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 24px;
}
.store-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px;
  background: var(--boba-surface, #141420);
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.store-row:hover { background: rgba(255, 77, 0, 0.06); border-color: rgba(255, 77, 0, 0.35); }
.store-row-pin {
  width: 18px;
  height: 18px;
  color: var(--boba-orange, #FF4D00);
  flex-shrink: 0;
  margin-top: 2px;
}
.store-row-body { flex: 1; min-width: 0; }
.store-row-name {
  font-family: 'Russo One', 'Bebas Neue', sans-serif;
  font-size: 14px;
  color: var(--boba-text, #e6e6f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-row-meta,
.store-row-street {
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  color: var(--boba-text-muted, #7a7a8c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-row-meta { color: var(--boba-text-secondary, #a0a0b0); }
.store-row-dist {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--boba-cyan, #00F5FF);
  flex-shrink: 0;
}
.store-more,
.store-empty,
.store-error {
  padding: 16px;
  text-align: center;
  color: var(--boba-text-muted, #7a7a8c);
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
}
.store-error-detail { font-size: 11px; opacity: 0.7; margin-top: 4px; }
.store-empty-hint  { font-size: 12px; color: var(--boba-orange); margin-top: 6px; }
.store-clear-btn {
  margin-top: 8px;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--boba-cyan, #00F5FF);
  border-radius: 6px;
  color: var(--boba-cyan, #00F5FF);
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  cursor: pointer;
}

/* Store detail overlay (reuses .modal-overlay) */
.store-detail {
  width: min(480px, calc(100% - 32px));
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  background: var(--boba-surface, #141420);
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.store-detail-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--boba-text-muted, #7a7a8c);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.store-detail-name {
  font-family: 'Russo One', 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--boba-text, #e6e6f0);
  margin: 0;
}
.store-detail-loc {
  font-family: 'Chakra Petch', monospace;
  font-size: 12px;
  color: var(--boba-text-secondary, #a0a0b0);
  margin: 0;
}
.store-detail-address,
.store-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 77, 0, 0.08);
  border: 1px solid rgba(255, 77, 0, 0.25);
  border-radius: 8px;
  color: var(--boba-text, #e6e6f0);
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
  text-decoration: none;
}
.store-detail-link { background: rgba(0, 245, 255, 0.06); border-color: rgba(0, 245, 255, 0.25); }
.store-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.store-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 24px;
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.store-btn.primary {
  background: var(--boba-orange, #FF4D00);
  color: var(--boba-near-black, #080810);
}
.store-btn.secondary {
  background: var(--boba-glass, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.1));
  color: var(--boba-text, #e6e6f0);
}
.store-detail-verified {
  text-align: center;
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  color: var(--boba-text-muted, #7a7a8c);
  margin: 4px 0 0;
}

/* Leaflet controls — tune to match app palette */
.store-map .leaflet-control-attribution {
  background: rgba(8, 8, 16, 0.75);
  color: var(--boba-text-muted, #7a7a8c);
  font-size: 10px;
}
.store-map .leaflet-control-attribution a { color: var(--boba-cyan, #00F5FF); }

/* BOBA pin marker — Leaflet divIcon. Orange disc + white XOXO mark.
   Drops the default Leaflet shadow so the pin reads as "BOBA lives here"
   at a glance rather than generic "location." */
.store-boba-pin {
  background: transparent !important;
  border: none !important;
}
.store-boba-pin-inner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--boba-orange, #FF4D00);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-boba-pin-inner svg {
  width: 62%;
  height: 62%;
  display: block;
}

/* Reuse BOBA pin inside list rows */
.store-row-pin {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
}
.store-row-pin .store-boba-pin-inner {
  width: 26px;
  height: 26px;
}

/* Include-big-box toggle pill */
.store-bigbox-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--boba-glass, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--boba-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  color: var(--boba-text-secondary, #a0a0b0);
  font-family: 'Chakra Petch', monospace;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
  align-self: flex-start;
}
.store-bigbox-toggle input { display: none; }
.store-bigbox-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid currentColor;
  position: relative;
  flex-shrink: 0;
}
.store-bigbox-toggle input:checked ~ .store-bigbox-box {
  background: var(--boba-cyan, #00F5FF);
  border-color: var(--boba-cyan, #00F5FF);
}
.store-bigbox-toggle input:checked ~ .store-bigbox-box::after {
  content: '';
  position: absolute;
  left: 3px; top: 0;
  width: 5px; height: 9px;
  border-right: 2px solid var(--boba-near-black, #080810);
  border-bottom: 2px solid var(--boba-near-black, #080810);
  transform: rotate(45deg);
}
.store-bigbox-toggle:has(input:checked) {
  background: rgba(0, 245, 255, 0.08);
  border-color: rgba(0, 245, 255, 0.35);
  color: var(--boba-text, #e6e6f0);
}

/* ════════════════════════════════════════════════════════════════
   LEARN — READ / WATCH TOGGLE + WATCH PANEL
════════════════════════════════════════════════════════════════ */

.learn-mode-toggle {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.learn-mode-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--boba-glass);
  color: var(--boba-text-secondary, #a0a0b0);
  font-family: var(--font-display);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.learn-mode-btn:hover { background: rgba(255,77,0,0.08); color: var(--boba-text); }
.learn-mode-btn.active {
  background: var(--boba-orange);
  color: var(--boba-near-black);
}

.learn-mode-panel { display: block; }
.learn-mode-panel[hidden] { display: none; }

/* ── Watch tabs row (Live / Shorts / Videos + refresh button) ─── */
.watch-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.watch-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  flex: 1;
}
.watch-refresh-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 77, 0, 0.12);
  border: 1px solid rgba(255, 77, 0, 0.35);
  color: var(--boba-orange);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.18s, transform 0.2s;
}
.watch-refresh-btn:hover { background: rgba(255, 77, 0, 0.22); }
.watch-refresh-btn--spinning svg { animation: watch-spin 0.8s linear infinite; }
@keyframes watch-spin { to { transform: rotate(360deg); } }

/* Pull-to-refresh indicator — fades in as the user drags down. */
.watch-pull-indicator {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px;
  margin-top: -32px;
  margin-bottom: var(--sp-2);
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.15s, transform 0.2s;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--boba-text-muted, #707088);
  text-transform: uppercase; letter-spacing: 1px;
}
.watch-pull-indicator--active { opacity: 1 !important; transform: translateY(8px) !important; }
.watch-pull-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 77, 0, 0.25);
  border-top-color: var(--boba-orange);
  border-radius: 50%;
  animation: watch-spin 0.8s linear infinite;
}
.watch-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--boba-glass);
  border: 1px solid var(--boba-glass-border);
  color: var(--boba-text-secondary, #a0a0b0);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.watch-tab:hover { color: var(--boba-text); }
.watch-tab.active {
  background: var(--boba-cyan);
  color: var(--boba-near-black);
  border-color: var(--boba-cyan);
}
.watch-tab-count {
  font-size: 0.68rem;
  opacity: 0.7;
}

/* ── Watch panels + grids ──────────────────────────────────────── */
.watch-panel { display: block; }
.watch-panel[hidden] { display: none; }

.watch-grid {
  display: grid;
  gap: var(--sp-3);
}
/* Per-tab grid templates live further down with the tab-rename
   block (.watch-grid-upcoming / -vertical / -horizontal). */

/* ── Watch cards ──────────────────────────────────────────────── */
.watch-card {
  display: flex; flex-direction: column;
  gap: 8px;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.15s;
}
.watch-card:hover { transform: translateY(-2px); }
.watch-card:focus-visible {
  outline: 2px solid var(--boba-cyan);
  outline-offset: 4px;
}

.watch-thumb {
  position: relative;
  background: var(--boba-surface, #0D0D1A);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--boba-glass-border);
}
.watch-thumb-16x9 { aspect-ratio: 16 / 9; }
.watch-thumb-9x16 { aspect-ratio: 9 / 16; }
.watch-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.watch-thumb-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--boba-text-dim);
}

.watch-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 8px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: white;
}
.watch-badge-live     { background: #C0392B; }
.watch-badge-upcoming { background: rgba(0, 245, 255, 0.85); color: var(--boba-near-black); }
.watch-badge-replay   { background: rgba(0, 0, 0, 0.7); }

/* Stream-time line on Upcoming Live cards — sits between title and
   the channel/views subtitle. Cyan for scheduled, red for live. */
.watch-card-streamtime {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--boba-cyan);
  margin-top: -2px;
}
.watch-card-streamtime-live { color: #ff5544; }
.watch-card-streamtime-icon { font-size: 0.9rem; }

/* Update grid class names for new tabs. */
.watch-grid-upcoming   { grid-template-columns: 1fr; }
.watch-grid-horizontal { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.watch-grid-vertical   { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.watch-duration {
  position: absolute; bottom: 6px; right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
}

.watch-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--boba-text, #e6e6f0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.watch-card-title-short {
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.watch-card-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--boba-text-dim);
}
.watch-card-meta-compact { font-size: 0.62rem; }
.watch-pin { color: var(--boba-cyan); font-size: 0.78rem; }
.watch-channel { color: var(--boba-cyan); font-weight: 700; }
.watch-meta { color: var(--boba-text-dim); }

/* ── States ────────────────────────────────────────────────────── */
.watch-loading,
.watch-empty,
.watch-error {
  padding: 60px 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--boba-text-muted, #707088);
}
.watch-empty-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--boba-text-dim);
}
.watch-error strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--boba-orange);
}
.watch-error-detail {
  display: block;
  margin-bottom: 12px;
  color: var(--boba-text-dim);
}
.watch-retry { margin-top: 8px; }

/* ── Player overlay (centered iframe modal) ────────────────────── */
.watch-player-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.watch-player-overlay[hidden] { display: none; }
.watch-player-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}
.watch-player-frame {
  position: relative;
  width: 100%;
  max-width: 1080px;
  background: var(--boba-near-black, #080810);
  border-radius: 14px;
  border: 1px solid var(--boba-glass-border);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.watch-player-close {
  position: absolute; top: 8px; right: 12px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.watch-player-close:hover { background: rgba(255, 77, 0, 0.4); }
.watch-player-iframe-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: black;
}
.watch-player-iframe-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.watch-player-meta {
  padding: 16px 20px;
}
.watch-player-meta h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--boba-text, #e6e6f0);
}
.watch-player-meta p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--boba-cyan);
}
.watch-player-description {
  margin-top: 12px !important;
  color: var(--boba-text-secondary, #a0a0b0) !important;
  font-size: 0.78rem !important;
  line-height: 1.55;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.watch-player-description a {
  color: var(--boba-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.watch-player-description a:hover {
  color: var(--boba-orange);
}

body.watch-player-open { overflow: hidden; }