/* ============================================================
   SudokuGlyph — "the rose window".

   The grid is a leaded window in a stone wall. Empty cells are unlit glass;
   every digit you set lights its pane; the window brightens as the board
   fills; finishing a row, column or box sends light along it; solving the
   puzzle floods the whole window with sun. Givens are the panes that were
   already in the lead when you arrived, etched rather than set.

   Scope: body.sg-window and the game card .sgCard. The site chrome, ad
   slot and SEO cards below are untouched. Theme contract is the same as the
   vault: every colour is a --wn-* token, redeclared for
   :root[data-theme="light"], and selectors are prefixed with :root so they
   outrank the site's own light rules without !important — except where
   sudokuglyph.css already uses !important (selected/conflict/peer cell
   backgrounds), which have to be matched.
   ============================================================ */

:root body.sg-window{
  --wn-display: 'Cinzel', 'Outfit', Georgia, serif;

  /* stone */
  --wn-stone-0: #0b0d14;
  --wn-stone-1: #141827;
  --wn-stone-2: #1c2235;
  --wn-stone-3: #262d45;
  --wn-edge-hi: rgba(255,255,255,.08);
  --wn-edge-lo: rgba(0,0,0,.55);

  /* lead (the lines between panes) */
  --wn-lead:     #05060b;
  --wn-lead-hi:  rgba(255,255,255,.07);

  /* glass — unlit and lit, three tints laid out like a rose window */
  --wn-glass-a:     #171d3a;   /* indigo, unlit */
  --wn-glass-a-lit: #2b3a8f;
  --wn-glass-b:     #12303a;   /* teal */
  --wn-glass-b-lit: #1c6a78;
  --wn-glass-c:     #2b1838;   /* plum, the centre light */
  --wn-glass-c-lit: #6a2f86;

  /* ink on glass */
  --wn-given:  #f6f1e3;
  --wn-user:   #ffd86b;
  --wn-note:   rgba(246,241,227,.72);
  --wn-ink:    var(--text, #f6f1e3);
  --wn-dim:    #a8a394;

  /* gold: selection, keys, the win */
  --wn-gold:    #e9b949;
  --wn-gold-hi: #ffe6a0;
  --wn-gold-lo: #8a5c0a;
  --wn-gold-ink:#1a1200;
  /* Filled gold (buttons, active pill): light at every stop for dark ink. */
  --wn-fill-hi: #ffe6a0;
  --wn-fill:    #e9b949;
  --wn-fill-lo: #c08f2e;
  --wn-bad-ink: #ffffff;
  --wn-bad-pane:#7a2d44;
  --wn-line:    rgba(233,185,73,.24);
  --wn-line-soft: rgba(233,185,73,.12);

  --wn-sun:     rgba(255,214,107,.55);
  --wn-sun-soft:rgba(255,214,107,.16);
  --wn-peer:    rgba(255,214,107,.10);
  --wn-same:    #ffd86b;
  --wn-bad:     #ff5a6e;
  --wn-bad-glow:rgba(255,90,110,.35);
  --wn-good:    #7dffb0;

  --wn-drop: rgba(0,0,0,.55);
  --wn-glow-scale: 1;
  --wn-ray-op: .18;
}

:root[data-theme="light"] body.sg-window{
  --wn-stone-0: #e8e3d8;
  --wn-stone-1: #f5f1e8;
  --wn-stone-2: #fbf8f1;
  --wn-stone-3: #ffffff;
  --wn-edge-hi: rgba(255,255,255,.9);
  --wn-edge-lo: rgba(40,30,10,.14);

  --wn-lead:    #2b2f3a;
  --wn-lead-hi: rgba(255,255,255,.35);

  --wn-glass-a:     #eef0f8;
  --wn-glass-a-lit: #d6dcf7;
  --wn-glass-b:     #ebf4f3;
  --wn-glass-b-lit: #cdeae6;
  --wn-glass-c:     #f3ecf5;
  --wn-glass-c-lit: #e6d2ec;

  --wn-given:  #1d2130;
  --wn-user:   #7a5008;
  --wn-note:   rgba(29,33,48,.72);
  --wn-ink:    var(--text, #1d2130);
  --wn-dim:    #5d5747;

  /* Gold as ink on pale stone has to sit at 4.5:1, so both text golds drop
     to the burnished tone; the fills keep the sun. */
  --wn-gold:    #8a5c0a;
  --wn-gold-hi: #8a5c0a;
  --wn-gold-lo: #6b4606;
  --wn-gold-ink:#1a1200;
  --wn-fill-hi: #f6d178;
  --wn-fill:    #d9a441;
  --wn-fill-lo: #b8801a;
  --wn-bad-ink: #6b0f1a;
  --wn-bad-pane:#f0c4cc;
  --wn-line:    rgba(120,84,14,.30);
  --wn-line-soft: rgba(120,84,14,.14);

  --wn-sun:     rgba(233,185,73,.55);
  --wn-sun-soft:rgba(233,185,73,.22);
  --wn-peer:    rgba(233,185,73,.16);
  --wn-same:    #b8801a;
  --wn-bad:     #c62033;
  --wn-bad-glow:rgba(198,32,51,.25);
  --wn-good:    #1a9d54;

  --wn-drop: rgba(40,30,10,.18);
  --wn-glow-scale: .5;
  --wn-ray-op: .22;
}

/* ------------------------------------------------------------
   The wall
   ------------------------------------------------------------ */
:root body.sg-window .card.sgCard{
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid var(--wn-line);
  border-radius: 22px;
  padding: 18px 18px 16px;
  color: var(--wn-ink);
  background:
    radial-gradient(90% 55% at 50% 0%, var(--wn-sun-soft), transparent 60%),
    linear-gradient(180deg, var(--wn-stone-2), var(--wn-stone-1) 45%, var(--wn-stone-0));
  box-shadow:
    inset 0 1px 0 var(--wn-edge-hi),
    inset 0 0 0 1px rgba(0,0,0,.2),
    0 24px 60px var(--wn-drop);
}
:root body.sg-window .card.sgCard::before{
  content: "";
  position: absolute; inset: 7px;
  border-radius: 16px;
  border: 1px solid var(--wn-line-soft);
  pointer-events: none;
}
:root body.sg-window .card.sgCard > *{ position: relative; }

/* ------------------------------------------------------------
   Top row — mode, date, plaques
   ------------------------------------------------------------ */
:root body.sg-window .sgTopRow{ margin-bottom: 8px; align-items: center; }
:root body.sg-window .modeSeg{ gap: 6px; }
:root body.sg-window .modeSeg .seg{
  font-family: var(--wn-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 7px 13px 6px;
  border: 1px solid var(--wn-line);
  background: var(--wn-stone-0);
  color: var(--wn-dim);
  box-shadow: inset 0 1px 0 var(--wn-edge-hi);
  transition: background .15s, color .15s, transform .12s;
}
:root body.sg-window .modeSeg .seg:hover{ color: var(--wn-ink); border-color: var(--wn-gold); }
:root body.sg-window .modeSeg .seg.on{
  background: linear-gradient(180deg, var(--wn-fill-hi), var(--wn-fill) 55%, var(--wn-fill-lo));
  color: var(--wn-gold-ink);
  border-color: var(--wn-gold-lo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 16px var(--wn-sun-soft);
}
:root body.sg-window .sgMeta .ogDate{
  font-family: var(--wn-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--wn-gold);
}
:root body.sg-window .sgMeta .sgRule{ color: var(--wn-dim); font-size: 12.5px; }

:root body.sg-window .sgStats{ gap: 8px; }
:root body.sg-window .sgStat{
  min-width: 84px;
  padding: 8px 12px 7px;
  border-radius: 12px;
  border: 1px solid var(--wn-line-soft);
  background: linear-gradient(180deg, var(--wn-stone-3), var(--wn-stone-1));
  box-shadow: inset 0 1px 0 var(--wn-edge-hi), inset 0 -2px 0 rgba(0,0,0,.25), 0 6px 14px var(--wn-drop);
  text-align: center;
}
:root body.sg-window .sgStat .muted{
  font-family: var(--wn-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wn-dim);
}
:root body.sg-window .sgStat .mono{
  font-family: var(--wn-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--wn-gold-hi);
  text-shadow: 0 0 calc(12px * var(--wn-glow-scale)) var(--wn-sun-soft);
}
:root[data-theme="light"] body.sg-window .sgStat .mono{ color: var(--wn-gold-lo); text-shadow: none; }

/* Illumination meter (mounted by window.js) */
:root body.sg-window .wnLight{
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 8px;
}
:root body.sg-window .wnLightLabel{
  font-family: var(--wn-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wn-dim);
  white-space: nowrap;
}
:root body.sg-window .wnLightBar{
  flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: var(--wn-stone-0);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 var(--wn-edge-hi);
  overflow: hidden;
}
:root body.sg-window .wnLightFill{
  height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wn-fill-lo), var(--wn-fill) 60%, var(--wn-fill-hi));
  box-shadow: 0 0 10px var(--wn-sun);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
:root body.sg-window .wnLightPct{
  font-family: var(--wn-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--wn-gold);
  min-width: 3.2em; text-align: right;
}

:root body.sg-window .sgHint{ color: var(--wn-dim); font-size: 13px; margin: 4px 0 8px; }
:root body.sg-window .sgHint b{ color: var(--wn-ink); }
:root body.sg-window .msg:not(:empty){
  border: 1px solid var(--wn-line);
  background: var(--wn-stone-0);
  color: var(--wn-ink);
  font-size: 13.5px;
  box-shadow: inset 0 1px 0 var(--wn-edge-hi);
}

/* ------------------------------------------------------------
   The window
   ------------------------------------------------------------ */
:root body.sg-window .sgBoardWrap{
  position: relative;
  isolation: isolate;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid var(--wn-line);
  background:
    linear-gradient(180deg, var(--wn-stone-3), var(--wn-stone-1) 30%, var(--wn-stone-0));
  box-shadow:
    inset 0 1px 0 var(--wn-edge-hi),
    inset 0 0 0 6px var(--wn-stone-2),
    inset 0 0 0 7px var(--wn-line-soft),
    0 20px 50px var(--wn-drop);
  overflow: visible;
}
/* Light behind the glass. Rotates slowly; brightens with the board. */
:root body.sg-window .sgBoardWrap::before{
  content: "";
  position: absolute; inset: 8px;
  border-radius: 16px;
  background:
    conic-gradient(from var(--wn-ray-rot, 0deg) at 50% 50%,
      transparent 0 20deg, var(--wn-sun) 26deg, transparent 34deg,
      transparent 0 100deg, var(--wn-sun) 106deg, transparent 114deg,
      transparent 0 190deg, var(--wn-sun) 196deg, transparent 204deg,
      transparent 0 280deg, var(--wn-sun) 286deg, transparent 294deg, transparent 360deg);
  opacity: calc(var(--wn-ray-op) * (.35 + var(--wn-lit, 0)));
  filter: blur(12px);
  animation: wnRays 80s linear infinite;
  pointer-events: none;
  z-index: 0;
  transition: opacity .6s;
}
@keyframes wnRays{ to { --wn-ray-rot: 360deg; } }
@property --wn-ray-rot{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root body.sg-window .sgBoard{
  position: relative;
  z-index: 1;
  gap: 2px;
  padding: 2px;
  border-radius: 12px;
  background: var(--wn-lead);
  box-shadow: inset 0 1px 0 var(--wn-lead-hi), 0 0 0 1px rgba(0,0,0,.35);
}

/* Panes */
:root body.sg-window .sgCell{
  --pane: var(--wn-glass-a);
  --pane-lit: var(--wn-glass-a-lit);
  border-radius: 5px;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.10), transparent 55%),
    var(--pane);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -2px 4px rgba(0,0,0,.25);
  font-family: var(--wn-display);
  font-weight: 700;
  font-size: clamp(16px, 4.8vw, 22px);
  color: var(--wn-given);
  transition: transform .10s ease, background .25s ease, box-shadow .2s ease, filter .25s ease;
}
:root body.sg-window .sgCell[data-b="1"],
:root body.sg-window .sgCell[data-b="3"],
:root body.sg-window .sgCell[data-b="5"],
:root body.sg-window .sgCell[data-b="7"]{ --pane: var(--wn-glass-b); --pane-lit: var(--wn-glass-b-lit); }
:root body.sg-window .sgCell[data-b="4"]{ --pane: var(--wn-glass-c); --pane-lit: var(--wn-glass-c-lit); }
:root body.sg-window .sgCell.altBox{ background: radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.10), transparent 55%), var(--pane); }

