/* =============================================================
   GAME: 3D Tic-Tac-Toe (4×4×4)
   ============================================================= */
.board-ttt3d { --t3-glow: #ffcf33; width: min(100%, 470px); }
.board-ttt3d[data-view="flat"] { width: min(100%, 520px); }
.t3-svg {
  display: block; width: 100%; height: auto; border-radius: 18px;
  background: radial-gradient(120% 80% at 50% 0%, #2c2108 0%, #150d1f 55%, #0d0817 100%);
  box-shadow: 0 0 0 2px var(--t3-glow), 0 0 26px rgba(255, 207, 51, .33);
}
.t3-plate { fill: rgba(255, 207, 51, .05); stroke: var(--t3-glow); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255, 207, 51, .55)); }
.t3-pillar { stroke: rgba(255, 207, 51, .38); stroke-width: 1.5; stroke-dasharray: 4 5; }
.t3-label { fill: #ffe08a; font: 700 13px var(--font-head); letter-spacing: .04em; opacity: .85; }

.t3-cell { outline: none; cursor: default; -webkit-tap-highlight-color: transparent; }
.t3-face { fill: rgba(22, 12, 34, .92); stroke: rgba(255, 207, 51, .3); stroke-width: 1; stroke-linejoin: round; transition: fill .15s; }
.t3-cell.can { cursor: pointer; }
.t3-cell.can:hover .t3-face { fill: #3a2a12; }
.t3-cell.echo .t3-face { fill: #2a2140; }
.board-ttt3d[data-turn="1"] .t3-cell.can.echo .t3-face { fill: rgba(255, 79, 176, .16); }
.board-ttt3d[data-turn="2"] .t3-cell.can.echo .t3-face { fill: rgba(61, 245, 255, .14); }
.t3-cell:focus-visible .t3-face { stroke: var(--focus); stroke-width: 3; }
.t3-cell.last .t3-face { fill: #3b2d0c; stroke: var(--t-gold); stroke-width: 2; }
.t3-cell.win .t3-face { fill: #4a3a0a; stroke: var(--t-gold); stroke-width: 2.5; animation: t3-pulse .8s ease-in-out .4s infinite alternate; }
.t3-cell.dim .t3-mark { opacity: .35; }
@keyframes t3-pulse { to { fill: #6a520c; } }

/* marks: drawn in the cell's own (slanted) plane, strokes kept even */
.t3-mark { pointer-events: none; }
.t3-mark .t3-glow, .t3-mark .t3-core { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.t3-mark .t3-glow { stroke-width: 7; }
.t3-mark .t3-core { stroke-width: 2.2; }
.p1 .t3-glow { stroke: var(--p1); }
.p2 .t3-glow { stroke: var(--p2); }
.p1 .t3-core { stroke: #ffe1f1; }
.p2 .t3-core { stroke: #e3fdff; }
.t3-cell.p1 .t3-mark { filter: drop-shadow(0 0 3px rgba(255, 79, 176, .9)); }
.t3-cell.p2 .t3-mark { filter: drop-shadow(0 0 3px rgba(61, 245, 255, .9)); }
.t3-cell.last .t3-mark { animation: t3-in .3s ease-out; }
@keyframes t3-in { from { opacity: 0; } }
.board-ttt3d[data-view="flat"] .t3-mark .t3-glow { stroke-width: 8; }
.board-ttt3d[data-view="flat"] .t3-mark .t3-core { stroke-width: 2.6; }

/* the winning line through the cube */
.t3-strike { pointer-events: none; }
.t3-strike line { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: t3-strike .5s cubic-bezier(.5, 0, .2, 1) .25s forwards; }
.t3-strike-glow { stroke-width: 9; opacity: .85; }
.t3-strike-core { stroke: #fff; stroke-width: 3; }
.t3-strike.p1 .t3-strike-glow { stroke: var(--p1); }
.t3-strike.p2 .t3-strike-glow { stroke: var(--p2); }
.t3-strike.p1 { filter: drop-shadow(0 0 6px var(--p1)); }
.t3-strike.p2 { filter: drop-shadow(0 0 6px var(--p2)); }
@keyframes t3-strike { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .t3-strike line { stroke-dashoffset: 0; } }

/* small mark in the status bar */
.t3-chip { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.t3-chip svg { width: 100%; height: 100%; overflow: visible; }
.t3-chip path, .t3-chip circle { fill: none; stroke-width: .16; stroke-linecap: round; }
.t3-chip.p1 path { stroke: var(--p1); filter: drop-shadow(0 0 3px var(--p1)); }
.t3-chip.p2 circle { stroke: var(--p2); filter: drop-shadow(0 0 3px var(--p2)); }