/* ============================================================
   NonogramGlyph — arcade skin.
   Loaded after nonogramglyph.css, scoped to body.gv-neon.

   Every colour resolves through a --nx-* token from gv-neon.css, which is
   itself redeclared under :root[data-theme="light"]. The board therefore
   follows the player's theme instead of forcing a dark cabinet.
   ============================================================ */

:root body.gv-neon{
  --ng-cell-bg: rgba(16,26,48,.85);
  --ng-cell-br: rgba(110,190,255,.18);
  --ng-fill: var(--nx-accent);
  --ng-card-bg: linear-gradient(180deg, var(--nx-glass-hi), var(--nx-glass));
  --ng-card-br: var(--nx-line);
  --ng-muted: var(--nx-dim);

  --ngx-cell:       rgba(16,26,48,.82);
  --ngx-cell-br:    rgba(110,190,255,.16);
  --ngx-cell-hover: rgba(62,232,255,.45);
  --ngx-shell:      linear-gradient(180deg, rgba(14,24,44,.7), rgba(8,14,28,.8));
  --ngx-clue-bg:    rgba(255,255,255,.04);
  --ngx-clue-br:    rgba(110,190,255,.12);
  --ngx-mark-bg:    rgba(10,16,32,.9);
}

:root[data-theme="light"] body.gv-neon{
  --ng-cell-bg: rgba(255,255,255,.92);
  --ng-cell-br: rgba(18,38,72,.16);

  --ngx-cell:       rgba(255,255,255,.94);
  --ngx-cell-br:    rgba(18,38,72,.14);
  --ngx-cell-hover: color-mix(in srgb, var(--nx-accent) 55%, transparent);
  --ngx-shell:      linear-gradient(180deg, rgba(255,255,255,.86), rgba(240,245,252,.9));
  --ngx-clue-bg:    rgba(255,255,255,.72);
  --ngx-clue-br:    rgba(18,38,72,.12);
  --ngx-mark-bg:    rgba(248,244,246,.95);
}

/* ---------- board ---------- */
:root body.gv-neon .ngBoardShell{
  background: var(--ngx-shell);
  border: 1px solid var(--nx-line);
  border-radius: 18px;
  box-shadow:
    inset 0 0 60px color-mix(in srgb, var(--nx-accent) calc(9% * var(--nx-glow)), transparent),
    0 18px 46px var(--nx-drop);
  padding: 10px;
}

:root body.gv-neon .ngCell{
  background: var(--ngx-cell);
  border: 1px solid var(--ngx-cell-br);
  border-radius: 7px;
  transition:
    transform .16s cubic-bezier(.34,1.56,.64,1),
    background .16s ease,
    box-shadow .22s ease,
    border-color .2s ease;
}
:root body.gv-neon .ngCell:hover{
  border-color: var(--ngx-cell-hover);
  box-shadow: 0 0 14px color-mix(in srgb, var(--nx-accent) calc(30% * var(--nx-glow)), transparent);
}

/* A filled square is a lit tile — the core of the whole look. */
:root body.gv-neon .ngCell.filled{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nx-accent) 88%, var(--nx-fill-tint)),
    var(--nx-accent));
  border-color: color-mix(in srgb, var(--nx-accent) 70%, transparent);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--nx-accent) calc(70% * var(--nx-glow)), transparent),
    0 0 34px color-mix(in srgb, var(--nx-accent) calc(38% * var(--nx-glow)), transparent),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* An X-mark is deliberately quiet — it is bookkeeping, not progress. */
:root body.gv-neon .ngCell.mark{
  background: var(--ngx-mark-bg);
  border-color: color-mix(in srgb, var(--nx-red) 34%, transparent);
  color: var(--nx-red);
  /* rim, not a centre glow — an X mark sits where a blur would peak */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-red) 22%, transparent);
}

/* ---------- clues ---------- */
:root body.gv-neon .ngClue,
:root body.gv-neon .ngRowClue,
:root body.gv-neon .ngColClue{
  color: var(--nx-ink);
  background: var(--ngx-clue-bg);
  border: 1px solid var(--ngx-clue-br);
  border-radius: 8px;
  transition: color .2s ease, background .25s ease, box-shadow .3s ease, border-color .25s ease;
}

