.tt-games {
  --game-ink: #2c2541;
  --game-accent: #684283;
  color: var(--game-ink);
}
.tt-game-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 16px);
  margin: 20px 0;
}
.tt-game-switch button {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 4px;
  min-height: 9rem;
  padding: clamp(10px, 3vw, 22px);
  border: 2px solid transparent;
  border-radius: 18px;
  text-align: left;
  color: var(--game-ink);
  background: linear-gradient(135deg, #e4dcfc, #f0ebfd 55%, #f7e3ec);
}
.tt-game-switch button[data-game="three"] {
  background: linear-gradient(135deg, #fce1cf, #fff0d8 62%, #fff6ee);
}
.tt-game-switch button[aria-pressed="true"],
.tt-game-switch button:hover { border-color: var(--game-accent); }
.tt-game-switch strong { font-size: clamp(1rem, 3vw, 1.35rem); line-height: 1.2; }
.tt-game-switch small { color: #4e4264; font-size: .8rem; line-height: 1.4; }
.tt-game-motif {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  transform: rotate(-9deg);
}
.tt-game-motif i { display: grid; place-items: center; width: 19px; height: 19px; font-style: normal; }
.tt-motif-blocks { grid-template-columns: repeat(3, 19px); }
.tt-motif-blocks i { background: #8d4ab0; border-radius: 4px; }
.tt-motif-blocks i:first-child { grid-column: 2; background: #ab6dc6; }
.tt-motif-blocks i:nth-child(2) { grid-column: 1; }
.tt-motif-three { grid-template-columns: repeat(2, 19px); }
.tt-motif-three i { color: #9b3e58; background: #fff9ed; border-radius: 4px; line-height: 1; }
.tt-motif-three i:nth-child(even) { color: #715397; }
.tt-game-panel { padding: clamp(12px, 3vw, 24px); border: 1px solid #e6deec; border-radius: 18px; background: #fcfaff; }
.tt-game-panel h2 { margin: 0; }
.tt-game-panel p { margin: 8px 0 12px; }
.tt-block-layout { display: grid; gap: 16px; }
.tt-block-board {
  display: block;
  width: min(100%, 10rem);
  height: auto;
  margin-inline: auto;
  border: 1px solid #dfd3e5;
  border-radius: 10px;
}
.tt-game-side { min-width: 0; }
.tt-game-score strong { font-variant-numeric: tabular-nums; }
.tt-game-status { color: #4e4264; }
.tt-game-actions, .tt-block-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tt-block-controls button, .tt-game-actions button { min-height: 44px; }
.tt-block-controls button { min-width: 44px; padding: 8px; touch-action: manipulation; }
.tt-block-controls button:not(:disabled) { color: var(--game-ink); border-color: #ded3e7; background: #ede6f5; }
#tt-block-keys { color: #4e4264; font-size: .82rem; }
.tt-three-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 15rem);
  margin: 16px 0;
}
.tt-three-board button {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #e1d5eb;
  color: #963958;
  background: #f5edf9;
  font-size: 1.6rem;
}
.tt-three-board button[data-mark="O"] { color: #4b518b; }
.tt-three-board button[aria-disabled="true"] { cursor: default; }
@media (min-width: 560px) {
  .tt-block-layout { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .tt-block-board { width: 100%; }
}