/* letter cursor hides system pointer */
html, body, button, .glow-cell { cursor: none !important; }
/**
* glow.css — shared neon / spine UI kit (wall, titles, tubes, HUD chrome, buttons, marks).
* Zero-JS neon baseline always works; when glow.js activates a GPU pass,
* dials CSS bloom / wall photo down so you don't double-light.
* Used by many games — theme via CSS variables.
*
* Tokens (override per brand / ionic.games theme):
* --glow-bg, --glow-pink, --glow-lime, --glow-cyan, --glow-ambient,
* --glow-title, --glow-bg-albedo, --glow-mark, --glow-mark-bloom*
*/
:root {
--glow-bg: #0c0810;
--glow-pink: #ff2d55;
--glow-lime: #39ff14;
--glow-cyan: #00f2ff;
--glow-ambient: 0.22;
--glow-title: #1a6cff;
}
/* CSS fallback wall (apps can replace via --glow-bg-albedo) */
.glow-wall,
html.glow-app::before,
html::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: var(--glow-bg);
background-image:
radial-gradient(ellipse 90% 75% at 50% 38%, transparent 12%, #000000d8 100%),
linear-gradient(180deg, #1a0a28aa 0%, #0c0810cc 100%),
var(--glow-bg-albedo, none);
background-size: auto, auto, cover;
background-repeat: no-repeat;
background-position: center, center, center;
filter: saturate(0.15) brightness(1.05) contrast(1.1);
}
html {
cursor: none;
background-color: #1a1a1e;
}
/* Utility: additive tube text */
.glow-text {
color: #fff;
text-shadow:
0 0 4px #fff,
0 0 12px var(--glow-cyan),
0 0 28px var(--glow-cyan);
}
.glow-text-pink {
text-shadow:
0 0 4px #fff,
0 0 12px var(--glow-pink),
0 0 28px var(--glow-pink);
}
.glow-text-lime {
text-shadow:
0 0 4px #fff,
0 0 12px var(--glow-lime),
0 0 28px var(--glow-lime);
}
/* CSS bloom pool (fallback / no GPU) */
.glow-bloom {
position: relative;
}
.glow-bloom::before {
content: "";
position: absolute;
inset: -20%;
border-radius: 50%;
pointer-events: none;
z-index: -1;
mix-blend-mode: plus-lighter;
background: radial-gradient(
circle closest-side,
color-mix(in srgb, var(--glow-bloom-color, var(--glow-cyan)) 70%, #fff) 0%,
color-mix(in srgb, var(--glow-bloom-color, var(--glow-cyan)) 30%, transparent) 50%,
transparent 72%
);
}
@supports not (mix-blend-mode: plus-lighter) {
.glow-bloom::before {
mix-blend-mode: screen;
}
}
/* GPU canvas layer (injected by glow.js) */
.glow-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
display: block;
}
/* When GPU wall is live, hide CSS wall photo to avoid double image */
html[data-glow="gpu"]::before {
background-image: none !important;
filter: none !important;
background-color: #050308 !important;
}
html[data-glow="gpu"] .glow-bloom::before {
opacity: 0.35; /* keep a little CSS tube, main light is shader */
}
html[data-glow="css"] {
/* explicit fallback mode */
}
/* ── Neon HUD / board kit (titles, tubes, marks, chrome) ── */
ux-body {
background: transparent !important;
}
ux-body::before,
ux-body::after {
content: none !important;
}
/* Head/tail above body so title + chrome aren't covered by body paint */
ux-head,
ux-tail {
background: transparent !important;
z-index: 2;
overflow: visible !important;
}
ux-cell {
padding: 0.35em;
}
ux-cell[max],
ux-cell:has(> ux-cell) {
padding: 0;
}
/* ── Head — three upright title cells (tic/tac/toe); equalStrip stacks in wide ── */
/* Rare subtle dips — very long steady stretches; dip only ~half as deep */
@keyframes glow-flicker {
0%, 93%, 97%, 100% { opacity: 1; }
95%, 96% { opacity: 0.78; }
}
/* Title: soft bloom dim (not full cutout), infrequent */
@keyframes glow-title-flicker {
0%, 93%, 97%, 100% {
text-shadow:
-0.05em -0.05em 0.28em #fff,
0.05em 0.05em 0.28em #fff,
0 0 0.35em var(--glow-title-neon, #08f),
0 0 0.75em var(--glow-title-neon, #08f),
0 0 1.25em var(--glow-title-neon, #08f),
0 0 1.85em var(--glow-title-neon, #08f);
}
95%, 96% {
text-shadow:
-0.03em -0.03em 0.16em #fff9,
0.03em 0.03em 0.16em #fff9,
0 0 0.28em color-mix(in srgb, var(--glow-title-neon, #08f) 55%, transparent),
0 0 0.65em color-mix(in srgb, var(--glow-title-neon, #08f) 40%, transparent);
}
}
ux-tail > ux-cell.glow-title {
--glow-title-neon: #1a6cff; /* electric blue gas — shared with grid tubes */
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
/* Fight spine equalStrip inline overflow:hidden (clips glow) */
overflow: visible !important;
display: grid;
place-items: center;
padding: 0;
margin: 0;
box-sizing: border-box;
/* Exo 2 regular 200 — upright neon titles */
font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif;
font-weight: 200;
font-style: normal;
letter-spacing: 0.02em;
line-height: 1;
text-align: center;
text-transform: uppercase;
user-select: none;
white-space: nowrap;
writing-mode: horizontal-tb;
text-orientation: mixed;
transform: none;
/* JS fitTitle overrides; big fallback so first paint isn't tiny */
font-size: clamp(22px, 9vmin, 120px);
color: #fff;
-webkit-text-fill-color: #fff;
text-shadow:
-0.05em -0.05em 0.28em #fff,
0.05em 0.05em 0.28em #fff,
0 0 0.35em var(--glow-title-neon),
0 0 0.75em var(--glow-title-neon),
0 0 1.25em var(--glow-title-neon),
0 0 1.85em var(--glow-title-neon);
animation: glow-title-flicker var(--glow-flicker-dur, 2.2s) infinite alternate;
animation-delay: var(--glow-flicker-delay, 0s);
opacity: 1;
}
/* Each title tube flickers on its own pace */
ux-tail > ux-cell.glow-title:nth-child(1) {
--glow-flicker-dur: 6s;
--glow-flicker-delay: -0.8s;
}
ux-tail > ux-cell.glow-title:nth-child(2) {
--glow-flicker-dur: 7.5s;
--glow-flicker-delay: -3s;
}
ux-tail > ux-cell.glow-title:nth-child(3) {
--glow-flicker-dur: 5.5s;
--glow-flicker-delay: -4.2s;
/* GLOW denser glyphs — thinner halo so O stays a letter, not a fog disk */
text-shadow:
-0.025em -0.025em 0.12em #fff,
0.025em 0.025em 0.12em #fff,
0 0 0.18em var(--glow-title-neon),
0 0 0.34em var(--glow-title-neon),
0 0 0.55em var(--glow-title-neon),
0 0 0.78em var(--glow-title-neon);
animation: none; /* static softer glow; flicker re-inflates O halo */
opacity: 1;
}
/* ── Head chrome (HUD) ── */
ux-head > ux-cell {
overflow: hidden;
display: grid;
place-items: center;
align-content: center;
gap: 0.12em;
padding: 0.16em 0.22em;
box-sizing: border-box;
min-width: 0;
min-height: 0;
height: 100%;
max-height: 100%;
}
/* Turn — title-style neon label + ¼-size mark underneath */
ux-head > .glow-turn {
display: grid;
grid-template-rows: auto auto;
place-items: center;
gap: 0.15em;
overflow: visible !important;
}
.glow-turn-label {
--glow-title-neon: #1a6cff;
font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif;
font-weight: 200;
font-style: normal;
font-size: clamp(18px, 4.2vmin, 42px);
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
color: #fff;
-webkit-text-fill-color: #fff;
white-space: nowrap;
user-select: none;
text-shadow:
-0.08em -0.08em 0.4em #fff,
0.08em 0.08em 0.4em #fff,
0 0 0.5em var(--glow-title-neon),
0 0 1em var(--glow-title-neon),
0 0 1.5em var(--glow-title-neon),
0 0 2em var(--glow-title-neon),
0 0 2.75em var(--glow-title-neon);
animation: glow-title-flicker 6.5s infinite alternate;
animation-delay: -1.2s;
}
.glow-turn-label.is-win {
--glow-title-neon: #f0d27a;
animation: glow-flicker 0.9s ease-in-out 2;
}
.glow-turn-label.is-draw {
--glow-title-neon: #f0d27a;
}
.glow-turn-mark {
display: grid;
place-items: center;
width: clamp(22px, 5vmin, 48px);
height: clamp(22px, 5vmin, 48px);
/* ~¼ of a board mark footprint */
overflow: visible;
}
.glow-turn-mark > .glow-core {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.glow-turn-mark.is-x {
--glow-mark-bloom: #ff3030;
--glow-mark-bloom-soft: #ff9a9a;
--glow-mark-bloom-deep: #ff0000aa;
}
.glow-turn-mark.is-o {
--glow-mark-bloom: #39ff14;
--glow-mark-bloom-soft: #b8ff9a;
--glow-mark-bloom-deep: #39ff1499;
}
.glow-turn-mark > .glow-core line,
.glow-turn-mark > .glow-core circle {
fill: none;
stroke: #fffef8;
stroke-width: 3.5;
stroke-linecap: round;
}
.glow-turn-mark > .glow-core {
filter:
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-deep));
animation: glow-mark-pulse 2.4s ease-in-out infinite;
}
/* Scores — no boxes; glyphs + neon digits in a row */
ux-head > .glow-scores {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.65em 1.1em;
width: 100%;
max-width: 100%;
}
.glow-score-card {
display: grid;
grid-template-columns: auto auto;
align-items: center;
gap: 0.3em 0.4em;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
min-width: 0;
}
.glow-score-card.is-x,
.glow-score-card.is-o,
.glow-score-card.is-d {
border: none;
box-shadow: none;
background: transparent;
}
.glow-score-card.is-d {
grid-template-columns: auto auto;
justify-items: start;
align-items: center;
}
.glow-score-glyph {
display: grid;
place-items: center;
width: clamp(28px, 6.5vmin, 56px);
height: clamp(28px, 6.5vmin, 56px);
overflow: visible;
}
.glow-score-glyph > .glow-core {
width: 100%;
height: 100%;
display: block;
}
.glow-score-card.is-x .glow-score-glyph {
--glow-mark-bloom: #ff3030;
--glow-mark-bloom-soft: #ff9a9a;
--glow-mark-bloom-deep: #ff0000aa;
}
.glow-score-card.is-o .glow-score-glyph {
--glow-mark-bloom: #39ff14;
--glow-mark-bloom-soft: #b8ff9a;
--glow-mark-bloom-deep: #39ff1499;
}
.glow-score-glyph > .glow-core line,
.glow-score-glyph > .glow-core circle {
fill: none;
stroke: #fffef8;
stroke-width: 3.5;
stroke-linecap: round;
}
.glow-score-glyph > .glow-core {
filter:
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 14px var(--glow-mark-bloom-deep));
animation: glow-mark-pulse 2.6s ease-in-out infinite;
}
.glow-score-num {
--glow-title-neon: #fff;
font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif;
font-weight: 200;
font-size: clamp(22px, 5.5vmin, 44px);
letter-spacing: 0.04em;
line-height: 1;
color: #fff;
-webkit-text-fill-color: #fff;
text-shadow:
-0.06em -0.06em 0.3em #fff,
0.06em 0.06em 0.3em #fff,
0 0 0.4em var(--glow-title-neon),
0 0 0.9em var(--glow-title-neon),
0 0 1.5em var(--glow-title-neon),
0 0 2.2em var(--glow-title-neon);
animation: glow-title-flicker 6.5s infinite alternate;
}
.glow-score-card.is-x .glow-score-num { --glow-title-neon: #ff3030; animation-delay: -0.8s; }
.glow-score-card.is-o .glow-score-num { --glow-title-neon: #39ff14; animation-delay: -2.2s; }
.glow-score-card.is-d .glow-score-num {
--glow-title-neon: #f0d27a;
font-size: clamp(20px, 5vmin, 40px);
animation-delay: -3.5s;
}
.glow-score-draw {
--glow-title-neon: #f0d27a;
font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif;
font-weight: 200;
font-size: clamp(12px, 2.6vmin, 18px);
letter-spacing: 0.16em;
line-height: 1;
color: #fff;
-webkit-text-fill-color: #fff;
text-shadow:
-0.05em -0.05em 0.25em #fff,
0.05em 0.05em 0.25em #fff,
0 0 0.35em var(--glow-title-neon),
0 0 0.75em var(--glow-title-neon),
0 0 1.2em var(--glow-title-neon);
animation: glow-title-flicker 7s infinite alternate;
animation-delay: -1.4s;
}
/* Floating cursor = exact board piece (same strokes + bloom vars), stacked for fade */
.glow-cursor {
position: fixed;
left: 0;
top: 0;
z-index: 9999;
pointer-events: none;
width: 64px;
height: 64px;
display: grid;
place-items: center;
overflow: visible;
will-change: transform;
background: transparent;
border: none;
box-shadow: none;
outline: none;
}
.glow-cursor[hidden] { display: none !important; }
.glow-cursor.is-x {
--glow-mark: #ff3333;
--glow-mark-bloom: #ff3030;
--glow-mark-bloom-soft: #ff9a9a;
--glow-mark-bloom-deep: #ff0000aa;
}
.glow-cursor.is-o {
--glow-mark: #5cff3a;
--glow-mark-bloom: #39ff14;
--glow-mark-bloom-soft: #b8ff9a;
--glow-mark-bloom-deep: #39ff1499;
}
.glow-cursor > .glow-core {
grid-area: 1 / 1;
width: 100%;
height: 100%;
display: block;
overflow: visible;
background: transparent;
opacity: 1;
transition: opacity 0.14s ease;
/* Match placed board piece bloom (no appear intro) */
filter:
brightness(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));
animation: glow-mark-pulse 2.4s ease-in-out infinite;
}
.glow-cursor > .glow-core.is-leaving,
.glow-cursor > .glow-core.is-entering {
animation: none;
filter:
brightness(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));
}
.glow-cursor > .glow-core.is-leaving {
opacity: 0;
pointer-events: none;
}
.glow-cursor > .glow-core.is-entering {
opacity: 0;
}
.glow-cursor > .glow-core line,
.glow-cursor > .glow-core circle {
fill: none;
stroke: #fffef8;
stroke-width: 3.5;
stroke-linecap: round;
}
/* Glowing system-style pointer (off-board) */
.glow-cursor-ptr {
position: fixed;
left: 0;
top: 0;
z-index: 9999;
pointer-events: none;
width: 28px;
height: 28px;
overflow: visible;
will-change: transform;
}
.glow-cursor-ptr[hidden] { display: none !important; }
.glow-cursor-ptr-svg {
display: block;
width: 28px;
height: 28px;
overflow: visible;
filter:
drop-shadow(0 0 1px #fff)
drop-shadow(0 0 4px #7ec8ff)
drop-shadow(0 0 10px #1a6cff)
drop-shadow(0 0 18px #1a6cffaa);
}
.glow-cursor-ptr-svg path {
fill: #eaf4ff;
stroke: #1a6cff;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
ux-head > .glow-actions {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4em;
}
html[data-o="t"] ux-head > .glow-actions {
flex-direction: row;
flex-wrap: wrap;
gap: 0.45em 0.65em;
}
.glow-btn {
appearance: none;
cursor: pointer;
border: 1px solid #00f2ff88;
border-radius: 6px;
padding: 0.35em 0.75em;
background: linear-gradient(180deg, #1a1030 0%, #0c0818 100%);
color: #e8fbff;
font: 700 11px/1.2 ui-sans-serif, system-ui, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow: 0 0 8px #00f2ff66;
box-shadow:
0 0 10px #00f2ff33,
inset 0 0 12px #bc13fe22;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.glow-btn:hover {
border-color: #00f2ff;
box-shadow:
0 0 16px #00f2ff55,
inset 0 0 14px #bc13fe33;
}
.glow-btn:active {
transform: scale(0.97);
}
/* Neon pill outline — clear center, lit rim + letters like titles */
.glow-btn.glow-btn-sign {
--glow-title-neon: var(--glow-pink, #ff2d55);
cursor: none;
position: relative;
border-radius: 999px;
border: 2px solid #fff;
padding: 0.55em 1.35em;
/* Beat base .glow-btn gradient + UA button chrome */
background: none !important;
background-color: transparent !important;
background-image: none !important;
color: #fff;
-webkit-text-fill-color: #fff;
font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif;
font-weight: 200;
font-size: clamp(13px, 2.8vmin, 20px);
letter-spacing: 0.18em;
text-transform: uppercase;
/* Same tube letter wash as titles */
text-shadow:
-0.05em -0.05em 0.28em #fff,
0.05em 0.05em 0.28em #fff,
0 0 0.35em var(--glow-title-neon),
0 0 0.75em var(--glow-title-neon),
0 0 1.25em var(--glow-title-neon),
0 0 1.85em var(--glow-title-neon);
/* Thin rim bloom only — wide soft shadows read as a filled plate */
box-shadow:
0 0 1px #fff,
0 0 3px color-mix(in srgb, var(--glow-title-neon) 80%, #fff),
0 0 8px var(--glow-title-neon),
0 0 14px color-mix(in srgb, var(--glow-title-neon) 45%, transparent);
animation: glow-title-flicker 5.5s infinite alternate;
animation-delay: -1.1s;
transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.glow-btn.glow-btn-sign:hover {
filter: brightness(1.12);
box-shadow:
0 0 2px #fff,
0 0 5px color-mix(in srgb, var(--glow-title-neon) 85%, #fff),
0 0 10px var(--glow-title-neon),
0 0 18px color-mix(in srgb, var(--glow-title-neon) 50%, transparent);
}
.glow-btn.glow-btn-sign:active {
transform: scale(0.97);
filter: brightness(0.92);
}
.glow-btn-ghost {
border-color: #a89bc466;
color: #c4b8e0;
text-shadow: none;
box-shadow: none;
background: transparent;
}
.glow-btn-ghost:hover {
border-color: #f0d27a88;
color: #f0d27a;
box-shadow: 0 0 10px #f0d27a33;
}
/* AI ↔ 2P mode switch — neon pill track */
.glow-mode {
display: inline-grid;
grid-template-columns: auto auto auto;
align-items: center;
gap: 0.35em;
margin-top: 0.35em;
user-select: none;
}
.glow-mode-opt {
appearance: none;
border: none;
background: transparent;
cursor: none;
padding: 0.15em 0.2em;
font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif;
font-weight: 200;
font-size: clamp(11px, 2.2vmin, 15px);
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff8;
-webkit-text-fill-color: #fff8;
text-shadow: none;
transition: color 0.15s ease, text-shadow 0.15s ease, -webkit-text-fill-color 0.15s ease;
}
.glow-mode-opt.is-on {
--glow-title-neon: #1a6cff;
color: #fff;
-webkit-text-fill-color: #fff;
text-shadow:
-0.05em -0.05em 0.25em #fff,
0.05em 0.05em 0.25em #fff,
0 0 0.35em var(--glow-title-neon),
0 0 0.75em var(--glow-title-neon),
0 0 1.2em var(--glow-title-neon);
}
.glow-mode.is-2p .glow-mode-opt[data-mode-opt="2p"].is-on {
--glow-title-neon: var(--glow-pink, #ff2d55);
}
.glow-mode.is-ai .glow-mode-opt[data-mode-opt="ai"].is-on {
--glow-title-neon: #1a6cff;
}
.glow-mode-track {
appearance: none;
cursor: none;
position: relative;
width: 2.6em;
height: 1.15em;
border-radius: 999px;
border: 1.5px solid color-mix(in srgb, #1a6cff 70%, #fff);
background: color-mix(in srgb, #0a0610 75%, transparent);
padding: 0;
box-shadow:
0 0 4px #1a6cff88,
0 0 10px #1a6cff44,
inset 0 0 8px #1a6cff22;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.glow-mode.is-2p .glow-mode-track {
border-color: color-mix(in srgb, var(--glow-pink, #ff2d55) 75%, #fff);
box-shadow:
0 0 4px #ff2d5588,
0 0 10px #ff2d5544,
inset 0 0 8px #ff2d5522;
}
.glow-mode-knob {
position: absolute;
top: 50%;
left: 0.12em;
width: 0.78em;
height: 0.78em;
border-radius: 50%;
transform: translateY(-50%);
background: #e8f0ff;
box-shadow:
0 0 2px #fff,
0 0 6px #1a6cff,
0 0 12px #1a6cff;
transition: left 0.18s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.glow-mode.is-2p .glow-mode-knob {
left: calc(100% - 0.9em);
background: #ffe0ea;
box-shadow:
0 0 2px #fff,
0 0 6px var(--glow-pink, #ff2d55),
0 0 12px var(--glow-pink, #ff2d55);
}
/* FPS as a small neon tube readout (reuses title flicker + mark bloom stack) */
.glow-fps {
--glow-title-neon: #f0d27a;
margin-top: 0.35em;
font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif;
font-weight: 200;
font-size: clamp(12px, 2.4vmin, 18px);
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
color: #fff;
-webkit-text-fill-color: #fff;
user-select: none;
text-shadow:
-0.06em -0.06em 0.3em #fff,
0.06em 0.06em 0.3em #fff,
0 0 0.4em var(--glow-title-neon),
0 0 0.85em var(--glow-title-neon),
0 0 1.4em var(--glow-title-neon),
0 0 2em var(--glow-title-neon);
animation: glow-title-flicker 7s infinite alternate;
animation-delay: -2.4s;
}
.glow-fps[data-fps-band="hi"] { --glow-title-neon: #39ff14; }
.glow-fps[data-fps-band="mid"] { --glow-title-neon: #f0d27a; }
.glow-fps[data-fps-band="lo"] { --glow-title-neon: #ff2d55; }
html[data-compact] .glow-fps {
font-size: 9px;
margin-top: 0.1em;
}
.glow-copy {
color: #7a6f94;
font: 500 10px/1.2 ui-monospace, Menlo, Consolas, monospace;
white-space: nowrap;
letter-spacing: 0.02em;
}
.glow-brand {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.22em;
padding-inline: 0.15em;
padding-bottom: env(safe-area-inset-bottom, 0px);
text-decoration: none;
cursor: none;
opacity: 0.92;
transition: opacity 0.15s ease, filter 0.15s ease;
}
html[data-o="t"] ux-head > .glow-turn .glow-brand {
padding-bottom: 0;
}
.glow-brand:hover {
opacity: 1;
filter: brightness(1.12) drop-shadow(0 0 8px #00f2ff66);
}
.glow-brand-logo {
display: block;
width: clamp(72px, 16vmin, 120px);
height: auto;
pointer-events: none;
}
ux-head > .glow-turn .glow-brand {
margin-top: 0.28em;
justify-self: center;
}
/* Wide: stack chrome cleanly; pin HUD + titles to the board column */
html[data-o="w"] ux-head > .glow-turn,
html[data-o="w"] ux-head > .glow-scores,
html[data-o="w"] ux-head > .glow-actions {
writing-mode: horizontal-tb;
}
html[data-o="w"] ux-head,
html[data-o="w"] ux-tail {
align-self: center;
height: min(var(--s, 100%), 100%);
max-height: 100%;
}
/* Safe-area + tighter shell (beats spine 1% pad; env() is 0 on desktop) */
html:has(ux-head) {
padding:
max(4px, env(safe-area-inset-top, 0px))
max(4px, env(safe-area-inset-right, 0px))
max(4px, env(safe-area-inset-bottom, 0px))
max(4px, env(safe-area-inset-left, 0px));
}
@media (max-aspect-ratio: 11/10) {
html:has(ux-head) {
padding:
max(2px, env(safe-area-inset-top, 0px))
max(2px, env(safe-area-inset-right, 0px))
max(2px, env(safe-area-inset-bottom, 0px))
max(2px, env(safe-area-inset-left, 0px));
}
}
html[data-o="t"] ux-head {
padding-top: max(0px, env(safe-area-inset-top, 0px));
}
html[data-o="t"] ux-tail {
padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}
html[data-o="w"] ux-head {
padding-left: max(0px, env(safe-area-inset-left, 0px));
}
html[data-o="w"] ux-tail {
padding-right: max(0px, env(safe-area-inset-right, 0px));
}
/* ── Board ── */
ux-body > ux-cell[c] {
position: relative;
/* Do NOT set width/height:100% — that defeats spine cqmin square */
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
background: transparent;
overflow: visible;
}
/* Neon grid — 12 independent tube segments (6V + 6H), each flickers alone */
ux-cell.glow-cell {
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;
}
ux-cell.glow-cell.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.
*/
ux-cell.glow-cell > .glow-core {
grid-area: 1 / 1;
width: 74%;
height: 74%;
display: block;
pointer-events: none;
user-select: none;
position: relative;
z-index: 2;
overflow: visible;
}
ux-cell.glow-cell > .glow-core line,
ux-cell.glow-cell > .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 */
ux-cell.glow-cell.filled::before {
content: none !important;
display: none !important;
}
/* Intro: opacity + bloom ramp together (no flat wall-only flash) */
@keyframes glow-mark-appear {
0% {
opacity: 0;
filter: brightness(0.6);
}
55% {
opacity: 0.75;
filter: brightness(0.9)
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));
}
100% {
opacity: 0.9;
filter: brightness(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));
}
}
@keyframes glow-mark-pulse {
0%, 100% {
opacity: 0.82;
filter: brightness(0.92)
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));
}
50% {
opacity: 1;
filter: brightness(1.22)
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));
}
}
ux-cell.glow-cell.glow-mark-x {
--glow-mark: #ff3333;
--glow-mark-bloom: #ff3030;
--glow-mark-bloom-soft: #ff9a9a;
--glow-mark-bloom-deep: #ff0000aa;
}
ux-cell.glow-cell.glow-mark-o {
--glow-mark: #5cff3a;
--glow-mark-bloom: #39ff14;
--glow-mark-bloom-soft: #b8ff9a;
--glow-mark-bloom-deep: #39ff1499;
}
ux-cell.glow-cell.filled > .glow-core {
/* Fade tube+bloom in ~0.7s, then desynced pulse (pulse delay includes intro) */
animation:
glow-mark-appear 0.7s ease-out both,
glow-mark-pulse var(--glow-pulse-dur, 2.5s) ease-in-out infinite;
animation-delay: 0s, calc(0.7s + var(--glow-pulse-delay, 0s));
}
/* Per-cell pulse pace (desynced; negative delay = phase offset) */
ux-cell.glow-cell[data-i="0"].filled > .glow-core { --glow-pulse-dur: 2.15s; --glow-pulse-delay: -0.4s; }
ux-cell.glow-cell[data-i="1"].filled > .glow-core { --glow-pulse-dur: 2.9s; --glow-pulse-delay: -1.1s; }
ux-cell.glow-cell[data-i="2"].filled > .glow-core { --glow-pulse-dur: 1.85s; --glow-pulse-delay: -0.2s; }
ux-cell.glow-cell[data-i="3"].filled > .glow-core { --glow-pulse-dur: 3.2s; --glow-pulse-delay: -1.6s; }
ux-cell.glow-cell[data-i="4"].filled > .glow-core { --glow-pulse-dur: 2.4s; --glow-pulse-delay: -0.75s; }
ux-cell.glow-cell[data-i="5"].filled > .glow-core { --glow-pulse-dur: 2.7s; --glow-pulse-delay: -2.0s; }
ux-cell.glow-cell[data-i="6"].filled > .glow-core { --glow-pulse-dur: 1.7s; --glow-pulse-delay: -0.95s; }
ux-cell.glow-cell[data-i="7"].filled > .glow-core { --glow-pulse-dur: 3.05s; --glow-pulse-delay: -1.35s; }
ux-cell.glow-cell[data-i="8"].filled > .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]) */
html[data-resizing] .glow-tube,
html[data-resizing] .glow-tube-cross,
html[data-resizing] ux-tail > ux-cell.glow-title,
html[data-resizing] ux-cell.glow-cell.filled > .glow-core,
html[data-resizing] .glow-turn-mark > .glow-core,
html[data-resizing] .glow-score-glyph > .glow-core,
html[data-resizing] .glow-cursor > .glow-core,
html[data-resizing] .glow-turn-label,
html[data-resizing] .glow-score-num,
html[data-resizing] .glow-score-draw,
html[data-resizing] .glow-fps,
html[data-resizing] .glow-btn.glow-btn-sign {
animation-play-state: paused !important;
}
html[data-resizing] ux-cell.glow-cell.filled > .glow-core,
html[data-resizing] .glow-turn-mark > .glow-core,
html[data-resizing] .glow-score-glyph > .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;
}
html[data-resizing] ux-tail > ux-cell.glow-title,
html[data-resizing] .glow-turn-label,
html[data-resizing] .glow-score-num,
html[data-resizing] .glow-score-draw {
text-shadow: 0 0 0.28em var(--glow-title-neon, #1a6cff);
}
html[data-resizing] .glow-fps {
opacity: 0.55;
}
/* While pointer is actively moving: pause expensive neon CSS (same idea as resize).
Resume ~100ms after last move (JS clears html[data-pointer-moving]). */
html[data-pointer-moving] .glow-tube,
html[data-pointer-moving] .glow-tube-cross,
html[data-pointer-moving] ux-tail > ux-cell.glow-title,
html[data-pointer-moving] ux-cell.glow-cell.filled > .glow-core,
html[data-pointer-moving] .glow-turn-mark > .glow-core,
html[data-pointer-moving] .glow-score-glyph > .glow-core,
html[data-pointer-moving] .glow-cursor > .glow-core,
html[data-pointer-moving] .glow-turn-label,
html[data-pointer-moving] .glow-score-num,
html[data-pointer-moving] .glow-score-draw,
html[data-pointer-moving] .glow-fps,
html[data-pointer-moving] .glow-btn.glow-btn-sign {
animation-play-state: paused !important;
}
html[data-pointer-moving] ux-cell.glow-cell.filled > .glow-core,
html[data-pointer-moving] .glow-turn-mark > .glow-core,
html[data-pointer-moving] .glow-score-glyph > .glow-core,
html[data-pointer-moving] .glow-cursor > .glow-core,
html[data-pointer-moving] .glow-cursor-ptr-svg {
filter: drop-shadow(0 0 4px var(--glow-mark-bloom, #7ec8ff)) !important;
}
html[data-pointer-moving] ux-tail > ux-cell.glow-title,
html[data-pointer-moving] .glow-turn-label,
html[data-pointer-moving] .glow-score-num,
html[data-pointer-moving] .glow-score-draw {
text-shadow: 0 0 0.28em var(--glow-title-neon, #1a6cff);
}
html[data-pointer-moving] .glow-fps {
opacity: 0.55;
}
/* Hold ~ debug paths (spine sets html[data-d]) */
html[data-d] ux-cell:not(.glow-cell) {
outline: 1px solid #8888;
}
html[data-d] ux-cell[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;
}
ux-tail > ux-cell.glow-title,
ux-head > .glow-status[data-kind="win"] {
animation: none;
opacity: 1;
}
/* Instant mark appear (skip ~200ms fade); keep soft intensity pulse */
ux-cell.glow-cell.filled > .glow-core {
animation: glow-mark-pulse 2.5s ease-in-out infinite; animation-delay: 0s;
}
}
/* Shared-budget compact: keep HUD inside strip when viewport is tight */
html[data-compact] .glow-brand-logo {
width: clamp(64px, 14vmin, 96px);
}
html[data-compact] .glow-copy {
display: none;
}
html[data-compact] ux-head > .glow-status {
font-size: 11px;
}
html[data-compact] ux-head > .glow-scores {
gap: 0.25em 0.4em;
font-size: 10px;
}
html[data-compact] .glow-score {
padding: 0.12em 0.3em;
}
html[data-compact] .glow-btn {
padding: 0.25em 0.5em;
font-size: 10px;
}
html[data-o="t"][data-compact] ux-head > .glow-actions {
gap: 0.3em 0.4em;
}
html[data-compact] ux-tail > ux-cell.glow-title {
font-weight: 200;
font-style: normal;
letter-spacing: 0.04em;
}