/* =============================================================
   GAME: Ultimate Tic-Tac-Toe
   ============================================================= */
.board-ultimatettt {
  --cell: min(calc((100vw - 122px) / 9), 50px);
  --ut-glow: #ff6a2b;
  display: grid; grid-template-columns: repeat(3, auto); gap: 7px;
  padding: 8px; border-radius: 18px; background: #24100a;
  box-shadow: 0 0 0 2px var(--ut-glow), 0 0 26px rgba(255, 106, 43, .38), inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.ut-sub {
  position: relative; display: grid; grid-template-columns: repeat(3, var(--cell)); grid-auto-rows: var(--cell); gap: 3px;
  padding: 4px; border-radius: 12px; background: #140816;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .22);
  transition: box-shadow .2s, background .2s, opacity .2s;
}
.ut-row { display: contents; }
.ut-cell {
  position: relative; border: 0; padding: 0; border-radius: 7px; cursor: default;
  background: radial-gradient(120% 90% at 50% 0%, #2a1638 0%, #1a0d26 60%, #120819 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 90, .1), inset 0 3px 7px rgba(0, 0, 0, .45);
  display: grid; place-items: center; transition: background .15s, box-shadow .15s;
}
.ut-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 2; }
.ut-cell svg { width: 84%; height: 84%; overflow: visible; }

/* boards you may play in glow in the colour of the player to move */
.ut-sub.active { background: #2a1209; box-shadow: inset 0 0 0 2px var(--ut-act), 0 0 16px color-mix(in srgb, var(--ut-act) 45%, transparent); }
.board-ultimatettt[data-turn="1"] { --ut-act: var(--p1); }
.board-ultimatettt[data-turn="2"] { --ut-act: var(--p2); }
.board-ultimatettt.ut-wait .ut-sub.active { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ut-act) 55%, transparent); }
.ut-cell.can { cursor: pointer; }
.ut-cell.can:hover { background: #3a1d2a; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ut-act) 60%, transparent); }
.ut-cell.can:hover::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: var(--ut-act); opacity: .35; }
.ut-cell.last { box-shadow: inset 0 0 0 2px var(--t-gold), 0 0 10px rgba(255, 210, 63, .45); }

/* neon marks (same pen-drawn look as Tic-Tac-Toe) */
.ut-stroke, .ut-core { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: ut-draw .24s cubic-bezier(.4, 0, .2, 1) both; }
.ut-stroke { stroke-width: 13; }
.ut-core { stroke-width: 4.5; }
.ut-stroke.two, .ut-core.two { animation-delay: .14s; }
@keyframes ut-draw { from { stroke-dashoffset: 100; } }
.p1 > svg .ut-stroke, .ut-chip.p1 .ut-stroke { stroke: var(--p1); }
.p2 > svg .ut-stroke, .ut-chip.p2 .ut-stroke { stroke: var(--p2); }
.p1 > svg .ut-core { stroke: #ffe1f1; }
.p2 > svg .ut-core { stroke: #e3fdff; }
.ut-cell.p1 svg { filter: drop-shadow(0 0 2px rgba(255, 79, 176, .9)) drop-shadow(0 0 6px rgba(255, 79, 176, .5)); }
.ut-cell.p2 svg { filter: drop-shadow(0 0 2px rgba(61, 245, 255, .9)) drop-shadow(0 0 6px rgba(61, 245, 255, .45)); }

/* a won small board: cells fade, a big mark covers it */
.ut-big { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; border-radius: 12px; }
.ut-big svg { width: 92%; height: 92%; overflow: visible; }
.ut-big.p1 svg { filter: drop-shadow(0 0 5px rgba(255, 79, 176, .95)) drop-shadow(0 0 16px rgba(255, 79, 176, .55)); }
.ut-big.p2 svg { filter: drop-shadow(0 0 5px rgba(61, 245, 255, .95)) drop-shadow(0 0 16px rgba(61, 245, 255, .5)); }
.ut-big .ut-stroke { stroke-width: 10; animation-duration: .4s; }
.ut-big .ut-core { stroke-width: 3.5; animation-duration: .4s; }
.ut-sub.won { background: #170a10; }
.ut-sub.won.w1 { box-shadow: inset 0 0 0 2px rgba(255, 79, 176, .55); }
.ut-sub.won.w2 { box-shadow: inset 0 0 0 2px rgba(61, 245, 255, .5); }
.ut-sub.won .ut-cell { background: #170b1d; box-shadow: none; }
.ut-sub.won .ut-cell svg { opacity: .28; filter: none; }
.ut-sub.won .ut-cell.inline svg { opacity: .55; }
.ut-sub.full .ut-cell svg { opacity: .45; }
.ut-sub.full { background: #110a14; }
.ut-sub.line { background: radial-gradient(circle, #3a2a08, #1d1406 80%); box-shadow: inset 0 0 0 2px var(--t-gold), 0 0 18px rgba(255, 210, 63, .5); }
.ut-sub.dim { opacity: .55; }

/* strike over three won boards */
.ut-strike { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; overflow: visible; z-index: 3; }
.ut-strike line { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ut-strike .45s cubic-bezier(.5, 0, .2, 1) .35s forwards; }
.ut-strike-glow { stroke-width: .11; opacity: .9; }
.ut-strike-core { stroke: #fff; stroke-width: .035; }
.ut-strike.p1 .ut-strike-glow { stroke: var(--p1); }
.ut-strike.p2 .ut-strike-glow { stroke: var(--p2); }
.ut-strike.p1 { filter: drop-shadow(0 0 6px var(--p1)); }
.ut-strike.p2 { filter: drop-shadow(0 0 6px var(--p2)); }
@keyframes ut-strike { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ut-strike line, .ut-stroke, .ut-core { stroke-dashoffset: 0; } }

/* small mark in the status bar */
.ut-chip { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.ut-chip svg { width: 100%; height: 100%; overflow: visible; }
.ut-chip .ut-stroke { stroke-width: 14; animation: none; }
.ut-chip .ut-core { display: none; }
@media (max-width: 420px) {
  .board-ultimatettt { --cell: min(calc((100vw - 98px) / 9), 50px); gap: 5px; padding: 6px; }
  .ut-sub { gap: 2px; padding: 3px; border-radius: 9px; }
  .ut-cell { border-radius: 5px; }
  .ut-strike { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
}