/* Satisfied line — the single most useful signal on the board.
   --nx-on-accent is the ink that belongs on a saturated fill (#04121a over
   the dark build's bright lime, #fff over the light build's deep green). The
   clue numerals are child <div>s, so they are named explicitly: inheriting
   would be enough, but only if nothing else paints generic children, and
   this makes the requirement impossible to break by accident. */
:root body.gv-neon .sat,
:root body.gv-neon .sat .ngClueNum{
  color: var(--nx-on-accent) !important;
}
:root body.gv-neon .sat{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nx-lime) 88%, var(--nx-fill-tint)),
    var(--nx-lime)) !important;
  border-color: color-mix(in srgb, var(--nx-lime) 60%, transparent) !important;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--nx-lime) calc(60% * var(--nx-glow)), transparent),
    0 0 36px color-mix(in srgb, var(--nx-lime) calc(30% * var(--nx-glow)), transparent);
  font-weight: 900;
}
:root body.gv-neon .bad,
:root body.gv-neon .bad .ngClueNum{
  color: var(--nx-on-accent) !important;
}
:root body.gv-neon .bad{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nx-red) 88%, var(--nx-fill-tint)),
    var(--nx-red)) !important;
  border-color: color-mix(in srgb, var(--nx-red) 60%, transparent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--nx-red) calc(40% * var(--nx-glow)), transparent);
  font-weight: 900;
}

/* The moment a line closes out. */
:root body.gv-neon .nxLineHit{ animation: nxClueHit .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes nxClueHit{
  0%  { transform: scale(1); }
  28% { transform: scale(1.32); filter: brightness(1.7); }
  100%{ transform: scale(1); }
}

/* Cells riding a completed line. */
:root body.gv-neon .ngCell.nxZap{ animation: nxCellZap .46s cubic-bezier(.34,1.56,.64,1); }
@keyframes nxCellZap{
  0%  { transform: scale(1); }
  30% { transform: scale(1.28); filter: brightness(2); }
  100%{ transform: scale(1); }
}

/* Cell just filled. */
:root body.gv-neon .ngCell.nxPop{ animation: nxCellPop .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes nxCellPop{
  0%  { transform: scale(.55); filter: brightness(2.2); }
  60% { transform: scale(1.16); }
  100%{ transform: scale(1); }
}

/* ---------- HUD ---------- */
:root body.gv-neon .ngStatVal{
  color: var(--nx-hero);
  font-weight: 900;
  text-shadow: 0 0 14px color-mix(in srgb, var(--nx-accent) calc(100% * var(--nx-glow)), transparent);
}
:root body.gv-neon .ngStatLabel{
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--nx-dim);
}
:root body.gv-neon .ngStatsPill{
  background: color-mix(in srgb, var(--nx-ink) 5%, transparent);
  border: 1px solid var(--nx-line);
  color: var(--nx-dim);
  border-radius: 999px;
}

:root body.gv-neon .ngBtn,
:root body.gv-neon .segBtn{
  background: color-mix(in srgb, var(--nx-ink) 6%, transparent);
  border: 1px solid var(--nx-line);
  color: var(--nx-ink);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
:root body.gv-neon .ngBtn:hover,
:root body.gv-neon .segBtn:hover{
  border-color: color-mix(in srgb, var(--nx-accent) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--nx-accent) calc(26% * var(--nx-glow)), transparent);
}
:root body.gv-neon .ngBtn:active,
:root body.gv-neon .segBtn:active{ transform: scale(.95); }
:root body.gv-neon .segBtn.on{
  background: linear-gradient(180deg, var(--nx-accent), color-mix(in srgb, var(--nx-accent) 62%, #000));
  border-color: transparent;
  color: var(--nx-on-accent);
  font-weight: 900;
  box-shadow: 0 0 22px color-mix(in srgb, var(--nx-accent) calc(45% * var(--nx-glow)), transparent);
}

@media (prefers-reduced-motion: reduce){
  :root body.gv-neon .nxLineHit,
  :root body.gv-neon .ngCell.nxZap,
  :root body.gv-neon .ngCell.nxPop{ animation: none !important; }
}