/* ============================================================
   gv-arcade.css — the generic half of the arcade look.

   gv-neon.css handles the theme, the backdrop and the shared site chrome.
   This file styles the parts every game has but names differently: the board,
   its cells, and the HUD readouts. gv-arcade.js tags those with gvArcBoard /
   gvArcCell / gvArcVal at runtime, so there is one set of rules here instead
   of eighteen sets of per-game prefixes.

   Deliberately light-touch. Each game's own stylesheet still decides layout,
   size and state colours; this adds the cabinet around them — lit surround,
   press response, a readout that glows. Anything a game styles more
   specifically wins, which is the intent: this is a floor, not a ceiling.
   ============================================================ */

/* ---------- board surround ---------- */
:root body.gv-arcade .gvArcBoard{
  border-radius: 16px;
  box-shadow:
    inset 0 0 60px color-mix(in srgb, var(--nx-accent) calc(9% * var(--nx-glow)), transparent),
    0 16px 40px var(--nx-drop);
}

/* ---------- cells ---------- */
/* Only transition and press response. Background and border are left to the
   game, because a cell's colour usually carries state (filled, locked, wrong)
   and overriding it here would erase information. */
:root body.gv-arcade .gvArcCell{
  transition:
    transform .16s cubic-bezier(.34,1.56,.64,1),
    box-shadow .22s ease,
    border-color .2s ease,
    background .16s ease;
}
:root body.gv-arcade .gvArcCell:hover:not([disabled]){
  border-color: color-mix(in srgb, var(--nx-accent) 45%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--nx-accent) calc(28% * var(--nx-glow)), transparent);
}
:root body.gv-arcade .gvArcCell:active:not([disabled]){ transform: scale(.94); }

/* ---------- HUD readouts ---------- */
:root body.gv-arcade .gvArcVal{
  color: var(--nx-hero);
  font-weight: 900;
  text-shadow: 0 0 14px color-mix(in srgb, var(--nx-accent) calc(90% * var(--nx-glow)), transparent);
  transition: color .25s ease, text-shadow .25s ease;
}

/* ---------- sound toggle in the header nav ---------- */
/* gv-arcade.js mounts it as an .iconbtn so it inherits the nav's sizing; the
   neon .nxSound rules then supply the lit state. */
:root body.gv-arcade nav .nxSound{
  position: static;
  width: auto; height: auto;
}

@media (prefers-reduced-motion: reduce){
  :root body.gv-arcade .gvArcCell{ transition: none; }
}

/* ============================================================
   Cabinet dressing.

   The retinted tokens give every board the arcade palette; these rules give
   it the arcade *presence* — a lit screen rather than a grid on a page. All
   of it is generic, because gv-arcade.js tags the parts.
   ============================================================ */

/* The board reads as a screen: an inner bloom and a seat in the page.
   Strictly non-layout: no padding, no border, no background.

   Padding here is not cosmetic. Several of these boards are a bare cell grid
   sitting inside a shell alongside separate clue strips — NonoGlyph's row and
   column clues are laid out against the grid's edges — so 8px of padding on
   the grid slid every cell out of line with the clue that describes it. The
   inner rim below is drawn by a pseudo-element for the same reason: it tints
   without occupying space. Background is left to the game too, since several
   boards draw cages, gridlines or an SVG layer into theirs. */
:root body.gv-arcade .gvArcBoard{
  position: relative;
}
:root body.gv-arcade .gvArcBoard::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--nx-fill-tint) 18%, transparent),
    inset 0 0 0 1px var(--nx-line);
}

/* The board arrives rather than appearing. One pass at boot only — the games
   rebuild their grid constantly and re-running this on every move would make
   the page throb. */
:root body.gv-arcade .gvArcBoard.gvArcEnter{
  animation: gvArcBoardIn .52s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes gvArcBoardIn{
  0%  { opacity: 0; transform: translateY(10px) scale(.985); }
  100%{ opacity: 1; transform: none; }
}

/* The intro strip above the board becomes the cabinet's marquee. */
:root body.gv-arcade header p.sub{
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--nx-line);
  background: linear-gradient(180deg, var(--nx-glass-hi), var(--nx-glass));
  color: var(--nx-ink);
  box-shadow: 0 10px 26px var(--nx-drop);
}

@media (prefers-reduced-motion: reduce){
  :root body.gv-arcade .gvArcBoard.gvArcEnter{ animation: none; }
}