.page {
  --tt-paper: #FBFDFF;
  --tt-line: #BCD3EA;
  --tt-margin: #E8A3A0;
  --tt-blue: #1F4FC1;
  --tt-blue-soft: rgba(31, 79, 193, 0.14);
  --tt-red: #C8322B;
  --tt-red-soft: rgba(200, 50, 43, 0.14);
  --piece-light-fill: var(--tt-blue);
  --piece-light-ring: #173C93;
  --piece-dark-fill: var(--tt-red);
  --piece-dark-ring: #9A2620;
}

.tt-wrap { display: flex; justify-content: center; }

/* The exercise-book page: pale ruled squares and the red margin rule down the left. */
.tt-sheet {
  position: relative;
  width: 100%;
  max-width: clamp(300px, calc(100vh - 230px), 640px);
  box-sizing: border-box;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 14px);
  background: var(--tt-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  user-select: none;
  -webkit-user-select: none;
}
.tt-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--space-3) * 0.5 + 4px);
  width: 2px;
  background: var(--tt-margin);
}

.tt {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  aspect-ratio: 1;
}
.tt-paper, .tt-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.tt-paper { z-index: 0; }
.tt-paper path { fill: none; stroke: var(--tt-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.tt-ink { z-index: 2; }

.tt-pt {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
}
.tt-pt::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  transition: background 0.12s var(--ease);
}
.tt--locked .tt-pt, .tt-pt[aria-disabled="true"] { cursor: default; }
/* Hover preview only where hover is real: touch screens leave :hover stuck on the last tap. */
@media (hover: hover) {
  .tt--turn-light:not(.tt--locked) .tt-pt[aria-disabled="false"]:hover::after { background: var(--tt-blue-soft); }
  .tt--turn-dark:not(.tt--locked) .tt-pt[aria-disabled="false"]:hover::after { background: var(--tt-red-soft); }
}

/* Blue is a filled dot, red a pen ring: the two sides differ by shape as well as colour. */
.tt-pt--light::after { background: var(--tt-blue); }
.tt-pt--dark::after { background: radial-gradient(circle, transparent 40%, var(--tt-red) 44%); }
.tt-pt.captured::after { opacity: 0.38; }
.tt-pt.last::after { box-shadow: 0 0 0 2px var(--tt-paper), 0 0 0 3.5px var(--color-text); }
.tt-pt.place::after { animation: rh-pop 0.24s var(--ease) both; }
.tt--turn-light .tt-pt.aim::after { background: var(--tt-blue); opacity: 0.4; inset: 18%; }
.tt--turn-dark .tt-pt.aim::after { background: radial-gradient(circle, transparent 40%, var(--tt-red) 44%); opacity: 0.5; inset: 18%; }
.tt-pt:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -1px; z-index: 3; }

.tt-region { stroke-width: 0.1; stroke-linejoin: round; stroke-linecap: round; fill-opacity: 0.12; }
.tt-region--light { stroke: var(--tt-blue); fill: var(--tt-blue); }
.tt-region--dark { stroke: var(--tt-red); fill: var(--tt-red); }
.tt-region.draw { stroke-dasharray: 1; animation: tt-draw 0.6s var(--ease) both; }
@keyframes tt-draw {
  from { stroke-dashoffset: 1; fill-opacity: 0; }
  70% { fill-opacity: 0; }
  to { stroke-dashoffset: 0; fill-opacity: 0.12; }
}

.tt-size { margin-top: var(--space-2); }

@media (max-width: 420px) {
  .tt-sheet { padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 10px); border-radius: var(--radius-md); }
  .tt-sheet::before { left: calc(var(--space-2) * 0.5 + 3px); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-pt.place::after, .tt-region.draw { animation: none; }
}