/* ============================================================
   DEPTH — a crafted, single-source light model on top of the
   flat token system. Warm top rim, quiet bottom falloff, and
   layered ambient shadows. All five themes share the same
   physics; only the ink of the shadow changes.
   ============================================================ */

/* ---------- ambient stage: soft washes behind content ---------- */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(430px 300px at 10% -90px, var(--wash-a), transparent 66%),
    radial-gradient(460px 330px at 98% 8%, var(--wash-b), transparent 62%),
    radial-gradient(560px 420px at 50% 108%, var(--wash-a), transparent 68%);
}

/* ---------- elevated surfaces: one lit edge, two soft falls ---------- */
.card, .dg-cell, .char-card, .auc-mini, .action-btn, .event-strip,
.menu-item, .lg-tabs, .set-card, .sk-card, .hm-row, .au-row,
.ca-card, .trade-card, .podium .pod {
  box-shadow:
    var(--rim-1),
    var(--elev-2);
}

/* Filter bars and segmented switches sit a touch closer to the page. */
.chips-row, .pill-tabs, .hm-view, .au-tabs {
  box-shadow: var(--rim-1), var(--elev-1);
}

/* ---------- tactile press: everything settles into the page ---------- */
.btn, .chip, .qa-item, .action-btn, .char-card, .auc-mini,
.tab-spin, .icon-btn, .seg-btn, .theme-card, .menu-item,
.pill-tab, .lg-tab, .hm-row, .au-row {
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease,
              background .18s ease, border-color .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,
.pill-tab:active, .lg-tab:active, .hm-row:active, .au-row:active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.97);
}

/* ---------- buttons: filled, rim-lit, never neon ---------- */
.btn-primary, .btn-gold, .btn-ghost, .btn-danger, .btn-success, .btn-cyan {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -2px 5px rgba(0, 0, 0, .12),
    0 1px 2px rgba(0, 0, 0, .18),
    0 8px 18px -10px rgba(0, 0, 0, .48);
}
.btn-primary, .tab-spin, .chip.active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -3px 6px rgba(0, 0, 0, .18),
    0 1px 2px rgba(0, 0, 0, .20),
    0 10px 24px -10px rgba(var(--accent-b-rgb), .55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .20);
}
.btn-gold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 6px rgba(120, 60, 0, .22),
    0 1px 2px rgba(0, 0, 0, .18),
    0 10px 22px -10px rgba(255, 190, 80, .40);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .32);
}
.btn-ghost {
  background:
    var(--sheen-soft),
    var(--card);
}
.btn-primary:active, .btn-gold:active {
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .20),
    0 2px 5px -2px rgba(0, 0, 0, .25);
}

/* ---------- artwork: recessed frame + lit glass ---------- */
.char-art, .auc-mini .art, .char-hero, .hm-row-art, .au-art,
.pf-show-art, .ca-sel-art, .char-hero-art {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 2px 8px rgba(0, 0, 0, .28);
}
.char-art { position: relative; isolation: isolate; }
.char-art::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 26%, transparent 48%),
    linear-gradient(180deg, transparent 64%, rgba(0, 0, 0, .12));
  mix-blend-mode: soft-light;
}
.char-art::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--scrim) 88%, transparent));
}
.rarity-ring {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--rc, transparent) 64%, transparent),
    inset 0 0 0 3px rgba(0, 0, 0, .08),
    inset 0 -46px 42px -22px var(--scrim);
}
.char-art img, .auc-mini .art img, .au-art img {
  filter: saturate(1.045) contrast(1.02);
}
.char-card .char-info {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-2) 26%, transparent), transparent 70%);
}

/* ---------- floating chrome: topbar + dock ---------- */
.topbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 62%),
    var(--nav-bg);
  box-shadow:
    inset 0 -1px 0 var(--bar-line),
    0 1px 2px rgba(0, 0, 0, .14),
    0 12px 30px -20px rgba(0, 0, 0, .55);
}
.tabbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 46%),
    var(--nav-bg);
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    0 2px 4px rgba(0, 0, 0, .18),
    0 22px 46px -18px rgba(0, 0, 0, .65);
  border-radius: 24px;
}
.tabbar::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, .055), transparent 70%);
}
.tab-spin {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .34),
    inset 0 -5px 9px rgba(0, 0, 0, .22),
    0 2px 4px rgba(0, 0, 0, .22),
    0 12px 26px -10px rgba(var(--accent-b-rgb), .55),
    0 0 0 5px color-mix(in srgb, var(--bg) 78%, transparent);
}

