/* =========================================================
   GEM INCREMENTAL — SHARED APPLICATION STYLES

   Loaded by every page. Page specific rules live in the
   stylesheet next to that page.
   ========================================================= */


/* =========================================================
   0. TYPEFACE

   A sci-fi pairing, self-hosted so nothing is fetched from a
   third party and the game keeps working offline:
     Exo 2      — the body face, a clean techno-sans that stays
                  readable across the whole UI.
     Orbitron   — the display face, a futuristic geometric used
                  only for the wordmark, headings and the roll
                  button, where its character reads as "cool"
                  without hurting legibility.
   Both are variable fonts, split into latin / latin-ext subsets
   by unicode-range so latin-ext is only fetched when needed.
   ========================================================= */

@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/exo2-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/exo2-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/orbitron-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =========================================================
   1. DESIGN TOKENS

   Dark is the base palette. Light is applied either by an
   explicit data-theme="light" or by the system preference
   when the player has not chosen a mode.
   ========================================================= */

:root {
  color-scheme: dark;

  --bg: #0b0e14;
  --bg-glow: #151b2b;
  --surface: #12172080;
  --surface-solid: #121720;
  --surface-raised: #171d29;
  --surface-hover: #1c2331;
  --surface-sunken: #0d1119;

  --border: #242c3b;
  --border-strong: #323c50;

  --text: #e8ecf4;
  --text-muted: #9aa5ba;
  --text-faint: #6b7689;

  --positive: #45c78a;
  --negative: #ef6b6b;
  --warning: #e5a94a;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 20px -6px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.7);

  --overlay: rgb(4 6 10 / 0.72);

  --radius-sm: 8px;
  --radius: 12px;
  /* Used across page stylesheets; without it those corners fell back
     to square. */
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font: "Exo 2", "Segoe UI", -apple-system, BlinkMacSystemFont,
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Futuristic display face for the wordmark, headings and the
     roll button. */
  --font-display: "Orbitron", "Exo 2", "Segoe UI", sans-serif;

  --font-mono: "SF Mono", "Cascadia Mono", Consolas,
    "Liberation Mono", ui-monospace, monospace;

  --nav-height: 66px;

  /* Rarity scale — tuned so the accent never collides with it. */
  --rarity-common: #94a3b8;
  --rarity-uncommon: #4ade80;
  --rarity-rare: #60a5fa;
  --rarity-epic: #c084fc;
  --rarity-legendary: #fbbf24;
  --rarity-mythic: #fb7185;
  --rarity-exotic: #22d3ee;
  --rarity-exalted: #fb923c;
  --rarity-cosmic: #f472b6;
  --rarity-transcendent: #fff1fb;

  /* Accent — overridden per data-accent below. */
  --accent: #7c8cf8;
  --accent-strong: #6675f0;
  --accent-soft: #7c8cf82e;
  --accent-text: #0b0e14;
  --accent-ring: #7c8cf866;
}


:root[data-accent="emerald"] {
  --accent: #34d399;
  --accent-strong: #10b981;
  --accent-soft: #34d3992e;
  --accent-text: #04120c;
  --accent-ring: #34d39966;
}

:root[data-accent="amber"] {
  --accent: #f5b23f;
  --accent-strong: #e09b21;
  --accent-soft: #f5b23f2e;
  --accent-text: #1a1204;
  --accent-ring: #f5b23f66;
}

:root[data-accent="rose"] {
  --accent: #f472a0;
  --accent-strong: #ec5f92;
  --accent-soft: #f472a02e;
  --accent-text: #1c0710;
  --accent-ring: #f472a066;
}

:root[data-accent="cyan"] {
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-soft: #38bdf82e;
  --accent-text: #04141c;
  --accent-ring: #38bdf866;
}


/* ---------- Light palette ---------- */

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6fb;
  --bg-glow: #e6ebf7;
  --surface: #ffffffcc;
  --surface-solid: #ffffff;
  --surface-raised: #ffffff;
  --surface-hover: #f0f3fa;
  --surface-sunken: #eaeef7;

  --border: #dde3ee;
  --border-strong: #c3cbdb;

  --text: #131824;
  --text-muted: #5a6478;
  --text-faint: #8b95a8;

  --positive: #12855b;
  --negative: #cf3d3d;
  --warning: #a9700c;

  --shadow-sm: 0 1px 2px rgb(19 24 36 / 0.06);
  --shadow-md: 0 6px 20px -8px rgb(19 24 36 / 0.18);
  --shadow-lg: 0 24px 60px -22px rgb(19 24 36 / 0.28);

  --overlay: rgb(23 28 40 / 0.4);

  --rarity-common: #64748b;
  --rarity-uncommon: #12925c;
  --rarity-rare: #2563eb;
  --rarity-epic: #8b3fd4;
  --rarity-legendary: #b47209;
  --rarity-mythic: #d4356b;
  --rarity-exotic: #0891b2;
  --rarity-exalted: #c2410c;
  --rarity-cosmic: #be185d;
  --rarity-transcendent: #a855f7;
}

/* Only "System" leaves data-theme unset, so this must not
   reach an explicitly chosen dark or neon theme. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --bg: #f4f6fb;
    --bg-glow: #e6ebf7;
    --surface: #ffffffcc;
    --surface-solid: #ffffff;
    --surface-raised: #ffffff;
    --surface-hover: #f0f3fa;
    --surface-sunken: #eaeef7;

    --border: #dde3ee;
    --border-strong: #c3cbdb;

    --text: #131824;
    --text-muted: #5a6478;
    --text-faint: #8b95a8;

    --positive: #12855b;
    --negative: #cf3d3d;
    --warning: #a9700c;

    --shadow-sm: 0 1px 2px rgb(19 24 36 / 0.06);
    --shadow-md: 0 6px 20px -8px rgb(19 24 36 / 0.18);
    --shadow-lg: 0 24px 60px -22px rgb(19 24 36 / 0.28);

    --overlay: rgb(23 28 40 / 0.4);

    --rarity-common: #64748b;
    --rarity-uncommon: #12925c;
    --rarity-rare: #2563eb;
    --rarity-epic: #8b3fd4;
    --rarity-legendary: #b47209;
    --rarity-mythic: #d4356b;
    --rarity-exotic: #0891b2;
    --rarity-exalted: #c2410c;
    --rarity-cosmic: #be185d;
    --rarity-transcendent: #a855f7;
  }
}


/* ---------- Neon palette ----------

   A darker, higher-contrast dark mode with a glow on the
   things worth looking at: headings, rarities, values and the
   roll button. Body copy stays flat so the page still reads.
   -------------------------------------------------------- */

:root[data-theme="neon"] {
  color-scheme: dark;

  --bg: #04060c;
  --bg-glow: #0a1428;
  --surface: #080d18cc;
  --surface-solid: #080d18;
  --surface-raised: #0d1526;
  --surface-hover: #121c31;
  --surface-sunken: #060a13;

  --border: #16223c;
  --border-strong: #26395f;

  --text: #d9e4ff;
  --text-muted: #7f90b8;
  --text-faint: #56668c;

  --positive: #2bf5a0;
  --negative: #ff5f7e;
  --warning: #ffc957;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.6);
  --shadow-md: 0 6px 24px -6px rgb(0 0 0 / 0.8);
  --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.9);

  --overlay: rgb(2 4 8 / 0.8);

  --rarity-common: #8ea2c8;
  --rarity-uncommon: #2bf5a0;
  --rarity-rare: #4dc4ff;
  --rarity-epic: #c07bff;
  --rarity-legendary: #ffc93c;
  --rarity-mythic: #ff5f9e;
  --rarity-exotic: #22e7ff;
  --rarity-exalted: #ff9f43;
  --rarity-cosmic: #ff71ce;
  --rarity-transcendent: #fff1fb;

  --accent: #7d8dff;
  --accent-strong: #6b7bff;
  --accent-soft: #7d8dff26;
  --accent-text: #04060c;
  --accent-ring: #7d8dff80;
}

:root[data-theme="neon"][data-accent="emerald"] {
  --accent: #2bf5a0;
  --accent-strong: #16e08e;
  --accent-soft: #2bf5a026;
  --accent-ring: #2bf5a080;
}

:root[data-theme="neon"][data-accent="amber"] {
  --accent: #ffc93c;
  --accent-strong: #f5b91f;
  --accent-soft: #ffc93c26;
  --accent-ring: #ffc93c80;
}

:root[data-theme="neon"][data-accent="rose"] {
  --accent: #ff5f9e;
  --accent-strong: #f5478c;
  --accent-soft: #ff5f9e26;
  --accent-ring: #ff5f9e80;
}

:root[data-theme="neon"][data-accent="cyan"] {
  --accent: #35e0ff;
  --accent-strong: #16cdf0;
  --accent-soft: #35e0ff26;
  --accent-ring: #35e0ff80;
}


/* Faint circuit grid, so the dark is not just empty. */
:root[data-theme="neon"] body {
  background-image:
    radial-gradient(900px 520px at 50% -10%, var(--bg-glow), transparent 70%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
  background-position: center top, center center, center center;
}

:root[data-theme="neon"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;

  background: radial-gradient(
    ellipse at 50% 0%,
    transparent 40%,
    var(--bg) 100%
  );

  pointer-events: none;
}

:root[data-theme="neon"] .app-main,
:root[data-theme="neon"] .topbar,
:root[data-theme="neon"] .tabbar {
  position: relative;
  z-index: 1;
}


/* ---- Glow, applied only where it carries meaning ---- */

:root[data-theme="neon"] .brand,
:root[data-theme="neon"] h1 {
  text-shadow: 0 0 18px var(--accent-ring);
}

:root[data-theme="neon"] .brand__mark {
  filter: drop-shadow(0 0 8px var(--accent-ring));
}

:root[data-theme="neon"] .nav__link[aria-current="page"],
:root[data-theme="neon"] .tabbar__link[aria-current="page"] {
  text-shadow: 0 0 14px var(--accent-ring);
}

:root[data-theme="neon"] .badge--tier {
  color: var(--tier);
  border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--tier) 70%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--tier) 22%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--tier) 10%, transparent);
}

:root[data-theme="neon"] .stat__value,
:root[data-theme="neon"] .wallet {
  text-shadow: 0 0 12px var(--accent-ring);
}

:root[data-theme="neon"] .roll-button {
  box-shadow:
    0 0 28px -4px var(--accent-ring),
    0 0 60px -12px var(--accent-ring),
    inset 0 -2px 0 rgb(0 0 0 / 0.25);
}

/* The roll-stage surface remains still; the moving layer is clipped to its
   transparent one-pixel border so Neon gets a little life without becoming
   visually noisy. */
:root[data-theme="neon"] .stage {
  border-color: transparent;
  background:
    radial-gradient(480px 260px at 50% 40%, var(--accent-soft), transparent 68%) padding-box,
    linear-gradient(145deg, var(--surface-raised), var(--surface-sunken)) padding-box,
    linear-gradient(110deg, #35e0ff, #8c7dff, #ff5f9e, #ffc93c, #2bf5a0, #35e0ff) border-box;
  background-size: auto, auto, 320% 100%;
  background-position: center, center, 0 50%;
  animation: neon-roll-stage-border 7s linear infinite;
}

@keyframes neon-roll-stage-border {
  to { background-position: center, center, 320% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="neon"] .stage {
    animation: none;
    background-position: center, center, 50% 50%;
  }
}

.automation__pulse,
.crafting-next,
.research-planner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-sunken));
  color: var(--text-muted);
  font-size: .84rem;
}
.automation__pulse strong,
.crafting-next h2,
.research-planner h2 { color: var(--text); }
.crafting-next { margin-bottom: 18px; }
.crafting-next h2,
.research-planner h2 { margin: 4px 0; font-size: 1rem; }
.recipe-card__pin { margin: 0 var(--space-3) var(--space-3) auto; display: flex; }
.research-node.planned { outline: 2px solid var(--accent); outline-offset: 2px; }

:root[data-theme="neon"] .gem-reveal__name {
  color: var(--tier, var(--accent));
  text-shadow:
    0 0 10px color-mix(in srgb, var(--tier, var(--accent)) 65%, transparent),
    0 0 34px color-mix(in srgb, var(--tier, var(--accent)) 35%, transparent);
}

:root[data-theme="neon"] .gem-reveal__art {
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--tier, var(--accent)) 70%, transparent))
    drop-shadow(0 0 34px color-mix(in srgb, var(--tier, var(--accent)) 40%, transparent));
}

:root[data-theme="neon"] .gem-card::before,
:root[data-theme="neon"] .index-card::before {
  box-shadow: 0 0 12px 1px var(--tier, var(--accent));
}

:root[data-theme="neon"] .gem-card__val--money,
:root[data-theme="neon"] .recipe-cost__value--ok,
:root[data-theme="neon"] .stats-row__val--positive {
  text-shadow: 0 0 12px color-mix(in srgb, var(--positive) 55%, transparent);
}

/* The sunken surface is nearly black here, so the switch needs
   its own contrast to stay visible when off. */
:root[data-theme="neon"] .switch__track {
  background: #16203a;
  border-color: #33487a;
}

:root[data-theme="neon"] .switch input:checked + .switch__track {
  box-shadow: 0 0 12px var(--accent-ring);
}

:root[data-theme="neon"] .meter__fill {
  box-shadow: 0 0 10px var(--accent-ring);
}

:root[data-theme="neon"] .meter__fill--positive {
  box-shadow: 0 0 10px color-mix(in srgb, var(--positive) 60%, transparent);
}

:root[data-theme="neon"] .recipe-card--ready {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--positive) 45%, transparent),
    0 0 26px -8px color-mix(in srgb, var(--positive) 60%, transparent);
}

/* Numbers read as instrument readouts rather than prose, using
   Exo 2's tabular figures with a slashed zero. */
:root[data-theme="neon"] .stat__value,
:root[data-theme="neon"] .capacity__count,
:root[data-theme="neon"] .gem-fact__value,
:root[data-theme="neon"] .bonus-row__val {
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.01em;
}


/* =========================================================
   2. BASE
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-top: var(--nav-height);

  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.003em;

  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(
      900px 520px at 50% -10%,
      var(--bg-glow),
      transparent 70%
    );
  background-repeat: no-repeat;
  background-attachment: fixed;

  -webkit-font-smoothing: antialiased;
}

/* Headings use the Orbitron display face. It is geometric and
   runs wide, so sizes come down slightly and a little positive
   tracking gives it room to breathe. */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1rem; }
h3 { font-size: 0.9rem; }

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-soft);
}

/* Figures that sit in a column, or tick upward, must not shift
   width as their digits change. */
.num,
.stat__value,
.gem-fact__value,
.capacity__count,
.roll-button__label,
.gem-card__val,
.index-card__val,
.stats-row__val,
.bonus-row__val,
.history__value,
.history__meta,
.wallet {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}


/* =========================================================
   3. APP SHELL
   ========================================================= */

.app-main {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
}

.app-main--narrow {
  max-width: 760px;
}

.rare-rolls {
  margin-bottom: var(--space-5);
  padding: clamp(18px, 3vw, 26px);
  overflow: hidden;
}

.rare-rolls__header,
.rare-rolls__group-head,
.rare-roll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.rare-rolls__header { margin-bottom: var(--space-4); }
.rare-rolls__header h2 { margin: 3px 0 0; }
.rare-rolls__header p { max-width: 310px; margin: 0; color: var(--text-muted); text-align: right; font-size: .88rem; }
.rare-rolls__eyebrow { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rare-rolls__live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 10px var(--positive); }
.rare-rolls__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rare-rolls__group { min-width: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-raised) 80%, transparent); }
.rare-rolls__group-head { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.rare-rolls__group-head h3 { margin: 0; font-size: .95rem; }
.rare-rolls__group-head span { color: var(--accent); font-size: .75rem; font-weight: 800; }
.rare-rolls__list { display: grid; }
.rare-roll { padding: 11px 0; border-bottom: 1px solid var(--border); }
.rare-roll:last-child { border-bottom: 0; padding-bottom: 0; }
.rare-roll__copy { display: grid; min-width: 0; gap: 2px; }
.rare-roll__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.rare-roll__player, .rare-roll__odds time { color: var(--text-muted); font-size: .72rem; }
.rare-roll__details { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; color: var(--text-muted); font-size: .68rem; }
.rare-roll__details span { padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-sunken); }
.rare-roll__mutations { color: var(--accent); }
.rare-roll__odds { display: grid; flex: none; gap: 2px; text-align: right; }
.rare-roll__odds strong { font-size: .76rem; }
.rare-rolls__empty { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: .8rem; }

@media (max-width: 640px) {
  .rare-rolls__header { align-items: flex-start; }
  .rare-rolls__header p { display: none; }
  .rare-rolls__columns { grid-template-columns: 1fr; }
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page-head__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-head__sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}


/* =========================================================
   4. TOP NAVIGATION
   ========================================================= */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  width: 100%;

  display: flex;
  align-items: center;
  gap: var(--space-4);

  height: var(--nav-height);
  padding: 0 var(--space-4);

  border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.brand__mark svg {
  width: 22px;
  height: 22px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-2);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 10px;
  border-radius: var(--radius-sm);

  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 550;
  white-space: nowrap;

  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__link:hover {
  color: var(--text);
  background: var(--surface-hover);
  text-decoration: none;
}

.nav__link[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav__link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.topbar__spacer {
  flex: 1;
  min-width: 0;
}

.topbar__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

/* Between the mobile tab bar and a roomy desktop there is a band
   where the wordmark plus the links plus the tools do not fit. Drop
   the least useful pieces first — the brand wordmark, then the nav
   labels — rather than letting the bar push the page sideways. */
@media (max-width: 1320px) {
  .brand span:not(.brand__mark) {
    display: none;
  }
}

@media (max-width: 1180px) {
  .nav__link span {
    display: none;
  }

  .nav__link {
    padding: 7px 9px;
  }
}


/* ---------- Wallet pill ---------- */

.wallet {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);

  font-size: 0.9rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wallet svg {
  width: 14px;
  height: 14px;
  color: var(--positive);
}

.wallet--loading {
  color: var(--text-faint);
}


/* ---------- Mobile tab bar ---------- */

.tabbar {
  display: none;
}

@media (max-width: 780px) {
  .nav {
    display: none;
  }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;

    /* Every tab shares the width evenly, so the bar never scrolls. */
    display: flex;
    justify-content: space-between;

    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));

    border-top: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .tabbar__link {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 3px;

    padding: 6px 1px;
    border-radius: var(--radius-sm);

    color: var(--text-faint);
    font-size: 0.64rem;
    font-weight: 600;
  }

  .tabbar__link span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabbar__link:hover {
    text-decoration: none;
  }

  .tabbar__link[aria-current="page"] {
    color: var(--accent);
  }

  .tabbar__link svg {
    width: 20px;
    height: 20px;
  }

  /* Reserve room for the fixed tab bar on the BODY, not just `.app-main`.
     Page CSS (often inline, loaded after this file) overrides class-level
     rules, so only a body-level guard reliably clears the bar on every page —
     `.feature-page`, `.research-page`, `.page-wrap`, `.expansion-page`, etc.
     all sit inside <body>, so none of them can hide content behind the bar. */
  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}

/* Shared full-screen reveal controls. These live in the application stylesheet
   so bespoke and generic cutscenes receive the same accessible mobile UI. */
.cutscene-controls {
  position: fixed;
  z-index: 2147483647;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 13px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(5, 7, 15, .82);
  color: #fff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .35);
  font: 600 .78rem/1.2 var(--font-body, system-ui, sans-serif);
  letter-spacing: .02em;
  backdrop-filter: blur(12px);
}
.cutscene-controls__status { opacity: .78; }
.cutscene-controls__skip {
  min-width: 64px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cutscene-controls__skip:hover,
.cutscene-controls__skip:focus-visible {
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .22);
  outline: 2px solid rgba(255, 255, 255, .72);
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .cutscene-controls {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    justify-content: space-between;
  }
}

/* Shared clarity layer: a slightly stronger rhythm for every screen without
   prescribing a destination's gameplay layout. */