/* A pane with a digit in it is lit. */
:root body.sg-window .sgCell.wnLit{
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.22), transparent 55%),
    var(--pane-lit);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -2px 4px rgba(0,0,0,.2),
    0 0 calc(10px * var(--wn-glow-scale)) color-mix(in srgb, var(--pane-lit) 70%, transparent);
}
:root body.sg-window .sgCell.given{
  color: var(--wn-given);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
:root body.sg-window .sgCell.given.wnLit{ filter: saturate(.85); }
:root body.sg-window .sgCell.user{
  color: var(--wn-user);
  text-shadow: 0 0 calc(10px * var(--wn-glow-scale)) var(--wn-sun-soft), 0 1px 0 rgba(0,0,0,.4);
}
:root[data-theme="light"] body.sg-window .sgCell.given{ text-shadow: none; }
:root[data-theme="light"] body.sg-window .sgCell.user{ text-shadow: none; }

/* Thick lead between boxes: keep the game's pseudo-element trick, darker. */
:root body.sg-window .sgCell.bC::before{ right: -2px; width: 4px; top: -2px; bottom: -2px; background: var(--wn-lead); box-shadow: inset 1px 0 0 var(--wn-lead-hi); }
:root body.sg-window .sgCell.bR::after{ bottom: -2px; height: 4px; left: -2px; right: -2px; background: var(--wn-lead); box-shadow: inset 0 1px 0 var(--wn-lead-hi); }

/* Relationship weights: peers lift, same digit rings gold, a conflict is a
   cracked pane, and the selected pane is the one the sun is on. These are
   all one specificity (the board is in the selector) so source order
   decides: selected beats conflict beats same beats peer. The base sheet
   uses !important on these, which has to be matched. */
:root body.sg-window .sgBoard .sgCell.peer{
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(var(--wn-peer), var(--wn-peer)),
    var(--pane) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -2px 4px rgba(0,0,0,.25) !important;
}
:root body.sg-window .sgBoard .sgCell.peer.wnLit{
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(var(--wn-peer), var(--wn-peer)),
    var(--pane-lit) !important;
}
:root body.sg-window .sgBoard .sgCell.same{
  box-shadow:
    inset 0 0 0 2px var(--wn-same),
    inset 0 -2px 4px rgba(0,0,0,.2),
    0 0 calc(10px * var(--wn-glow-scale)) var(--wn-sun-soft) !important;
}
:root body.sg-window .sgBoard .sgCell.conflict{
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.12), transparent 55%),
    var(--wn-bad-pane) !important;
  outline: 2px solid var(--wn-bad);
  outline-offset: -2px;
  box-shadow: 0 0 calc(12px * var(--wn-glow-scale)) var(--wn-bad-glow) !important;
  color: var(--wn-bad-ink);
  text-shadow: none;
}
:root body.sg-window .sgBoard .sgCell.selected{
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(var(--wn-sun-soft), var(--wn-sun-soft)),
    var(--pane-lit) !important;
  outline: 2px solid var(--wn-gold);
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 0 0 2px var(--wn-lead),
    0 0 calc(18px * var(--wn-glow-scale)) var(--wn-sun) !important;
  z-index: 2;
  transform: scale(1.04);
}
:root body.sg-window .sgCell:focus-visible{ outline: 2px solid var(--wn-gold); outline-offset: -2px; }

