/* ==========================================================================
   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, tinted cold */
  --ink:        #05080b;
  --ink-2:      #0a1014;
  --panel:      #0e151a;
  --panel-2:    #131d24;
  --line:       #1e2b35;

  --text:       #dfe7ec;
  --text-dim:   #8fa1ad;
  --text-faint: #5e707d;

  /* accents: clinical cyan, with amber for notices.
     The cyan is the studio's own --nebula-cyan, which is also what the "VR" in
     the key art is filled with. It replaced a mint green that traced the softer
     glow around the SUPER POSITION lettering instead - close enough to the
     capsule's cyan (163 deg vs 177 deg) to read as a mismatch rather than a
     pairing. Follow the hard, saturated colour in the art, not the glow. */
  --accent:      #45e5ff;
  --accent-deep: #17a8cc;
  --accent-warm: #f2a73b;
  --accent-ink:  #04121a;

  /* 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,8,11,.55) 0%, rgba(5,8,11,.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(150, 238, 255, .45),
    0 0 38px rgba(50, 172, 210, .28);
}

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

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

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

/* --- Descend --------------------------------------------------------------
   The game IS this section's content, so with no JS the section goes rather
   than leaving a heading over an empty box; the page then reads specs ->
   finale as before. The `js` class lands before first paint, same mechanism
   as .reveal. */

#play { display: none; }
.js #play { display: block; }

.ward { margin-top: 2rem; }

.ward__hud {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ward__hud .btn { padding: .6rem 1.3rem; }

.ward__depth {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ward__keys,
.ward__best {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ward__best { margin-left: auto; color: var(--accent-warm); }

.ward__stage {
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 400;         /* the grid is fixed at 640x400 */
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #05080b;
  touch-action: none;
}
.ward__stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ward__pad { display: none; }

@media (pointer: coarse) {
  .ward__pad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
    max-width: 640px;
    margin-top: .7rem;
  }
  .ward__key {
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-family: var(--mono);
    font-size: .85rem;
    cursor: pointer;
    touch-action: none;
    user-select: none;
  }
  .ward__key:active { background: var(--panel-2); border-color: var(--accent); }
  .ward__key--fire { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
}

.ward__msg {
  margin: .9rem 0 0;
  min-height: 1.4em;
  color: var(--text-dim);
  font-size: .93rem;
}

@media (max-width: 560px) { .ward__best { margin-left: 0; } }