.page-head__title { max-width: 76ch; }
.page-head__sub { max-width: 68ch; line-height: 1.55; }
.card { box-shadow: var(--shadow-sm); }
.btn { min-height: 42px; font-weight: 700; letter-spacing: .005em; }
.btn--primary { box-shadow: 0 5px 14px -8px color-mix(in srgb, var(--accent) 85%, transparent); }
@media (min-width: 721px) {
  .page-head { margin-bottom: clamp(18px, 3vw, 30px); }
}


/* ---------- Showcase pins (3 favourite gems next to a name) ---------- */

.showcase-pins {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 7px;
  vertical-align: middle;
}

.showcase-pin {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex: none;
}

.showcase-pin svg {
  width: 15px;
  height: 15px;
}


/* =========================================================
   5. BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);

  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  background: var(--surface-raised);

  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.08s ease,
    opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--accent);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.btn--primary {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text);
}

.btn--danger {
  color: var(--negative);
  border-color: var(--border-strong);
}

.btn--danger:hover:not(:disabled) {
  border-color: var(--negative);
  background: color-mix(in srgb, var(--negative) 12%, transparent);
}

.btn--sm {
  padding: 5px 10px;
  font-size: 0.8rem;
}

.btn--block {
  width: 100%;
}

.btn--icon {
  padding: 8px;
  width: 36px;
  height: 36px;
}

a.btn--icon[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
}

.btn--icon svg {
  width: 18px;
  height: 18px;
}

.btn__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =========================================================
   6. SURFACES
   ========================================================= */

.card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.panel {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}


/* ---------- Stat tiles ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
}

.stat {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-solid);
}

.stat__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stat__value {
  display: block;
  margin-top: 2px;
  font-size: 1.25rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}


/* =========================================================
   7. METERS & PROGRESS
   ========================================================= */

.meter {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.35s ease;
}

.meter__fill--positive { background: var(--positive); }
.meter__fill--warning  { background: var(--warning); }
.meter__fill--negative { background: var(--negative); }


/* =========================================================
   8. BADGES & RARITY
   ========================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);

  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-muted);
}

.badge svg {
  width: 12px;
  height: 12px;
}

.badge--accent {
  color: var(--accent);
  border-color: transparent;
  background: var(--accent-soft);
}

.badge--positive {
  color: var(--positive);
  border-color: transparent;
  background: color-mix(in srgb, var(--positive) 16%, transparent);
}

.badge--muted {
  color: var(--text-faint);
}

/* Rarity is expressed through --tier, set by the JS helper. */
.tier-common     { --tier: var(--rarity-common); }
.tier-uncommon   { --tier: var(--rarity-uncommon); }
.tier-rare       { --tier: var(--rarity-rare); }
.tier-epic       { --tier: var(--rarity-epic); }
.tier-legendary  { --tier: var(--rarity-legendary); }
.tier-mythic     { --tier: var(--rarity-mythic); }
.tier-exotic     { --tier: var(--rarity-exotic); }
.tier-exalted    { --tier: var(--rarity-exalted); }
.tier-cosmic     { --tier: var(--rarity-cosmic); }
.tier-transcendent { --tier: var(--rarity-transcendent); }
.tier-anomalous { --tier: #a855f7; }
.tier-secret { --tier: #ffd36a; }
.tier-unknown    { --tier: var(--text-faint); }

.badge--tier {
  color: var(--tier, var(--text-muted));
  border-color: transparent;
  background: color-mix(in srgb, var(--tier, var(--text-muted)) 16%, transparent);
}


/* =========================================================
   9. SEGMENTED CONTROLS / TABS
   ========================================================= */

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}

.segmented::-webkit-scrollbar {
  display: none;
}

.segmented__item {
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-sm);

  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;

  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented__item:hover {
  color: var(--text);
}

.segmented__item[aria-selected="true"] {
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.section-switcher {
  width: fit-content;
  margin-bottom: var(--space-5);
}

.section-switcher .segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.section-switcher .segmented__item.active {
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}


/* =========================================================
   10. FORM CONTROLS
   ========================================================= */

.field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.field svg {
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  flex: none;
}

.field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.field input {
  width: 100%;
  padding: 8px 0;
  border: 0;
  outline: none;

  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: transparent;
}

.field input::placeholder {
  color: var(--text-faint);
}

.select {
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);

  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--text);
  background-color: var(--surface-sunken);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% + 1px),
    calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;

  appearance: none;
  cursor: pointer;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch__track {
  /* Explicit block: the track is not always a flex item, and an
     inline element would ignore its width and height. */
  display: inline-block;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex: none;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.switch input:checked + .switch__track {
  background: var(--accent);
  border-color: var(--accent);
}

.switch input:checked + .switch__track::after {
  transform: translateX(16px);
  background: var(--accent-text);
}

.switch input:focus-visible + .switch__track {
  box-shadow: 0 0 0 3px var(--accent-ring);
}


/* =========================================================
   11. POPOVER MENUS
   ========================================================= */

.menu-anchor {
  position: relative;
}

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;

  min-width: 230px;
  padding: var(--space-2);

  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);

  animation: menu-in 0.14s ease-out;
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
}

.menu__label {
  padding: 6px 10px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;

  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);

  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  text-align: left;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.menu__item:hover {
  background: var(--surface-hover);
  text-decoration: none;
}

.menu__item[aria-checked="true"] {
  color: var(--accent);
}

.menu__item svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.menu__sep {
  height: 1px;
  margin: var(--space-2) 4px;
  background: var(--border);
}

.menu__note {
  padding: 4px 10px 8px;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.swatches {
  display: flex;
  gap: 8px;
  padding: 6px 10px 10px;
}

.swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  background-clip: content-box;
}

.swatch[aria-checked="true"] {
  border-color: var(--text);
}


/* ---------- Account avatar ---------- */

.avatar {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;
  border-radius: 50%;

  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent);

  overflow: hidden;
  flex: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);

  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.account-btn:hover {
  border-color: var(--accent);
}

.account-btn__name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .account-btn__name {
    display: none;
  }

  .account-btn {
    padding: 4px;
  }
}

.menu__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 10px 12px;
}

.menu__identity-text {
  min-width: 0;
}

.menu__identity-name {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__identity-sub {
  font-size: 0.76rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------- Google button ---------- */

.btn--google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #dadce0;
}

.btn--google:hover:not(:disabled) {
  background: #f6f8fc;
  border-color: #c6cbd2;
}

.btn--google svg {
  width: 17px;
  height: 17px;
}


/* =========================================================
   12. TOASTS
   ========================================================= */

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 200;

  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);

  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

@media (max-width: 780px) {
  .toast-region {
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: var(--space-4);
    max-width: none;
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);

  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-md);

  font-size: 0.88rem;
  pointer-events: auto;

  animation: toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.toast--leaving {
  animation: toast-out 0.18s ease-in forwards;
}

.toast--success { border-left-color: var(--positive); }
.toast--error   { border-left-color: var(--negative); }
.toast--warning { border-left-color: var(--warning); }

.toast svg {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex: none;
}

.toast--success svg { color: var(--positive); }
.toast--error svg   { color: var(--negative); }
.toast--warning svg { color: var(--warning); }
.toast--info svg    { color: var(--accent); }

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-weight: 650;
}

.toast__text {
  color: var(--text-muted);
  font-size: 0.83rem;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}


/* =========================================================
   13. DIALOGS
   ========================================================= */

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;

  display: grid;
  place-items: center;
  padding: var(--space-4);

  background: var(--overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  animation: fade-in 0.15s ease-out;
}

.dialog {
  width: min(460px, 100%);
  padding: var(--space-5);

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);

  animation: dialog-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.dialog__title {
  margin-bottom: var(--space-2);
  font-size: 1.15rem;
}

.dialog__body {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Compact key/value rows for summaries inside a dialog. */
.stats-row-lite {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 4px 0;
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
}


/* ---------------------------------------------------------
   HOW TO PLAY (first-run guide)
   --------------------------------------------------------- */

.howto {
  width: min(540px, 100%);
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
}

.howto__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.howto__spark {
  display: inline-flex;
  color: var(--accent);
}

.howto__spark svg { width: 22px; height: 22px; }

.howto__lede {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: 0.92rem;
}

.howto__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.howto__step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.howto__step-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--accent);
}

.howto__step-icon svg { width: 20px; height: 20px; }

.howto__step-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.howto__step-text {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.howto__step-text kbd,
.howto__tip kbd {
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface-sunken);
  font-family: inherit;
  font-size: 0.78em;
}

.howto__tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-4) 0 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  font-size: 0.86rem;
}

.howto__tip svg { width: 16px; height: 16px; flex: none; color: var(--accent); }


/* ---------------------------------------------------------
   ROLE TAGS ([DEV] / [OWNER] / [SWEAT])

   Shown next to names in chat and on the leaderboard. Static
   (no pulse) and set in the modern display face.
   --------------------------------------------------------- */

.role-badge {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.role-badge--dev { color: #c084fc; text-shadow: 0 0 8px rgba(192, 132, 252, 0.55); }
.role-badge--owner { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.role-badge--sweat { color: #38bdf8; text-shadow: 0 0 8px rgba(56, 189, 248, 0.55); }


/* ---------------------------------------------------------
   GLOBAL CASH COUNTER (optional, off by default)
   A small live counter fixed at the left edge.
   --------------------------------------------------------- */

.global-cash {
  position: fixed;
  left: 12px;
  bottom: 16px;
  z-index: 60;

  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity: 0.82;
  transition: opacity 0.15s ease;
  pointer-events: auto;
}

.global-cash:hover { opacity: 1; }

.global-cash__stat {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.global-cash__label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.global-cash__value {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--positive);
  font-variant-numeric: tabular-nums;
}

/* Player cash (current money) sits apart from all-time global cash. */
.global-cash__value--cash { color: var(--accent); }

/* Live "online now" count with a pulsing presence dot. */
.global-cash__online {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-muted);
}

.global-cash__online-num {
  color: var(--positive);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.global-cash__dot {
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--positive);
  animation: global-cash-pulse 2s ease-out infinite;
}

@keyframes global-cash-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positive) 55%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .global-cash__dot { animation: none; }
}

/* Live feed of the sales that pushed the total up. */
.global-cash__feed {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 5px;
  max-width: 210px;
}

.global-cash__feed:empty { display: none; }

.global-cash__event {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-cash__event-who { color: var(--text); font-weight: 700; }
.global-cash__event b { color: var(--positive); font-weight: 700; }

.global-cash__event--new { animation: global-cash-in 0.5s ease; }

@keyframes global-cash-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Keep it clear of the mobile tab bar / narrow layouts. */
@media (max-width: 680px) {
  .global-cash {
    top: auto;
    bottom: 84px;
    left: 8px;
    padding: 5px 9px;
  }
  .global-cash__value { font-size: 0.78rem; }
  .global-cash__feed { max-width: 170px; }
}


/* =========================================================
   14. EMPTY & LOADING STATES
   ========================================================= */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);

  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);

  text-align: center;
  color: var(--text-muted);
}

.empty svg {
  width: 30px;
  height: 30px;
  color: var(--text-faint);
  margin-bottom: var(--space-1);
}

.empty__title {
  font-weight: 650;
  color: var(--text);
}

.skeleton {
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    var(--surface-sunken) 25%,
    var(--surface-hover) 37%,
    var(--surface-sunken) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}

.skeleton--card {
  height: 168px;
}

.skeleton--line {
  height: 12px;
}

@keyframes shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}


/* =========================================================
   15. MOTION PREFERENCES
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   MAINTENANCE PANEL
   ========================================================= */

.devpanel {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 250;

  width: min(300px, calc(100vw - 32px));

  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);

  animation: menu-in 0.14s ease-out;
}

@media (max-width: 780px) {
  .devpanel {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

.devpanel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.devpanel__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.devpanel__close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.devpanel__close:hover {
  color: var(--text);
}

.devpanel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.devpanel__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);

  font-size: 0.85rem;
  font-weight: 550;
}

.devpanel__field input {
  width: 140px;
  padding: 7px 10px;

  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);

  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
}

.devpanel__field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.devpanel__actions {
  display: flex;
  gap: var(--space-2);
}

.devpanel__row {
  display: flex;
  gap: var(--space-2);
}

.devpanel__row .devpanel__field {
  flex: 1;
  min-width: 0;
}

.devpanel__actions .btn {
  flex: 1;
}

.devpanel__note {
  min-height: 16px;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.devpanel__sep {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--border);
}

.devpanel__progress {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.devpanel__progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.1s linear;
}


/* =========================================================
   ANNOUNCEMENTS
   ========================================================= */

.announce-bar {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.announce {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  padding: 10px var(--space-4);

  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.announce__icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.announce__icon svg {
  width: 18px;
  height: 18px;
}

.announce__body {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.announce__close {
  flex: none;
  display: grid;
  place-items: center;

  width: 26px;
  height: 26px;
  padding: 0;

  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;

  color: var(--text-faint);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.announce__close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.announce--info    { border-left: 3px solid var(--accent); }
.announce--info .announce__icon { color: var(--accent); }

.announce--warning { border-left: 3px solid var(--warning); }
.announce--warning .announce__icon { color: var(--warning); }

.announce--positive { border-left: 3px solid var(--positive); }
.announce--positive .announce__icon { color: var(--positive); }

.admin-event-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(calc(100% - 32px), 1100px);
  margin: 10px auto 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--accent-soft), var(--surface-solid));
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 15%, transparent);
}

.admin-event-banner__icon { display: grid; place-items: center; color: var(--accent); }
.admin-event-banner__icon svg { width: 22px; height: 22px; }
.admin-event-banner__content { min-width: 0; flex: 1; }
.admin-event-banner__content strong, .admin-event-banner__content span { display: block; }
.admin-event-banner__content span { margin-top: 2px; color: var(--text-muted); font-size: .8rem; }
.admin-event-banner__timer { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.global-event-banner { border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); }
.global-event-banner--rare { border-color: color-mix(in srgb, #b276ff 65%, var(--border)); }
.global-event-banner--legendary { border-color: #ffd166; box-shadow: 0 8px 35px rgb(255 209 102 / .16); }

@media (max-width: 600px) {
  .admin-event-banner { align-items: flex-start; flex-wrap: wrap; }
  .admin-event-banner__timer { margin-left: 34px; }
}


/* =========================================================
   CONTRIBUTE / REPORT-BUG DOCK (bottom-left)
   ========================================================= */

.contribute-dock {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 40;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contribute-dock__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 12px;

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-solid) 90%, transparent);
  backdrop-filter: blur(6px);

  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.contribute-dock__link:hover {
  color: var(--text);
  border-color: var(--accent);
}

.contribute-dock__link svg {
  width: 16px;
  height: 16px;
}

/* The mobile tab bar sits at the very bottom, so lift the dock
   above it on small screens and let it hug the edge. */
@media (max-width: 720px) {
  .contribute-dock {
    left: var(--space-3);
    bottom: calc(var(--space-3) + 68px);
  }

  .contribute-dock__link span {
    display: none;
  }

  .contribute-dock__link {
    padding: 9px;
  }
}

/* =========================================================
   MOBILE P0: one safe-area contract for every floating control
   ========================================================= */

:root {
  --mobile-nav-clearance: calc(78px + env(safe-area-inset-bottom));
  --mobile-floating-gap: 12px;
  --mobile-touch-target: 44px;
}

.announce__link { font-weight: 750; white-space: nowrap; }

@media (max-width: 780px) {
  :root {
    --nav-height: 58px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .topbar {
    height: 58px;
    min-height: 58px;
    padding-inline: 8px;
  }

  .topbar__inner {
    min-height: 58px;
    padding-inline: 0;
  }

  .brand > span:last-child,
  .topbar-explore__button span,
  .topbar-more__button span,
  .topbar-explore__button > svg:last-child,
  .topbar-more__button > svg:last-child,
  .account-btn__name,
  #shellThemeAnchor {
    display: none;
  }

  .brand,
  .brand__mark,
  .topbar-explore__button,
  .topbar-more__button,
  .topbar__tools .btn--icon,
  .account-btn,
  .wallet {
    min-width: var(--mobile-touch-target);
    min-height: var(--mobile-touch-target);
    justify-content: center;
  }

  .wallet:not(.wallet--expanded) span { display: none; }
  .wallet.wallet--expanded { position: absolute; right: 104px; z-index: 3; }

  .tabbar__link {
    min-height: 56px;
    padding-block: 7px;
  }

  .toast-region {
    right: 12px;
    bottom: calc(var(--mobile-nav-clearance) + 72px);
    left: 12px;
  }

  .toast--compact {
    align-self: center;
    width: min(100%, 360px);
    padding: 8px 11px;
    border-radius: 12px;
    font-size: .8rem;
  }

  .toast--compact .toast__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .announce { padding: 8px 12px; font-size: .82rem; }
  .announce__body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  button,
  .btn,
  select,
  .select,
  input:not([type="checkbox"]):not([type="radio"]),
  summary,
  [role="button"] {
    min-height: var(--mobile-touch-target);
  }
}

@media (hover: none), (pointer: coarse) {
  .nav__link:hover,
  .card:hover,
  .panel:hover,
  .gem-card:hover,
  .index-card:hover {
    transform: none;
  }
}

/* Desktop keeps the original always-visible side counter. */
.global-cash__trigger,
.global-cash__close,
.global-cash__backdrop { display: none; }

.global-cash__panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.global-cash__panel-head { display: contents; }

@media (max-width: 680px) {
  .global-cash {
    left: var(--mobile-floating-gap);
    bottom: calc(var(--mobile-nav-clearance) + var(--mobile-floating-gap));
    z-index: 165;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
  }

  .global-cash__trigger {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-solid);
    color: var(--text-muted);
    box-shadow: var(--shadow-md);
    font: inherit;
    font-size: .76rem;
    font-weight: 750;
  }

  .global-cash__panel {
    position: fixed;
    right: 8px;
    bottom: calc(var(--mobile-nav-clearance) + 8px);
    left: 8px;
    z-index: 171;
    display: none;
    max-height: min(62dvh, 520px);
    overflow-y: auto;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: var(--surface-solid);
    box-shadow: 0 24px 80px rgb(0 0 0 / .55);
  }

  .global-cash.is-open .global-cash__panel { display: flex; }
  .global-cash__panel-head { display: flex; align-items: center; justify-content: space-between; }
  .global-cash__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-raised); color: var(--text); font-size: 1.4rem; }
  .global-cash__value { font-size: 1.05rem; }
  .global-cash__feed { max-width: none; gap: 5px; }
  .global-cash__event { padding: 6px 0; font-size: .78rem; white-space: normal; }

  .global-cash__backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 164;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgb(0 0 0 / .42);
  }
}

.gem-reveal__chance,.scene__chance{margin:.45rem 0 0;color:var(--text-muted);font-size:.82rem;font-variant-numeric:tabular-nums}.scene__mutation{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.42rem;max-width:min(90vw,900px);margin:.7rem auto .2rem}.scene__mutation .mutation-name-effect{font-size:.72rem;white-space:nowrap;padding:0;border-radius:0}.history__mutations{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-width:0}.history__mutations .mutation-name-effect{font-size:.6rem;padding:0;border-radius:0}.history__meta{font-variant-numeric:tabular-nums}.setting-number{width:150px}.menu{max-height:min(80vh,520px);overflow:auto}


/* =========================================================
   ADDITIONAL THEME PALETTES
   The theme picker exposes these modes, so each mode needs an
   actual palette.  They intentionally override the shared
   tokens instead of relying on undefined variables.
   ========================================================= */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e14;
  --bg-glow: #151b2b;
  --surface: #121720cc;
  --surface-solid: #121720;
  --surface-raised: #171d29;
  --surface-hover: #1c2331;
  --surface-sunken: #0d1119;
  --border: #242c3b;
  --border-strong: #323c50;
  --text: #e8ecf4;
  --text-muted: #9aa5ba;
  --text-faint: #6b7689;
}

