/* ============================================================
   Silver Thumb Games — Effects: radii, borders, shadows, grain
   ------------------------------------------------------------
   Machined and precise. Restrained radii (the GAMES bar is a
   near-square slab). Deep cool shadows on the dark dusk; the
   surge & filament get a contained glow, never a soft bloom.
   ============================================================ */

:root {
  /* ---- Corner radii — tight, machined ---- */
  --radius-none: 0;
  --radius-slab: 2px;    /* GAMES-bar slabs, chips on red          */
  --radius-sm:   4px;    /* inputs, small controls                */
  --radius-md:   6px;    /* buttons, tags                         */
  --radius-lg:   10px;   /* cards, panels                         */
  --radius-xl:   16px;   /* hero cards, modals                    */
  --radius-2xl:  24px;
  --radius-full: 999px;  /* avatars, pills, switches              */

  /* ---- Border widths ---- */
  --border-hair: 1px;    /* @kind other */
  --border-thick: 2px;   /* @kind other */
  --border-surge: 2px;   /* the red rule / surge underline · @kind other */

  /* ---- Elevation — deep, cool, low-spread (dark dusk) ---- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.60);

  /* Inset hairline that reads as brushed-metal lip on raised surfaces */
  --ring-inset-top: inset 0 1px 0 rgba(159, 176, 180, 0.08);

  /* ---- Surge & filament glows — contained, action only ---- */
  --glow-surge:    0 0 0 1px rgba(255, 59, 84, 0.50), 0 6px 22px rgba(220, 31, 60, 0.34);
  --glow-filament: 0 0 0 1px rgba(255, 138, 74, 0.40), 0 4px 18px rgba(255, 138, 74, 0.22);
  --glow-arc:      0 0 0 1px rgba(22, 198, 190, 0.45), 0 4px 18px rgba(22, 198, 190, 0.24);
  --glow-focus:    0 0 0 3px rgba(255, 59, 84, 0.32);

  /* ---- Filmic grain — "grain on everything" ----
     Procedural fractal noise. Overlay it on heroes/cards at low
     opacity with mix-blend-mode: overlay or soft-light. */
  --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");  /* @kind other */
  --grain-opacity: 0.05;  /* @kind other */

  /* ---- Dark-current atmosphere wash (one filament source, cool depth).
     A directional radial used behind heroes & covers. ---- */
  --dusk-depth:    radial-gradient(120% 90% at 78% 12%, #1B2227 0%, #131A1E 38%, #0A0D0F 78%);  /* @kind other */
  --filament-rim:  radial-gradient(60% 60% at 100% 0%, rgba(255,138,74,0.18) 0%, rgba(255,138,74,0) 60%);  /* @kind other */
}

/* Reusable grain overlay — drop <div class="st-grain"></div> in a positioned parent */
.st-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-image);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  z-index: 1;
}