/* ---------- bottom sheets ---------- */
.overlay {
  background:
    radial-gradient(120% 55% at 50% 100%, rgba(0, 0, 0, .24), transparent 62%),
    var(--overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sheet {
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 -10px 28px -20px rgba(0, 0, 0, .55),
    0 -28px 70px -30px rgba(0, 0, 0, .72);
}
.grabber {
  background: color-mix(in srgb, var(--text) 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ---------- toast ---------- */
.toast {
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    var(--elev-3);
}

/* ---------- avatars: a quiet double ring, no halo ---------- */
.avatar, .hero-greeting .avatar {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .30),
    inset 0 -2px 4px rgba(0, 0, 0, .20),
    0 0 0 2px var(--surface),
    0 0 0 3px color-mix(in srgb, var(--accent) 52%, transparent),
    0 8px 18px -9px rgba(0, 0, 0, .58);
}
.pf-av-wrap {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 4.5px color-mix(in srgb, var(--accent) 55%, transparent),
    0 14px 28px -12px rgba(0, 0, 0, .62);
}

/* ---------- form fields: gentle inset, clear focus ---------- */
input, textarea, select {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .055),
    inset 0 1px 0 var(--edge-light);
}
input:focus, textarea:focus, select:focus {
  box-shadow:
    0 0 0 3px var(--accent-soft),
    inset 0 1px 2px rgba(0, 0, 0, .04);
}

/* ============================================================
   HOME — cinematic hero + crafted dock
   ============================================================ */
.home-hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 2px 5px rgba(0, 0, 0, .25),
    0 28px 56px -28px rgba(0, 0, 0, .82),
    0 30px 80px -44px color-mix(in srgb, var(--hh-rc, var(--accent)) 55%, transparent);
}
.home-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .20);
}
.hh-shade {
  background:
    linear-gradient(180deg, rgba(8, 7, 12, .62) 0%, rgba(8, 7, 12, .04) 34%, rgba(8, 7, 12, .20) 52%, rgba(8, 7, 12, .94) 100%),
    linear-gradient(90deg, rgba(8, 7, 12, .52) 0%, transparent 66%),
    linear-gradient(0deg, rgba(8, 7, 12, .24), transparent 32%);
}
.hh-user {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 3px 12px -6px rgba(0, 0, 0, .55);
}
.hh-user .avatar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 0 0 1px rgba(255, 255, 255, .36),
    0 4px 10px -4px rgba(0, 0, 0, .45);
}
.hh-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 3px 12px -6px rgba(0, 0, 0, .55);
}
.hh-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 6px rgba(255, 209, 102, .45);
}
.hh-rarity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hh-spin {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -2px 5px rgba(0, 0, 0, .16),
    0 2px 5px rgba(0, 0, 0, .20),
    0 12px 28px -12px rgba(var(--accent-b-rgb), .62);
}
.hh-view {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)),
    rgba(10, 8, 16, .34);
  border-color: rgba(255, 255, 255, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 6px 16px -10px rgba(0, 0, 0, .55);
}

/* quick dock */
.quick-actions {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-2) 72%, transparent), var(--card));
  box-shadow:
    var(--rim-1),
    var(--elev-1);
}
.qa-item { box-shadow: none; }
.qa-item svg {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .14), transparent 55%),
    var(--accent-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 3px 8px -6px rgba(0, 0, 0, .50);
}
.qa-item:active svg {
  filter: brightness(1.08);
}

/* streak card */
.sk-card {
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    inset 0 -10px 22px -20px rgba(0, 0, 0, .32),
    var(--elev-2);
}
.sk-card-ic {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .16), transparent 58%),
    linear-gradient(160deg, var(--gold-soft), var(--surface-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -6px 12px -10px rgba(120, 60, 0, .28),
    0 4px 10px -8px rgba(0, 0, 0, .45);
}
.sk-claim-pill {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 4px rgba(120, 60, 0, .22),
    0 4px 10px -5px rgba(255, 190, 80, .35);
}
.sk-card-done {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* home empty cards */
.home-empty {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--accent-rgb), .055), transparent 65%),
    var(--card);
  box-shadow: var(--rim-1), var(--elev-1);
}

/* ============================================================
   PROFILE
   ============================================================ */