:root[data-theme="gradient"] {
  color-scheme: dark;
  --bg: #10091d;
  --bg-glow: #42206e;
  --surface: #1a1028e8;
  --surface-solid: #1a1028;
  --surface-raised: #24153a;
  --surface-hover: #2e1b49;
  --surface-sunken: #110a1c;
  --border: #4c2d68;
  --border-strong: #70458f;
  --text: #f2e8ff;
  --text-muted: #c3a9dc;
  --text-faint: #8e70a8;
  --accent: #c084fc;
  --accent-strong: #a855f7;
  --accent-soft: #c084fc2e;
  --accent-ring: #c084fc66;
  background-image: radial-gradient(900px 500px at 15% 0%, #7c3aed30, transparent 65%),
    radial-gradient(800px 500px at 90% 10%, #ec489930, transparent 65%);
}

:root[data-theme="ocean"] {
  color-scheme: dark;
  --bg: #06121b;
  --bg-glow: #0b3a50;
  --surface: #0b1d29e8;
  --surface-solid: #0b1d29;
  --surface-raised: #102938;
  --surface-hover: #143546;
  --surface-sunken: #07151f;
  --border: #1d4b60;
  --border-strong: #28647d;
  --text: #e0f7ff;
  --text-muted: #8eb9c9;
  --text-faint: #5e8799;
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-soft: #38bdf82e;
  --accent-ring: #38bdf866;
}

:root[data-theme="forest"] {
  color-scheme: dark;
  --bg: #07130d;
  --bg-glow: #123d24;
  --surface: #0d2116e8;
  --surface-solid: #0d2116;
  --surface-raised: #12301e;
  --surface-hover: #173b26;
  --surface-sunken: #08170e;
  --border: #245638;
  --border-strong: #34744b;
  --text: #e4ffed;
  --text-muted: #98c4a6;
  --text-faint: #648c70;
  --accent: #34d399;
  --accent-strong: #10b981;
  --accent-soft: #34d3992e;
  --accent-ring: #34d39966;
}

:root[data-theme="sunset"] {
  color-scheme: dark;
  --bg: #1b0b0b;
  --bg-glow: #5b211b;
  --surface: #291311e8;
  --surface-solid: #291311;
  --surface-raised: #381a16;
  --surface-hover: #452019;
  --surface-sunken: #1c0d0c;
  --border: #66332b;
  --border-strong: #8a4639;
  --text: #fff0e8;
  --text-muted: #d3a79a;
  --text-faint: #9d7266;
  --accent: #fb7185;
  --accent-strong: #f43f5e;
  --accent-soft: #fb71852e;
  --accent-ring: #fb718566;
}

:root[data-theme="ice"] {
  color-scheme: dark;
  --bg: #07111d;
  --bg-glow: #163d5a;
  --surface: #0c1c2be8;
  --surface-solid: #0c1c2b;
  --surface-raised: #11283b;
  --surface-hover: #17334a;
  --surface-sunken: #081521;
  --border: #27506b;
  --border-strong: #397392;
  --text: #e8f9ff;
  --text-muted: #9cc6d7;
  --text-faint: #6d96a9;
  --accent: #67e8f9;
  --accent-strong: #22d3ee;
  --accent-soft: #67e8f92e;
  --accent-ring: #67e8f966;
}

:root[data-theme="gradient"] body,
:root[data-theme="ocean"] body,
:root[data-theme="forest"] body,
:root[data-theme="sunset"] body,
:root[data-theme="ice"] body {
  background-image: radial-gradient(900px 520px at 50% -10%, var(--bg-glow), transparent 70%);
}

:root[data-theme="gradient"] .brand,
:root[data-theme="ocean"] .brand,
:root[data-theme="forest"] .brand,
:root[data-theme="sunset"] .brand,
:root[data-theme="ice"] .brand {
  text-shadow: 0 0 14px var(--accent-ring);
}

/* =========================================================
   REFINED GRADIENT SYSTEM
   Subtle gradients everywhere: depth without the eye-searing
   neon treatment of the old theme.
   ========================================================= */

body {
  background:
    radial-gradient(900px 520px at 8% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%),
    radial-gradient(780px 460px at 94% 6%, color-mix(in srgb, var(--rarity-exotic) 7%, transparent), transparent 70%),
    linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--bg) 86%, var(--bg-glow)));
  background-attachment: fixed;
}

.card,
.panel,
.modal,
.dropdown,
.popover,
.admin-section,
.admin-result {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-raised) 96%, var(--accent) 4%),
      var(--surface-solid));
  border-color: color-mix(in srgb, var(--border) 88%, var(--accent) 12%);
}

.btn {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--surface-raised) 96%, var(--accent) 4%),
      color-mix(in srgb, var(--surface-solid) 94%, var(--accent) 6%));
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
}

.btn--primary:hover {
  filter: brightness(1.06) saturate(1.04);
}

input, select, textarea {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-sunken) 94%, var(--accent) 6%),
      var(--surface-sunken));
}

.segmented,
.tabs {
  background: linear-gradient(135deg, var(--surface-sunken), color-mix(in srgb, var(--surface-solid) 92%, var(--accent) 8%));
}

.page-head__title h1,
h1, h2 {
  background: linear-gradient(100deg, var(--text) 10%, var(--accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand {
  background: linear-gradient(100deg, var(--text), var(--accent), var(--rarity-exotic));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:root[data-theme="gradient"] {
  --bg: #0e1020;
  --bg-glow: #26345f;
  --surface: #15182ae8;
  --surface-solid: #15182a;
  --surface-raised: #1b2035;
  --surface-hover: #242b46;
  --surface-sunken: #0d1020;
  --border: #303957;
  --border-strong: #46547a;
  --accent: #8b9cff;
  --accent-strong: #6578ee;
  --accent-soft: #8b9cff2e;
  --accent-ring: #8b9cff55;
}

:root[data-theme="gradient"] body {
  background:
    radial-gradient(900px 520px at 10% 0%, #5969c01c, transparent 65%),
    radial-gradient(800px 500px at 90% 8%, #7c5ac21a, transparent 68%),
    linear-gradient(140deg, #0d1020 0%, #12182c 48%, #17162b 100%);
}

:root[data-theme="ocean"] body {
  background:
    radial-gradient(900px 520px at 12% 0%, #38bdf815, transparent 65%),
    linear-gradient(145deg, var(--bg), #0b1a29);
}

:root[data-theme="forest"] body {
  background:
    radial-gradient(900px 520px at 12% 0%, #34d39914, transparent 65%),
    linear-gradient(145deg, var(--bg), #0b1b13);
}

:root[data-theme="sunset"] body {
  background:
    radial-gradient(900px 520px at 12% 0%, #fb718514, transparent 65%),
    linear-gradient(145deg, var(--bg), #24100f);
}

:root[data-theme="ice"] body {
  background:
    radial-gradient(900px 520px at 12% 0%, #67e8f914, transparent 65%),
    linear-gradient(145deg, var(--bg), #0b1a2a);
}

/* =========================================================
   Compact desktop shell: keep every authorized link, including
   Admin + Upcoming, inside the viewport instead of pushing the
   header wider than the screen.
   ========================================================= */
@media (min-width: 781px) and (max-width: 1500px) {
  .topbar__inner { gap: 6px; max-width: 100%; padding-inline: 10px; }
  .nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; gap: 1px; scrollbar-width: thin; }
  .nav::-webkit-scrollbar { height: 4px; }
  .nav__link { padding: 6px 7px; gap: 4px; font-size: .78rem; }
  .nav__link span { overflow: hidden; text-overflow: ellipsis; }
  .topbar__tools { gap: 4px; }
  .wallet { padding-inline: 8px; font-size: .78rem; }
  .account-btn__name { max-width: 82px; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 781px) and (max-width: 1180px) {
  .brand span:not(.brand__mark) { display: none; }
  .nav__link { width: 34px; justify-content: center; padding-inline: 4px; }
  .nav__link span { display: none; }
  .wallet span { display: none; }
  .account-btn__name { display: none; }
}

@media (min-width: 1181px) and (max-width: 1350px) {
  .nav__link span { display:none; }
  .nav__link { width:34px; justify-content:center; padding-inline:4px; }
  .brand span:not(.brand__mark) { display:none; }
  .wallet span { display:none; }
}
@media (min-width: 781px) and (max-width: 1180px) {
  .nav { overflow-x:auto; scrollbar-width:none; }
  .nav::-webkit-scrollbar { display:none; }
}


/* =========================================================
   GEM INCREMENTAL — VISUAL POLISH LAYER
   ---------------------------------------------------------
   A final, intentionally readable layer that unifies the UI
   across older pages without changing gameplay behaviour.
   ========================================================= */

:root {
  --ui-radius-xl: 26px;
  --ui-radius-lg: 20px;
  --ui-radius-md: 14px;
  --ui-border-soft: color-mix(in srgb, var(--border) 78%, transparent);
  --ui-surface-glass: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  --ui-shadow-float:
    0 24px 70px -34px rgb(0 0 0 / 0.72),
    0 8px 24px -16px var(--accent-ring);
  --ui-gradient:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 13%, var(--surface-raised)),
      color-mix(in srgb, var(--surface-solid) 94%, var(--rarity-exotic) 6%)
    );
  --ui-gradient-soft:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-raised) 97%, var(--accent) 3%),
      color-mix(in srgb, var(--surface-solid) 97%, var(--rarity-exotic) 3%)
    );
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(
      900px 620px at 5% -12%,
      color-mix(in srgb, var(--accent) 12%, transparent),
      transparent 70%
    ),
    radial-gradient(
      780px 560px at 96% 0%,
      color-mix(in srgb, var(--rarity-exotic) 8%, transparent),
      transparent 72%
    ),
    linear-gradient(
      150deg,
      var(--bg),
      color-mix(in srgb, var(--bg) 90%, var(--bg-glow))
    );
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  background:
    linear-gradient(
      90deg,
      transparent 0,
      color-mix(in srgb, var(--accent) 3%, transparent) 50%,
      transparent 100%
    );
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.card,
.panel,
.modal,
.dropdown,
.popover,
.admin-section,
.admin-result {
  border-radius: var(--ui-radius-lg);
  border-color: var(--ui-border-soft);
  background: var(--ui-gradient-soft);
  box-shadow: 0 12px 34px -28px rgb(0 0 0 / 0.9);
  backdrop-filter: blur(14px);
}

.card:hover,
.panel:hover {
  border-color: color-mix(in srgb, var(--border-strong) 76%, var(--accent) 24%);
}

.btn {
  min-height: 40px;
  border-radius: 12px;
  border-color: var(--ui-border-soft);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -18px var(--accent-ring);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn--primary {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 96%, white 4%),
      color-mix(in srgb, var(--accent-strong) 96%, black 4%)
    );
  box-shadow:
    0 12px 28px -18px var(--accent-ring),
    inset 0 1px 0 rgb(255 255 255 / 0.16);
}

input,
select,
textarea {
  border-radius: 11px;
  border-color: var(--ui-border-soft);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--border-strong) 78%, var(--accent) 22%);
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border-strong));
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.badge {
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-raised) 82%, var(--accent) 18%),
      var(--surface-sunken)
    );
}

.stat,
.stat-card,
.profile-stat {
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border-soft);
  background: var(--ui-gradient-soft);
  box-shadow: 0 10px 26px -26px rgb(0 0 0 / 0.9);
}

.stat:hover,
.stat-card:hover,
.profile-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 18px 34px -28px var(--accent-ring);
}

a,
button,
select,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Pure CSS gem icon system ---------- */

.gem-icon {
  --gem-color: #8fd9ff;
  --gem-color-a: #8fd9ff;
  --gem-color-b: #c9fbff;
  --gem-glow: rgb(143 217 255 / 0.45);

  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  isolation: isolate;
  filter:
    drop-shadow(0 8px 14px color-mix(in srgb, var(--gem-glow) 70%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--gem-color) 38%, transparent));
}

.gem-icon::before,
.gem-icon::after,
.gem-icon__facet,
.gem-icon__core,
.gem-icon__shine {
  position: absolute;
  display: block;
  content: "";
  pointer-events: none;
}

.gem-icon::before {
  inset: 4%;
  z-index: -2;
  border-radius: 32% 68% 44% 56% / 42% 36% 64% 58%;
  background:
    radial-gradient(circle at 32% 24%, rgb(255 255 255 / 0.28), transparent 18%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--gem-color-a) 88%, white 12%),
      color-mix(in srgb, var(--gem-color-b) 80%, black 20%)
    );
  opacity: 0.32;
  filter: blur(8px);
  transform: scale(1.08);
}

.gem-icon::after {
  inset: 7%;
  z-index: -1;
  border-radius: 18%;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--gem-color-a) 74%, white 26%),
      color-mix(in srgb, var(--gem-color-b) 82%, black 18%)
    );
  clip-path: polygon(
    50% 0%,
    84% 18%,
    100% 48%,
    70% 92%,
    50% 100%,
    28% 92%,
    0% 48%,
    16% 18%
  );
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / 0.55),
    inset 0 -12px 22px rgb(0 0 0 / 0.24),
    inset 0 0 0 1px color-mix(in srgb, var(--gem-color-b) 45%, transparent);
}

/* Crisp cut facets: a bright top-lit half and a shadowed lower half give
   the stone real dimension instead of a flat silhouette. */
.gem-icon__facet {
  z-index: 1;
  background: linear-gradient(
    145deg,
    rgb(255 255 255 / 0.40),
    transparent 62%
  );
}

.gem-icon__facet--a {
  inset: 12% 51% 12% 12%;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.gem-icon__facet--b {
  inset: 12% 12% 12% 51%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background:
    linear-gradient(
      145deg,
      transparent,
      rgb(0 0 0 / 0.26)
    );
}

.gem-icon__core {
  inset: 24%;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      rgb(255 255 255 / 0.85),
      transparent 20%
    ),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--gem-color-b) 85%, white 15%),
      color-mix(in srgb, var(--gem-color-a) 68%, black 32%)
    );
  opacity: 0.74;
  mix-blend-mode: screen;
}

.gem-icon__shine {
  inset: 13% 25% 55% 28%;
  z-index: 3;
  border-radius: 999px;
  background: linear-gradient(
    120deg,
    rgb(255 255 255 / 0.85),
    rgb(255 255 255 / 0.30)
  );
  filter: blur(1px);
  transform: rotate(-28deg);
}

/* A tiny four-point sparkle glint that catches the eye on every gem. */
.gem-icon__shine::after {
  content: "";
  position: absolute;
  right: -34%;
  top: 96%;
  width: 40%;
  height: 40%;
  transform: rotate(28deg);
  background:
    radial-gradient(closest-side, rgb(255 255 255 / 0.95), transparent 70%);
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 0.7));
  clip-path: polygon(
    50% 0%, 58% 42%, 100% 50%, 58% 58%,
    50% 100%, 42% 58%, 0% 50%, 42% 42%
  );
}

/* Silhouette variations make the catalogue feel collected rather
   than repeating one generic diamond. */
.gem-icon--crystal::after {
  clip-path: polygon(
    28% 0,
    72% 0,
    100% 34%,
    77% 100%,
    23% 100%,
    0 34%
  );
}

.gem-icon--hex::after {
  clip-path: polygon(
    25% 2%,
    75% 2%,
    98% 50%,
    75% 98%,
    25% 98%,
    2% 50%
  );
}

.gem-icon--shard::after {
  clip-path: polygon(
    45% 0,
    90% 16%,
    72% 42%,
    100% 70%,
    50% 100%,
    24% 62%,
    0 38%
  );
}

.gem-icon--star::after {
  clip-path: polygon(
    50% 0,
    62% 35%,
    100% 38%,
    70% 60%,
    80% 100%,
    50% 76%,
    20% 100%,
    30% 60%,
    0 38%,
    38% 35%
  );
}

.gem-icon--prism::after {
  clip-path: polygon(
    18% 14%,
    78% 0,
    100% 30%,
    82% 88%,
    42% 100%,
    0 54%
  );
}

.gem-icon--star .gem-icon__core,
.gem-icon--prism .gem-icon__core {
  border-radius: 35%;
  transform: rotate(12deg);
}

.gem-icon--hex .gem-icon__core {
  border-radius: 30%;
}

.gem-icon--shard .gem-icon__shine {
  transform: rotate(-48deg) translateX(-2px);
}

.gem-icon--star .gem-icon__shine {
  inset: 18% 30% 56% 31%;
}



