/* slither.css - the Slither game (snake, slither.io-style continuous
   steering). Reuses tokens from styles.css, game-shell.css's shell/bar/
   pause chrome, and the .course-primary / .puzzle-shuffle-btn /
   .puzzle-hint classes already defined for Sliders.

   BUG FOUND & FIXED: this comment used to reference a class-glob pattern
   immediately followed by a closing-comment marker with no space between
   them, which ended this comment early and corrupted the parse of
   everything after it -- silently dropping the .slither-stage rule below
   (display:flex). That was the actual root cause of Slither's play area
   rendering far too small, not the auto-landscape hack removed at the
   same time. Lesson: never let comment-marker characters land adjacent
   to each other inside prose in a CSS comment. */

.slither-stage {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  gap: 8px;
}

.slither-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* Real mobile: the shell's pause/mute/settings/close buttons float as an
   overlay directly on top of this row (game-shell.css deliberately
   doesn't reserve space for them at the shell level -- see its own
   comment). A static stats row can't dodge them the way a spawned game
   object can, so it reserves its own horizontal clearance instead --
   real bug report: even with the Coins stat hidden below, Level/Restart
   still sat directly under the pause/close circles without this. Now
   pulls both numbers from game-shell.css's shared --gs-bar-left-clear/
   --gs-bar-right-clear custom properties (see that file's own comment)
   instead of hardcoding them here -- this value used to be a literal
   90px, tuned for a 2-button left cluster (pause + mute), and silently
   went stale the moment a 3rd button (the settings gear) was added to
   that cluster. */
/* Per explicit instruction ("tighten up header to one line") -- real
   bug found via measurement: even after removing the Restart button
   (below), the default 56px-per-stat floor still added up to more than
   the narrow strip actually has room for at 390px (3 x 56 + 2 x 16 gap
   = 200px against ~188px available), so it kept wrapping to two rows
   anyway. Same tightening pattern this project applied to Numbers'/
   Colors' own headers earlier this session. */
@media (max-width: 480px) {
  .slither-stats {
    padding: 0 var(--gs-bar-right-clear) 0 var(--gs-bar-left-clear);
    gap: 10px;
  }
  .slither-stats .slither-stat {
    min-width: 40px;
  }
}

.slither-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

/* Needed because .slither-stat's own `display: flex` above has the same
   specificity as the browser default `[hidden] { display: none }` rule
   and, being an author style loaded after it, would otherwise win the
   tie -- the Coins stat (see slither.html) stayed visible with just the
   `hidden` attribute alone until this was added. */
.slither-stat[hidden] {
  display: none;
}

.slither-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.slither-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.slither-arena-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.slither-account-chip {
  flex: 0 0 auto;
  align-self: center;
  font-size: 12px;
}

.slither-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Graphics refresh (Nov 2026), amplified Nov 7: the playfield used
     to be a flat dark void. A dot-grid plus a vignette makes the dark
     background feel intentional without competing with the snake or the
     food. The first version (dots 0.13 alpha, vignette 0.38) was too
     faint to see -- the whole-canvas average differed from the plain
     base by only ~1 luminance unit. Amplified until measurably
     visible on average: dots 0.45 alpha / 2px / 20px spacing and a
     0.65 vignette. Measured at 390x844: background regions away from
     the snake/food average 9-13 luminance units below the plain base
     (top band -9.3, corners -13.2), and dots stand ~38 units above
     the gaps (p95-p5). Wave variation (Nov 7): the dots are no longer
     a CSS layer -- they are drawn on the canvas by slither.js's
     renderDotPattern(), so each dot's alpha varies by position in
     diagonal sine waves (biased darker overall, mean alpha ~0.36 vs
     the old uniform 0.45), and the vignette dimming is applied to
     them in JS by the same falloff. Only the vignette and the surface
     colour remain as CSS layers here. The canvas is cleared
     transparent every frame, so this CSS background shows through
     behind the game. */
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.65) 100%),
    var(--surface);
  background-size: auto, auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none;
  cursor: crosshair;
}

.slither-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 16, .72);
  border-radius: var(--radius);
}

.slither-overlay[hidden] {
  display: none;
}

/* The start overlay is lighter than the game-over overlay so the
   attract-mode scene (a coiled snake + food dots, drawn on the canvas
   while idle -- see slither.js's drawAttract()) shows through behind
   the title instead of a black void. */
.slither-overlay--start {
  background: rgba(10, 13, 16, 0.55);
}

.slither-overlay-card {
  text-align: center;
  padding: 24px;
}

.slither-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}

.slither-overlay-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.slither-level-up {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(52, 211, 153, .5);
  color: #06170f;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 5;
}

.slither-level-up[hidden] {
  display: none;
}

.slither-level-up.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}