/* ── Logic Gates (docs/49_GAMES.md) ──────────────────────────────────
   Loaded from src/pages/games/logic-gates.astro. Tokens only; the dark
   block re-points the same names. */
.glogic {
  --lg-bg: var(--ice-palette-warm-50);
  --lg-ink: var(--ice-palette-ink-900);
  --lg-wire: var(--ice-palette-slate-600);
  --lg-on: var(--ice-palette-forest-700);
  --lg-body: var(--ice-color-surface);
  --lg-pick: var(--ice-color-action);
  --lg-ok: var(--ice-palette-forest-700);
  --lg-bad: var(--ice-palette-crimson-600);
}
[data-theme='dark'] .glogic {
  --lg-bg: var(--ice-palette-graphite-950);
  --lg-ink: var(--ice-palette-graphite-100);
  --lg-wire: var(--ice-palette-graphite-300);
  --lg-on: var(--ice-palette-forest-300);
  --lg-body: var(--ice-palette-graphite-850);
  --lg-ok: var(--ice-palette-forest-300);
  --lg-bad: var(--ice-palette-crimson-300);
}
.glogic__brief { margin: 0 0 .75rem; }
.glogic__palette { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.glogic__next[hidden] { display: none; }
.glogic__layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .glogic__layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); align-items: start; } }
.glogic__scroll { overflow-x: auto; border: 1px solid var(--ice-color-border); border-radius: 8px; }
.glogic__board { display: block; width: 100%; min-width: 620px; height: auto; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.glogic__bg { fill: var(--lg-bg); }
.glogic__wire { fill: none; stroke: var(--lg-wire); stroke-width: 3; }
.glogic__wire.is-on { stroke: var(--lg-on); stroke-width: 4; }
.glogic__stub { stroke: var(--lg-ink); stroke-width: 2.5; }
.glogic__body { fill: var(--lg-body); stroke: var(--lg-ink); stroke-width: 2.5; }
.glogic__stroke { fill: none; stroke: var(--lg-ink); stroke-width: 2.5; }
.glogic__label { fill: var(--lg-ink); font: 700 10px/1 var(--ice-font-primary, sans-serif); pointer-events: none; }
.glogic__gate { cursor: grab; touch-action: none; outline: none; }
.glogic__gate.is-picked .glogic__body, .glogic__gate:focus-visible .glogic__body { stroke: var(--lg-pick); stroke-width: 4; }
.glogic__port { cursor: pointer; outline: none; }
.glogic__hit { fill: transparent; }
.glogic__dot { fill: var(--lg-bg); stroke: var(--lg-ink); stroke-width: 2.5; }
.glogic__port.is-wired .glogic__dot { fill: var(--lg-ink); }
.glogic__port.is-pending .glogic__dot, .glogic__port:focus-visible .glogic__dot { fill: var(--lg-pick); stroke: var(--lg-pick); r: 8px; }
.glogic__port:hover .glogic__dot { stroke: var(--lg-pick); }
.glogic__switch, .glogic__lamp { font: 700 14px/1 var(--ice-font-primary, sans-serif); }
.glogic__switch { cursor: pointer; outline: none; }
.glogic__switch rect, .glogic__lamp rect { fill: var(--lg-body); stroke: var(--lg-ink); stroke-width: 2; }
.glogic__switch text, .glogic__lamp text { fill: var(--lg-ink); }
.glogic__switch.is-on rect, .glogic__lamp.is-on rect { fill: var(--lg-on); stroke: var(--lg-on); }
.glogic__switch.is-on text, .glogic__lamp.is-on text { fill: var(--lg-bg); }
.glogic__switch:focus-visible rect { stroke: var(--lg-pick); stroke-width: 4; }
.glogic__tablewrap { overflow-x: auto; }
.glogic__table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .9rem; }
.glogic__table th, .glogic__table td { padding: .2rem .4rem; text-align: center; border-bottom: 1px solid var(--ice-color-border); }
.glogic__table .glogic__tcol { border-left: 1px solid var(--ice-color-border); }
.glogic__table tr.is-ok td:last-child { color: var(--lg-ok); font-weight: 700; }
.glogic__table tr.is-bad td:last-child { color: var(--lg-bad); font-weight: 700; }
.glogic__table tr.is-test { background: var(--ice-color-surface-muted); }
.glogic__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.glogic__caption { font-size: .85rem; margin: .25rem 0 .5rem; }