/* ============================================================
   alchemyglyph — arcade retint. GENERATED by tools/gen-skins.py; edit that,
   or add hand-written rules to the bottom of this file below the marker.

   The game declares its surfaces as --al-<role> tokens. This maps the
   roles the arcade layer knows about onto --nx-* values, once per theme, so
   the board picks up the lit palette without any of the game's own layout,
   sizing or logic changing. Roles that are not in the vocabulary keep the
   game's value: the skin follows the player's theme now, so an unmapped
   token is still correct for the page it is on.
   ============================================================ */

:root body.gv-neon{
  --ax-board-bg: linear-gradient(180deg, rgba(14,24,44,.72), rgba(8,14,28,.80));
  --ax-board-br: var(--nx-line);
  --ax-tile-bg: rgba(16,26,48,.82);
  --ax-tile-br: rgba(120,200,255,.30);
  --ax-tile-br2: color-mix(in srgb, var(--nx-accent) 45%, transparent);
  --ax-ash-bg: color-mix(in srgb, var(--nx-ink) 6%, transparent);
  --ax-ash-br: var(--nx-line);
  --ax-silver-bg: color-mix(in srgb, var(--nx-blue) 18%, transparent);
  --ax-silver-br: color-mix(in srgb, var(--nx-blue) 58%, transparent);
  --ax-glow: color-mix(in srgb, var(--nx-accent) 42%, transparent);
  --ax-glow2: color-mix(in srgb, var(--nx-violet) 38%, transparent);
  --ax-press: color-mix(in srgb, var(--nx-accent) 18%, transparent);
  --ax-kb-bg: rgba(16,26,48,.82);
  --ax-kb-br: rgba(120,200,255,.30);
  --ax-re-bg: color-mix(in srgb, var(--nx-violet) 20%, transparent);
  --ax-re-br: color-mix(in srgb, var(--nx-violet) 60%, transparent);
  --ax-win-bg: color-mix(in srgb, var(--nx-lime) 18%, transparent);
  --ax-win-br: color-mix(in srgb, var(--nx-lime) 55%, transparent);
}

:root[data-theme="light"] body.gv-neon{
  --ax-board-bg: linear-gradient(180deg, rgba(255,255,255,.86), rgba(240,245,252,.90));
  --ax-board-br: var(--nx-line);
  --ax-tile-bg: rgba(255,255,255,.94);
  --ax-tile-br: rgba(18,38,72,.20);
  --ax-tile-br2: color-mix(in srgb, var(--nx-accent) 45%, transparent);
  --ax-ash-bg: color-mix(in srgb, var(--nx-ink) 6%, transparent);
  --ax-ash-br: var(--nx-line);
  --ax-silver-bg: color-mix(in srgb, var(--nx-blue) 16%, transparent);
  --ax-silver-br: color-mix(in srgb, var(--nx-blue) 58%, transparent);
  --ax-glow: color-mix(in srgb, var(--nx-accent) 34%, transparent);
  --ax-glow2: color-mix(in srgb, var(--nx-violet) 30%, transparent);
  --ax-press: color-mix(in srgb, var(--nx-accent) 16%, transparent);
  --ax-kb-bg: rgba(255,255,255,.94);
  --ax-kb-br: rgba(18,38,72,.20);
  --ax-re-bg: color-mix(in srgb, var(--nx-violet) 18%, transparent);
  --ax-re-br: color-mix(in srgb, var(--nx-violet) 60%, transparent);
  --ax-win-bg: color-mix(in srgb, var(--nx-lime) 16%, transparent);
  --ax-win-br: color-mix(in srgb, var(--nx-lime) 55%, transparent);
}

/* ---- hand-written below this line (not regenerated) ---- */


/* Guess-feedback game: the three outcome colours are the whole read, so they
   are the loudest thing on the board and everything else gets out of the way. */
:root body.gv-neon .axTile{
  font-weight: 900;
  color: var(--nx-ink);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .2s ease;
}
:root body.gv-neon .axKbBtn{
  border: 1px solid var(--nx-line);
  color: var(--nx-ink);
  font-weight: 800;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
:root body.gv-neon .axKbBtn:active{ transform: scale(.93); }
:root body.gv-neon .axKbBtn.kb-gold{
  box-shadow: 0 0 14px color-mix(in srgb, var(--nx-gold) calc(40% * var(--nx-glow)), transparent);
}
:root body.gv-neon .axKbBtn.kb-silver{
  box-shadow: 0 0 14px color-mix(in srgb, var(--nx-blue) calc(35% * var(--nx-glow)), transparent);
}
:root body.gv-neon .axBoard.win .axTile{
  box-shadow: 0 0 20px color-mix(in srgb, var(--nx-lime) calc(50% * var(--nx-glow)), transparent);
}