/* =========================================================
   PHOTOREAL SPECIMEN ATLAS
   These are locally generated, background-removed mineral
   specimens used only at the Photoreal level. They replace
   the synthetic vector "gem" silhouette with photographic
   specimen imagery while preserving the normal icon levels.
   ========================================================= */
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"]) {
  overflow: visible;
  clip-path: none !important;
  filter: drop-shadow(0 9px 10px rgb(0 0 0 / .38)) saturate(1.02) contrast(1.04);
  background: transparent !important;
}
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"])::before,
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"])::after {
  clip-path: none !important;
  border-radius: 0 !important;
  background-repeat: no-repeat !important;
}
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"])::after {
  inset: 0 !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 1 !important;
}
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"])::before,
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"]) .gem-icon__facet--a,
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"]) .gem-icon__facet--b,
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"]) .gem-icon__core,
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen]:not([data-gem-specimen="none"]) .gem-icon__shine {
  display: none !important;
}
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="quartz"]::after { background-image: url("../assets/photoreal/specimens2/quartz.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="calcite"]::after { background-image: url("../assets/photoreal/specimens2/calcite.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="jasper"]::after { background-image: url("../assets/photoreal/specimens2/jasper.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="uranium"]::after { background-image: url("../assets/photoreal/specimens2/uranium.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="amethyst"]::after { background-image: url("../assets/photoreal/specimens2/amethyst.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="opal"]::after { background-image: url("../assets/photoreal/specimens2/opal.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="hematite"]::after { background-image: url("../assets/photoreal/specimens2/hematite.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="labradorite"]::after { background-image: url("../assets/photoreal/specimens2/labradorite.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="tourmaline"]::after { background-image: url("../assets/photoreal/specimens2/tourmaline.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="sapphire"]::after { background-image: url("../assets/photoreal/specimens2/sapphire.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="ruby"]::after { background-image: url("../assets/photoreal/specimens2/ruby.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="aquamarine"]::after { background-image: url("../assets/photoreal/specimens2/aquamarine.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="emerald"]::after { background-image: url("../assets/photoreal/specimens2/emerald.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="pyrite"]::after { background-image: url("../assets/photoreal/specimens2/pyrite.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="obsidian"]::after { background-image: url("../assets/photoreal/specimens2/obsidian.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="moonstone"]::after { background-image: url("../assets/photoreal/specimens2/moonstone.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="uranium-specimen"]::after { background-image: url("../assets/photoreal/specimens2/uranium-specimen.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="citrine"]::after { background-image: url("../assets/photoreal/specimens2/citrine.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="diamond"]::after { background-image: url("../assets/photoreal/specimens2/diamond.webp") !important; }
.gem-icon[data-gem-realism="photoreal"][data-gem-specimen="turquoise"]::after { background-image: url("../assets/photoreal/specimens2/turquoise.webp") !important; }


/* =========================================================
   REAL-WORLD GEM MATERIAL RENDERER
   The first four levels preserve the original icon language.
   Levels 5-7 progressively switch from "game icon" lighting to
   physically-inspired gemstone lighting: transmission, edge
   refraction, facet bounce, dispersion, inclusions and controlled
   studio highlights. Each gem supplies its own material profile.
   ========================================================= */

.gem-icon[data-gem-realism="polished"] {
  filter:
    drop-shadow(0 8px 14px color-mix(in srgb, var(--gem-glow) 70%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--gem-color) 42%, transparent))
    saturate(1.04);
}
.gem-icon[data-gem-realism="faceted"] {
  filter:
    drop-shadow(0 9px 16px color-mix(in srgb, var(--gem-glow) 72%, transparent))
    drop-shadow(0 0 13px color-mix(in srgb, var(--gem-color) 45%, transparent))
    saturate(1.08) contrast(1.04);
}
.gem-icon[data-gem-realism="gemstone"],
.gem-icon[data-gem-realism="realistic"],
.gem-icon[data-gem-realism="studio"],
.gem-icon[data-gem-realism="photoreal"] {
  filter:
    drop-shadow(0 10px 18px color-mix(in srgb, var(--gem-real-b) 36%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--gem-real-c) 24%, transparent))
    saturate(calc(1 + var(--gem-dispersion) * .16))
    contrast(calc(1 + var(--gem-refraction) * .08));
}

.gem-icon[data-gem-realism="gemstone"]::after,
.gem-icon[data-gem-realism="realistic"]::after,
.gem-icon[data-gem-realism="studio"]::after,
.gem-icon[data-gem-realism="photoreal"]::after {
  background:
    /* top-table reflection */
    radial-gradient(ellipse at 29% 16%, rgb(255 255 255 / .86) 0 4%, transparent 15%),
    /* internal light */
    radial-gradient(ellipse at 42% 39%, color-mix(in srgb, var(--gem-real-c) 42%, transparent), transparent 45%),
    /* body */
    linear-gradient(136deg,
      color-mix(in srgb, var(--gem-real-b) 92%, white 8%) 0%,
      color-mix(in srgb, var(--gem-real-a) 94%, black 6%) 42%,
      color-mix(in srgb, var(--gem-real-b) 84%, black 16%) 73%,
      color-mix(in srgb, var(--gem-real-a) 78%, black 22%) 100%);
  opacity: calc(.88 + var(--gem-transparency) * .1);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / .76),
    inset 4px 0 8px color-mix(in srgb, var(--gem-real-c) 30%, transparent),
    inset -7px -13px 18px rgb(0 0 0 / .38),
    inset 0 0 0 1px color-mix(in srgb, var(--gem-real-c) 50%, transparent),
    0 1px 2px rgb(255 255 255 / .12);
}

.gem-icon[data-gem-realism="gemstone"] .gem-icon__facet--a,
.gem-icon[data-gem-realism="realistic"] .gem-icon__facet--a,
.gem-icon[data-gem-realism="studio"] .gem-icon__facet--a,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__facet--a {
  background:
    linear-gradient(126deg, rgb(255 255 255 / .72), transparent 37%),
    linear-gradient(178deg, color-mix(in srgb, var(--gem-real-c) 28%, transparent), transparent 68%);
  opacity: calc(.52 + var(--gem-refraction) * .18);
  mix-blend-mode: screen;
}
.gem-icon[data-gem-realism="gemstone"] .gem-icon__facet--b,
.gem-icon[data-gem-realism="realistic"] .gem-icon__facet--b,
.gem-icon[data-gem-realism="studio"] .gem-icon__facet--b,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__facet--b {
  background:
    linear-gradient(145deg, transparent 0 42%, rgb(0 0 0 / .38) 78%),
    linear-gradient(12deg, color-mix(in srgb, var(--gem-real-a) 22%, transparent), transparent);
  opacity: calc(.55 + var(--gem-refraction) * .2);
  mix-blend-mode: multiply;
}

.gem-icon[data-gem-realism="gemstone"] .gem-icon__core,
.gem-icon[data-gem-realism="realistic"] .gem-icon__core,
.gem-icon[data-gem-realism="studio"] .gem-icon__core,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__core {
  inset: 19%;
  background:
    radial-gradient(circle at 33% 25%, rgb(255 255 255 / .98) 0 5%, transparent 15%),
    radial-gradient(ellipse at 63% 66%, color-mix(in srgb, var(--gem-real-c) 52%, transparent), transparent 48%),
    conic-gradient(from 22deg,
      color-mix(in srgb, var(--gem-real-b) 82%, white 18%),
      color-mix(in srgb, var(--gem-real-a) 82%, black 18%),
      color-mix(in srgb, var(--gem-real-c) 56%, transparent),
      color-mix(in srgb, var(--gem-real-b) 88%, white 12%),
      color-mix(in srgb, var(--gem-real-a) 82%, black 18%));
  opacity: calc(.58 + var(--gem-transparency) * .28);
  mix-blend-mode: screen;
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--gem-real-c) 32%, transparent),
    0 0 8px color-mix(in srgb, var(--gem-real-c) 22%, transparent);
}

.gem-icon[data-gem-realism="gemstone"] .gem-icon__shine,
.gem-icon[data-gem-realism="realistic"] .gem-icon__shine,
.gem-icon[data-gem-realism="studio"] .gem-icon__shine,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__shine {
  inset: 8% 24% 57% 21%;
  background:
    linear-gradient(116deg,
      rgb(255 255 255 / .96) 0 7%,
      rgb(255 255 255 / .48) 18%,
      transparent 43%),
    linear-gradient(102deg,
      color-mix(in srgb, var(--gem-real-c) 42%, transparent),
      transparent 48%);
  filter: blur(calc(1px + var(--gem-roughness) * 2px));
  opacity: calc(.72 + var(--gem-refraction) * .18);
  mix-blend-mode: screen;
}

/* Facet-edge glints create the thin bright/dark boundaries visible in
   real cut stones when viewed under a hard light. */
.gem-icon[data-gem-realism="realistic"]::after,
.gem-icon[data-gem-realism="studio"]::after,
.gem-icon[data-gem-realism="photoreal"]::after {
  border: 1px solid color-mix(in srgb, var(--gem-real-c) 42%, transparent);
}

.gem-icon[data-gem-realism="realistic"]::before,
.gem-icon[data-gem-realism="studio"]::before,
.gem-icon[data-gem-realism="photoreal"]::before {
  inset: -4%;
  opacity: calc(.26 + var(--gem-transparency) * .28);
  filter: blur(calc(7px + var(--gem-roughness) * 5px));
  background:
    radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--gem-real-c) 44%, transparent), transparent 54%),
    radial-gradient(ellipse at 30% 80%, color-mix(in srgb, var(--gem-real-b) 28%, transparent), transparent 62%);
}

/* Dispersion: colour-separated micro flashes. */
.gem-icon[data-gem-realism="realistic"] .gem-icon__shine::before,
.gem-icon[data-gem-realism="studio"] .gem-icon__shine::before,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__shine::before {
  content: "";
  position: absolute;
  inset: -12% -5%;
  background:
    linear-gradient(116deg,
      transparent 22%,
      rgb(255 77 110 / calc(var(--gem-dispersion) * .44)) 28%,
      transparent 34%),
    linear-gradient(122deg,
      transparent 36%,
      rgb(83 177 255 / calc(var(--gem-dispersion) * .40)) 42%,
      transparent 48%),
    linear-gradient(128deg,
      transparent 48%,
      rgb(191 119 255 / calc(var(--gem-dispersion) * .34)) 54%,
      transparent 60%);
  mix-blend-mode: screen;
  opacity: .7;
  filter: blur(.35px);
}

/* Natural inclusions and microscopic depth. Opaque materials get a
   stronger veil; transparent stones stay clean. */
.gem-icon[data-gem-realism="studio"] .gem-icon__core::after,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__core::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 20% 60%, rgb(255 255 255 / calc(var(--gem-inclusion) * .16)), transparent 16%),
    radial-gradient(ellipse at 67% 44%, rgb(0 0 0 / calc(var(--gem-inclusion) * .12)), transparent 21%),
    radial-gradient(ellipse at 52% 72%, color-mix(in srgb, var(--gem-real-a) 20%, transparent), transparent 30%);
  opacity: calc(.35 + var(--gem-inclusion) * .55);
  filter: blur(calc(.2px + var(--gem-roughness) * 1.2px));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* High-end studio / photoreal treatment: controlled black levels, stronger
   edge reflection and a restrained photographic highlight. */
.gem-icon[data-gem-realism="studio"] {
  transform: translateZ(0) perspective(480px) rotateX(1.5deg) rotateY(-1.5deg);
}
.gem-icon[data-gem-realism="photoreal"] {
  transform: translateZ(0) perspective(620px) rotateX(2deg) rotateY(-2deg);
  filter:
    drop-shadow(0 12px 18px rgb(0 0 0 / .34))
    drop-shadow(0 0 16px color-mix(in srgb, var(--gem-real-c) 20%, transparent))
    saturate(calc(1 + var(--gem-dispersion) * .18))
    contrast(calc(1.04 + var(--gem-refraction) * .12));
}
.gem-icon[data-gem-realism="photoreal"]::after {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    inset 2px 0 8px color-mix(in srgb, var(--gem-real-c) 42%, transparent),
    inset -9px -17px 20px rgb(0 0 0 / .46),
    inset 0 0 0 1px color-mix(in srgb, var(--gem-real-c) 66%, transparent),
    0 3px 4px rgb(0 0 0 / .22);
}
.gem-icon[data-gem-realism="photoreal"] .gem-icon__facet--a {
  background:
    linear-gradient(124deg, rgb(255 255 255 / .9), transparent 28%),
    linear-gradient(160deg, color-mix(in srgb, var(--gem-real-c) 34%, transparent), transparent 58%);
}
.gem-icon[data-gem-realism="photoreal"] .gem-icon__facet--b {
  background:
    linear-gradient(148deg, transparent 32%, rgb(0 0 0 / .46) 82%),
    linear-gradient(20deg, color-mix(in srgb, var(--gem-real-a) 26%, transparent), transparent);
}