/* Pencil marks */
:root body.sg-window .sgNotes{
  font-family: var(--font-ui, system-ui);
  font-weight: 800;
  font-size: 9px;
  color: var(--wn-note);
  inset: 4px;
}

/* A pane being set: a quick flash of light. */
@keyframes wnSet{
  0%   { filter: brightness(1.9); transform: scale(1.12); }
  100% { filter: brightness(1);   transform: scale(1); }
}
:root body.sg-window .sgCell.wnSet{ animation: wnSet .32s ease-out; }
/* Unit completion: light travelling along the unit. */
@keyframes wnUnit{
  0%   { filter: brightness(1); }
  40%  { filter: brightness(2.2); box-shadow: 0 0 18px var(--wn-sun); }
  100% { filter: brightness(1); }
}
:root body.sg-window .sgCell.unitGlow{ animation: wnUnit .7s ease both; }
/* The solve: every pane floods, in order of distance from the last one. */
@keyframes wnFlood{
  0%   { filter: brightness(1); }
  30%  { filter: brightness(2.4) saturate(1.3); }
  100% { filter: brightness(1.35) saturate(1.15); }
}
:root body.sg-window .sgCell.wnFlood{ animation: wnFlood 1.2s ease-out forwards; }
:root body.sg-window .sgBoardWrap.wnWin{ --wn-lit: 1.6; border-color: var(--wn-gold); }
:root body.sg-window .sgBoardWrap.wnWin::before{ animation-duration: 12s; filter: blur(8px); }
:root body.sg-window .card.sgCard.wnWon{ border-color: var(--wn-gold); box-shadow: inset 0 1px 0 var(--wn-edge-hi), 0 0 40px var(--wn-sun-soft), 0 24px 60px var(--wn-drop); }

