/* ==========================================================================
   Superposition VR - site skin
   Loads after shared/css/tokens.css and shared/css/base.css. Retints the
   shared tokens to the game's ward-green palette and adds the pieces that
   only this site has: the CRT wordmark and the ward hero.
   ========================================================================== */

:root {
  /* surfaces: the near-black of an unlit hospital corridor */
  --ink:        #05090a;
  --ink-2:      #0a1113;
  --panel:      #0e1719;
  --panel-2:    #132022;
  --line:       #1e2f31;

  --text:       #dfe9e7;
  --text-dim:   #8fa5a3;
  --text-faint: #5e7472;

  /* accents: emergency-lit mint, with amber for notices */
  --accent:      #5fe6c0;
  --accent-deep: #2bb795;
  --accent-warm: #f2a73b;
  --accent-ink:  #04110d;

  /* the in-game title face */
  --display: "Bitcount Prop Single", "Courier New", monospace;

  /* the studio brand is soft-cornered; this game is not */
  --radius: 4px;
}

/* --- store header --------------------------------------------------------
   The layout lives in shared/css/base.css. Only the things specific to this
   game are here: the in-game title's CRT glow, and the ward behind the page. */

.store {
  position: relative;
  isolation: isolate;
}
.store::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../assets/img/hero-ward.jpg") center 35% / cover no-repeat;
  opacity: .22;
}
.store::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5,9,10,.55) 0%, rgba(5,9,10,.82) 55%, var(--ink) 100%);
}

/* the title keeps the emergency-lit glow of the in-game logo */
.store__head h1 {
  color: #fff;
  text-shadow:
    0 0 12px rgba(140, 255, 224, .45),
    0 0 38px rgba(60, 190, 155, .28);
}

.prose .lede + .lede { margin-top: 1.1rem; }

/* --- closing call to action ----------------------------------------------- */

.finale__bg { background-image: url("../assets/img/wide-ward.jpg"); }