/* Material-specific corrections. */
.gem-icon[data-gem-realism="realistic"][data-gem-icon="Hematite"]::after,
.gem-icon[data-gem-realism="studio"][data-gem-icon="Hematite"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Hematite"]::after {
  background:
    linear-gradient(115deg, #111318 0 18%, #8b919d 30%, #242830 46%, #b8bdc6 62%, #15171b 82%),
    radial-gradient(circle at 32% 20%, #ffffff55, transparent 25%);
  filter: saturate(.62) contrast(1.18);
}
.gem-icon[data-gem-realism="realistic"][data-gem-icon="Obsidian"]::after,
.gem-icon[data-gem-realism="studio"][data-gem-icon="Obsidian"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Obsidian"]::after {
  background:
    linear-gradient(128deg, #0a0b0f 0 28%, #242a35 42%, #050609 58%, #394250 74%, #07080b),
    radial-gradient(ellipse at 28% 18%, #ffffff55, transparent 24%);
  box-shadow: inset 0 1px #ffffff77, inset 0 -18px 22px #000b;
}
.gem-icon[data-gem-realism="realistic"][data-gem-icon="Opal"]::after,
.gem-icon[data-gem-realism="studio"][data-gem-icon="Opal"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Opal"]::after,
.gem-icon[data-gem-realism="realistic"][data-gem-icon="Black Opal"]::after,
.gem-icon[data-gem-realism="studio"][data-gem-icon="Black Opal"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Black Opal"]::after {
  background:
    radial-gradient(ellipse at 34% 38%, #ff5b8a88 0 5%, transparent 14%),
    radial-gradient(ellipse at 67% 62%, #45e8ff99 0 4%, transparent 13%),
    radial-gradient(ellipse at 55% 26%, #c88cff88 0 5%, transparent 16%),
    linear-gradient(145deg, var(--gem-real-b), var(--gem-real-a) 54%, #090a10);
}
.gem-icon[data-gem-realism="realistic"][data-gem-icon="Agate"]::after,
.gem-icon[data-gem-realism="studio"][data-gem-icon="Agate"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Agate"]::after {
  background:
    repeating-linear-gradient(162deg,
      #f1c7a8 0 6%,
      #9b6d58 7% 12%,
      #d5a482 13% 18%,
      #67463d 19% 22%),
    linear-gradient(145deg, var(--gem-real-b), var(--gem-real-a));
}
.gem-icon[data-gem-realism="realistic"][data-gem-icon="Moonstone"]::after,
.gem-icon[data-gem-realism="studio"][data-gem-icon="Moonstone"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Moonstone"]::after {
  background:
    radial-gradient(ellipse at 40% 34%, #ffffffcc 0 5%, transparent 26%),
    radial-gradient(ellipse at 62% 50%, #d8e8ff88 0 8%, transparent 38%),
    linear-gradient(145deg, #7e8ca9, #e9f2ff 44%, #71809b 74%, #cbd8ec);
}


/* Realistic cut silhouettes for known minerals. */
.gem-icon--brilliant::after {
  clip-path: polygon(
    30% 4%, 70% 4%, 92% 28%, 80% 70%,
    50% 98%, 20% 70%, 8% 28%
  );
}
.gem-icon--brilliant .gem-icon__facet--a {
  clip-path: polygon(30% 4%, 50% 28%, 50% 90%, 20% 70%, 8% 28%);
}
.gem-icon--brilliant .gem-icon__facet--b {
  clip-path: polygon(70% 4%, 92% 28%, 80% 70%, 50% 90%, 50% 28%);
}
.gem-icon--emerald-cut::after {
  clip-path: polygon(
    20% 4%, 80% 4%, 96% 20%, 96% 80%,
    80% 96%, 20% 96%, 4% 80%, 4% 20%
  );
}
.gem-icon--emerald-cut .gem-icon__facet--a {
  inset: 14%;
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.gem-icon--emerald-cut .gem-icon__facet--b {
  inset: 14%;
  clip-path: polygon(100% 0, 100% 100%, 72% 100%);
}
.gem-icon--cushion::after {
  border-radius: 24% 24% 28% 28%;
  clip-path: polygon(
    24% 2%, 76% 2%, 96% 20%, 98% 76%,
    78% 98%, 22% 98%, 2% 78%, 4% 20%
  );
}
.gem-icon--oval::after {
  border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  clip-path: polygon(
    50% 2%, 73% 10%, 91% 30%, 96% 50%,
    91% 70%, 73% 90%, 50% 98%, 27% 90%,
    9% 70%, 4% 50%, 9% 30%, 27% 10%
  );
}
.gem-icon--cabochon::after {
  border-radius: 48% 52% 55% 45% / 44% 42% 58% 56%;
  clip-path: polygon(
    18% 14%, 50% 2%, 82% 14%, 98% 46%,
    84% 82%, 50% 98%, 16% 82%, 2% 46%
  );
}
.gem-icon--cabochon .gem-icon__facet--a {
  inset: 15% 22% 46% 16%;
  border-radius: 50%;
  clip-path: ellipse(62% 70% at 45% 45%);
}
.gem-icon--freeform::after {
  clip-path: polygon(
    18% 4%, 54% 0, 86% 18%, 100% 52%,
    79% 88%, 48% 100%, 13% 84%, 0 48%
  );
}

/* ---------- Shared polish for gem-bearing surfaces ---------- */

.showcase-pins {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  vertical-align: middle;
}

.showcase-pin {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.12), transparent 30%),
    color-mix(in srgb, currentColor 10%, var(--surface-sunken));
  border: 1px solid color-mix(in srgb, currentColor 34%, var(--border));
  box-shadow: 0 5px 14px -10px currentColor;
}

.showcase-pin .gem-icon {
  width: 19px;
  height: 19px;
  filter: drop-shadow(0 0 4px currentColor);
}

.gem-reveal__art {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  color: var(--tier, var(--accent));
}

.gem-reveal__art .gem-icon {
  width: 112px;
  height: 112px;
  transform: scale(1.02);
}

.gem-reveal__art .gem-icon::before {
  opacity: 0.54;
  filter: blur(12px);
}

.gem-card,
.index-card,
.showcase-gem {
  position: relative;
  overflow: hidden;
}

.gem-card::after,
.index-card::after,
.showcase-gem::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% 35%;
  height: 70%;
  border-radius: 50%;
  background: var(--gem-bg, color-mix(in srgb, var(--accent) 9%, transparent));
  filter: blur(28px);
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 760px) {
  .card,
  .panel,
  .modal,
  .admin-section,
  .admin-result {
    border-radius: 18px;
  }

  .app-main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .gem-icon {
    width: 46px;
    height: 46px;
  }

  .gem-reveal__art {
    width: 116px;
    height: 116px;
  }

  .gem-reveal__art .gem-icon {
    width: 98px;
    height: 98px;
  }
}


/* =========================================================
   EXPANDED CALM THEMES
   ========================================================= */

:root[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #081218;
  --bg-glow: #153d3b;
  --surface: #0d1b21e8;
  --surface-solid: #0d1b21;
  --surface-raised: #12272c;
  --surface-hover: #18343a;
  --surface-sunken: #071015;
  --border: #20454a;
  --border-strong: #32676a;
  --text: #e8fbf7;
  --text-muted: #94b9b5;
  --text-faint: #638682;
  --accent: #67e8b7;
  --accent-strong: #32c995;
  --accent-soft: #67e8b722;
  --accent-ring: #67e8b75c;
}

:root[data-theme="aurora"] body {
  background:
    radial-gradient(850px 560px at 12% -10%, #34d39922, transparent 68%),
    radial-gradient(780px 520px at 88% 4%, #38bdf822, transparent 70%),
    linear-gradient(145deg, #081218, #0c171c 55%, #081218);
}

:root[data-theme="aurora"] .card,
:root[data-theme="aurora"] .panel {
  box-shadow:
    0 22px 60px -36px rgb(0 0 0 / 0.88),
    0 0 34px -26px #67e8b74d;
}

:root[data-theme="graphite"] {
  color-scheme: dark;
  --bg: #0d0f13;
  --bg-glow: #242b35;
  --surface: #15191fe8;
  --surface-solid: #15191f;
  --surface-raised: #1c222b;
  --surface-hover: #252d38;
  --surface-sunken: #0a0c10;
  --border: #2b333e;
  --border-strong: #414c5a;
  --text: #eef2f7;
  --text-muted: #a0aab8;
  --text-faint: #6f7a89;
  --accent: #b8c7d9;
  --accent-strong: #d6e2ef;
  --accent-soft: #b8c7d91f;
  --accent-ring: #b8c7d955;
}

:root[data-theme="graphite"] body {
  background:
    radial-gradient(900px 560px at 50% -12%, #94a3b81c, transparent 70%),
    linear-gradient(150deg, #0d0f13, #10141a);
}

:root[data-theme="graphite"] .btn--primary {
  color: #11151b;
  background: linear-gradient(135deg, #dbe6f2, #9aaabd);
}

:root[data-theme="graphite"] .card,
:root[data-theme="graphite"] .panel {
  box-shadow: 0 22px 60px -38px rgb(0 0 0 / 0.95);
}


/* ---------- Shell / navigation polish ---------- */

.topbar {
  border-bottom-color: color-mix(in srgb, var(--border) 72%, var(--accent) 28%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-solid) 92%, var(--accent) 8%),
      color-mix(in srgb, var(--surface-solid) 97%, transparent)
    );
  box-shadow: 0 12px 34px -30px rgb(0 0 0 / 0.95);
}

.nav__link {
  border: 1px solid transparent;
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

/* ---------- Quick navigation (Ctrl/⌘ K) ---------- */
.shell-quick-nav-trigger kbd { margin-left: auto; color: var(--text-muted); font: 700 .67rem var(--font-mono, ui-monospace, monospace); }
.quick-nav { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: start center; padding: min(13vh, 120px) 12px 24px; }
.quick-nav__backdrop { position: absolute; inset: 0; background: rgba(4, 7, 13, .72); backdrop-filter: blur(4px); }
.quick-nav__dialog { position: relative; width: min(620px, 100%); max-height: min(680px, 82vh); overflow: hidden auto; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: var(--radius-lg, 18px); background: var(--surface-solid); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.quick-nav__head { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.quick-nav__icon, .quick-nav__item-icon { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--accent); }
.quick-nav__icon svg { width: 20px; height: 20px; }
.quick-nav__search-wrap { flex: 1; }
.quick-nav__search { width: 100%; min-height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); font: 600 1rem var(--font); }
.quick-nav__search::placeholder { color: var(--text-muted); }
.quick-nav__head kbd { margin-left: 3px; font: 700 .68rem var(--font-mono, ui-monospace, monospace); }
.quick-nav__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.quick-nav__title-row h2 { margin: 0; font-size: 1rem; }
.quick-nav__title-row span, .quick-nav__item-copy small, .quick-nav__empty { color: var(--text-muted); font-size: .78rem; }
.quick-nav__results { display: grid; gap: 4px; padding: 0 10px 12px; }
.quick-nav__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-md, 12px); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.quick-nav__item:hover, .quick-nav__item.is-active { border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); background: var(--accent-soft); }
.quick-nav__item-icon svg { width: 19px; height: 19px; }
.quick-nav__item-copy { display: grid; gap: 2px; min-width: 0; }
.quick-nav__item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-nav__current { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: var(--surface-raised); color: var(--text-muted); font-size: .7rem; font-weight: 700; }
.quick-nav__empty { margin: 0; padding: 26px 18px; text-align: center; }
@media (max-width: 560px) { .quick-nav { padding-top: 56px; } .quick-nav__head { align-items: center; } .quick-nav__head .btn { font-size: .75rem; } .quick-nav__title-row span { display: none; } }

.wallet {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-raised) 92%, var(--accent) 8%),
      var(--surface-sunken)
    );
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

@media (max-width: 980px) {
  .topbar {
    padding-inline: 10px;
  }

  .topbar__inner {
    gap: 6px;
  }

  .topbar__tools {
    gap: 5px;
  }

  .wallet {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* =========================================================
   MUTATED GEM ICON SYSTEM
   Mutations alter the silhouette and light behavior of the
   pure-CSS gem itself, so a mutated specimen is recognizable
   everywhere without image assets.
   ========================================================= */

.gem-icon--mutated {
  --mutation-intensity: 1;
}

.gem-icon--mutated::before {
  opacity: .58;
  filter: blur(10px);
  animation: gemMutationPulse 2.4s ease-in-out infinite;
}

.gem-icon__mutation-aura,
.gem-icon__mutation-ring {
  position: absolute;
  pointer-events: none;
  display: block;
  content: "";
  z-index: 5;
}

.gem-icon__mutation-aura {
  inset: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 38%, color-mix(in srgb, var(--mutation-color, var(--gem-color)) 42%, transparent) 58%, transparent 72%);
  filter: blur(3px);
  opacity: .72;
  mix-blend-mode: screen;
}

.gem-icon__mutation-ring {
  inset: 4%;
  border: 1px solid color-mix(in srgb, var(--mutation-color, var(--gem-color)) 78%, white 22%);
  border-radius: 50%;
  opacity: .55;
  transform: rotate(18deg) scaleX(.72);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mutation-color, var(--gem-color)) 48%, transparent);
}

.gem-icon--mutation-polished {
  --mutation-color: #f5fbff;
}
.gem-icon--mutation-polished .gem-icon__shine {
  opacity: .95;
  filter: blur(1px);
  transform: rotate(-30deg) scale(1.2);
}

.gem-icon--mutation-gilded {
  --mutation-color: #ffd45a;
}
.gem-icon--mutation-gilded .gem-icon__facet--a {
  background: linear-gradient(145deg, #fff2a3, #e5a928 65%, transparent);
}
.gem-icon--mutation-gilded .gem-icon__facet--b {
  background: linear-gradient(145deg, #ffe98a, transparent 70%);
}
.gem-icon--mutation-gilded .gem-icon__mutation-ring {
  border-style: dashed;
  border-width: 2px;
}

.gem-icon--mutation-prismatic {
  --mutation-color: #ff7be5;
}
.gem-icon--mutation-prismatic::after {
  background:
    conic-gradient(from 20deg,
      #ff6b9a, #ffd166, #7fffd4, #70a7ff, #c084fc, #ff6b9a);
  animation: prismaticShift 2.8s linear infinite;
}
.gem-icon--mutation-prismatic .gem-icon__core {
  background:
    conic-gradient(#ff8bdc, #8fffea, #8fb4ff, #ffeb87, #ff8bdc);
}

.gem-icon--mutation-celestial {
  --mutation-color: #b9e8ff;
}
.gem-icon--mutation-celestial .gem-icon__mutation-ring {
  inset: -4%;
  border-color: #d9f5ff;
  box-shadow: 0 0 18px #8bdcff88;
  animation: celestialOrbit 3.5s linear infinite;
}
.gem-icon--mutation-celestial::before {
  background:
    radial-gradient(circle, #d8f8ff55 0 16%, transparent 52%),
    linear-gradient(135deg, #8fd9ff, #9d8cff);
}

.gem-icon--mutation-corrupted {
  --mutation-color: #c56cff;
}
.gem-icon--mutation-corrupted::after {
  clip-path: polygon(48% 0, 62% 9%, 58% 28%, 91% 21%, 78% 48%, 100% 63%, 72% 67%, 81% 100%, 49% 82%, 25% 100%, 29% 70%, 0 79%, 20% 50%, 0 29%, 31% 32%, 35% 5%);
  background:
    linear-gradient(135deg, #8b42d7, #260f4d 52%, #ef65ff);
  animation: corruptedJitter 1.7s steps(2, end) infinite;
}
.gem-icon--mutation-corrupted .gem-icon__mutation-ring {
  border-radius: 20% 55% 35% 60%;
  border-color: #ef65ff;
  transform: rotate(-22deg) scale(.86);
}

@keyframes gemMutationPulse {
  0%,100% { transform: scale(.98); opacity: .45; }
  50% { transform: scale(1.06); opacity: .78; }
}
@keyframes prismaticShift {
  to { filter: hue-rotate(360deg); transform: rotate(360deg); }
}
@keyframes celestialOrbit {
  to { transform: rotate(378deg) scaleX(.72); }
}
@keyframes corruptedJitter {
  0%,100% { transform: translate(0); }
  20% { transform: translate(1px,-1px); }
  45% { transform: translate(-1px,1px); }
  70% { transform: translate(1px,1px); }
}



/* =========================================================
   DISTINCT MUTATION GEM SILHOUETTES
   Each mutation gets a different physical treatment, not just
   a different glow. This keeps mutated specimens recognizable
   even at leaderboard/profile icon sizes.
   ========================================================= */
.gem-icon--mutation-polished::after {
  clip-path: polygon(50% 0, 84% 16%, 100% 50%, 82% 86%, 50% 100%, 18% 86%, 0 50%, 16% 16%);
  filter: saturate(.55) brightness(1.16);
}
.gem-icon--mutation-gilded::after {
  clip-path: polygon(50% 0, 92% 22%, 82% 78%, 50% 100%, 18% 78%, 8% 22%);
}
.gem-icon--mutation-prismatic::after {
  clip-path: polygon(50% 0, 88% 14%, 100% 50%, 76% 92%, 24% 92%, 0 50%, 12% 14%);
}
.gem-icon--mutation-celestial::after {
  clip-path: polygon(50% 0, 61% 34%, 96% 20%, 70% 50%, 96% 80%, 61% 66%, 50% 100%, 39% 66%, 4% 80%, 30% 50%, 4% 20%, 39% 34%);
}
.gem-icon--mutation-corrupted::after {
  clip-path: polygon(46% 0, 70% 13%, 100% 8%, 83% 39%, 100% 66%, 65% 62%, 57% 100%, 35% 73%, 5% 88%, 18% 54%, 0 29%, 37% 34%);
}
.gem-icon--mutation-polished .gem-icon__core { transform: scale(1.12); }
.gem-icon--mutation-gilded .gem-icon__core { border-radius: 18%; transform: rotate(45deg) scale(.82); }
.gem-icon--mutation-prismatic .gem-icon__core { border-radius: 25%; transform: rotate(30deg) scale(.9); }
.gem-icon--mutation-celestial .gem-icon__core { border-radius: 50%; transform: scale(.72); }
.gem-icon--mutation-corrupted .gem-icon__core { border-radius: 8% 48% 18% 52%; transform: rotate(-18deg) scale(.88); }
.gem-icon--mutated[data-mutation-count="2"] .gem-icon__mutation-ring {
  transform: rotate(45deg) scaleX(.86);
  border-width: 2px;
}
.gem-icon--mutated[data-mutation-count="3"] .gem-icon__mutation-ring {
  transform: rotate(70deg) scaleX(.92);
  border-width: 2px;
  border-style: dotted;
}
.gem-icon--mutated[data-mutation-count="4"] .gem-icon__mutation-ring {
  inset: -6%;
  transform: rotate(100deg) scaleX(.98);
  border-width: 2px;
  border-style: double;
}
.gem-icon--mutated[data-mutation-count="5"] .gem-icon__mutation-ring {
  inset: -10%;
  transform: rotate(130deg) scaleX(1);
  border-width: 2px;
  border-style: dashed;
  animation: mutationCrownSpin 2.6s linear infinite;
}
@keyframes mutationCrownSpin {
  to { transform: rotate(490deg) scaleX(1); }
}

/* =========================================================
   SESSION INSIGHTS
   ========================================================= */

.session-insights {
  overflow: hidden;
  position: relative;
}
.session-insights::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 220px;
  right: -140px;
  top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 68%);
  pointer-events: none;
}
.session-insights__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.session-insights__stats > div,
.session-insights__highlights > div,
.session-insights__notable > div {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: linear-gradient(145deg, var(--surface-raised), var(--surface-sunken));
}
.session-insights__stats span,
.session-insights__highlights span {
  display: block;
  color: var(--text-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.session-insights__stats strong {
  display: block;
  margin-top: 4px;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.session-insights__highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.session-insights__highlights strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-insights__highlights small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
}
.session-insights__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.session-insights__notable {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.session-insights__notable strong,
.session-insights__notable span {
  display: block;
}
.session-insights__notable span {
  color: var(--text-muted);
  margin-top: 3px;
  font-size: .78rem;
}
.session-insights__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .session-insights__stats,
  .session-insights__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .session-insights__stats,
  .session-insights__highlights,
  .session-insights__notable { grid-template-columns: 1fr; }
}


/* =========================================================
   MORE MENU
   The utility links live behind one calm control instead of
   occupying the left edge of every page.
   ========================================================= */

.contribute-dock {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 70;
}
.more-menu-anchor { position: relative; }
.contribute-dock__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-raised) 94%, var(--accent) 6%),
      color-mix(in srgb, var(--surface-solid) 94%, transparent));
  box-shadow: 0 14px 34px -20px rgb(0 0 0 / .95);
  backdrop-filter: blur(18px);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}
.contribute-dock__more:hover,
.contribute-dock__more[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 40px -20px rgb(0 0 0 / .95);
}
.contribute-dock__more svg { width: 18px; height: 18px; }
.more-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(300px, calc(100vw - 36px));
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-raised) 96%, var(--accent) 4%),
      color-mix(in srgb, var(--surface-solid) 98%, transparent));
  box-shadow: 0 26px 70px -28px rgb(0 0 0 / .95);
  backdrop-filter: blur(22px);
}
.more-menu__head {
  padding: 7px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.more-menu__eyebrow {
  display: block;
  color: var(--text-faint);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.more-menu__head strong { display: block; margin-top: 2px; font-size: 1.05rem; }
.more-menu .contribute-dock__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
  box-shadow: none;
  font-size: .88rem;
}
.more-menu .contribute-dock__link:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-hover);
}
.more-menu .contribute-dock__link svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 720px) {
  .contribute-dock { left: 12px; bottom: 78px; }
}


/* =========================================================
   ADDITIONAL CALM THEMES
   ========================================================= */

:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #070b14;
  --bg-glow: #17254a;
  --surface: #0e1522ee;
  --surface-solid: #0e1522;
  --surface-raised: #141e2e;
  --surface-hover: #1a2940;
  --surface-sunken: #070b12;
  --border: #253552;
  --border-strong: #3b5278;
  --text: #edf4ff;
  --text-muted: #9baecc;
  --text-faint: #66799a;
  --accent: #8ca7ff;
  --accent-strong: #6d8cff;
  --accent-soft: #8ca7ff22;
  --accent-ring: #8ca7ff55;
}
:root[data-theme="midnight"] body {
  background:
    radial-gradient(900px 560px at 18% -10%, #4169e133, transparent 66%),
    radial-gradient(800px 520px at 90% 0%, #8b5cf622, transparent 68%),
    linear-gradient(150deg, #070b14, #0b101b 55%, #070b14);
}
:root[data-theme="midnight"] .card,
:root[data-theme="midnight"] .panel {
  box-shadow: 0 28px 80px -44px #000, 0 0 35px -30px #8ca7ff55;
}

:root[data-theme="mist"] {
  color-scheme: dark;
  --bg: #0c1115;
  --bg-glow: #26343c;
  --surface: #151d22ed;
  --surface-solid: #151d22;
  --surface-raised: #1b262c;
  --surface-hover: #23323a;
  --surface-sunken: #0a0f13;
  --border: #33444c;
  --border-strong: #4b626c;
  --text: #eef6f7;
  --text-muted: #a2b4b8;
  --text-faint: #71848a;
  --accent: #8fd0d2;
  --accent-strong: #70bfc2;
  --accent-soft: #8fd0d222;
  --accent-ring: #8fd0d255;
}
:root[data-theme="mist"] body {
  background:
    radial-gradient(900px 560px at 70% -12%, #9bd8df1c, transparent 70%),
    linear-gradient(150deg, #0c1115, #11191e);
}


/* =========================================================
   GLOBAL UI / UX PASS
   ========================================================= */

:root {
  --ui-shadow-soft: 0 14px 44px -28px rgb(0 0 0 / .82);
  --ui-shadow-float: 0 28px 80px -42px rgb(0 0 0 / .96);
  --ui-radius-xl: 28px;
  --ui-radius-lg: 20px;
  --ui-gradient-soft:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-raised) 96%, var(--accent) 4%),
      color-mix(in srgb, var(--surface-solid) 98%, transparent));
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  background-image:
    radial-gradient(700px 420px at 10% -8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%),
    radial-gradient(700px 420px at 94% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%);
}

.topbar {
  min-height: 66px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-solid) 94%, var(--accent) 6%),
      color-mix(in srgb, var(--surface-solid) 86%, transparent));
  backdrop-filter: blur(22px) saturate(1.15);
}
.topbar__inner {
  max-width: 1480px;
  min-width: 0;
  min-height: 66px;
  margin: 0 auto;
  padding-inline: clamp(12px, 2vw, 26px);
}
.brand {
  font-weight: 850;
  letter-spacing: -.025em;
}
.brand__mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--accent-soft), var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: 0 9px 25px -18px var(--accent);
}
.nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  gap: 4px;
}
.nav::-webkit-scrollbar { height: 4px; }
.nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 38%, transparent);
}
.nav__link { flex: 0 0 auto; }
.topbar__spacer { flex: 0 0 0; }
.nav__link {
  min-height: 38px;
  padding-inline: 11px;
  border-radius: 11px;
  color: var(--text-muted);
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.nav__link:hover {
  transform: translateY(-1px);
  color: var(--text);
  background: var(--surface-hover);
}
.nav__link[aria-current="page"] {
  color: var(--text);
  background: linear-gradient(145deg, var(--accent-soft), transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: 0 8px 24px -18px var(--accent);
}
.wallet {
  min-height: 38px;
  border-radius: 12px;
  padding-inline: 10px;
}

.card,
.panel,
.gem-card,
.index-card,
.showcase-gem,
.admin-section,
.workbench-card {
  border-color: color-mix(in srgb, var(--border) 86%, var(--accent) 14%);
  box-shadow: var(--ui-shadow-soft);
  transition:
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}
.card:hover,
.panel:hover,
.gem-card:hover,
.index-card:hover,
.showcase-gem:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: var(--ui-shadow-float);
}

.btn {
  min-height: 40px;
  border-radius: 12px;
  font-weight: 750;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn--primary {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 12px 28px -18px var(--accent);
}
.btn--primary:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow: 0 16px 34px -18px var(--accent);
}

input,
select,
textarea {
  border-radius: 12px !important;
  border: 1.5px solid var(--border-strong) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-sunken) 62%, var(--surface-solid)),
      var(--surface-solid)) !important;
  /* A recessed "well" so fields read as real inputs instead of flat panels. */
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 0.07),
    inset 0 -1px 0 rgb(255 255 255 / 0.03) !important;
  color: var(--text);
}
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--border-strong) 62%, var(--accent) 38%) !important;
}
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 0;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 4px var(--accent-ring),
    inset 0 1px 3px rgb(0 0 0 / 0.06) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
  opacity: 1;
}
/* Inputs that live inside their own bordered wrapper (search fields, the
   money "$" group) stay flat so the wrapper owns the border, not both. */
.field input,
.auction-money-input input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Roomier default height so form fields don't feel cramped. Checkboxes,
   radios and colour swatches keep their own sizing. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
textarea,
select,
.select {
  padding-block: 12px;
  line-height: 1.35;
}

.page-head {
  padding-block: 18px 12px;
}
.page-head__title h1 {
  letter-spacing: -.035em;
}
.page-head__sub {
  line-height: 1.55;
}

.badge {
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
  background: color-mix(in srgb, var(--surface-raised) 86%, var(--accent) 14%);
  backdrop-filter: blur(8px);
}

.stat,
.admin-stat,
.analytics-card {
  border: 1px solid var(--border);
  background:
    linear-gradient(145deg, var(--surface-raised), var(--surface-sunken));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .025);
}

.stage {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--accent) 22%);
  background:
    radial-gradient(480px 260px at 50% 40%, var(--accent-soft), transparent 68%),
    linear-gradient(145deg, var(--surface-raised), var(--surface-sunken));
  box-shadow: var(--ui-shadow-float);
}

.history__row {
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  transition: background .15s ease, border-color .15s ease;
}
.history__row:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-color: var(--border);
}

@media (max-width: 1100px) {
  .nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link { white-space: nowrap; }
}
@media (max-width: 720px) {
  .topbar__inner {
    min-height: 58px;
  }
  .brand > span:last-child {
    display: none;
  }
  .wallet {
    max-width: 118px;
  }
  .app-main {
    padding-bottom: 92px;
  }
}


/* =========================================================
   TOP BAR MORE MENU
   ========================================================= */
.topbar-more {
  position: relative;
  flex: 0 0 auto;
}

/* Secondary destinations live in one stable Explore menu. This keeps the
   main bar focused even as feature-switched pages are enabled later. */
.topbar-explore {
  position: relative;
  flex: 0 0 auto;
}
.topbar-explore__button {
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.topbar-explore__button > svg:last-child {
  width: 13px;
  height: 13px;
}
.topbar-explore__menu {
  position: fixed;
  z-index: 1000;
  width: min(320px, calc(100vw - 16px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 9px;
  box-shadow: 0 24px 70px -28px rgb(0 0 0 / .95);
  backdrop-filter: blur(22px);
}
.topbar-explore__menu[hidden] { display: none; }
.topbar-explore__group {
  margin-top: 5px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised) 76%, transparent);
}
.topbar-explore__group[open] {
  border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
}
.topbar-explore__group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--text-muted);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.topbar-explore__group-toggle::-webkit-details-marker { display: none; }
.topbar-explore__group-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.topbar-explore__group-toggle > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.topbar-explore__group-toggle > span:nth-of-type(1) { flex: 1; }
.topbar-explore__group-toggle > svg:last-child {
  width: 14px;
  height: 14px;
  transition: transform .16s ease;
}
.topbar-explore__group[open] > .topbar-explore__group-toggle > svg:last-child {
  transform: rotate(180deg);
}
.topbar-explore__group-count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--text-faint);
  background: var(--surface-sunken);
  font-size: .72rem;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.topbar-explore__group-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 0 6px 6px;
}
.topbar-explore__item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  width: 100%;
  text-decoration: none;
}
.topbar-explore__group-items .topbar-explore__item {
  min-width: 0;
  padding-inline: 9px;
}
.topbar-explore__item > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-explore__item svg,
.topbar-explore__item .nav__custom-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.topbar-explore__item[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
}

@media (max-width: 980px) {
  .topbar-explore__button > span { display: none; }
  .topbar-explore__button {
    width: 40px;
    justify-content: center;
    padding: 0;
  }
  .topbar-explore__button > svg:last-child { display: none; }
}
.topbar-more__button {
  min-height: 40px;
  gap: 7px;
  padding-inline: 12px;
  white-space: nowrap;
}
.topbar-more__button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.topbar-more__menu {
  position: fixed;
  z-index: 1000;
  top: 64px;
  right: 12px;
  width: min(310px, calc(100vw - 24px));
  padding: 9px;
  transform-origin: top right;
  box-shadow: 0 24px 70px -28px rgb(0 0 0 / .95);
  backdrop-filter: blur(22px);
}
.topbar-more__menu[hidden] {
  display: none;
}
.topbar-more__menu .menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  width: 100%;
  text-decoration: none;
}
.topbar-more__menu .menu__item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
@media (max-width: 980px) {
  .topbar-more__button > span {
    display: none;
  }
  .topbar-more__button {
    width: 40px;
    justify-content: center;
    padding: 0;
  }
}
@media (max-width: 700px) {
  .topbar-more__menu {
    top: 58px;
    right: 8px;
  }
}