/* ------------------------------------------------------------
   Keys and buttons — stone with gold
   ------------------------------------------------------------ */
:root body.sg-window .sgControls{ margin-top: 12px; gap: 8px; }
:root body.sg-window .sgKeypad{ gap: 6px; }
:root body.sg-window .sgKey{
  position: relative;
  font-family: var(--wn-display);
  font-weight: 700;
  font-size: 20px;
  padding: 12px 0 10px;
  border-radius: 12px;
  color: var(--wn-gold-hi);
  border: 1px solid rgba(0,0,0,.35);
  background: linear-gradient(180deg, var(--wn-stone-3), var(--wn-stone-1) 55%, var(--wn-stone-0));
  box-shadow: inset 0 2px 0 var(--wn-edge-hi), inset 0 -3px 0 var(--wn-edge-lo), 0 4px 10px var(--wn-drop);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  transition: transform .07s ease, box-shadow .07s ease, opacity .2s;
}
:root[data-theme="light"] body.sg-window .sgKey{ color: var(--wn-gold-lo); text-shadow: none; }
:root body.sg-window .sgKey:active,
:root body.sg-window .sgKey.wnDown{
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
/* how many of this digit are still to place */
:root body.sg-window .sgKey .wnLeft{
  position: absolute; right: 5px; top: 3px;
  font-family: var(--font-ui, system-ui);
  font-weight: 800;
  font-size: 9.5px;
  color: var(--wn-dim);
  letter-spacing: 0;
}
:root body.sg-window .sgKey.wnDone{ opacity: .38; }
:root body.sg-window .sgKey.wnDone .wnLeft{ display: none; }

:root body.sg-window .sgBtn{
  font-family: var(--wn-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 8px 10px;
  border-radius: 12px;
  color: var(--wn-dim);
  border: 1px solid var(--wn-line-soft);
  background: var(--wn-stone-0);
  box-shadow: inset 0 1px 0 var(--wn-edge-hi);
}
:root body.sg-window .sgBtn:hover{ color: var(--wn-ink); border-color: var(--wn-gold); }
:root body.sg-window .sgToggle[aria-pressed="true"]{
  color: var(--wn-gold-hi);
  border-color: var(--wn-gold);
  background: linear-gradient(180deg, var(--wn-stone-2), var(--wn-stone-0));
  box-shadow: inset 0 0 0 1px var(--wn-gold-lo), 0 0 14px var(--wn-sun-soft);
}
:root[data-theme="light"] body.sg-window .sgToggle[aria-pressed="true"]{ color: var(--wn-gold-lo); }
:root body.sg-window .sgPrimary{
  color: var(--wn-gold-ink);
  background: linear-gradient(180deg, var(--wn-fill-hi), var(--wn-fill) 55%, var(--wn-fill-lo));
  border-color: var(--wn-gold-lo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.2), 0 6px 14px var(--wn-drop);
}
:root body.sg-window .sgPrimary:hover{ color: var(--wn-gold-ink); filter: brightness(1.06); }

:root body.sg-window .sgAssistPanel{
  border: 1px solid var(--wn-line-soft);
  background: var(--wn-stone-0);
  border-radius: 14px;
}
:root body.sg-window .sgToolCard{
  border: 1px solid var(--wn-line-soft);
  background: linear-gradient(180deg, var(--wn-stone-2), var(--wn-stone-1));
  border-radius: 12px;
  color: var(--wn-ink);
}
:root body.sg-window .sgToolTitle{ font-family: var(--wn-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; color: var(--wn-gold); }
:root body.sg-window .sgToolSub{ color: var(--wn-dim); opacity: 1; }
:root body.sg-window .sgToolCard.unlocked{
  border-color: var(--wn-gold);
  background: linear-gradient(180deg, var(--wn-stone-3), var(--wn-stone-1));
  box-shadow: 0 0 12px var(--wn-sun-soft);
}
:root body.sg-window #toolAutoNotes.armed{
  border-color: var(--wn-gold) !important;
  box-shadow: 0 0 0 3px var(--wn-sun-soft) !important;
}

:root body.sg-window .sgMiniRow{ margin-top: 10px; align-items: center; }
:root body.sg-window .sgMiniRow .muted{ color: var(--wn-dim); }
:root body.sg-window .wnSound{
  width: 34px; height: 34px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--wn-line);
  background: var(--wn-stone-0);
  color: var(--wn-gold);
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--wn-edge-hi);
  flex: 0 0 auto;
}
:root body.sg-window .wnSound[aria-pressed="false"]{ opacity: .6; }

