/* ============================================================================
   Showhub — Mercury Glass · canonical design tokens
   Source of truth: design-system.html (Claude Design handoff, Concept 2).
   "All graphics must follow this style." Self-host the fonts for the air-gapped
   production build (Space Grotesk + Space Mono are both OFL).
   ============================================================================ */
:root{
  /* base + accent */
  --bg:#0B0C0F;                /* graphite base */
  --accent:#6E8BFF;            /* the single electric-blue accent */
  --accent-hi:#AEBEFF;
  --chrome:#EAF1FF;            /* specular highlight / lyric fill / chrome buttons */

  /* text */
  --ink:#EBF0FB;               /* primary */
  --mut:#9AA6BD;               /* secondary */
  --dim:#6B7488;               /* tertiary / mono labels */

  /* state */
  --ok:#7BE0A0; --warn:#FFC988; --bad:#FF8FA0; --kar:#FF8FB0;

  /* borders */
  --brd:rgba(184,200,232,.16);
  --brd2:rgba(184,200,232,.26);

  /* module gels — always paired with an icon + label (never colour-alone) */
  --m-bgm:#7FB0FF; --m-kar:#FF8FB0; --m-vid:#B79CFF;
  --m-game:#8FE0B0; --m-bingo:#FFC988; --m-ads:#CFD6E0;

  /* type + radius */
  --font-display:'Space Grotesk', system-ui, sans-serif;  /* display + UI */
  --font-mono:'Space Mono', monospace;                    /* data / IDs / labels / clock */
  --radius:18px;

  font-synthesis:none;
}

/* Ambient page background (graphite + faint blue bloom). */
.pb-ambient{
  background:
    radial-gradient(900px 700px at 12% -5%, rgba(58,66,82,.5), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(85,102,255,.14), transparent 55%),
    linear-gradient(168deg, #0E1015, #070809 60%, #050608);
}

/* THE GLASS RECIPE — real backdrop-filter frost with a specular rim.
   Place glass over the drifting orbs / ambient so colour blooms through. */
.glass{
  position:relative; isolation:isolate; border-radius:var(--radius); overflow:hidden;
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  background:linear-gradient(160deg, rgba(46,51,62,.5), rgba(16,18,24,.44));
  border:1px solid var(--brd);
  box-shadow:inset 0 1px 0 rgba(214,226,255,.18), 0 18px 40px -18px rgba(0,0,0,.6);
}
.glass::before{           /* specular sheen */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(150deg, rgba(220,232,255,.14), transparent 40%);
}
.glass > *{ position:relative; z-index:1; }

/* Chrome (metallic) primary button. */
.btn-chrome{
  height:48px; padding:0 22px; border-radius:14px; border:none; cursor:pointer;
  font-family:var(--font-display); font-size:15px; font-weight:600; color:#0B0C0F;
  background:linear-gradient(160deg,#E8EEFF,#9AA8C8);
  box-shadow:0 10px 28px -10px rgba(174,190,255,.55), inset 0 1px 1px #fff;
}