/* Wallet expansion on compact layouts. */
.wallet { cursor: pointer; user-select: none; }
.wallet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wallet--expanded #shellWalletValue { display: inline !important; }


/* Cinematic polish layer: adds depth and movement to every rarity replay
   without requiring image assets or a canvas renderer. */
.scene__energy-lattice {
  position:absolute; inset:-15%; pointer-events:none; opacity:.24;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 20%, color-mix(in srgb, var(--accent) 18%, transparent) 20.2% 20.4%, transparent 20.7% 38%, color-mix(in srgb, var(--accent) 12%, transparent) 38.2% 38.4%, transparent 38.7%),
    conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--accent) 18%, transparent), transparent 12%, transparent 35%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%);
  mix-blend-mode:screen; animation:cinematicLattice 8s linear infinite;
}
.scene__cinematic-grain {
  position:absolute; inset:0; pointer-events:none; opacity:.09; mix-blend-mode:screen;
  background-image:radial-gradient(circle, #fff 0 0.6px, transparent .8px);
  background-size:4px 4px; animation:cinematicGrain .22s steps(2) infinite;
}
.replay-cutscene-overlay .scene__reveal {
  transform:translateY(12px) scale(.94);
  opacity:0; filter:blur(12px);
  transition:transform 1.2s cubic-bezier(.16,1,.3,1), opacity 1s ease, filter 1s ease;
}
.replay-cutscene-overlay.is-playing .scene__reveal {
  transform:none; opacity:1; filter:none;
}
@keyframes cinematicLattice { to { transform:rotate(360deg) scale(1.08); } }
@keyframes cinematicGrain { 0% { transform:translate(0); } 25% { transform:translate(-2px,1px); } 50% { transform:translate(1px,-2px); } 75% { transform:translate(2px,2px); } }
@media (prefers-reduced-motion:reduce) {
  .scene__energy-lattice,.scene__cinematic-grain { animation:none; }
}

/* Admin-only feature navigation */
.nav__link--admin-only,
.tabbar__link--admin-only {
  position: relative;
}
.nav__link--admin-only::after {
  content: "ADMIN";
  margin-left: 5px;
  font-size: .55em;
  letter-spacing: .08em;
  opacity: .7;
}

/* =========================================================
   GEM ICON REALISM SCALE
   Seven material stages: classic -> photoreal.
   The original geometry is retained; each stage progressively
   adds physically-inspired depth, facet contrast, Fresnel edge
   response, dispersion, micro-reflection and studio lighting.
   ========================================================= */
.gem-icon[data-gem-realism="classic"] { --realism:0; --realism-detail:0; --realism-shadow:0; }
.gem-icon[data-gem-realism="polished"] { --realism:.17; --realism-detail:.18; --realism-shadow:.16; }
.gem-icon[data-gem-realism="faceted"] { --realism:.34; --realism-detail:.36; --realism-shadow:.32; }
.gem-icon[data-gem-realism="gemstone"] { --realism:.51; --realism-detail:.54; --realism-shadow:.49; }
.gem-icon[data-gem-realism="realistic"] { --realism:.68; --realism-detail:.70; --realism-shadow:.66; }
.gem-icon[data-gem-realism="studio"] { --realism:.84; --realism-detail:.85; --realism-shadow:.82; }
.gem-icon[data-gem-realism="photoreal"] { --realism:1; --realism-detail:1; --realism-shadow:1; }
.gem-icon[data-gem-realism]:not([data-gem-realism="classic"]) {
  isolation:isolate;
  filter: saturate(calc(1 + var(--realism) * .18)) contrast(calc(1 + var(--realism) * .12));
}
.gem-icon[data-gem-realism]:not([data-gem-realism="classic"])::before {
  background:
    radial-gradient(ellipse at 27% 17%, rgb(255 255 255 / calc(.34 + var(--realism) * .34)) 0 3%, transparent 4% 100%),
    radial-gradient(ellipse at 71% 77%, rgb(0 0 0 / calc(.10 + var(--realism) * .22)) 0 18%, transparent 48%),
    linear-gradient(145deg, color-mix(in srgb, var(--gem-color-a) 92%, white), var(--gem-color-b));
  box-shadow:
    inset -7px -9px 15px rgb(0 0 0 / calc(.08 + var(--realism-shadow) * .24)),
    inset 6px 5px 10px rgb(255 255 255 / calc(.10 + var(--realism-detail) * .26)),
    0 7px 18px rgb(0 0 0 / calc(.04 + var(--realism-shadow) * .22));
}
.gem-icon[data-gem-realism="gemstone"] .gem-icon__facet,
.gem-icon[data-gem-realism="realistic"] .gem-icon__facet,
.gem-icon[data-gem-realism="studio"] .gem-icon__facet,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__facet {
  background: linear-gradient(145deg, rgb(255 255 255 / calc(.08 + var(--realism-detail) * .24)), transparent 38% 63%, rgb(0 0 0 / calc(.06 + var(--realism-detail) * .17)));
  mix-blend-mode: screen;
}
.gem-icon[data-gem-realism="realistic"] .gem-icon__core,
.gem-icon[data-gem-realism="studio"] .gem-icon__core,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__core {
  box-shadow: inset -4px -5px 7px rgb(0 0 0 / .24), inset 3px 3px 5px rgb(255 255 255 / .24), 0 0 12px var(--gem-glow);
}
.gem-icon[data-gem-realism="studio"] .gem-icon__shine,
.gem-icon[data-gem-realism="photoreal"] .gem-icon__shine {
  opacity: calc(.48 + var(--realism-detail) * .45);
  filter: blur(calc(1px - var(--realism-detail) * .7));
}
.gem-icon[data-gem-realism="photoreal"]::after {
  content:"";
  position:absolute; inset:4%; border-radius:inherit; pointer-events:none; z-index:8;
  background:
    linear-gradient(116deg, transparent 0 28%, rgb(255 255 255 / .28) 29% 30%, transparent 31% 59%, rgb(255 255 255 / .11) 60% 61%, transparent 62%),
    radial-gradient(ellipse at 35% 18%, rgb(255 255 255 / .34), transparent 24%),
    radial-gradient(ellipse at 76% 82%, rgb(0 0 0 / .18), transparent 30%);
  mix-blend-mode: screen;
}
/* Material cues for real-world gemstone families. */
.gem-icon[data-gem-icon="Diamond"][data-gem-realism="photoreal"]::after,
.gem-icon[data-gem-icon="Zircon"][data-gem-realism="photoreal"]::after { background: conic-gradient(from 205deg at 48% 45%, rgb(255 255 255 / .5), transparent 13%, rgb(176 225 255 / .24) 22%, transparent 38%, rgb(255 255 255 / .55) 50%, transparent 66%, rgb(185 225 255 / .2) 82%, transparent); mix-blend-mode: screen; }
.gem-icon[data-gem-icon="Opal"][data-gem-realism="photoreal"]::after,
.gem-icon[data-gem-icon="Tourmaline"][data-gem-realism="photoreal"]::after { background: conic-gradient(from 40deg, rgb(255 70 160 / .24), rgb(90 230 255 / .25), rgb(130 255 150 / .24), rgb(255 210 70 / .22), rgb(170 100 255 / .25), rgb(255 70 160 / .24)); filter:saturate(1.35); mix-blend-mode:screen; }
.gem-icon[data-gem-icon="Emerald"][data-gem-realism="photoreal"]::after { background: radial-gradient(ellipse at 37% 39%, rgb(255 255 255 / .12), transparent 10%), radial-gradient(ellipse at 62% 56%, rgb(20 60 35 / .22), transparent 17%), linear-gradient(117deg, transparent 34%, rgb(255 255 255 / .12) 35% 36%, transparent 37%); }
.gem-icon[data-gem-icon="Ruby"][data-gem-realism="photoreal"]::after,
.gem-icon[data-gem-icon="Sapphire"][data-gem-realism="photoreal"]::after { background: linear-gradient(127deg, transparent 24%, rgb(255 255 255 / .20) 25% 27%, transparent 28% 62%, rgb(255 255 255 / .10) 63% 64%, transparent 65%); }
.gem-icon[data-gem-icon="Hematite"][data-gem-realism="photoreal"]::before { background: linear-gradient(115deg, #1a1514, #6f544b 32%, #171314 48%, #a0786d 63%, #201719); box-shadow: inset -6px -8px 14px rgb(0 0 0 / .45), inset 5px 4px 8px rgb(255 255 255 / .18), 0 8px 18px rgb(0 0 0 / .35); }


/* ================================================================
   PHOTOREAL MATERIAL PASS v2
   The runtime layer stays compact for performance; the accompanying
   the large unused photoreal CSS archive is intentionally omitted; these compact rules are the active photoreal pass
   requested for this build and is intentionally not loaded by default.
   ================================================================ */
.gem-icon[data-gem-realism="photoreal"] {
  background: transparent;
  filter: saturate(1.08) contrast(1.12) brightness(.98) drop-shadow(0 10px 14px rgb(0 0 0 / .38));
  transform: translateZ(0);
  isolation: isolate;
}
.gem-icon[data-gem-realism="photoreal"]::before {
  background:
    radial-gradient(ellipse at 24% 16%, rgb(255 255 255 / .72) 0 2.2%, transparent 3.8%),
    radial-gradient(ellipse at 72% 78%, rgb(0 0 0 / .28) 0 20%, transparent 51%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--gem-real-b) 72%, #000 28%) 0%, var(--gem-real-a) 58%, #06070a 100%);
  box-shadow: inset -10px -12px 18px rgb(0 0 0 / .34), inset 8px 7px 13px rgb(255 255 255 / .24), 0 8px 20px rgb(0 0 0 / .34);
}
.gem-icon[data-gem-realism="photoreal"]::after {
  opacity: .92;
  background:
    linear-gradient(117deg, transparent 0 19%, rgb(255 255 255 / .34) 20% 21%, transparent 22% 43%, rgb(255 255 255 / .13) 44% 46%, transparent 47%),
    conic-gradient(from 220deg at 45% 44%, transparent 0 13%, rgb(255 255 255 / .18) 14% 16%, transparent 17% 37%, rgb(130 210 255 / .12) 38% 42%, transparent 43% 61%, rgb(255 255 255 / .16) 62% 65%, transparent 66%);
  mix-blend-mode: screen;
}
.gem-icon[data-gem-realism="photoreal"] .gem-icon__facet {
  border-color: rgb(255 255 255 / .22);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.gem-icon[data-gem-realism="photoreal"] .gem-icon__core {
  opacity: .95;
  background: radial-gradient(circle at 38% 32%, rgb(255 255 255 / .22), transparent 8%), linear-gradient(135deg, var(--gem-real-c), var(--gem-real-b) 28%, var(--gem-real-a) 72%, #050608);
  box-shadow: inset -7px -8px 13px rgb(0 0 0 / .3), inset 5px 4px 8px rgb(255 255 255 / .2);
}
.gem-icon[data-gem-realism="photoreal"] .gem-icon__shine { opacity: .78; filter: blur(.25px); }
.gem-icon[data-gem-realism="photoreal"][data-gem-material="radioactive-ore"]::before {
  background:
    radial-gradient(ellipse at 32% 22%, rgb(232 255 145 / .72) 0 3%, transparent 4%),
    repeating-linear-gradient(103deg, transparent 0 7px, rgb(0 0 0 / .16) 8px 10px, transparent 11px 18px),
    linear-gradient(135deg, #173b1a, #5ecb45 42%, #244d1e 72%, #11150e);
  box-shadow: inset -9px -12px 16px rgb(0 0 0 / .42), inset 6px 5px 12px rgb(255 255 255 / .22), 0 8px 20px rgb(0 0 0 / .32);
}
.gem-icon[data-gem-realism="photoreal"][data-gem-material="radioactive-ore"]::after {
  background: repeating-linear-gradient(88deg, transparent 0 10px, rgb(231 255 142 / .14) 11px 13px, transparent 14px 23px), radial-gradient(circle at 60% 45%, rgb(238 255 135 / .24), transparent 20%);
  mix-blend-mode: screen;
}
.gem-icon[data-gem-realism="photoreal"][data-gem-material="metallic"]::before { filter: saturate(.82) contrast(1.18); }
.gem-icon[data-gem-realism="photoreal"][data-gem-material="iridescent"]::after { background: conic-gradient(from 25deg, rgb(255 100 180 / .26), rgb(70 220 255 / .25), rgb(130 255 160 / .22), rgb(255 220 80 / .25), rgb(170 110 255 / .24), rgb(255 100 180 / .26)); mix-blend-mode: screen; }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Diamond"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Natural Moissanite"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Zircon"]::after { filter: saturate(1.2); background: conic-gradient(from 205deg at 48% 45%, rgb(255 255 255 / .62), transparent 12%, rgb(176 225 255 / .28) 23%, transparent 37%, rgb(255 255 255 / .66) 50%, transparent 66%, rgb(185 225 255 / .26) 82%, transparent); mix-blend-mode: screen; }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Emerald"]::before { background: repeating-linear-gradient(76deg, transparent 0 9px, rgb(255 255 255 / .035) 10px 12px, transparent 13px 21px), linear-gradient(135deg,#062f20,#1f9d60 43%,#083b28 70%,#021812); }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Opal"]::after,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Black Opal"]::after { filter: saturate(1.45); }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Hematite"]::before { background: linear-gradient(115deg,#141719,#777f88 30%,#1b1d20 47%,#c1c5ca 62%,#24272b); }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Obsidian"]::before { background: linear-gradient(140deg,#020306 0%,#11151c 42%,#030407 72%,#1d2530); }


.player-title-badge { display:inline-flex; align-items:center; margin-left:.38rem; padding:.14rem .48rem; border:1px solid color-mix(in srgb,var(--player-title-color,#ffd166) 60%, transparent); border-radius:999px; color:var(--player-title-color,#ffd166); background:color-mix(in srgb,var(--player-title-color,#ffd166) 12%, transparent); box-shadow:0 0 12px color-mix(in srgb,var(--player-title-color,#ffd166) 18%, transparent); font-size:.58em; font-weight:800; letter-spacing:.03em; vertical-align:middle; }
.player-title-badge--profile { font-size:.34em; }
/* High-detail real specimen reference for uranium/uraninite-style custom gems. */
.gem-icon[data-gem-realism="photoreal"][data-gem-material="radioactive-ore"] .gem-icon__core {
  background-image: url("../assets/photoreal/uranium-specimen-cutout.webp"), radial-gradient(circle at 38% 32%, rgb(255 255 255 / .18), transparent 10%);
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: normal, screen;
}


/* ================================================================
   PHOTOREAL SPECIMEN OVERRIDE v2
   Built around real mineral habits: quartz = prismatic/terminated,
   calcite = cleavage/rhombohedral, feldspar = blocky cleavage,
   fluorite = cubic/octahedral zoning, emerald/ruby/sapphire = dense
   transparent crystals, opal = irregular hydrated silica mass,
   hematite = metallic reflective aggregate, uranium ores = rough,
   intergrown green/yellow mineral clusters. Reference characteristics
   were cross-checked against GIA/USGS mineral photography and descriptions.
   ================================================================ */
.gem-icon[data-gem-realism="photoreal"] {
  --photo-edge: color-mix(in srgb, var(--gem-real-c) 72%, #fff 28%);
  --photo-dark: color-mix(in srgb, var(--gem-real-a) 74%, #000 26%);
  --photo-mid: color-mix(in srgb, var(--gem-real-b) 82%, #fff 18%);
  isolation:isolate;
  transform:translateZ(0);
  filter:saturate(1.02) contrast(1.08);
  box-shadow:0 10px 20px rgb(0 0 0 / .34), 0 2px 5px rgb(0 0 0 / .45);
}
.gem-icon[data-gem-realism="photoreal"]::before {
  background:
    radial-gradient(ellipse at 23% 18%, rgb(255 255 255 / .30), transparent 9%),
    radial-gradient(ellipse at 71% 68%, rgb(0 0 0 / .30), transparent 22%),
    linear-gradient(135deg, var(--gem-real-c), var(--gem-real-b) 38%, var(--gem-real-a) 76%);
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / .18),
    inset -6px -7px 10px rgb(0 0 0 / .38),
    inset 0 0 7px rgb(0 0 0 / .20);
}
.gem-icon[data-gem-realism="photoreal"]::after {
  background:
    repeating-linear-gradient(117deg, transparent 0 11px, rgb(255 255 255 / .045) 12px 13px, transparent 14px 25px),
    repeating-linear-gradient(23deg, transparent 0 17px, rgb(0 0 0 / .05) 18px 20px, transparent 21px 35px),
    radial-gradient(circle at 38% 35%, rgb(255 255 255 / .16), transparent 13%),
    radial-gradient(circle at 67% 63%, rgb(255 255 255 / .08), transparent 16%);
  mix-blend-mode:overlay;
  opacity:.92;
}
.gem-icon[data-gem-realism="photoreal"] .gem-icon__facet--a {
  background:linear-gradient(142deg, rgb(255 255 255 / .24), transparent 24% 63%, rgb(0 0 0 / .22));
  clip-path:polygon(4% 9%, 58% 2%, 95% 28%, 72% 55%, 36% 42%);
}
.gem-icon[data-gem-realism="photoreal"] .gem-icon__facet--b {
  background:linear-gradient(38deg, rgb(0 0 0 / .26), transparent 31% 58%, rgb(255 255 255 / .18));
  clip-path:polygon(5% 72%, 32% 42%, 67% 55%, 94% 22%, 92% 92%, 27% 96%);
}
.gem-icon[data-gem-realism="photoreal"] .gem-icon__shine {
  background:linear-gradient(118deg, transparent 28%, rgb(255 255 255 / .58) 35%, rgb(255 255 255 / .08) 42%, transparent 49%);
  filter:blur(.15px);
  mix-blend-mode:screen;
}

/* Natural quartz: long six-sided prism, pointed termination, fractures. */
.gem-icon[data-gem-icon="Quartz"][data-gem-realism="photoreal"]::before,
.gem-icon[data-gem-icon="Aether Quartz"][data-gem-realism="photoreal"]::before {
  background:
    linear-gradient(90deg, transparent 0 12%, rgb(255 255 255 / .14) 13% 15%, transparent 16% 36%, rgb(255 255 255 / .10) 37% 39%, transparent 40%),
    linear-gradient(145deg,#f9fbfb 0%,#c8d0d4 32%,#ffffff 46%,#9ca9ae 70%,#f4f6f5 100%);
}
.gem-icon[data-gem-icon="Quartz"][data-gem-realism="photoreal"]::after {
  background:repeating-linear-gradient(76deg,transparent 0 12px,rgb(80 90 90 / .12) 13px 14px,transparent 15px 23px),linear-gradient(110deg,transparent 35%,rgb(255 255 255 / .28) 38%,transparent 43%);
}

/* Calcite: milky translucent cleavage blocks with internal zoning. */
.gem-icon[data-gem-icon="Calcite"][data-gem-realism="photoreal"]::before {
  background:repeating-linear-gradient(8deg,transparent 0 18px,rgb(110 100 80 / .08) 19px 22px,transparent 23px 31px),linear-gradient(135deg,#fffdf4,#d9d3c5 48%,#f7f3e8 72%,#b9b1a0);
}
.gem-icon[data-gem-icon="Calcite"][data-gem-realism="photoreal"]::after { background:linear-gradient(145deg,transparent 30%,rgb(255 255 255 / .34) 31% 38%,transparent 39%),repeating-linear-gradient(35deg,transparent 0 21px,rgb(100 95 85 / .08) 22px 24px,transparent 25px 35px); }

/* Feldspar: blocky cleavage, peach/cream body and weathered matrix. */
.gem-icon[data-gem-icon="Feldspar"][data-gem-realism="photoreal"]::before { background:linear-gradient(145deg,#f6e5d9,#c8a99d 42%,#e0c6ba 58%,#9b766d); }
.gem-icon[data-gem-icon="Feldspar"][data-gem-realism="photoreal"]::after { background:repeating-linear-gradient(4deg,transparent 0 15px,rgb(100 70 60 / .12) 16px 18px,transparent 19px 29px),linear-gradient(112deg,transparent 35%,rgb(255 255 255 / .22) 38%,transparent 43%); }

/* Fluorite: translucent zoning with cubic/octahedral faces. */
.gem-icon[data-gem-icon="Fluorite"][data-gem-realism="photoreal"]::before { background:linear-gradient(130deg,#f5f4ef 0%,#c8c9c6 22%,#9d83bb 48%,#6f5b91 65%,#d9e4d6 100%); }
.gem-icon[data-gem-icon="Fluorite"][data-gem-realism="photoreal"]::after { background:linear-gradient(55deg,transparent 25%,rgb(255 255 255 / .22) 27% 34%,transparent 36%),linear-gradient(125deg,transparent 47%,rgb(72 48 110 / .18) 48% 53%,transparent 54%); }

/* Uranium / uraninite / betafite / torbernite: natural intergrown green ore. */
.gem-icon[data-gem-realism="photoreal"][data-gem-material="radioactive-ore"] { border-radius:38% 28% 42% 30%; transform:rotate(-2deg) translateZ(0); }
.gem-icon[data-gem-realism="photoreal"][data-gem-material="radioactive-ore"]::before {
  background:
    repeating-linear-gradient(78deg,transparent 0 7px,rgb(220 255 130 / .11) 8px 11px,transparent 12px 18px),
    radial-gradient(circle at 22% 28%,#cfe95b 0 7%,transparent 8%),
    radial-gradient(circle at 68% 24%,#1f7f35 0 10%,transparent 11%),
    radial-gradient(circle at 54% 71%,#6a8f1e 0 12%,transparent 13%),
    linear-gradient(135deg,#0d2d16,#2c8c35 35%,#7fa52d 57%,#15361b 83%,#c7a54b);
  box-shadow:inset 3px 4px 6px rgb(255 255 255 / .12),inset -7px -8px 12px rgb(0 0 0 / .45),0 8px 18px rgb(0 0 0 / .38);
}
.gem-icon[data-gem-realism="photoreal"][data-gem-material="radioactive-ore"]::after {
  background:repeating-linear-gradient(14deg,transparent 0 9px,rgb(255 225 100 / .12) 10px 12px,transparent 13px 19px),radial-gradient(circle at 76% 35%,rgb(255 240 120 / .22),transparent 10%),radial-gradient(circle at 28% 64%,rgb(0 0 0 / .30),transparent 16%);
  mix-blend-mode:overlay;
}

/* Faceted jewellery gems: deeper black edge contrast and restrained fire. */
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Diamond"]::before,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Natural Moissanite"]::before,
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Zircon"]::before { background:linear-gradient(145deg,#ffffff 0%,#dbeeff 28%,#ffffff 42%,#9cb8d0 61%,#ffffff 78%,#b9d2e5); box-shadow:inset 2px 2px 4px rgb(255 255 255 / .45),inset -7px -8px 11px rgb(45 75 100 / .35),0 6px 14px rgb(0 0 0 / .38); }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Ruby"]::before { background:linear-gradient(145deg,#7a0015,#c20e32 34%,#8c001c 52%,#e41d45 72%,#4c0010); }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Sapphire"]::before { background:linear-gradient(145deg,#041b55,#174bb0 34%,#092b75 54%,#4389e7 76%,#03133f); }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Emerald"]::before { background:linear-gradient(145deg,#021d13,#087744 28%,#1ba968 46%,#075c35 66%,#011a10); }

/* Opal / moonstone / labradorite: phenomenon comes from the surface, not neon bloom. */
.gem-icon[data-gem-realism="photoreal"][data-gem-material="iridescent"]::after { background:conic-gradient(from 18deg,#ff6b7d33,#ffd66b22,#5cffb033,#6be7ff33,#a56bff33,#ff6b7d33),radial-gradient(circle at 40% 30%,rgb(255 255 255 / .24),transparent 16%); mix-blend-mode:screen; }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Moonstone"]::after { background:radial-gradient(ellipse at 42% 37%,rgb(200 225 255 / .55),transparent 18%),linear-gradient(115deg,transparent 38%,rgb(255 255 255 / .18) 42%,transparent 49%); }

/* Metallic minerals: reflections become directional and hard, not glassy. */
.gem-icon[data-gem-realism="photoreal"][data-gem-material="metallic"]::before { background:linear-gradient(120deg,#17130b,#7f651d 18%,#f0c54c 34%,#5d4511 51%,#d7ae38 69%,#241a0b); filter:saturate(.82) contrast(1.24); }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Hematite"]::before { background:linear-gradient(120deg,#111316,#646b72 24%,#1a1c20 42%,#c3c8cd 57%,#292d32 74%,#8a9096); }
.gem-icon[data-gem-realism="photoreal"][data-gem-icon="Obsidian"]::before { background:linear-gradient(145deg,#010204,#151b25 39%,#020307 67%,#303a47); }

@media (prefers-reduced-motion: reduce) {
  .gem-icon[data-gem-realism="photoreal"],
  .gem-icon[data-gem-realism="photoreal"]::before,
  .gem-icon[data-gem-realism="photoreal"]::after { animation:none !important; transition:none !important; }
}

/* ---------------------------------------------------------
   Mobile: keep form controls at 16px so iOS Safari does not
   auto-zoom on focus. Scoped to small screens; desktop sizing
   is unchanged. Checkboxes/radios/ranges/colour excluded.
   --------------------------------------------------------- */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  .input,
  .select {
    font-size: 16px;
  }
}

/* =========================================================
   GUIDED TOUR (first-run spotlight) — tour.js
   ========================================================= */
.tour-root { position: fixed; inset: 0; z-index: 2147483000; }
.tour-block { position: absolute; inset: 0; }
.tour-hole {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(6, 8, 16, 0.74),
              0 0 0 2px var(--accent, #7c8cf8),
              0 0 26px 6px color-mix(in srgb, var(--accent, #7c8cf8) 55%, transparent);
  transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1);
}
.tour-pop {
  position: fixed; width: min(340px, calc(100vw - 24px));
  background: var(--surface-solid, #121720); border: 1px solid var(--border, #242c3b);
  border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.75);
  transition: left .22s ease, top .22s ease; color: var(--text, #e8ecf4);
}
.tour-pop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tour-pop__icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: 9px; background: color-mix(in srgb, var(--accent, #7c8cf8) 18%, transparent); color: var(--accent, #7c8cf8); }
.tour-pop__icon svg { width: 17px; height: 17px; }
.tour-pop__count { font: 700 .68rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted, #9aa5ba); }
.tour-pop__title { margin: 0 0 5px; font: 700 1.06rem var(--font-display, "Exo 2", system-ui, sans-serif); }
.tour-pop__text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-muted, #9aa5ba); }
.tour-pop__text kbd { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border, #242c3b);
  background: var(--surface-sunken, #0d1119); font: 600 .8em ui-monospace, monospace; color: var(--text, #e8ecf4); }
.tour-pop__text strong { color: var(--text, #e8ecf4); }
.tour-pop__dots { display: flex; gap: 6px; margin: 13px 0; }
.tour-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border, #242c3b); transition: all .2s ease; }
.tour-dot.is-active { width: 18px; background: var(--accent, #7c8cf8); }
.tour-pop__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-pop__nav { display: flex; gap: 8px; }
.tour-pop__skip { border: 0; background: transparent; color: var(--text-muted, #9aa5ba); cursor: pointer;
  font-size: .82rem; padding: 6px 4px; }
.tour-pop__skip:hover { color: var(--text, #e8ecf4); }
.tour-pop__back, .tour-pop__next { padding: 7px 15px; font-size: .85rem; }
.tour-pop__back:disabled { opacity: .4; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .tour-hole, .tour-pop { transition: none; }
}

/* =========================================================
   DAILY LOGIN STREAK modal — dailyLogin.js
   ========================================================= */
.daily-modal { max-width: 420px; text-align: center; }
.daily-modal__spark { font-size: 2rem; margin-bottom: 6px; }
.daily-modal__streak { color: var(--text-muted); margin: 4px 0 14px; }
.daily-modal__streak strong { color: var(--text); }
.daily-track { display: flex; gap: 7px; justify-content: center; margin: 4px 0 16px; }
.daily-day { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-muted);
  font: 700 .82rem var(--font-mono, ui-monospace, monospace); }
.daily-day.is-done { color: var(--positive, #22c55e); border-color: color-mix(in srgb, var(--positive, #22c55e) 45%, transparent); }
.daily-day.is-today { color: #fff; background: var(--accent, #7c8cf8); border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #7c8cf8) 30%, transparent); }
.daily-modal__reward { margin: 4px 0 16px; }
.daily-modal__reward strong { color: var(--accent, #7c8cf8); }
.daily-modal__actions { justify-content: center; }
.referral-promo__deals { text-align: left; margin: 0 auto 14px; padding-left: 20px; max-width: 34ch; display: grid; gap: 8px; }
.referral-promo__deals li { line-height: 1.5; color: var(--text-muted); }
.referral-promo__deals strong { color: var(--accent, #7c8cf8); }
.daily-modal__status { min-height: 1em; margin: 8px 0 0; font-size: .85rem; color: var(--text-muted); }


/* =========================================================
   RESPONSIVE COMFORT + PAINT PERFORMANCE

   This intentionally sits after the legacy visual layers. It
   establishes a few predictable responsive rules without changing
   any page's feature-specific layouts or gameplay behaviour.
   ========================================================= */

html {
  min-width: 320px;
  scroll-padding-top: calc(var(--nav-height) + var(--space-3));

  /* Mobile polish that applies to every page: stop iOS/Android from
     auto-inflating body text on rotation, and remove the grey tap-flash
     that fires on every touch of a link or button. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* `manipulation` drops the ~300ms double-tap-to-zoom delay on controls while
   still allowing the page itself to pan and pinch-zoom. Scoped to interactive
   elements so scroll containers keep their default touch behaviour. */
a,
button,
.btn,
.nav__link,
.tabbar__link,
.menu__item,
[role="button"],
label,
summary,
input[type="checkbox"],
input[type="radio"] {
  touch-action: manipulation;
}

.app-main {
  max-width: 1180px;
  padding-inline: clamp(12px, 3vw, 32px);
  padding-top: clamp(20px, 4vw, 48px);
}

.app-main--narrow {
  max-width: 840px;
}

/* Keep below-the-fold dashboards from spending paint time until a player
   reaches them. The intrinsic size prevents a scroll-bar jump. */
@supports (content-visibility: auto) {
  .app-main > .card:not(.stage),
  .app-main > .panel,
  .app-main > .grid,
  .app-main > .stack {
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
  }
}

@media (hover: none) {
  .card:hover,
  .panel:hover,
  .gem-card:hover,
  .index-card:hover,
  .showcase-gem:hover,
  .btn:hover:not(:disabled),
  .nav__link:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  body {
    background-attachment: scroll;
  }

  /* Blur is one of the most expensive effects on mobile GPUs. The solid
     surface still keeps the same visual hierarchy while scrolling stays
     much smoother. */
  .card,
  .panel,
  .modal,
  .dropdown,
  .popover,
  .topbar,
  .tabbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The tab-bar clearance now lives on <body> (see the 780px block above),
     so `.app-main` only needs its tightened mobile top padding here. */
  .app-main {
    padding-top: 16px;
  }

  .page-head {
    gap: 10px;
    margin-bottom: 16px;
    padding-block: 8px;
  }

  .grid--cards,
  .grid--wide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .app-main {
    padding-inline: 12px;
  }

  .card {
    padding: 16px;
    border-radius: 16px;
  }

  /* Three compact tiles scan faster than a two-plus-one wrap, and keep
     the roll page from feeling longer than it needs to. */
  .stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .stat {
    min-width: 0;
    padding: 10px;
    border-radius: 14px;
  }

  .stat__label {
    overflow: hidden;
    font-size: 0.62rem;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stat__value {
    font-size: 1rem;
  }

  .automation__head,
  .automation__row--select {
    align-items: stretch;
  }

  .automation__row--select {
    flex-direction: column;
  }

  .field-with-prefix,
  .automation__row--select .select {
    width: 100%;
    min-width: 0;
  }
}

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

/* Earned cosmetic identity, separate from role titles. */
.cosmetic { --cosmetic-color: #b7becb; display: inline-flex; align-items: center; gap: .45rem; color: var(--cosmetic-color); border: 1px solid color-mix(in srgb,var(--cosmetic-color) 45%,transparent); background: color-mix(in srgb,var(--cosmetic-color) 9%,var(--surface-sunken)); border-radius: 999px; padding: .3rem .65rem; font-size: .8rem; font-weight: 650; overflow-wrap: anywhere; }
.cosmetic--bronze { --cosmetic-color: #cd955e; }
.cosmetic--gold, .cosmetic--sunrise { --cosmetic-color: #efc66f; }
.cosmetic--diamond { --cosmetic-color: #82d7ee; }
.cosmetic--prismatic, .cosmetic--mutation { --cosmetic-color: #d7a0f7; }
.cosmetic--archive { --cosmetic-color: #b1cfbb; }
.cosmetic--prismatic { background-image: linear-gradient(110deg,#edb96d16,#94deed26,#d493f726); animation: cosmetic-shimmer 5s ease-in-out infinite; }

/* Permanent account treatment awarded to the singleton Impossible crafter. */
.stage__display.is-impossible-world-first {
  position:relative; isolation:isolate; overflow:hidden;
  width:100%; max-width:100%; min-width:0;
  min-height:clamp(420px,52vw,590px); padding:clamp(54px,7vw,84px) clamp(24px,8vw,100px) 38px;
  border:1px solid #c779ffb8; border-radius:18px;
  background:
    radial-gradient(ellipse at 50% 31%,#f6ca7150 0,transparent 7%),
    radial-gradient(ellipse at 50% 34%,#9b4cff45 0,transparent 22%),
    radial-gradient(circle at 14% 22%,#6427a844 0,transparent 30%),
    radial-gradient(circle at 84% 76%,#efb94a26 0,transparent 28%),
    repeating-radial-gradient(circle at 48% 44%,transparent 0 38px,#bc7aff0a 39px 40px,transparent 41px 74px),
    linear-gradient(145deg,#020108,#0c0418 47%,#05010b);
  box-shadow:inset 0 0 100px #51208e55,inset 0 0 28px #f2c86b1a,0 0 38px #9d4fff38;
}
.stage__display.is-impossible-world-first::before {
  content:""; position:absolute; inset:0; width:auto; height:auto; z-index:0; pointer-events:none; padding:2px;
  transform:none; border-radius:inherit; opacity:1;
  background:conic-gradient(from var(--impossible-angle,0deg),#6e2bd8,#fff0a6,#a845ff,#f6c65b,#6e2bd8);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:none; animation:impossible-perimeter 7s linear infinite;
}
.stage__display.is-impossible-world-first::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.86;
  background:url("/src/assets/impossible-shards.svg") center/100% 100% no-repeat,
    repeating-linear-gradient(116deg,transparent 0 53px,#d8b8ff0d 54px 55px,transparent 56px 91px);
  filter:drop-shadow(0 0 8px #9f50ff88); mix-blend-mode:screen;
}
.stage__display.is-impossible-world-first .gem-reveal,.stage__display.is-impossible-world-first .roll-action-status,.stage__display.is-impossible-world-first .batch-results { position:relative; z-index:2; }
.stage__display.is-impossible-world-first .gem-reveal { width:min(650px,82%); }
.stage__display.is-impossible-world-first .gem-reveal__art { position:relative; filter:drop-shadow(-4px 0 14px #8f4cffbb) drop-shadow(4px 0 16px #f0c6699c); }
.stage__display.is-impossible-world-first .gem-reveal__art::after { content:""; position:absolute; inset:13% -18%; border:1px solid #efc86f9c; border-radius:50%; transform:rotate(-12deg); box-shadow:0 0 16px #e6b74d6b,inset 0 0 12px #a754ff52; pointer-events:none; }
.stage__display.is-impossible-world-first .gem-reveal__name { font-family:Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:.015em; color:#fff7e8; text-shadow:-2px 0 #5ce4ff78,2px 0 #ff52b87a,0 0 24px #c06cff88; }
.stage__display.is-impossible-world-first .badge--tier { border-color:#edbd5e9c; color:#f2c970; background:#0a0612d9; box-shadow:0 0 16px #e7b9573b; }
.stage__display.is-impossible-world-first .gem-reveal__chance { color:#cfc1e7; letter-spacing:.05em; }
.stage__display.is-impossible-world-first .gem-reveal__facts { gap:12px; }
.stage__display.is-impossible-world-first .gem-fact { position:relative; overflow:hidden; border-color:#d8a4ff70; background:linear-gradient(145deg,#b86cff18,#e9c46a12),#06020dce; box-shadow:inset 0 0 22px #a661ff17,0 0 13px #bd6bff1a; }
.stage__display.is-impossible-world-first .gem-fact::after { content:""; position:absolute; inset:0; border-top:1px solid #f3ca70b0; border-bottom:1px solid #9b4cfb9c; pointer-events:none; }
.stage__display.is-impossible-world-first .gem-fact__label { color:#ddcaee; letter-spacing:.15em; }
.stage__display.is-impossible-world-first .roll-action-status { width:min(430px,86%); margin-inline:auto; border:1px solid #b96eff70; border-radius:999px; background:#080310d9; box-shadow:inset 0 0 18px #8f45e42e,0 0 14px #d8a3ff20; }
.impossible-roll-brand { position:absolute; z-index:3; top:30px; right:34px; display:grid; justify-items:center; gap:2px; color:#f4d17e; font:700 .66rem var(--font-display); letter-spacing:.2em; text-align:center; text-shadow:0 0 13px #e4ad41a8; }
.impossible-roll-brand__crown { font:400 2rem Georgia,serif; line-height:.8; }
.impossible-roll-brand strong { padding-top:7px; border-top:1px solid #eac56870; font-size:.58rem; }
.impossible-roll-quote { position:absolute; z-index:2; color:#ccb7eb; font:.64rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; opacity:.76; }
.impossible-roll-quote--left { top:31%; left:25px; }
.impossible-roll-quote--right { right:25px; bottom:27%; text-align:right; }
.batch-result--impossible { position:relative; isolation:isolate; overflow:hidden; border-color:#c67cff9c !important; background:radial-gradient(circle at 12% 20%,#a04cff38,transparent 35%),linear-gradient(145deg,#10051f,#030108) !important; box-shadow:inset 0 0 26px #9a55ff27,0 0 13px #ba65ff20; }
.batch-result--impossible::before { content:""; position:absolute; inset:0; z-index:0; opacity:.78; background:url("/src/assets/impossible-shards.svg") center/100% 100% no-repeat; pointer-events:none; }
.batch-result--impossible::after { content:"♔  WORLD FIRST"; position:absolute; z-index:2; top:7px; right:9px; color:#f0ca70; font:700 .53rem var(--font-display); letter-spacing:.1em; text-shadow:0 0 9px #e8b94d80; }
.batch-result--impossible > * { position:relative; z-index:1; }
@keyframes impossible-perimeter { to { --impossible-angle:360deg; filter:hue-rotate(18deg); } }
@media (prefers-reduced-motion:reduce) { .stage__display.is-impossible-world-first::before { animation:none; } }
@media (max-width:760px) {
  .stage__display.is-impossible-world-first { min-height:390px; padding:58px 18px 28px; }
  .stage__display.is-impossible-world-first::after { opacity:.56; }
  .stage__display.is-impossible-world-first .gem-reveal { width:100%; }
  .impossible-roll-brand { top:18px; right:20px; transform:scale(.82); transform-origin:top right; }
  .impossible-roll-quote { display:none; }
}
@media (max-width:520px) { .stage__display.is-impossible-world-first { min-height:350px; box-shadow:inset 0 0 44px #7e3de738; } .stage__display.is-impossible-world-first::after { opacity:.4; } }
@media (max-width:520px) {
  .stage__display.is-impossible-world-first { width:min(100%,calc(100vw - 24px)); padding-inline:10px; }
  .stage__display.is-impossible-world-first * { min-width:0; }
  .stage__display.is-impossible-world-first .gem-reveal { width:100%; max-width:100%; overflow:hidden; }
  .stage__display.is-impossible-world-first .gem-reveal__facts { width:min(100%,calc(100vw - 48px)); max-width:calc(100vw - 48px); grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .stage__display.is-impossible-world-first .gem-fact { min-width:0; padding-inline:4px; }
  .stage__display.is-impossible-world-first .gem-fact__value { font-size:.76rem; }
  .stage__display.is-impossible-world-first .roll-action-status { width:calc(100% - 12px); max-width:100%; }
  .impossible-roll-brand { top:13px; right:10px; transform:scale(.62); }
}
.cosmetic__icon { flex: none; font-size: 1.1em; }
.cosmetic small { display: block; margin-top: .4rem; color: var(--text-muted); font-size: .75rem; font-weight: 400; }
@keyframes cosmetic-shimmer { 50% { box-shadow: 0 0 15px #d493f733; } }
@media (prefers-reduced-motion: reduce) { .cosmetic--prismatic { animation: none; } }

/* Final cascade guard: later visual-polish layers must not shrink mobile shell
   controls below the shared touch target. */
@media (max-width: 780px) {
  .topbar .brand,
  .topbar .brand__mark,
  .topbar .nav__link,
  .topbar .btn,
  .topbar .account-btn,
  .topbar .wallet,
  .topbar [role="button"] {
    min-width: 44px;
    min-height: 44px;
  }
}


/* =========================================================
   UI REFRESH — SHELL, ROLL LAYOUT AND SMALL SCREENS

   The last layer in the cascade, so it deliberately settles
   rules the earlier polish passes left fighting each other.
   ========================================================= */

/* ---------- Top bar: measured, never scrolling ---------- */

.topbar__inner {
  max-width: 1600px;
}

/* shell.js drops the wordmark, then the Explore/More labels, then the
   link labels when the labelled links do not fit (.topbar--no-wordmark,
   .topbar--tight, .topbar--compact — each step keeps the earlier ones).
   A scrollbar is never shown; in the extreme case (a long custom bar on
   a small laptop) the links still scroll by trackpad or touch. */
.nav {
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

@media (min-width: 781px) {
  /* The links take only the room they need so Explore sits right after
     them; the spacer pushes the tools to the far edge. The nav still
     shrinks when space runs out, which is what shell.js measures. */
  .nav {
    flex: 0 1 auto;
  }

  .topbar__spacer {
    flex: 1 1 0;
  }

  .topbar:not(.topbar--compact) .nav > .nav__link {
    width: auto;
    padding-inline: 10px;
  }

  .topbar:not(.topbar--compact) .nav > .nav__link span {
    display: inline;
  }

  .topbar:not(.topbar--no-wordmark) .brand span:not(.brand__mark) {
    display: inline;
  }

  .topbar--no-wordmark .brand span:not(.brand__mark),
  .topbar--tight .topbar-explore__button > span,
  .topbar--tight .topbar-explore__button > svg:last-child,
  .topbar--tight .topbar-more__button > span,
  .topbar--tight .topbar-more__button > svg:last-child,
  .topbar--compact .nav > .nav__link span {
    display: none;
  }

  .topbar--tight .topbar-explore__button,
  .topbar--tight .topbar-more__button,
  .topbar--compact .nav > .nav__link {
    width: 40px;
    justify-content: center;
    padding-inline: 0;
  }
}


/* Explore keeps its label whenever the bar is roomy enough; otherwise it
   is a plain icon button like the compacted links. */
@media (min-width: 981px) {
  .topbar:not(.topbar--tight) .topbar-explore__button {
    width: auto;
    padding-inline: 10px;
  }

  .topbar:not(.topbar--tight) .topbar-explore__button > span {
    display: inline;
  }
}

.topbar-more__menu .menu__item kbd {
  margin-left: auto;
}


/* ---------- Mobile top bar ---------- */

@media (max-width: 780px) {
  /* Brand on the left, tools on the right, instead of everything
     bunched against the left edge. */
  .topbar__spacer {
    flex: 1 1 auto;
  }

  .topbar__tools {
    gap: 6px;
  }
}


/* ---------- Mobile tab bar ---------- */

@media (max-width: 780px) {
  /* Blur is switched off on phones for scrolling performance, so the
     bar needs a solid surface or page text shows through the labels. */
  .tabbar {
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
    background: var(--surface-solid);
    box-shadow: 0 -12px 32px -22px rgb(0 0 0 / 0.55);
  }

  .tabbar__link {
    gap: 4px;
    border-radius: 12px;
    transition:
      color 0.15s ease,
      background-color 0.15s ease;
  }

  .tabbar__link[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 750;
  }
}


/* ---------- Floating controls ---------- */

/* The player console button. Styled here rather than in cli.css, which
   only loads once a console opens. It stacks above the chat button on
   the right, leaving the bottom-left free for the global-cash counter. */
.player-cli-fab {
  position: fixed;
  right: calc(var(--space-4) + 7px);
  bottom: calc(var(--space-4) + 66px);
  z-index: 59;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;

  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-solid);
  box-shadow: var(--shadow-md);

  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;

  opacity: 0.8;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    color 0.15s ease;
}

.player-cli-fab:hover {
  opacity: 1;
  color: var(--text);
  transform: translateY(-1px);
}

/* Phones already carry the tab bar and chat button along the bottom
   edge; the console opens from More instead. */
@media (max-width: 780px) {
  .player-cli-fab {
    display: none;
  }
}


/* ---------- Sign-in banner (guest sign-ins disabled) ---------- */

.signin-banner {
  flex-wrap: wrap;
}

.signin-banner__action {
  flex: none;
  min-height: 34px;
}

/* Phones clip announcement text to one line; this one is the call to
   action, so it may wrap instead. */
.signin-banner .announce__body {
  overflow: visible;
  white-space: normal;
}


/* ---------- Roll page: side column on wide screens ---------- */

.rare-rolls__group {
  border-radius: var(--radius-md);
}

.rare-rolls__toggle {
  display: none;
  flex: none;
}

/* Below the side-column layout the feed sits above the roll button,
   so it shows only the newest find per list until expanded — keeping
   the roll button on the first screen. */
@media (max-width: 1179px) {
  .rare-rolls:not(.is-expanded) .rare-roll:nth-child(n + 2) {
    display: none;
  }

  .rare-rolls:not(.is-expanded) .rare-roll:first-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .rare-rolls__toggle {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .rare-rolls {
    padding: 16px;
  }

  .rare-rolls__header {
    align-items: center;
    margin-bottom: var(--space-3);
  }

  /* The two lists sit side by side as swipeable cards; the next one
     peeks in so the gesture is discoverable. */
  .rare-rolls:not(.is-expanded) .rare-rolls__columns {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .rare-rolls:not(.is-expanded) .rare-rolls__columns::-webkit-scrollbar {
    display: none;
  }

  .rare-rolls__group {
    scroll-snap-align: start;
  }
}

@media (min-width: 1180px) {
  .app-main.app-main--roll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    column-gap: var(--space-5);
    align-items: start;
    max-width: 1280px;
  }

  .app-main--roll > * {
    grid-column: 1;
    min-width: 0;
  }

  /* The live feed becomes a sticky side column next to the roll stage.
     It is first in the markup, so it still reads first. */
  .app-main--roll > .rare-rolls {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
    grid-column: 2;
    grid-row: 1 / span 12;
    max-height: calc(100vh - var(--nav-height) - 2 * var(--space-4));
    margin-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .app-main--roll > .rare-rolls .rare-rolls__header {
    align-items: flex-start;
  }

  .app-main--roll > .rare-rolls .rare-rolls__header p {
    display: none;
  }

  .app-main--roll > .rare-rolls .rare-rolls__columns {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   FACETED SVG GEM CUTS
   gemIconHtml() draws every non-photographic gem as an inline
   SVG cut (src/ui/gemCut.js). Facets carry a shade class; the
   palette below turns the gem's own colours into five light
   levels lit from the top-left. The legacy CSS body/facet/core
   layers are hidden for these icons but the halo (::before)
   and mutation aura/ring still render around the cut.
   ========================================================= */

.gem-icon--cut {
  --cut-table: color-mix(in srgb, var(--gem-color-a) 62%, white 38%);
  --cut-hi: color-mix(in srgb, var(--gem-color-a) 78%, white 22%);
  --cut-lt: color-mix(in srgb, var(--gem-color-a) 92%, white 8%);
  --cut-md: color-mix(in srgb, var(--gem-color-a) 50%, var(--gem-color-b) 50%);
  --cut-dk: color-mix(in srgb, var(--gem-color-b) 72%, black 28%);
  --cut-dp: color-mix(in srgb, var(--gem-color-b) 50%, black 50%);
  --cut-edge: color-mix(in srgb, var(--gem-color-a) 35%, white 65%);
  --cut-fire-opacity: 0;
}

/* From "Gemstone" upward the cut switches to the real-world material
   palette, and each step adds edge definition and dispersion. */
.gem-icon--cut[data-gem-realism="gemstone"],
.gem-icon--cut[data-gem-realism="realistic"],
.gem-icon--cut[data-gem-realism="studio"],
.gem-icon--cut[data-gem-realism="photoreal"] {
  --cut-table: color-mix(in srgb, var(--gem-real-b) 55%, var(--gem-real-c) 45%);
  --cut-hi: color-mix(in srgb, var(--gem-real-b) 70%, var(--gem-real-c) 30%);
  --cut-lt: var(--gem-real-b);
  --cut-md: color-mix(in srgb, var(--gem-real-b) 45%, var(--gem-real-a) 55%);
  --cut-dk: var(--gem-real-a);
  --cut-dp: color-mix(in srgb, var(--gem-real-a) 55%, black 45%);
  --cut-edge: color-mix(in srgb, var(--gem-real-c) 60%, white 40%);
}

.gem-icon--cut[data-gem-realism="studio"],
.gem-icon--cut[data-gem-realism="photoreal"] {
  --cut-fire-opacity: calc(var(--gem-dispersion) * 0.55);
}

.gem-icon--cut::after,
.gem-icon--cut .gem-icon__facet,
.gem-icon--cut .gem-icon__core,
.gem-icon--cut .gem-icon__shine {
  display: none;
}

.gem-icon__cut {
  position: absolute;
  inset: 3%;
  z-index: 2;
  width: 94%;
  height: 94%;
  overflow: visible;
  pointer-events: none;
}

.gem-icon__cut .cut-facet {
  stroke: var(--cut-edge);
  stroke-width: 0.6;
  stroke-opacity: 0.32;
  stroke-linejoin: round;
}

.gem-icon__cut .c-tb { fill: var(--cut-table); }
.gem-icon__cut .c-hi { fill: var(--cut-hi); }
.gem-icon__cut .c-lt { fill: var(--cut-lt); }
.gem-icon__cut .c-md { fill: var(--cut-md); }
.gem-icon__cut .c-dk { fill: var(--cut-dk); }
.gem-icon__cut .c-dp { fill: var(--cut-dp); }

.gem-icon__cut .cut-rim {
  fill: none;
  stroke: var(--cut-edge);
  stroke-width: 1.4;
  stroke-opacity: 0.7;
  stroke-linejoin: round;
}

.gem-icon__cut .cut-glint {
  fill: #fff;
  opacity: 0.62;
}

.gem-icon__cut .cut-spark {
  fill: #fff;
  opacity: 0.9;
  transform-box: fill-box;
  transform-origin: center;
  animation: gemCutTwinkle 3.2s ease-in-out infinite;
}

.gem-icon__cut .cut-fire polygon {
  opacity: var(--cut-fire-opacity);
  mix-blend-mode: screen;
}

.gem-icon__cut .cut-fire polygon:nth-child(5n + 1) { fill: #ff5d8f; }
.gem-icon__cut .cut-fire polygon:nth-child(5n + 2) { fill: #5ee7ff; }
.gem-icon__cut .cut-fire polygon:nth-child(5n + 3) { fill: #8dff9c; }
.gem-icon__cut .cut-fire polygon:nth-child(5n + 4) { fill: #ffd66b; }
.gem-icon__cut .cut-fire polygon:nth-child(5n + 5) { fill: #b98cff; }

/* Iridescent stones (opal, moonstone…) always show play-of-colour. */
.gem-icon--cut[data-gem-material="iridescent"] {
  --cut-fire-opacity: 0.75;
}

/* Higher realism: crisper facet edges and a stronger rim. */
.gem-icon--cut[data-gem-realism="faceted"] .cut-facet,
.gem-icon--cut[data-gem-realism="gemstone"] .cut-facet {
  stroke-opacity: 0.45;
}

.gem-icon--cut[data-gem-realism="realistic"] .cut-facet,
.gem-icon--cut[data-gem-realism="studio"] .cut-facet,
.gem-icon--cut[data-gem-realism="photoreal"] .cut-facet {
  stroke-width: 0.5;
  stroke-opacity: 0.6;
}

.gem-icon--cut[data-gem-realism="studio"] .cut-glint,
.gem-icon--cut[data-gem-realism="photoreal"] .cut-glint {
  opacity: 0.8;
}

/* Opaque minerals (hematite, obsidian, jasper, agate) don't sparkle
   through their facets; metals get a hard mirror glint instead. */
.gem-icon--cut[data-gem-material="opaque-mineral"] .cut-facet {
  stroke-opacity: 0.18;
}

.gem-icon--cut[data-gem-material="opaque-mineral"] .cut-spark {
  display: none;
}

.gem-icon--cut[data-gem-material="metallic"] .cut-glint {
  opacity: 0.9;
}

/* The tiniest icons (showcase pins, chat) drop the fine detail. */
.gem-icon--mini .gem-icon__cut .cut-facet {
  stroke-width: 0;
}

.gem-icon--mini .gem-icon__cut .cut-spark {
  display: none;
}

/* ---------- Mutations on SVG cuts ---------- */

.gem-icon--cut.gem-icon--mutation-polished {
  --cut-edge: #ffffff;
}

.gem-icon--cut.gem-icon--mutation-polished .cut-glint {
  opacity: 0.9;
}

.gem-icon--cut.gem-icon--mutation-gilded .cut-rim {
  stroke: #ffd45a;
  stroke-width: 3;
  stroke-opacity: 1;
}

.gem-icon--cut.gem-icon--mutation-gilded .cut-facet {
  stroke: #ffd45a;
  stroke-width: 1.1;
  stroke-opacity: 0.85;
}

.gem-icon--cut.gem-icon--mutation-prismatic .gem-icon__cut {
  animation: gemCutPrismatic 4s linear infinite;
}

.gem-icon--cut.gem-icon--mutation-prismatic .cut-fire polygon {
  opacity: 0.8;
}

.gem-icon--cut.gem-icon--mutation-celestial .gem-icon__cut {
  filter:
    brightness(1.18)
    drop-shadow(0 0 6px #b9e8ff);
}

.gem-icon--cut.gem-icon--mutation-corrupted {
  --cut-dk: color-mix(in srgb, var(--gem-color-b) 45%, #3b0a6b 55%);
  --cut-dp: #1c0633;
  --cut-edge: #ef65ff;
}

.gem-icon--cut.gem-icon--mutation-corrupted .gem-icon__cut {
  animation: corruptedJitter 1.7s steps(2, end) infinite;
}

@keyframes gemCutTwinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.55) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}

@keyframes gemCutPrismatic {
  to {
    filter: hue-rotate(360deg);
  }
}


/* =========================================================
   MOBILE & FRIENDLINESS POLISH
   ========================================================= */

/* Session insights: short numeric tiles read fine two-up on a phone;
   one-per-row turned the panel into a very long scroll. */
@media (max-width: 460px) {
  .session-insights__stats,
  .session-insights__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .session-insights__stats > div,
  .session-insights__highlights > div {
    padding: 11px 12px;
  }
}

/* "1 in" prefix on rarity inputs must never wrap under the number. */
.field-with-prefix > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.field-with-prefix input {
  flex: 1 1 auto;
}

/* Scrollable tab strips: soft edge shadows appear only while more
   tabs are hidden off that side (pure CSS "scroll shadows"). */
.segmented {
  background:
    linear-gradient(to right, var(--surface-sunken) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--surface-sunken) 30%, transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) right center / 12px 100% no-repeat scroll,
    var(--surface-sunken);
  scroll-snap-type: x proximity;
  scroll-padding-inline: 24px;
  -webkit-overflow-scrolling: touch;
}

.segmented__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}

/* Signed-out empty state shared by Inventory, Crafting, Boosts and the
   Gem Index (src/ui/signInState.js). */
.empty--signin {
  grid-column: 1 / -1;
  gap: var(--space-2);
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background:
    radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 62%),
    var(--surface);
}

.empty--signin svg {
  width: 34px;
  height: 34px;
  color: var(--accent);
}

.empty--signin p {
  max-width: 34ch;
  margin: 0;
}

.empty--signin .btn {
  margin-top: var(--space-2);
}

/* Comfortable touch targets for small icon buttons on touch screens. */
@media (pointer: coarse) {
  .btn--sm {
    min-height: 40px;
  }

  .btn--icon {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Session insights header: title on its own row, then the note and
   Clear button share the row beneath instead of squeezing the title. */
@media (max-width: 560px) {
  .session-insights .automation__head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .session-insights .automation__head > div:first-child {
    flex: 1 1 100%;
  }

  .session-insights__actions {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

/* Month Two anniversary intro. Server state decides whether it appears. */
.anniversary-intro{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(91,75,156,.34),rgba(5,7,14,.97) 62%);color:#f7f4ff;text-align:center;isolation:isolate}
.anniversary-intro__content{position:relative;z-index:2;width:min(760px,calc(100vw - 40px));padding:32px}
.anniversary-intro__line,.anniversary-intro__counter{margin:0;opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .28s ease;font-size:clamp(1.35rem,4vw,2.45rem);letter-spacing:.03em}
.anniversary-intro__line.is-visible,.anniversary-intro__counter.is-visible{opacity:1;transform:none}
.anniversary-intro__line strong{display:block;font-size:clamp(2rem,7vw,4.9rem);letter-spacing:.09em;text-shadow:0 0 40px rgba(175,155,255,.6)}
.anniversary-intro__line span{display:block;margin-top:14px;font-size:.55em;letter-spacing:.18em;text-transform:uppercase;color:#c8baff}
.anniversary-intro__counter{font-size:clamp(2.15rem,8vw,6.2rem);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.035em;text-shadow:0 0 48px rgba(143,207,255,.45)}
.anniversary-intro__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;opacity:0;transform:translateY(12px);transition:.35s ease}
.anniversary-intro__actions.is-visible{opacity:1;transform:none}
.anniversary-intro__hint{position:absolute;top:calc(100% + 28px);left:0;right:0;color:#a9a2bd;letter-spacing:.08em;text-transform:uppercase}
.anniversary-intro__halves i{position:absolute;top:18%;bottom:18%;width:min(30vw,340px);border:1px solid rgba(183,168,255,.18);background:linear-gradient(135deg,rgba(117,91,214,.08),rgba(91,207,255,.04));opacity:.45;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity 1s;clip-path:polygon(50% 0,100% 26%,82% 100%,12% 78%,0 24%)}
.anniversary-intro__halves i:first-child{left:6%;transform:translateX(18%) rotate(-8deg)}
.anniversary-intro__halves i:last-child{right:6%;transform:translateX(-18%) rotate(8deg) scaleX(-1)}
.anniversary-intro--split .anniversary-intro__halves i:first-child{transform:translateX(-8%) rotate(-14deg);opacity:.9}
.anniversary-intro--split .anniversary-intro__halves i:last-child{transform:translateX(8%) rotate(14deg) scaleX(-1);opacity:.9}
.anniversary-intro-open{overflow:hidden}
@media(max-width:600px){.anniversary-intro__content{padding:20px}.anniversary-intro__halves i{top:12%;bottom:12%;width:48vw}.anniversary-intro__hint{top:calc(100% + 18px)}}
@media(prefers-reduced-motion:reduce){.anniversary-intro *{transition-duration:.01ms!important;animation-duration:.01ms!important}}