/* ------------------------------------------------------------
   Phones
   ------------------------------------------------------------ */
@media (max-width: 520px){
  :root body.sg-window .card.sgCard{ padding: 14px 12px 12px; border-radius: 18px; }
  :root body.sg-window .sgBoardWrap{ padding: 7px; border-radius: 16px; box-shadow: inset 0 1px 0 var(--wn-edge-hi), inset 0 0 0 4px var(--wn-stone-2), inset 0 0 0 5px var(--wn-line-soft), 0 20px 50px var(--wn-drop); }
  :root body.sg-window .sgBoardWrap::before{ inset: 5px; }
  :root body.sg-window .sgStat{ padding: 7px 8px 6px; }
  :root body.sg-window .sgStat .mono{ font-size: 16px; }
  :root body.sg-window .sgKey{ font-size: 18px; padding: 10px 0 9px; border-radius: 10px; }
  :root body.sg-window .sgKeypad{ gap: 4px; }
  :root body.sg-window .sgBtn{ font-size: 11px; letter-spacing: .05em; padding: 10px 4px 9px; }
  :root body.sg-window .sgCell.selected{ transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  :root body.sg-window .sgBoardWrap::before{ animation: none; }
  :root body.sg-window .sgCell.wnSet,
  :root body.sg-window .sgCell.unitGlow,
  :root body.sg-window .sgCell.wnFlood{ animation: none; }
  :root body.sg-window .sgCell.selected{ transform: none; }
}

/* ---------- the post-win dialog, in stone and gold ---------- */
:root body.sg-window .gvWin{ background: linear-gradient(180deg, var(--wn-stone-2, #1c2235), var(--wn-stone-0, #0b0d14)); color: var(--wn-ink, #f6f1e3); border: 1px solid var(--wn-line-soft); box-shadow: inset 0 1px 0 var(--wn-edge-hi), 0 30px 70px rgba(0,0,0,.5), 0 0 40px var(--wn-sun-soft); }
:root body.sg-window .gvWin h2{ font-family: 'Cinzel', 'Outfit', serif; font-weight: 700; font-size: 24px; letter-spacing: .04em; color: var(--wn-gold); }
:root body.sg-window .gvWin .gvWinSub, :root body.sg-window .gvWinNextDesc, :root body.sg-window .gvWin .gvWinSmall, :root body.sg-window .gvWin .gvWinX{ color: var(--wn-dim); opacity: 1; }
:root body.sg-window .gvWinNext, :root body.sg-window .gvWinRow .gvWinBtn{ background: var(--wn-stone-0, #0b0d14); border-color: var(--wn-line-soft); color: var(--wn-ink, #f6f1e3); box-shadow: inset 0 1px 0 var(--wn-edge-hi); }
:root body.sg-window .gvWinNext:hover, :root body.sg-window .gvWinRow .gvWinBtn:hover{ border-color: var(--wn-gold); filter: none; }
:root body.sg-window .gvWinNextName{ font-family: 'Cinzel', 'Outfit', serif; letter-spacing: .03em; }
:root body.sg-window .gvWinNextArr{ color: var(--wn-gold); opacity: 1; }
:root body.sg-window .gvWinRow .gvWinBtn.primary{ background: linear-gradient(180deg, var(--wn-sun), var(--wn-gold)); color: #1d2130; border-color: var(--wn-gold-lo); }