.pf-cover {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 18px 38px -26px rgba(0, 0, 0, .65);
}
.pf-gear {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(10, 8, 15, .30);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 6px 16px -8px rgba(0, 0, 0, .55);
}
.pf-edit {
  background:
    var(--sheen-soft),
    var(--card);
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 4px 12px -8px rgba(0, 0, 0, .45);
}
.pf-show-art {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent),
    0 12px 22px -16px rgba(0, 0, 0, .8);
}
.pf-show-card:active .pf-show-art {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--rc) 80%, transparent),
    0 4px 10px -8px rgba(0, 0, 0, .8);
}
.pf-id {
  box-shadow: inset 0 1px 0 var(--edge-light);
}
.pf-social-stat {
  box-shadow: inset 0 1px 0 transparent;
}
.pf-social {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(127, 127, 127, .035), transparent);
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.podium .pod {
  position: relative;
  overflow: hidden;
}
.podium .pod::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 38%);
}
.pod .p-av {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 2px var(--card),
    0 0 0 3px rgba(255, 255, 255, .08),
    0 8px 16px -8px rgba(0, 0, 0, .55);
}
.pod.first .p-av {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .52),
    inset 0 -4px 8px rgba(120, 60, 0, .25),
    0 0 0 2px var(--card),
    0 0 0 3px rgba(255, 209, 102, .40),
    0 10px 22px -8px rgba(255, 190, 80, .32);
}
.pod .medal {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pod.first .medal {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .48),
    0 3px 8px -4px rgba(255, 190, 80, .40);
}
.pill-tabs {
  background:
    var(--sheen-soft),
    var(--card);
}
.pill-tab.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 55%),
    var(--gradient);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 4px 12px -6px rgba(var(--accent-b-rgb), .55);
}
.lb-row {
  border-radius: 12px;
  margin: 0 -4px;
  padding-left: 12px;
  padding-right: 12px;
}
.lb-row.me-row {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 6px 16px -12px rgba(var(--accent-rgb), .38);
}
.lb-av {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* ============================================================
   SETTINGS / SUBPAGES
   ============================================================ */
.set-card {
  background:
    var(--sheen-soft),
    var(--card);
}
.set-ic {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 56%),
    var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 3px 8px -6px rgba(0, 0, 0, .40);
}
.set-row:active .set-ic {
  filter: brightness(1.08);
}
.set-chev {
  opacity: .5;
}

/* ============================================================
   MARKET — harem rows, auction rows, filters
   ============================================================ */
.hm-row {
  background:
    var(--sheen-soft),
    var(--card);
}
.hm-row-art {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--rc, transparent) 58%, transparent),
    inset 0 2px 6px rgba(0, 0, 0, .24);
}
.hm-mini-rarity,
.au-rarity-pill,
.ca-rarity-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hm-rarity-dot {
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 1px 4px color-mix(in srgb, var(--rc) 45%, transparent);
}
.hm-view-btn.active {
  background:
    var(--sheen-soft),
    var(--surface);
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 2px 7px -4px rgba(0, 0, 0, .35);
}
.au-row {
  background:
    var(--sheen-soft),
    var(--card);
}
.au-row.is-winning {
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--success) 12%, transparent), transparent 70%),
    var(--card);
}
.au-art {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--rc, transparent) 58%, transparent),
    inset 0 2px 6px rgba(0, 0, 0, .24);
}
.au-tab.active,
.au-tab[aria-selected="true"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 4px 12px -7px rgba(var(--accent-b-rgb), .50);
}
.hm-search input,
.au-search input,
.search-bar input {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .08),
    inset 0 1px 0 var(--edge-light),
    0 2px 7px -6px rgba(0, 0, 0, .35);
}
.lg-tab.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 56%),
    var(--gradient);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 5px rgba(0, 0, 0, .14),
    0 4px 14px -7px rgba(var(--accent-b-rgb), .55);
}

/* ============================================================
   ARCADE — keep the jewel palette, add a shared glass rim
   ============================================================ */
.game-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 2px 4px rgba(0, 0, 0, .28),
    0 18px 38px -22px rgba(0, 0, 0, .72);
}

/* ---------- film grain — one fixed tile over everything ---------- */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .042;
  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");
}

/* ============================================================
   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 var(--edge-light),
    0 6px 16px -8px rgba(0, 0, 0, .4);
}
.theme-card.active {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    0 0 0 1px rgba(var(--accent-rgb), 0.45),
    0 8px 20px -10px rgba(var(--accent-rgb), 0.45);
}
.theme-card.active::after {
  content: '';
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 2px;
  transform: rotate(45deg);
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40);
}
.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; }
}