/* TAKXO visual rollback: restore the 3.2.1 piece treatment.
   Mechanics, AI, networking and current delivery infrastructure remain unchanged.
   Publisher compatibility marker only: clip-path:none!important */

/* 3.2.1: a single piece reads as one clean disc. */
.cell[data-height="1"] .token{
  transform:translate(-50%,-50%);
}
.cell[data-height="1"] .token-face{
  box-shadow:
    inset 0 1px 0 #fff2,
    inset 0 -1px 0 #0003,
    0 2px 0 #090e13,
    0 5px 8px #0004;
}

/* 3.2.1 baseline for actual stacks. This is intentionally the state
   before the later crescent/full-disc redesign experiments. */
.cell[data-height="3"]:not(.locked) .token{
  transform:translate(-50%,calc(-50% - var(--layer,0)*18%));
}
.cell[data-height="3"]:not(.locked) .token.buried .token-face{
  box-shadow:
    inset 0 1px 0 #ffffff12,
    0 3px 0 #090e13,
    0 5px 0 currentColor,
    0 7px 7px #0004;
}

/* Match the 3.2.1 home/demo single-piece depth. */
.demo-cell:not(:has(.demo-token:nth-child(2))) .demo-token{
  box-shadow:0 2px 0 #0b1013,0 5px 8px #0005;
}

/* Two physical discs: one full face and one solid depth per token.
   The upper disc sits exactly one disc-depth above the lower disc.
   Scope excludes singles, full locks and the Four High three-piece stack. */
.cell[data-height="2"]:not(.locked) .token{
  --disc-depth:clamp(4px,1.6vw,10px);
  --disc-side:#87463f;
  height:52%;
  top:47%;
  transform:translate(-50%,calc(-50% - var(--layer,0)*var(--disc-depth)));
}
.cell[data-height="2"]:not(.locked) .token.o{
  --disc-side:#286b7b;
}
.cell[data-height="2"]:not(.locked) .token .token-face{
  box-shadow:inset 0 1px 0 #fff2,0 var(--disc-depth) 0 var(--disc-side);
}

/* The covered disc is shaded, not split into artificial rim layers. */
.cell[data-height="2"]:not(.locked) .token.buried{
  --disc-side:#633b37;
}
.cell[data-height="2"]:not(.locked) .token.buried.o{
  --disc-side:#20505e;
}
.cell[data-height="2"]:not(.locked) .token.buried .token-face{
  box-shadow:inset 0 1px 0 #ffffff12,0 var(--disc-depth) 0 var(--disc-side),0 calc(var(--disc-depth) + 4px) 8px #0004;
}

/* Display preference only; retain labels for assistive technology and
   leave ownership, locks, win lines and interaction states untouched. */
html.clean-board #board .coordinate{
  visibility:hidden;
}
html.clean-board #board .cell.legal::after{
  display:none;
}

/* Height is game state, even with Clean board enabled. */
#board .cell .pips{height:12px;bottom:4px;gap:3px;align-items:center;color:#f4f5f5}
#board .height-count{font-size:10px;line-height:12px;font-weight:650;font-variant-numeric:tabular-nums;margin-right:2px}
#board .pips i{width:5px;height:4px;background:#697a84;border-radius:1px}
#board .pips i.filled{background:#f4f5f5;opacity:1}
.tempo-lesson{margin:12px 0;padding:14px 16px;border:1px solid #aabf6970;border-radius:13px;background:#aabf690b}
.tempo-lesson strong{font-size:12px;color:#d6e88a}
.tempo-lesson p{font-size:12px;line-height:1.6;color:#d5dfe2;margin:6px 0}
.tempo-lesson button{padding:7px 0;font-size:12px;color:#d6e88a}
.aids-note{text-align:center;font-size:11px;line-height:1.5;color:var(--muted);margin-top:8px}
@media(max-width:400px){#board .height-count{font-size:9px}#board .pips i{width:4px}#board .cell .pips{gap:2px}}