/* ============================================================
   DEPTH — tactile 3D layer on top of the flat token system.
   One light source (top): inset highlight + inner bottom shade
   + layered drop shadows. Works with all 5 themes via tokens.
   ============================================================ */

/* ---------- ambient stage: two soft orbs behind content ---------- */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 300px at 12% -80px, var(--wash-a), transparent 65%),
    radial-gradient(460px 320px at 96% 12%, var(--wash-b), transparent 60%);
}

/* ---------- elevated surfaces: cards get a lit top edge ---------- */
.card, .dg-cell, .char-card, .auc-mini, .qa-item, .action-btn,
.balance-card, .event-strip, .menu-item, .lg-tabs {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -8px 16px -12px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 10px 26px -14px rgba(0, 0, 0, 0.45);
}
[data-theme="ivory"] .card, [data-theme="light"] .card,
[data-theme="ivory"] .dg-cell, [data-theme="light"] .dg-cell,
[data-theme="ivory"] .char-card, [data-theme="light"] .char-card,
[data-theme="ivory"] .auc-mini, [data-theme="light"] .auc-mini,
[data-theme="ivory"] .qa-item, [data-theme="light"] .qa-item,
[data-theme="ivory"] .action-btn, [data-theme="light"] .action-btn,
[data-theme="ivory"] .balance-card, [data-theme="light"] .balance-card,
[data-theme="ivory"] .event-strip, [data-theme="light"] .event-strip,
[data-theme="soda"] .card, [data-theme="soda"] .dg-cell,
[data-theme="soda"] .char-card, [data-theme="soda"] .auc-mini,
[data-theme="soda"] .qa-item, [data-theme="soda"] .action-btn,
[data-theme="soda"] .balance-card, [data-theme="soda"] .event-strip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -8px 16px -12px rgba(90, 70, 45, 0.18),
    0 1px 2px rgba(90, 70, 45, 0.10),
    0 12px 26px -16px rgba(90, 70, 45, 0.22);
}

/* ---------- tactile press: everything pushes in ---------- */
.btn, .chip, .qa-item, .action-btn, .char-card, .auc-mini,
.tab-spin, .icon-btn, .seg-btn, .theme-card, .menu-item {
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:active, .chip:active, .qa-item:active, .action-btn:active,
.char-card:active, .auc-mini:active, .tab-spin:active,
.icon-btn:active, .theme-card:active, .menu-item:active {
  transform: translateY(1px) scale(.98);
  filter: brightness(.96);
}

/* ---------- primary buttons: chunky 3D with lit crown ---------- */
.btn-primary, .tab-spin, .chip.active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 10px 24px -8px rgba(var(--accent-rgb), 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-gold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(120, 60, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 10px 24px -8px rgba(255, 190, 80, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- hero balance card: floating slab ---------- */
.balance-card {
  transform: translateZ(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -14px 28px -18px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 22px 44px -20px rgba(var(--accent-rgb), 0.35);
}
.balance-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 32%);
}

/* ---------- character art: recessed frame + pop-out image ---------- */
.char-art, .auc-mini .art, .char-hero {
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
}
.char-art img, .auc-mini .art img {
  filter: saturate(1.04) contrast(1.02);
}

/* ---------- coin: heavier metallic relief ---------- */
.coin-big, .coin-pill .coin-ic, .coin-dot {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.65),
    inset 0 -3px 5px rgba(120, 60, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ---------- floating chrome: topbar + tabbar ---------- */
.topbar {
  box-shadow:
    inset 0 -1px 0 var(--bar-line),
    0 8px 24px -12px rgba(0, 0, 0, 0.4);
}
.tabbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 18px 40px -12px rgba(0, 0, 0, 0.55);
  border-radius: 24px;
}

/* film grain — one fixed tile over everything, barely-there */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---------- bottom sheet: rises like a tray ---------- */
.sheet {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 -20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- avatar: ringed medallion ---------- */
.avatar, .hero-greeting .avatar {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 0 0 2px var(--surface),
    0 0 0 3px rgba(var(--accent-rgb), 0.45),
    0 6px 16px -6px rgba(var(--accent-rgb), 0.5);
}

/* ============================================================
   THEME PICKER — 5 tactile swatch cards (settings page)
   ============================================================ */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 4px 0 6px;
}
.theme-card {
  position: relative;
  border-radius: 16px;
  padding: 10px 4px 9px;
  background: var(--card);
  border: 1px solid var(--stroke);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800; color: var(--muted);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 6px 16px -8px rgba(0, 0, 0, 0.4);
}
.theme-card.active {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(var(--accent-rgb), 0.45),
    0 8px 20px -8px rgba(var(--accent-rgb), 0.55);
}
.theme-card.active::after {
  content: '';
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--glow-accent);
}
.theme-orb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--tb, var(--gradient));
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3),
    0 4px 10px -2px var(--tg, rgba(0, 0, 0, 0.4));
}
.theme-note { font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* legacy 2-way segmented control (kept as fallback, hidden when grid present) */
.theme-seg { display: flex; gap: 8px; }

/* kitsune: dark text on gold gradient needs a light crown, not a dark one */
[data-theme="kitsune"] .btn-primary,
[data-theme="kitsune"] .tab-spin,
[data-theme="kitsune"] .chip.active {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  body::before, body::after { display: none; }
}