/* tictacglow.css — Tic Tac Glow game chrome.
   HUD slots, title flicker, board tubes, win line, board cursors.
   Shared theme stays in glow/glow.css. Import AFTER glow.css. */

/* Each title tube flickers on its own pace */
lux-tail > :is(lux-cell,lux-box,lux).glow-label:nth-child(1) {
  --glow-flicker-dur: 6s;
  --glow-flicker-delay: -0.8s;
}
lux-tail > :is(lux-cell,lux-box,lux).glow-label:nth-child(2) {
  --glow-flicker-dur: 7.5s;
  --glow-flicker-delay: -3s;
}
lux-tail > :is(lux-cell,lux-box,lux).glow-label:nth-child(3) {
  --glow-flicker-dur: 5.5s;
  --glow-flicker-delay: -4.2s;
}

/* HUD slots follow LUX order: actions, scores, status */
lux-head > :is(lux-cell,lux-box,lux):nth-child(1),
lux-head > :is(lux-cell,lux-box,lux):nth-child(3) {
  /* Host occupies the --e slot; contents stay centered (LUX default). */
  overflow: visible !important;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  place-items: center;
  place-content: center;
  padding: 0;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) > lux-stack,
lux-head > :is(lux-cell,lux-box,lux):nth-child(3) > lux-stack {
  width: max-content;
  height: max-content;
  max-width: none;
  max-height: none;
  min-width: min-content;
  min-height: min-content;
  justify-self: center;
  align-self: center;
}
/* TURN is always a column: label above X/O in tall and wide. */
lux-head > :is(lux-cell,lux-box,lux):nth-child(3) > lux-stack {
  flex-direction: column;
}
/* NEW GAME, then Apple-style AI | 2P track, then FPS centered under the switch.
   Controls are content-sized (type + padding) — lux-stack uniform-scales the group. */
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > .glow-btn {
  flex: 0 0 auto;
  align-self: center;
  height: auto;
  max-height: none;
  white-space: nowrap;
  /* Intrinsic pill — never stretch into slot slack. Group scale is --stack-scale. */
  width: auto;
  max-width: none;
  box-sizing: border-box;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > .glow-btn,
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > lux-row,
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > span.glow-label {
  white-space: nowrap;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > lux-row {
  flex-wrap: nowrap;
  --glow-switch-pad: 0.14em;
  --glow-switch-neon: var(--glow-cyan, #00f2ff);
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  align-self: center;
  height: auto;
  max-height: none;
  /* Intrinsic switch pill — two 2.75em thumbs + pad; group scale is --stack-scale. */
  width: auto;
  max-width: none;
  min-width: min-content;
  justify-content: center;
  align-items: center;
  gap: 0 !important;
  padding: var(--glow-switch-pad);
  overflow: hidden !important;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--glow-switch-neon) 50%, #8a7aa0);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%),
    color-mix(in srgb, #100818 84%, transparent);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 10px color-mix(in srgb, var(--glow-switch-neon) 16%, transparent);
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > lux-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--glow-switch-pad);
  bottom: var(--glow-switch-pad);
  left: var(--glow-switch-pad);
  width: calc(50% - var(--glow-switch-pad));
  border-radius: 999px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06)),
    color-mix(in srgb, #241636 55%, var(--glow-switch-neon));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 0 10px color-mix(in srgb, var(--glow-switch-neon) 42%, transparent);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    box-shadow 0.2s ease;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > lux-row:has(button[value="2p"].is-on) {
  --glow-switch-neon: var(--glow-pink, #ff2d55);
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > lux-row:has(button[value="2p"].is-on)::before {
  transform: translateX(100%);
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-row > button.glow-label[value] {
  flex: 0 0 auto;
  align-self: center;
  height: auto;
  max-height: none;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > span.glow-label {
  display: block;
  width: auto;
  text-align: center;
  white-space: nowrap;
  flex: 0 0 auto;
  align-self: center;
  height: auto;
  max-height: none;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(2) {
  --glow-score-letter: var(--score-px, clamp(14px, 5vmin, 72px));
  /* lux-grid fills this cell (stretch); marks/scores center inside equal tracks. */
  place-items: stretch;
  place-content: stretch;
  width: 100%;
  max-width: 100%;
  /* Kill chrome padding that ate scoreboard track space. */
  padding: 0;
  gap: 0;
}
/* Turn label + mark — HUD type (not title clamp); stack --stack-scale fills the slot. */
lux-head > :is(lux-cell,lux-box,lux):nth-child(3) {
  --glow-score-letter: var(--score-px, clamp(14px, 5vmin, 72px));
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(3) lux-stack > .glow-label {
  flex: 0 0 auto;
  align-self: center;
  height: auto;
  width: auto;
  white-space: nowrap;
  text-align: center;
  /* Fit the --e strip — title-sized 18–42px clips TURN off the tall viewport. */
  font-size: clamp(10px, min(2.8vmin, calc(var(--e, 48px) * 0.32)), 18px);
  letter-spacing: 0.12em;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(3) lux-stack > .glow-mark {
  flex: 0 0 auto;
  align-self: center;
  width: min(var(--glow-score-letter), calc(var(--e, 48px) * 0.42));
  height: min(var(--glow-score-letter), calc(var(--e, 48px) * 0.42));
}
/* Tall strip is short — tighter type/gap so TURN still sits above the mark. */
html[data-o="t"] lux-head > :is(lux-cell,lux-box,lux):nth-child(3) > lux-stack {
  flex-direction: column;
  gap: 0.12em;
}
html[data-o="t"] lux-head > :is(lux-cell,lux-box,lux):nth-child(3) lux-stack > .glow-label {
  font-size: clamp(9px, calc(var(--e, 48px) * 0.22), 14px);
}

lux-head > :is(lux-cell,lux-box,lux):nth-child(1) .glow-label {
  font-size: clamp(11px, min(2.4vmin, calc(var(--slot, 33vw) * 0.045)), 18px);
  letter-spacing: 0.14em;
  animation-delay: -2.4s;
  white-space: nowrap;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) button.glow-label[value] {
  appearance: none;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
  background: none;
  border-radius: 999px;
  padding: 0.22em 0.72em;
  min-width: 2.75em;
  width: 2.75em;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
  align-self: center;
  font-size: clamp(14px, 2.8vmin, 20px);
  letter-spacing: 0.12em;
  cursor: none;
  opacity: 1;
  visibility: visible;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) button.glow-label[value]:not(.is-on) {
  opacity: 0.55;
  filter: saturate(0.55);
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) button.glow-label[value].is-on {
  opacity: 1;
  filter: none;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(1) button.glow-label[value="2p"].is-on {
  --glow-title-neon: var(--glow-pink, #ff2d55);
}
@media (prefers-reduced-motion: reduce) {
  lux-head > :is(lux-cell,lux-box,lux):nth-child(1) lux-stack > lux-row::before {
    transition: none;
  }
}
/* TIE + X/O marks share --glow-score-letter; digits neon in those columns. */
lux-head > :is(lux-cell,lux-box,lux):nth-child(2) lux-grid {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: var(--glow-score-letter);
  font-weight: 200;
  letter-spacing: 0.04em;
  /* Fixed px gap — never em (em grew with type and wasted the slot). */
  gap: 2px;
  /* Tracks fill; items stay content-sized and centered — never stretch the pills. */
  align-items: center;
  justify-items: center;
}
lux-head > :is(lux-cell,lux-box,lux):nth-child(2) lux-grid > .glow-label.is-score {
  font-size: var(--glow-score-letter);
  font-weight: 200;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0;
  margin: 0;
  height: auto;
  max-height: none;
  align-self: center;
  justify-self: center;
}

lux-head > :is(lux-cell,lux-box,lux):nth-child(2) .glow-mark {
  width: var(--glow-score-letter);
  height: var(--glow-score-letter);
  align-self: center;
  justify-self: center;
  flex: 0 0 auto;
}

/* Thin copyright strip — year + wordmark in one lux-link. */
lux-footer,
lux-foot,
lux-footer lux-link,
lux-foot lux-link {
  color: #f2eaff;
  -webkit-text-fill-color: #f2eaff;
}
lux-footer .glow-brand,
lux-foot .glow-brand {
  margin-top: 0;
  padding-bottom: 0;
  gap: 0.45em;
  opacity: 0.88;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: inherit;
  -webkit-text-fill-color: inherit;
}
lux-footer .glow-brand img,
lux-link.glow-brand img {
  width: auto;
  height: 14px;
  max-height: 16px;
}
lux-footer .glow-label,
lux-foot .glow-label,
lux-footer lux-link,
lux-foot lux-link {
  font-size: 11px;
  letter-spacing: 0.08em;
}
html[data-compact] lux-footer .glow-brand img,
html[data-compact] lux-foot .glow-brand img {
  width: auto;
  height: 12px;
}

html.glow-app lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux) {
  cursor: none !important;
}

/* Both cursors stay mounted so pointer ↔ piece can cross-fade (no OS cursor). */
html.glow-app .glow-cursor,
html.glow-app .glow-cursor-ptr {
  opacity: 0;
  transition: opacity 150ms ease;
}
html.glow-app .glow-cursor.is-shown,
html.glow-app .glow-cursor-ptr.is-shown {
  opacity: 1;
}
/* AI turn (think → place): in-game POINTER only — hide play glyph (never show O). */
body.ai-turn .glow-cursor,
body.ai-turn .glow-cursor.is-shown {
  opacity: 0;
}
/* After O lands: fast fade back to X piece (.glow-cursor). */
body.cursor-xfade-fast .glow-cursor,
body.cursor-xfade-fast .glow-cursor-ptr {
  transition: opacity 70ms ease;
}

/* ── Board ── */
lux-body > :is(lux-cell,lux-box,lux)[c] {
  position: relative;
  /* Size comes from lux RESET leftover cq. Do not fill with 100%. */
  background: transparent;
  overflow: visible;
}

/* Neon grid — 12 independent tube segments (6V + 6H), each flickers alone */
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux) {
  container-type: size;
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  font: 800 min(74cqmin, 9.5rem) / 1 ui-sans-serif, system-ui, sans-serif;
  user-select: none;
  color: transparent;
  overflow: visible;
  filter: none;
  box-shadow: none;
  background: transparent;
}
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).filled {
  background: transparent;
}
.glow-tube {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background: #e8f0ff;
  border-radius: 999px;
  /* Additive so H∩V crossings brighten instead of looking darker */
  mix-blend-mode: plus-lighter;
  box-shadow:
    0 0 1px #fff,
    0 0 4px #9ec1ff,
    0 0 10px #08f,
    0 0 18px #06c,
    0 0 28px #0488;
  animation: glow-flicker var(--glow-tube-dur, 6s) infinite alternate;
  animation-delay: var(--glow-tube-delay, 0s);
  opacity: 1;
}
@supports not (mix-blend-mode: plus-lighter) {
  .glow-tube { mix-blend-mode: screen; }
}
/* Bright knots where the 4 internal grid lines cross */
.glow-tube-cross {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 2px #fff,
    0 0 6px #9ec1ff,
    0 0 12px #08f,
    0 0 20px #06c;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  animation: glow-flicker 7s infinite alternate;
  animation-delay: -7s;
}
.glow-tube-v {
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  transform: translateX(50%);
}
.glow-tube-h {
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  transform: translateY(50%);
}
/* Unique pace per tube (matches title desync vibe) */
.glow-tube[data-tube="v-0-0"] { --glow-tube-dur: 5s; --glow-tube-delay: -0.50s; }
.glow-tube[data-tube="v-0-1"] { --glow-tube-dur: 6.5s; --glow-tube-delay: -2.00s; }
.glow-tube[data-tube="v-1-0"] { --glow-tube-dur: 5.5s; --glow-tube-delay: -3.67s; }
.glow-tube[data-tube="v-1-1"] { --glow-tube-dur: 7.5s; --glow-tube-delay: -1.00s; }
.glow-tube[data-tube="v-2-0"] { --glow-tube-dur: 4.8s; --glow-tube-delay: -4.33s; }
.glow-tube[data-tube="v-2-1"] { --glow-tube-dur: 8s; --glow-tube-delay: -2.67s; }
.glow-tube[data-tube="h-0-0"] { --glow-tube-dur: 5.5s; --glow-tube-delay: -1.50s; }
.glow-tube[data-tube="h-0-1"] { --glow-tube-dur: 6.8s; --glow-tube-delay: -4.67s; }
.glow-tube[data-tube="h-0-2"] { --glow-tube-dur: 6s; --glow-tube-delay: -0.33s; }
.glow-tube[data-tube="h-1-0"] { --glow-tube-dur: 7s; --glow-tube-delay: -3.17s; }
.glow-tube[data-tube="h-1-1"] { --glow-tube-dur: 5s; --glow-tube-delay: -2.33s; }
.glow-tube[data-tube="h-1-2"] { --glow-tube-dur: 7.8s; --glow-tube-delay: -5.33s; }

/*
  Neon marks — SVG stroked tubes only.
  White core stroke + colored drop-shadow bloom (no filled radial ::before — keeps O hollow).
  Intensity pulse via opacity/brightness only — never scale.
*/
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux) > .glow-mark {
  grid-area: 1 / 1;
  width: 74%;
  height: 74%;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 2;
}
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux) > .glow-mark > .glow-core {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  overflow: visible;
}
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux) > .glow-mark > .glow-core line,
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux) > .glow-mark > .glow-core circle {
  fill: none;
  stroke: #fffef8;
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* Disable filled radial bloom — light comes only from thin letter strokes */
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).filled::before {
  content: none !important;
  display: none !important;
}

@keyframes glow-mark-pulse {
  0%, 100% {
    opacity: 0.82;
    filter: brightness(calc(0.92 * var(--glow-mark-gain, 1))) saturate(var(--glow-mark-sat, 1))
      drop-shadow(0 0 1px #fff)
      drop-shadow(0 0 3px var(--glow-mark-bloom-soft))
      drop-shadow(0 0 8px var(--glow-mark-bloom))
      drop-shadow(0 0 16px var(--glow-mark-bloom))
      drop-shadow(0 0 28px var(--glow-mark-bloom-deep))
      drop-shadow(0 0 36px var(--glow-mark-halo, transparent))
      drop-shadow(0 0 52px var(--glow-mark-halo, transparent));
  }
  50% {
    opacity: 1;
    filter: brightness(calc(1.22 * var(--glow-mark-gain, 1))) saturate(var(--glow-mark-sat, 1))
      drop-shadow(0 0 1px #fff)
      drop-shadow(0 0 3px var(--glow-mark-bloom-soft))
      drop-shadow(0 0 8px var(--glow-mark-bloom))
      drop-shadow(0 0 16px var(--glow-mark-bloom))
      drop-shadow(0 0 28px var(--glow-mark-bloom-deep))
      drop-shadow(0 0 36px var(--glow-mark-halo, transparent))
      drop-shadow(0 0 52px var(--glow-mark-halo, transparent));
  }
}

/* X only — skip the large uniform halo stack (reads as a rectangular slab). */
@keyframes glow-mark-pulse-x {
  0%, 100% {
    opacity: 0.86;
    filter: brightness(calc(0.94 * var(--glow-mark-gain, 1))) saturate(var(--glow-mark-sat, 1))
      drop-shadow(0 0 1px #fff)
      drop-shadow(0 0 3px var(--glow-mark-bloom-soft))
      drop-shadow(0 0 6px var(--glow-mark-bloom))
      drop-shadow(0 0 12px var(--glow-mark-bloom-deep))
      drop-shadow(0 0 22px var(--glow-mark-halo, transparent));
  }
  50% {
    opacity: 1;
    filter: brightness(calc(1.1 * var(--glow-mark-gain, 1))) saturate(var(--glow-mark-sat, 1))
      drop-shadow(0 0 1px #fff)
      drop-shadow(0 0 3px var(--glow-mark-bloom-soft))
      drop-shadow(0 0 6px var(--glow-mark-bloom))
      drop-shadow(0 0 12px var(--glow-mark-bloom-deep))
      drop-shadow(0 0 22px var(--glow-mark-halo, transparent));
  }
}

lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).is-x {
  --glow-mark: var(--glow-mark-bloom-x);
  --glow-mark-bloom: var(--glow-mark-bloom-x);
  --glow-mark-bloom-soft: var(--glow-mark-bloom-x-soft);
  --glow-mark-bloom-deep: var(--glow-mark-bloom-x-deep);
  --glow-mark-halo: var(--glow-mark-halo-x);
  --glow-mark-gain: var(--glow-mark-gain-x);
  --glow-mark-sat: var(--glow-mark-sat-x);
}
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).is-o {
  --glow-mark: #5cff3a;
  --glow-mark-bloom: var(--glow-mark-bloom-o);
  --glow-mark-bloom-soft: var(--glow-mark-bloom-o-soft);
  --glow-mark-bloom-deep: var(--glow-mark-bloom-o-deep);
}

lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).filled > .glow-mark > .glow-core {
  /* Placement fade is .glow-mark.is-in (240ms); pulse starts after that */
  animation: glow-mark-pulse var(--glow-pulse-dur, 2.5s) ease-in-out infinite;
  animation-delay: calc(240ms + var(--glow-pulse-delay, 0s));
}
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).is-x.filled > .glow-mark > .glow-core {
  animation-name: glow-mark-pulse-x;
}

/* Per-cell pulse pace from DOM order (desynced; negative delay = phase offset) */
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(1).filled > .glow-mark > .glow-core { --glow-pulse-dur: 2.15s; --glow-pulse-delay: -0.4s; }
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(2).filled > .glow-mark > .glow-core { --glow-pulse-dur: 2.9s;  --glow-pulse-delay: -1.1s; }
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(3).filled > .glow-mark > .glow-core { --glow-pulse-dur: 1.85s; --glow-pulse-delay: -0.2s; }
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(4).filled > .glow-mark > .glow-core { --glow-pulse-dur: 3.2s;  --glow-pulse-delay: -1.6s; }
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(5).filled > .glow-mark > .glow-core { --glow-pulse-dur: 2.4s;  --glow-pulse-delay: -0.75s; }
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(6).filled > .glow-mark > .glow-core { --glow-pulse-dur: 2.7s;  --glow-pulse-delay: -2.0s; }
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(7).filled > .glow-mark > .glow-core { --glow-pulse-dur: 1.7s;  --glow-pulse-delay: -0.95s; }
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(8).filled > .glow-mark > .glow-core { --glow-pulse-dur: 3.05s; --glow-pulse-delay: -1.35s; }
lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux):nth-child(9).filled > .glow-mark > .glow-core { --glow-pulse-dur: 2.25s; --glow-pulse-delay: -0.55s; }

/* Win line */
.glow-win {
  position: absolute;
  height: 5px;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 0 8px #fff,
    0 0 16px #f0d27a,
    0 0 32px #f0d27a,
    0 0 48px #ff2d9555;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 5;
  display: none;
  filter: none;
}
.glow-win.is-on { display: block; }

/* Freeze neon CSS work during live window drag (spine sets html[data-resizing]).
   GL rAF pauses but the last shade frame stays visible (CSS scales the live canvas). */
html[data-resizing] .glow-canvas {
  visibility: visible;
}
html[data-resizing] .glow-tube,
html[data-resizing] .glow-tube-cross,
html[data-resizing] lux-tail > :is(lux-cell,lux-box,lux).glow-label,
html[data-resizing] lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).filled > .glow-mark > .glow-core,
html[data-resizing] .glow-mark > .glow-core,
html[data-resizing] .glow-cursor > .glow-core,
html[data-resizing] .glow-label,
html[data-resizing] .glow-btn {
  animation-play-state: paused !important;
}
html[data-resizing] lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).filled > .glow-mark > .glow-core,
html[data-resizing] .glow-mark > .glow-core,
html[data-resizing] .glow-cursor > .glow-core,
html[data-resizing] .glow-cursor-ptr-svg {
  filter: drop-shadow(0 0 4px var(--glow-mark-bloom, #7ec8ff)) !important;
}
/* Keep Exo + full neon stack during data-resizing — never strip to UA/plain type. */
html[data-resizing] lux-tail > :is(lux-cell,lux-box,lux).glow-label,
html[data-resizing] .glow-label,
html[data-resizing] .glow-btn {
  font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif;
}

/* Hold ~ debug paths (spine sets html[data-d]) */
html[data-d] lux-head :is(lux-cell,lux-box,lux),
html[data-d] lux-tail :is(lux-cell,lux-box,lux) {
  outline: 1px solid #8888;
}
html[data-d] :is(lux-cell,lux-box,lux)[data-p]::after {
  content: attr(data-p);
  position: absolute;
  top: 2px;
  left: 3px;
  z-index: 4;
  padding: 1px 4px;
  font: 600 10px/1.2 ui-monospace, monospace;
  color: #f0d27a;
  background: #000a;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .glow-tube {
    animation: none !important;
  }
  lux-tail > :is(lux-cell,lux-box,lux).glow-label,
  lux-head .glow-label.is-score,
  lux-head .glow-label.is-win {
    animation: none;
    opacity: 1;
  }
  /* Instant mark appear (skip 240ms fade); keep soft intensity pulse */
  lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).filled > .glow-mark > .glow-core {
    animation: glow-mark-pulse 2.5s ease-in-out infinite; animation-delay: 0s;
  }
  lux-body > :is(lux-cell,lux-box,lux)[c] > :is(lux-cell,lux-box,lux).is-x.filled > .glow-mark > .glow-core {
    animation-name: glow-mark-pulse-x;
  }
}


/* Shared-budget compact: keep HUD inside strip when viewport is tight */
html[data-compact] lux-head .glow-label:not(.is-score) {
  font-size: 11px;
}
html[data-compact] lux-head > :is(lux-cell,lux-box,lux):nth-child(3) lux-stack > .glow-label {
  font-size: 11px;
}
html[data-compact] lux-head > :is(lux-cell,lux-box,lux):nth-child(1) button.glow-label[value] {
  min-width: 2.2em;
  width: 2.2em;
  min-height: 1.2em;
  padding: 0.16em 0.35em;
  font-size: 12px;
  opacity: 1;
}
html[data-compact] lux-head > :is(lux-cell,lux-box,lux):nth-child(2) {
  padding: 0;
  gap: 0;
}
html[data-compact] .glow-btn {
  padding: 0.25em 0.5em;
  font-size: 10px;
}
html[data-o="t"][data-compact] lux-head > :is(lux-cell,lux-box,lux):nth-child(1) {
  gap: 0.3em 0.4em;
}
html[data-compact] lux-tail > :is(lux-cell,lux-box,lux).glow-label {
  font-weight: 200;
  font-style: normal;
  letter-spacing: 0.04em;
}