/* ????????? */
.tm-arcade {
  padding: 12px 12px 28px;
  max-width: 720px;
  margin: 0 auto;
}
.tm-arcade-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.tm-arcade-nav--sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 0 12px;
  padding: 8px 4px;
  background: color-mix(in srgb, var(--card-bg, #fff) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--text, #0f172a) 10%, transparent);
}
.tm-arcade-nav--sticky .tm-arcade-back {
  font-weight: 800;
  min-height: 40px;
  padding: 0.4rem 0.75rem;
}
.tm-arcade-exitbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 1.25rem 0 0.25rem;
  padding: 0.85rem 0.5rem 0.25rem;
  border-top: 1px dashed color-mix(in srgb, var(--text, #0f172a) 14%, transparent);
}
.tm-arcade-exitbar .tm-arcade-back {
  font-weight: 800;
  min-width: min(100%, 220px);
  min-height: 44px;
}
.tm-arcade-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
}
.tm-arcade-lead {
  margin: 0 0 14px;
  color: var(--muted, #5b6b7c);
  font-size: 0.92rem;
  line-height: 1.45;
}
.tm-arcade-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.tm-arcade-status {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.95rem;
}
.tm-arcade-status.is-win { color: #1f6b4f; }
.tm-arcade-status.is-lose { color: #b45309; }
.tm-arcade-status.is-draw { color: #64748b; }

.tm-arcade-ai-rival {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 6px 12px;
  border: 1.5px solid var(--border-soft, #cbbba8);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-bg, #fff) 80%, var(--color-brand, #1f5a85));
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main, #2c221e);
}
.tm-arcade-ai-rival__vs {
  opacity: 0.55;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tm-a1b2-log--ai {
  opacity: 0.85;
  border-left: 2px solid var(--color-brand, #1f5a85);
  padding-left: 8px;
}

.tm-arcade-board-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border, #d6d3d1) 80%, transparent);
  background: color-mix(in srgb, var(--card-bg, #fff) 92%, #e8eef4);
}

/* ??? */
.tm-gomoku {
  display: grid;
  gap: 0;
  width: max-content;
  margin: 8px auto;
  background: #d4a574;
  padding: 8px;
  border-radius: 8px;
}
.tm-gomoku-cell {
  width: 28px;
  height: 28px;
  border: none;
  padding: 0;
  background:
    linear-gradient(#5b4636, #5b4636) center/1px 100% no-repeat,
    linear-gradient(#5b4636, #5b4636) center/100% 1px no-repeat,
    transparent;
  cursor: pointer;
  position: relative;
}
.tm-gomoku-cell:disabled { cursor: default; }
.tm-gomoku-cell::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  box-shadow: none;
}
.tm-gomoku-cell.is-b::after {
  background: radial-gradient(circle at 35% 30%, #555, #111 70%);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.tm-gomoku-cell.is-w::after {
  background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8 70%);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.tm-gomoku-cell.is-last::after {
  outline: 2px solid #c2410c;
  outline-offset: 0;
}

/* ??? */
.tm-c4 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: min(100%, 420px);
  margin: 8px auto;
  padding: 12px;
  background: #1d4ed8;
  border-radius: 14px;
}
.tm-c4-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: #0f172a;
  cursor: pointer;
  padding: 0;
}
.tm-c4-cell.is-r { background: radial-gradient(circle at 35% 30%, #fca5a5, #dc2626); }
.tm-c4-cell.is-y { background: radial-gradient(circle at 35% 30%, #fde68a, #eab308); }
.tm-c4-cell:disabled { cursor: default; }

/* ??? */
.tm-chess {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(100%, 440px);
  margin: 8px auto;
  border: 2px solid #3f3f46;
  border-radius: 8px;
  overflow: hidden;
}
.tm-chess-sq {
  aspect-ratio: 1;
  border: none;
  padding: 0;
  font-size: clamp(0.95rem, 3.8vw, 1.45rem);
  font-weight: 800;
  font-family: ui-monospace, Consolas, "Noto Sans Mono", monospace;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #18181b;
}
.tm-chess-sq.is-black-piece { color: #0f172a; text-shadow: 0 0 1px #fff; }
.tm-chess-sq.is-white-piece { color: #fafafa; text-shadow: 0 1px 0 #27272a; }
.tm-chess-sq.light { background: #f0d9b5; }
.tm-chess-sq.dark { background: #b58863; }
.tm-chess-sq.is-sel { outline: 3px solid #2563eb inset; }
.tm-chess-sq.is-move { box-shadow: inset 0 0 0 3px rgba(34, 197, 94, 0.7); }
.tm-chess-sq.is-check { background: #f87171 !important; }
.tm-chess-sq:disabled { cursor: default; }

/* 1A2B */
.tm-a1b2-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.tm-a1b2-input {
  font: inherit;
  font-size: 1.25rem;
  letter-spacing: 0.35em;
  font-weight: 800;
  width: 8.5rem;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #d6d3d1);
  text-transform: uppercase;
}
.tm-a1b2-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.tm-a1b2-log li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg, #fff) 88%, #e2e8f0);
  border: 1px solid color-mix(in srgb, var(--border, #d6d3d1) 70%, transparent);
  font-variant-numeric: tabular-nums;
}
.tm-a1b2-log .code {
  font-weight: 800;
  letter-spacing: 0.2em;
}
.tm-a1b2-log .tm-a1b2-who {
  display: inline-block;
  min-width: 1.75rem;
  margin-right: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
}
.tm-a1b2-log .hint { color: #1d4ed8; font-weight: 700; }

/* hub covers */
.tm-card-cover--a1b2 {
  background:
    radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.35), transparent 45%),
    linear-gradient(145deg, #0f172a, #1e3a5f 55%, #312e81);
}
.tm-card-cover--gomoku {
  background:
    radial-gradient(circle at 70% 20%, rgba(212, 165, 116, 0.5), transparent 40%),
    linear-gradient(160deg, #5b4636, #2a2118 60%, #1a1510);
}
.tm-card-cover--chess {
  background:
    repeating-conic-gradient(#3f3f46 0% 25%, #e4e4e7 0% 50%) 0 0 / 28% 28%,
    linear-gradient(160deg, #18181b, #27272a);
}
.tm-card-cover--connect4 {
  background:
    radial-gradient(circle at 30% 40%, #dc2626 0 12%, transparent 13%),
    radial-gradient(circle at 70% 55%, #eab308 0 12%, transparent 13%),
    linear-gradient(160deg, #1e3a8a, #1d4ed8 60%, #0f172a);
}
.tm-card-cover--a1b2 .tm-card-cover__label,
.tm-card-cover--gomoku .tm-card-cover__label,
.tm-card-cover--chess .tm-card-cover__label,
.tm-card-cover--connect4 .tm-card-cover__label {
  color: #f8fafc;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.tm-card-cover--ttt {
  background: linear-gradient(145deg, #0f766e, #115e59 50%, #134e4a);
}
.tm-card-cover--othello {
  background:
    radial-gradient(circle at 35% 40%, #111 0 14%, transparent 15%),
    radial-gradient(circle at 65% 55%, #f8fafc 0 14%, transparent 15%),
    linear-gradient(160deg, #14532d, #052e16);
}
.tm-card-cover--mines {
  background: linear-gradient(160deg, #44403c, #1c1917 60%, #78716c);
}
.tm-card-cover--sudoku {
  background: linear-gradient(160deg, #1e3a8a, #312e81 55%, #0f172a);
}
.tm-card-cover--memory {
  background: linear-gradient(145deg, #9d174d, #831843 50%, #4c0519);
}
.tm-card-cover--g2048 {
  background: linear-gradient(145deg, #f59e0b, #d97706 50%, #92400e);
}
.tm-card-cover--lights {
  background: linear-gradient(145deg, #fbbf24, #1e293b 45%, #020617);
}
.tm-card-cover--hanoi {
  background: linear-gradient(160deg, #7c2d12, #431407 55%, #1c1917);
}
.tm-card-cover--snake {
  background: linear-gradient(145deg, #22c55e, #15803d 50%, #14532d);
}
.tm-card-cover--reaction {
  background: linear-gradient(145deg, #ef4444, #b91c1c 50%, #450a0a);
}
.tm-card-cover--ttt .tm-card-cover__label,
.tm-card-cover--othello .tm-card-cover__label,
.tm-card-cover--mines .tm-card-cover__label,
.tm-card-cover--sudoku .tm-card-cover__label,
.tm-card-cover--memory .tm-card-cover__label,
.tm-card-cover--g2048 .tm-card-cover__label,
.tm-card-cover--lights .tm-card-cover__label,
.tm-card-cover--hanoi .tm-card-cover__label,
.tm-card-cover--snake .tm-card-cover__label,
.tm-card-cover--reaction .tm-card-cover__label {
  color: #f8fafc;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.tm-arcade-meta {
  margin: 0 0 10px;
  color: var(--muted, #64748b);
  font-size: 0.88rem;
  font-weight: 700;
}

.tm-ttt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(100%, 280px);
  margin: 0 auto;
}
.tm-ttt-cell {
  aspect-ratio: 1;
  border: 2px solid #0f766e;
  border-radius: 12px;
  background: #ecfdf5;
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  color: #115e59;
}
.tm-ttt-cell:disabled { opacity: 0.85; cursor: default; }

.tm-oth {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: min(100%, 400px);
  margin: 0 auto;
  padding: 8px;
  background: #166534;
  border-radius: 12px;
}
.tm-oth-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.2);
  cursor: pointer;
  padding: 0;
}
.tm-oth-cell.is-b { background: radial-gradient(circle at 35% 30%, #444, #111); }
.tm-oth-cell.is-w { background: radial-gradient(circle at 35% 30%, #fff, #d4d4d4); }
.tm-oth-cell.is-legal { box-shadow: inset 0 0 0 2px rgba(250, 250, 250, 0.55); }
.tm-oth-cell:disabled { cursor: default; }

.tm-mine {
  display: grid;
  gap: 3px;
  width: min(100%, 420px);
  margin: 0 auto;
}
.tm-mine-cell {
  aspect-ratio: 1;
  border: 1px solid #a8a29e;
  border-radius: 4px;
  background: #d6d3d1;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}
.tm-mine-cell.is-open { background: #f5f5f4; }
.tm-mine-cell.is-flag { background: #fde68a; color: #92400e; }
.tm-mine-cell.is-boom { background: #fecaca; color: #991b1b; }
.tm-mine-cell.n1 { color: #2563eb; }
.tm-mine-cell.n2 { color: #16a34a; }
.tm-mine-cell.n3 { color: #dc2626; }
.tm-mine-cell.n4 { color: #7c3aed; }
.tm-mine-cell.n5 { color: #b45309; }

.tm-sudo {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: min(100%, 360px);
  margin: 0 auto 12px;
  border: 2px solid #1e3a8a;
}
.tm-sudo-cell {
  aspect-ratio: 1;
  border: 1px solid #93c5fd;
  background: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
}
.tm-sudo-cell.thick-r { border-right-width: 2px; border-right-color: #1e3a8a; }
.tm-sudo-cell.thick-b { border-bottom-width: 2px; border-bottom-color: #1e3a8a; }
.tm-sudo-cell.is-fixed { background: #e2e8f0; cursor: default; }
.tm-sudo-cell.is-sel { outline: 2px solid #2563eb; outline-offset: -2px; }

.tm-mem {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 360px);
  margin: 0 auto;
}
.tm-mem-card {
  aspect-ratio: 1;
  border: none;
  border-radius: 12px;
  background: #9d174d;
  color: #fff;
  font-weight: 900;
  font-size: 1.25rem;
  cursor: pointer;
}
.tm-mem-card.is-open { background: #fce7f3; color: #9d174d; }
.tm-mem-card.is-done { background: #86efac; color: #14532d; }

.tm-2048 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 320px);
  margin: 0 auto 12px;
  padding: 10px;
  background: #bbada0;
  border-radius: 12px;
  outline: none;
}
.tm-2048-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  background: #cdc1b4;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.25rem;
  color: #776e65;
}
.tm-2048-cell.v2 { background: #eee4da; }
.tm-2048-cell.v4 { background: #ede0c8; }
.tm-2048-cell.v8 { background: #f2b179; color: #f9f6f2; }
.tm-2048-cell.v16 { background: #f59563; color: #f9f6f2; }
.tm-2048-cell.v32 { background: #f67c5f; color: #f9f6f2; }
.tm-2048-cell.v64 { background: #f65e3b; color: #f9f6f2; }
.tm-2048-cell.v128,
.tm-2048-cell.v256,
.tm-2048-cell.v512,
.tm-2048-cell.v1024,
.tm-2048-cell.v2048 { background: #edc22e; color: #f9f6f2; font-size: 1rem; }

.tm-lights {
  display: grid;
  gap: 8px;
  width: min(100%, 320px);
  margin: 0 auto;
}
.tm-light-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 10px;
  background: #1e293b;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px #334155;
}
.tm-light-cell.is-on {
  background: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
}

.tm-hanoi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(100%, 420px);
  margin: 0 auto;
  min-height: 220px;
}
.tm-hanoi-peg {
  border: 1px dashed #a8a29e;
  border-radius: 12px;
  background: #fafaf9;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 8px;
  min-height: 200px;
}
.tm-hanoi-peg.is-sel { border-color: #ea580c; background: #fff7ed; }
.tm-hanoi-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
  width: 100%;
  flex: 1;
  justify-content: flex-end;
}
.tm-hanoi-disk {
  background: #c2410c;
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  padding: 4px 0;
}
.tm-hanoi-base {
  width: 90%;
  height: 8px;
  background: #57534e;
  border-radius: 4px;
  margin-top: 6px;
}

.tm-snake {
  display: grid;
  gap: 2px;
  width: min(100%, 360px);
  margin: 0 auto 12px;
  background: #14532d;
  padding: 6px;
  border-radius: 10px;
  touch-action: none;
  user-select: none;
  outline: none;
}
.tm-snake:focus-visible {
  box-shadow: 0 0 0 2px #86efac;
}
.tm-snake-cell {
  aspect-ratio: 1;
  background: #166534;
  border-radius: 2px;
}
.tm-snake-cell.is-head { background: #86efac; }
.tm-snake-cell.is-body { background: #4ade80; }
.tm-snake-cell.is-head2 { background: #7dd3fc; }
.tm-snake-cell.is-body2 { background: #38bdf8; }
.tm-snake-cell.is-head2.is-ghost,
.tm-snake-cell.is-body2.is-ghost {
  opacity: 0.72;
  box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.55);
}
.tm-snake-cell.is-food { background: #f97316; border-radius: 50%; }

.tm-snake-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.tm-snake-score--p1 { color: #86efac; font-weight: 600; }
.tm-snake-score--p2 { color: #7dd3fc; font-weight: 600; }
.tm-snake-score__vs {
  opacity: 0.75;
  font-size: 0.9em;
}
.tm-snake-dpads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 4px;
}
.tm-snake-dpad-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tm-snake-dpad-label {
  margin: 0 0 2px;
  font-size: 0.85rem;
  font-weight: 600;
}

.tm-dpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, 72px));
  grid-template-rows: repeat(3, minmax(56px, 72px));
  gap: 10px;
  width: max-content;
  margin: 12px auto 4px;
  touch-action: manipulation;
  user-select: none;
}
@media (max-width: 480px) {
  .tm-dpad {
    grid-template-columns: repeat(3, minmax(64px, 1fr));
    grid-template-rows: repeat(3, minmax(64px, 72px));
    width: min(280px, 100%);
    gap: 12px;
  }
}
.tm-dpad__btn {
  border: 1px solid color-mix(in srgb, var(--text, #0f172a) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg, #fff) 88%, #0f766e);
  color: var(--text, #0f172a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.tm-dpad__btn:active {
  transform: scale(0.96);
  background: color-mix(in srgb, #0f766e 22%, var(--card-bg, #fff));
}
.tm-dpad__btn:disabled {
  opacity: 0;
  pointer-events: none;
  border: none;
  background: transparent;
}
.tm-dpad__up { grid-column: 2; grid-row: 1; }
.tm-dpad__left { grid-column: 1; grid-row: 2; }
.tm-dpad__center { grid-column: 2; grid-row: 2; }
.tm-dpad__right { grid-column: 3; grid-row: 2; }
.tm-dpad__down { grid-column: 2; grid-row: 3; }
.tm-dpad__ico {
  width: 18px;
  height: 18px;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  display: inline-block;
}
.tm-dpad__up .tm-dpad__ico { transform: rotate(-135deg); margin-top: 4px; }
.tm-dpad__down .tm-dpad__ico { transform: rotate(45deg); margin-bottom: 4px; }
.tm-dpad__left .tm-dpad__ico { transform: rotate(135deg); margin-left: 4px; }
.tm-dpad__right .tm-dpad__ico { transform: rotate(-45deg); margin-right: 4px; }
.tm-arcade-hint {
  text-align: center;
  font-size: 0.82rem;
  opacity: 0.72;
  margin: 0.35rem 0 0.75rem;
}
.tm-2048-stage {
  touch-action: none;
  user-select: none;
  outline: none;
}
.tm-2048-stage:focus-visible {
  box-shadow: 0 0 0 2px #fbbf24;
}

.tm-react-pad {
  width: min(100%, 360px);
  margin: 12px auto 0;
  display: block;
  min-height: 180px;
  border: none;
  border-radius: 16px;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
}
.tm-react-pad.is-wait { background: #64748b; }
.tm-react-pad.is-armed { background: #dc2626; }
.tm-react-pad.is-go { background: #16a34a; }
.tm-react-pad.is-early { background: #b45309; }

@media (max-width: 480px) {
  .tm-gomoku-cell { width: 22px; height: 22px; }
}

.tm-card-cover--mathduel { background: linear-gradient(145deg, #14b8a6, #0f766e); }
.tm-card-cover--oddrace { background: linear-gradient(145deg, #fb7185, #be123c); }
.tm-card-cover--reactduel { background: linear-gradient(145deg, #4ade80, #166534); }
.tm-card-cover--bubblepop { background: linear-gradient(145deg, #38bdf8, #0369a1); }
.tm-card-cover--flipmemo { background: linear-gradient(145deg, #a78bfa, #5b21b6); }
.tm-card-cover--pathdraw { background: linear-gradient(145deg, #f59e0b, #92400e); }

.tm-card-cover--colorsnap { background: linear-gradient(145deg, #fb7185, #f97316); }
.tm-card-cover--typerace { background: linear-gradient(145deg, #34d399, #0f766e); }
.tm-card-cover--padbeat { background: linear-gradient(145deg, #fbbf24, #b45309); }
.tm-card-cover--sortasc { background: linear-gradient(145deg, #2dd4bf, #0f766e); }

.tm-card-cover--samenum { background: linear-gradient(145deg, #818cf8, #3730a3); }
.tm-card-cover--findtwin { background: linear-gradient(145deg, #2dd4bf, #0f766e); }

/* Arcade packs 25?27 */
.tm-ballsort { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.tm-bs-tube { width:58px; height:178px; padding:6px; border:2px solid #5eead4; border-top:0; border-radius:8px 8px 24px 24px; background:color-mix(in srgb,var(--card-bg,#fff) 88%,#ccfbf1); }
.tm-bs-tube.is-sel { box-shadow:0 0 0 3px #14b8a6; transform:translateY(-4px); }
.tm-bs-stack { height:100%; display:flex; flex-direction:column-reverse; justify-content:flex-start; gap:3px; }
.tm-bs-ball { display:block; width:40px; aspect-ratio:1; margin:auto; border-radius:50%; border:2px solid rgba(15,23,42,.18); }
.tm-bs-ball.c1 { background:#ef4444; } .tm-bs-ball.c2 { background:#0ea5e9; } .tm-bs-ball.c3 { background:#f59e0b; }

.tm-pegboard { display:grid; grid-template-columns:repeat(7,42px); justify-content:center; gap:4px; }
.tm-peg-cell { width:42px; aspect-ratio:1; border:1px solid #99f6e4; border-radius:50%; background:#ccfbf1; }
.tm-peg-cell.is-off { visibility:hidden; }
.tm-peg-cell.is-peg::after { content:""; display:block; width:68%; aspect-ratio:1; margin:auto; border-radius:50%; background:#0f766e; box-shadow:inset 0 2px 3px rgba(255,255,255,.35); }
.tm-peg-cell.is-sel { box-shadow:0 0 0 3px #f59e0b; }

.tm-mancala { display:grid; grid-template-columns:62px 1fr 62px; align-items:stretch; gap:8px; padding:12px; border-radius:22px; background:#ccfbf1; border:2px solid #14b8a6; }
.tm-man-rows > div { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin:3px 0; }
.tm-man-pit,.tm-man-store { min-height:58px; display:grid; place-items:center; border:2px solid #5eead4; border-radius:50%; background:var(--card-bg,#fff); color:var(--text,#0f172a); font-weight:800; }
.tm-man-pit:not(:disabled) { cursor:pointer; } .tm-man-pit:not(:disabled):hover { background:#99f6e4; }
.tm-man-store { border-radius:28px; min-height:126px; }

.tm-flow { display:grid; grid-template-columns:repeat(5,minmax(44px,60px)); justify-content:center; gap:4px; margin-bottom:12px; }
.tm-flow-cell { aspect-ratio:1; border:1px solid #94a3b8; border-radius:9px; background:var(--card-bg,#fff); font-weight:900; }
.tm-flow-cell.c1 { background:#fecaca; } .tm-flow-cell.c2 { background:#bae6fd; } .tm-flow-cell.c3 { background:#bbf7d0; } .tm-flow-cell.c4 { background:#fed7aa; }
.tm-flow-cell.is-end { border-width:3px; border-color:#0f766e; }

.tm-bowling { width:min(100%,420px); margin:auto; display:grid; gap:12px; }
.tm-bowl-pins { min-height:125px; display:grid; grid-template-columns:repeat(4,36px); justify-content:center; align-content:center; gap:5px; padding:12px; border-radius:18px; background:linear-gradient(#ecfeff,#cffafe); }
.tm-bowl-pin { width:22px; height:44px; margin:auto; border-radius:45% 45% 30% 30%; opacity:.15; background:#cbd5e1; }
.tm-bowl-pin.is-up { opacity:1; background:linear-gradient(#fff 30%,#ef4444 31% 42%,#fff 43%); border:1px solid #94a3b8; }
.tm-bowling label { display:grid; grid-template-columns:70px 1fr; align-items:center; gap:8px; }

.tm-yahtzee { display:flex; justify-content:center; gap:9px; flex-wrap:wrap; margin:16px 0; }
.tm-y-die { width:58px; aspect-ratio:1; border:2px solid #5eead4; border-radius:12px; background:var(--card-bg,#fff); color:var(--text,#0f172a); font-size:1.45rem; font-weight:900; }
.tm-y-die.is-held { background:#99f6e4; transform:translateY(-5px); box-shadow:0 4px 0 #0f766e; }

.tm-wsearch-list { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; font-weight:800; }
.tm-wsearch-list .is-found { color:#0f766e; text-decoration:line-through; opacity:.65; }
.tm-wsearch { display:grid; grid-template-columns:repeat(8,minmax(32px,44px)); justify-content:center; gap:3px; }
.tm-wsearch-cell { aspect-ratio:1; border:1px solid #99f6e4; border-radius:6px; background:var(--card-bg,#fff); color:var(--text,#0f172a); font-weight:800; }
.tm-wsearch-cell.is-sel { background:#2dd4bf; color:#042f2e; }

.tm-crossroad { display:grid; grid-template-columns:repeat(7,minmax(34px,48px)); justify-content:center; background:#334155; border:3px solid #0f766e; border-radius:12px; overflow:hidden; touch-action:none; outline:none; }
.tm-cross-cell { aspect-ratio:1; border-bottom:1px dashed rgba(255,255,255,.22); position:relative; }
.tm-cross-cell.is-start,.tm-cross-cell.is-goal { background:#86efac; border-bottom:0; }
.tm-cross-cell.is-car::before { content:""; position:absolute; inset:23% 7%; border-radius:7px; background:#f97316; border:2px solid #fdba74; }
.tm-cross-cell.is-frog::after { content:""; position:absolute; inset:18%; border-radius:50% 50% 35% 35%; background:#22c55e; border:3px solid #dcfce7; }

.tm-stroop-word { width:min(100%,360px); margin:14px auto; padding:22px; text-align:center; font-size:2.2rem; font-weight:950; border:2px solid #99f6e4; border-radius:16px; background:var(--card-bg,#fff); }
.tm-stroop-choices { display:grid; grid-template-columns:repeat(2,minmax(110px,160px)); justify-content:center; gap:9px; }
.tm-stroop-choice { min-height:52px; border:2px solid var(--stroop-color); border-radius:12px; background:color-mix(in srgb,var(--stroop-color) 14%,var(--card-bg,#fff)); color:var(--text,#0f172a); font-weight:850; }

.tm-seq-pads { display:grid; grid-template-columns:repeat(2,minmax(100px,150px)); justify-content:center; gap:10px; }
.tm-seq-pad { aspect-ratio:1.25; border:2px solid rgba(15,23,42,.2); border-radius:18px; opacity:.65; }
.tm-seq-pad.p0 { background:#ef4444; } .tm-seq-pad.p1 { background:#0ea5e9; } .tm-seq-pad.p2 { background:#22c55e; } .tm-seq-pad.p3 { background:#f59e0b; }
.tm-seq-pad.is-lit { opacity:1; filter:brightness(1.45); transform:scale(1.04); box-shadow:0 0 0 4px #fff,0 0 0 7px #14b8a6; }

.tm-nono-top { display:grid; grid-template-columns:74px repeat(5,46px); justify-content:center; text-align:center; font-weight:800; }
.tm-nono-top span { min-height:38px; display:grid; place-items:center; }
.tm-nonogram { display:grid; grid-template-columns:74px repeat(5,46px); justify-content:center; margin-bottom:12px; }
.tm-nono-clue { display:grid; place-items:center end; padding-right:9px; font-weight:800; }
.tm-nono-cell { width:46px; aspect-ratio:1; border:1px solid #64748b; background:var(--card-bg,#fff); }
.tm-nono-cell.is-on { background:#0f766e; box-shadow:inset 0 0 0 3px #ccfbf1; }

/* extra28 */
.tm-ck { display:grid; grid-template-columns:repeat(8,minmax(28px,40px)); justify-content:center; gap:0; border:2px solid #0f766e; border-radius:8px; overflow:hidden; width:max-content; margin:0 auto; }
.tm-ck-cell { aspect-ratio:1; border:0; background:#f1f5f9; color:#0f172a; font-size:1.1rem; font-weight:800; padding:0; }
.tm-ck-cell.is-dark { background:#0f766e; color:#ecfdf5; }
.tm-ck-cell.is-sel { outline:3px solid #fbbf24; outline-offset:-3px; }
.tm-ck-cell.is-legal { box-shadow:inset 0 0 0 3px #fde68a; }

.tm-ah-stage { position:relative; width:min(100%,360px); height:280px; margin:0 auto; background:linear-gradient(180deg,#e2e8f0,#cbd5e1); border:3px solid #0f766e; border-radius:12px; touch-action:none; overflow:hidden; }
.tm-ah-pad { position:absolute; width:18%; height:10px; transform:translateX(-50%); border-radius:6px; background:#0f766e; }
.tm-ah-ai { top:8px; background:#334155; }
.tm-ah-you { bottom:8px; }
.tm-ah-puck { position:absolute; width:16px; height:16px; border-radius:50%; background:#f97316; transform:translate(-50%,-50%); border:2px solid #fff; }

.tm-ast-stage { position:relative; width:min(100%,360px); height:260px; margin:0 auto; background:#0f172a; border:3px solid #0f766e; border-radius:12px; overflow:hidden; }
.tm-ast-ship { position:absolute; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:18px solid #5eead4; }
.tm-ast-rock { position:absolute; border-radius:40% 60% 50% 50%; background:#64748b; transform:translate(-50%,-50%); border:2px solid #94a3b8; }
.tm-ast-shot { position:absolute; width:4px; height:4px; border-radius:50%; background:#fbbf24; transform:translate(-50%,-50%); }

.tm-mj { display:grid; grid-template-columns:repeat(4,minmax(52px,72px)); gap:8px; justify-content:center; }
.tm-mj-tile { aspect-ratio:0.75; border:2px solid #0f766e; border-radius:8px; background:#ecfdf5; color:#134e4a; font-weight:900; font-size:1.1rem; }
.tm-mj-tile.is-sel { background:#5eead4; }
.tm-mj-tile.is-gone { visibility:hidden; }

.tm-kk { display:grid; grid-template-columns:repeat(3,minmax(56px,72px)); gap:6px; justify-content:center; align-items:center; margin:0.75rem auto; }
.tm-kk-clue { text-align:center; font-weight:800; opacity:0.8; }
.tm-kk-in { width:100%; aspect-ratio:1; text-align:center; font-size:1.2rem; font-weight:800; border:2px solid #99f6e4; border-radius:8px; }

.tm-jg { display:grid; grid-template-columns:repeat(2,minmax(80px,110px)); gap:8px; justify-content:center; }
.tm-jg-tile { aspect-ratio:1; border:2px solid #0f766e; border-radius:12px; background:#ccfbf1; color:#134e4a; font-size:1.8rem; font-weight:900; }
.tm-jg-tile.is-sel { background:#5eead4; box-shadow:0 0 0 3px #fbbf24; }

.tm-rain-stage { touch-action:none; outline:none; }

/* extra29 */
.tm-sol-top { display:grid; grid-template-columns:repeat(6,minmax(42px,58px)); gap:6px; justify-content:center; margin-bottom:12px; }
.tm-sol-table { display:grid; grid-template-columns:repeat(7,minmax(38px,58px)); gap:5px; justify-content:center; align-items:start; overflow-x:auto; padding:3px; }
.tm-sol-col { min-height:180px; display:flex; flex-direction:column; align-items:stretch; }
.tm-sol-card { min-height:58px; padding:3px; border:1.5px solid #64748b; border-radius:7px; background:#fff; color:#0f172a; font-weight:900; font-size:.84rem; }
.tm-sol-col .tm-sol-card { margin-bottom:-35px; position:relative; }
.tm-sol-col .tm-sol-card:last-of-type { margin-bottom:2px; }
.tm-sol-card.is-red { color:#b91c1c; }
.tm-sol-card.is-down,.tm-sol-stock { background:repeating-linear-gradient(45deg,#0f766e,#0f766e 5px,#115e59 5px,#115e59 10px); color:#fff; }
.tm-sol-card.is-sel { outline:3px solid #f59e0b; outline-offset:-2px; }
.tm-sol-drop { min-height:58px; border:1px dashed #94a3b8; border-radius:7px; background:transparent; }

.tm-lo { display:grid; grid-template-columns:repeat(5,minmax(44px,60px)); gap:7px; justify-content:center; }
.tm-lo-cell { aspect-ratio:1; border:2px solid #475569; border-radius:10px; background:#1e293b; box-shadow:inset 0 0 12px rgba(0,0,0,.35); }
.tm-lo-cell.is-on { background:#fde047; border-color:#f59e0b; box-shadow:0 0 14px #facc15; }

.tm-ms15 { display:grid; grid-template-columns:repeat(8,minmax(32px,42px)); gap:2px; justify-content:center; }
.tm-ms15-cell { aspect-ratio:1; padding:0; border:1px solid #64748b; border-radius:4px; background:#cbd5e1; color:#0f172a; font-weight:900; }
.tm-ms15-cell.is-open { background:#f8fafc; border-color:#cbd5e1; }
.tm-ms15-cell.is-flag { color:#b91c1c; background:#fee2e2; }

.tm-hs { display:grid; grid-template-columns:repeat(4,minmax(54px,72px)); gap:6px; width:max-content; margin:0 auto 12px; padding:7px; border-radius:12px; background:#134e4a; touch-action:none; }
.tm-hs-cell { aspect-ratio:1; border:0; border-radius:8px; background:#ccfbf1; color:#134e4a; font-size:1.25rem; font-weight:900; box-shadow:0 2px 0 #5eead4; }
.tm-hs-cell.is-empty { visibility:hidden; }
.tm-hs-pad { display:grid; grid-template-columns:repeat(4,48px); gap:5px; justify-content:center; }
.tm-hs-pad button { height:42px; border:1px solid #0f766e; border-radius:8px; background:#ecfdf5; color:#134e4a; font-size:1.1rem; }

.tm-cm-target,.tm-tap-bpm { margin:.5rem 0 1rem; text-align:center; font-size:2rem; font-weight:900; letter-spacing:.06em; }
.tm-cm-grid { display:grid; grid-template-columns:repeat(3,minmax(68px,100px)); gap:10px; justify-content:center; }
.tm-cm-swatch { aspect-ratio:1.3; border:3px solid #fff; border-radius:12px; box-shadow:0 0 0 1px #64748b,0 4px 10px rgba(15,23,42,.18); }
.tm-arcade-duel-color-grid { display:grid; grid-template-columns:repeat(2,minmax(80px,120px)); gap:10px; justify-content:center; }
.tm-arcade-duel-cmatch { aspect-ratio:1.5; border:3px solid #fff; border-radius:12px; box-shadow:0 0 0 1px #64748b; }
.tm-tap-btn { display:block; width:min(220px,70vw); aspect-ratio:1.8; margin:0 auto; border:3px solid #115e59; border-radius:22px; background:#14b8a6; color:#042f2e; font-size:1.6rem; font-weight:900; touch-action:manipulation; }
.tm-tap-btn:active { transform:scale(.97); background:#5eead4; }

/* extra30 */
.tm-bj-table { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(100%,560px); margin:0 auto 14px; }
.tm-bj-table section { padding:12px; border:1px solid #94a3b8; border-radius:12px; background:color-mix(in srgb,var(--card-bg,#fff) 92%,#0f766e); }
.tm-bj-table h4 { margin:0 0 10px; text-align:center; }
.tm-x30-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; min-height:58px; }
.tm-x30-card { display:grid; place-items:center; width:42px; height:58px; border:1.5px solid #475569; border-radius:7px; background:#fff; color:#0f172a; font-size:1.15rem; font-weight:900; box-shadow:0 2px 4px rgba(15,23,42,.14); }

.tm-gf-opponent { width:min(260px,80%); margin:0 auto 12px; padding:14px; border:2px dashed #64748b; border-radius:12px; text-align:center; font-weight:800; }
.tm-gf-hand { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.tm-gf-rank { display:flex; flex-direction:column; align-items:center; justify-content:center; width:62px; height:82px; border:2px solid #0f766e; border-radius:10px; background:#f0fdfa; color:#134e4a; font-size:1.4rem; font-weight:900; }
.tm-gf-rank small { margin-top:3px; font-size:.75rem; }

.tm-mp-grid { display:grid; grid-template-columns:repeat(2,minmax(90px,130px)); gap:12px; justify-content:center; }
.tm-mp-pad { aspect-ratio:1.35; border:3px solid color-mix(in srgb,currentColor 45%,transparent); border-radius:16px; color:#0f172a; font-size:1.4rem; font-weight:900; opacity:.72; transition:transform .08s,filter .08s,opacity .08s; }
.tm-mp-pad.p0 { background:#fca5a5; }.tm-mp-pad.p1 { background:#93c5fd; }
.tm-mp-pad.p2 { background:#86efac; }.tm-mp-pad.p3 { background:#fde68a; }
.tm-mp-pad.is-lit,.tm-mp-pad:active { filter:brightness(1.22); opacity:1; transform:scale(1.06); box-shadow:0 0 0 4px #fff,0 0 18px currentColor; }

.tm-s6 { display:grid; grid-template-columns:repeat(6,minmax(42px,56px)); width:max-content; max-width:100%; margin:0 auto 12px; border:3px solid #334155; background:#334155; gap:1px; }
.tm-s6-cell { aspect-ratio:1; border:0; border-radius:0; background:#fff; color:#0f172a; font-size:1.1rem; font-weight:800; }
.tm-s6-cell.is-fixed { background:#e2e8f0; color:#0f766e; }
.tm-s6-cell.is-sel { box-shadow:inset 0 0 0 3px #f59e0b; background:#fef3c7; }
.tm-s6-cell.thick-r { border-right:3px solid #334155; }
.tm-s6-cell.thick-b { border-bottom:3px solid #334155; }

.tm-sf-stage { width:min(100%,380px); }

.tm-pb-stage { position:relative; width:min(100%,560px); aspect-ratio:1.55; margin:0 auto 12px; overflow:hidden; border:3px solid #0f172a; border-radius:12px; background:linear-gradient(#0f172a,#164e63); touch-action:none; outline:none; }
.tm-pb-stage:focus-visible { box-shadow:0 0 0 3px #22d3ee; }
.tm-pb-brick { position:absolute; width:13%; height:7%; border:1px solid rgba(255,255,255,.65); border-radius:4px; background:#fb7185; box-shadow:inset 0 -3px rgba(0,0,0,.16); }
.tm-pb-brick.b1 { background:#fbbf24; }.tm-pb-brick.b2 { background:#4ade80; }.tm-pb-brick.b3 { background:#60a5fa; }
.tm-pb-brick.is-gone { visibility:hidden; }
.tm-pb-ball { position:absolute; width:4%; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 0 8px #67e8f9; transform:translate(-50%,-50%); }
.tm-pb-paddle { position:absolute; top:67%; width:22%; height:4%; border-radius:999px; background:#e2e8f0; box-shadow:0 0 8px #67e8f9; }
.tm-pb-controls { display:grid; grid-template-columns:repeat(2,minmax(90px,150px)); gap:12px; justify-content:center; }
.tm-pb-controls button { min-height:52px; touch-action:none; }

@media(max-width:480px){
  .tm-pegboard { grid-template-columns:repeat(7,36px); } .tm-peg-cell { width:36px; }
  .tm-mancala { grid-template-columns:44px 1fr 44px; padding:7px; gap:4px; }
  .tm-man-rows > div { gap:3px; } .tm-man-pit { min-height:44px; }
  .tm-wsearch { grid-template-columns:repeat(8,minmax(29px,1fr)); }
  .tm-nono-top,.tm-nonogram { grid-template-columns:58px repeat(5,40px); }
  .tm-nono-cell { width:40px; }
  .tm-ck { grid-template-columns:repeat(8,minmax(32px,1fr)); width:min(100%,320px); }
  .tm-sol-table { grid-template-columns:repeat(7,42px); justify-content:start; }
  .tm-sol-card { min-height:54px; font-size:.72rem; }
  .tm-ms15 { grid-template-columns:repeat(8,minmax(30px,1fr)); }
  .tm-bj-table { grid-template-columns:1fr; }
  .tm-s6 { grid-template-columns:repeat(6,minmax(40px,1fr)); width:min(100%,300px); }
}

/* extra31?32 */
.tm-rv,.tm-c3{display:grid;gap:4px;width:min(100%,330px);margin:0 auto}.tm-rv{grid-template-columns:repeat(6,1fr);padding:6px;background:#14532d}.tm-c3{grid-template-columns:repeat(5,1fr)}
.tm-rv-cell,.tm-c3-cell{aspect-ratio:1;border:1px solid #166534;background:#22c55e;border-radius:5px;padding:12%}.tm-rv-cell i,.tm-c3-cell:after{display:block;width:100%;height:100%;border-radius:50%;content:""}.tm-rv-cell i.p1,.tm-c3-cell.p1:after{background:#172554}.tm-rv-cell i.p2,.tm-c3-cell.p2:after{background:#f8fafc}.tm-rv-cell.is-move:not(:disabled){box-shadow:inset 0 0 0 3px #fde047}
.tm-c3-cell{background:#dbeafe;border-color:#60a5fa}.tm-wl-chain,.tm-sn-out,.tm-cook-order{text-align:center;font-size:1.15rem;font-weight:800;min-height:2rem}.tm-sn-digit{width:52px;height:64px;border:2px solid #0f766e;border-radius:9px;background:#fff;font-size:1.4rem;font-weight:900}
.tm-timebar{position:relative;width:min(100%,460px);height:34px;margin:18px auto;border-radius:999px;background:#cbd5e1;overflow:hidden}.tm-timebar-zone{position:absolute;left:62%;width:20%;height:100%;background:#86efac}.tm-timebar b{position:absolute;top:0;width:8px;height:100%;background:#0f172a}
.tm-fish-water{position:relative;width:min(100%,460px);height:80px;margin:14px auto;border-radius:12px;background:linear-gradient(#7dd3fc,#0369a1);overflow:hidden}.tm-fish-target{position:absolute;left:38%;width:24%;height:100%;background:rgba(134,239,172,.4)}.tm-fish{position:absolute;top:29px;width:32px;height:19px;border-radius:50% 60% 60% 50%;background:#fbbf24}
.tm-farm{display:grid;grid-template-columns:repeat(3,82px);gap:7px;justify-content:center}.tm-farm-cell{aspect-ratio:1;border:2px solid #92400e;border-radius:10px;background:#a16207;color:#fff;font-weight:800}.tm-farm-cell.is-growing{background:#65a30d}.tm-farm-cell.is-ready{background:#16a34a;box-shadow:0 0 0 3px #86efac}
.tm-cook-grid{display:grid;grid-template-columns:repeat(3,minmax(75px,110px));gap:7px;justify-content:center}.tm-cook-ing{padding:12px 5px;border:1px solid #ea580c;border-radius:9px;background:#ffedd5;font-weight:800}.tm-parcel{width:150px;margin:12px auto;padding:28px 10px;border:3px solid #334155;border-radius:14px;text-align:center;font-size:1.3rem;font-weight:900}.tm-parcel.red{background:#fecaca}.tm-parcel.blue{background:#bfdbfe}.tm-parcel.amber{background:#fde68a}
.tm-zs-stage{position:relative;width:min(100%,360px);height:240px;margin:10px auto;border-bottom:5px solid #475569;background:linear-gradient(#e0f2fe,#f8fafc);overflow:hidden}.tm-zs-stage i,.tm-zs-moving{position:absolute;width:28%;height:20px;border-radius:4px;background:#0d9488}

/* extra33?34 */
.tm-extra-card,.tm-memory-number,.tm-type-thunder-word{margin:14px auto;padding:18px;text-align:center;border:2px solid #99f6e4;border-radius:14px;background:#f0fdfa;font-size:1.55rem;font-weight:900}.tm-highcard-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0}.tm-highcard-row b,.tm-slot-reels b{display:grid;place-items:center;width:72px;height:94px;border:2px solid #0f766e;border-radius:10px;background:#fff;color:#0f172a;font-size:2rem}.tm-slot-reels{display:flex;justify-content:center;gap:8px;margin:16px 0}.tm-slot-reels b{width:82px;height:82px;font-size:1.25rem}.tm-roulette-ball{display:grid;place-items:center;width:92px;aspect-ratio:1;margin:14px auto;border:5px solid #d1d5db;border-radius:50%;background:#111827;color:#fff;font-size:2rem;font-weight:900}.tm-roulette-ball.red{background:#dc2626}.tm-roulette-ball.zero{background:#15803d}.tm-roulette-number{width:72px;padding:8px;border:1px solid #94a3b8;border-radius:8px}.tm-path-grid{display:grid;grid-template-columns:repeat(6,minmax(42px,56px));gap:4px;justify-content:center}.tm-path-cell{aspect-ratio:1;border:1px solid #94a3b8;border-radius:7px;background:#f8fafc;color:#0f172a;font-weight:900}.tm-path-cell.is-wall{background:#334155}.tm-path-cell.is-path{background:#ccfbf1}.tm-path-cell.is-you{box-shadow:inset 0 0 0 4px #f59e0b}.tm-path-cell.is-end{background:#86efac}
.tm-pop-stage{position:relative;width:min(100%,420px);height:280px;margin:0 auto;border:2px solid #38bdf8;border-radius:14px;background:linear-gradient(#e0f2fe,#bae6fd);overflow:hidden}.tm-pop-balloon{position:absolute;width:42px;height:54px;transform:translate(-50%,-50%);border:0;border-radius:50% 50% 48% 48%;box-shadow:inset -7px -8px rgba(0,0,0,.12)}.tm-pop-balloon.c1{background:#ef4444}.tm-pop-balloon.c2{background:#3b82f6}.tm-pop-balloon.c3{background:#22c55e}.tm-pop-balloon.c4{background:#eab308}.tm-pop-balloon.c5{background:#a855f7}.tm-fast-grid{display:grid;grid-template-columns:repeat(4,58px);gap:7px;justify-content:center}.tm-fast-cell{aspect-ratio:1;border:0;border-radius:50%;background:#334155}.tm-fast-cell.is-on{background:#f59e0b;box-shadow:0 0 0 4px #fde68a}.tm-flood-grid{display:grid;grid-template-columns:repeat(6,42px);gap:2px;justify-content:center}.tm-flood-grid i{aspect-ratio:1;border-radius:4px}.tm-flood-palette{display:flex;gap:9px;justify-content:center;margin-top:14px}.tm-flood-pick{width:48px;aspect-ratio:1;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #64748b}.tm-flood-grid .c0,.tm-flood-pick.c0{background:#ef4444}.tm-flood-grid .c1,.tm-flood-pick.c1{background:#3b82f6}.tm-flood-grid .c2,.tm-flood-pick.c2{background:#22c55e}.tm-flood-grid .c3,.tm-flood-pick.c3{background:#eab308}.tm-flood-grid .c4,.tm-flood-pick.c4{background:#a855f7}
.tm-pipe-grid{display:grid;grid-template-columns:repeat(3,82px);gap:5px;justify-content:center}.tm-pipe-tile{aspect-ratio:1;border:2px solid #0e7490;border-radius:10px;background:#ecfeff;overflow:hidden}.tm-pipe-tile.is-start,.tm-pipe-tile.is-end{background:#ccfbf1;box-shadow:inset 0 0 0 3px #14b8a6}.tm-pipe-tile i{display:block;position:relative;width:100%;height:100%}.tm-pipe-tile i:before,.tm-pipe-tile i:after{content:"";position:absolute;background:#0e7490}.tm-pipe-tile i:before{left:45%;top:0;width:10%;height:55%}.tm-pipe-tile i:after{left:45%;top:45%;width:55%;height:10%}.tm-pipe-tile i.shape-EW:before{left:0;top:45%;width:100%;height:10%}.tm-pipe-tile i.shape-EW:after{display:none}.tm-mirror-wrap{display:flex;gap:18px;justify-content:center}.tm-mirror-grid{display:grid;grid-template-columns:repeat(4,42px);gap:4px}.tm-mirror-grid i,.tm-mirror-cell{aspect-ratio:1;border:1px solid #94a3b8;border-radius:5px;background:#f8fafc}.tm-mirror-grid .is-on{background:#0f766e}.tm-mirror-grid.sample{padding-right:18px;border-right:3px dashed #94a3b8}.tm-thunder-in{min-width:180px;padding:9px;border:2px solid #0f766e;border-radius:9px}


/* extra35 ?X ?g???C?G???????D?????E?l?? */
.tm-card-cover--seabattle {
  background:
    radial-gradient(circle at 30% 40%, rgba(14, 165, 233, 0.45), transparent 42%),
    linear-gradient(155deg, #0c4a6e, #0369a1 50%, #082f49);
}
.tm-card-cover--snakeladder {
  background:
    radial-gradient(circle at 70% 30%, rgba(34, 197, 94, 0.4), transparent 40%),
    linear-gradient(150deg, #14532d, #3f6212 55%, #1a2e05);
}
.tm-card-cover--ninemorris {
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.35), transparent 45%),
    linear-gradient(160deg, #292524, #44403c 55%, #1c1917);
}
.tm-sb-toolbar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 10px; }
.tm-sb-pick.is-on { outline: 2px solid #0ea5e9; }
.tm-sb-pick.is-done { opacity: 0.45; }
.tm-sb-dual { display: grid; gap: 14px; justify-content: center; }
@media (min-width: 720px) {
  .tm-sb-dual { grid-template-columns: 1fr 1fr; align-items: start; }
}
.tm-sb-caption { text-align: center; font-size: 0.8rem; font-weight: 800; color: var(--text-muted, #64748b); margin: 0 0 6px; }
.tm-sb-grid {
  display: grid;
  gap: 2px;
  width: min(100%, 300px);
  margin: 0 auto;
  padding: 6px;
  border-radius: 10px;
  background: #0c4a6e;
}
.tm-sb-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 3px;
  background: #0369a1;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
}
.tm-sb-grid--own .tm-sb-cell,
.tm-sb-grid--own > div.tm-sb-cell { cursor: default; }
.tm-sb-cell.is-ship { background: #64748b; }
.tm-sb-cell.is-hit { background: #ef4444; }
.tm-sb-cell.is-miss { background: #334155; }
.tm-sb-cell.is-sel { box-shadow: inset 0 0 0 2px #fde047; }
.tm-sb-cell:disabled { cursor: default; opacity: 0.95; }
.tm-sl-track {
  position: relative;
  width: min(100%, 420px);
  height: 28px;
  margin: 12px auto 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #bbf7d0, #86efac 40%, #fde68a 70%, #fecaca);
  border: 2px solid #166534;
}
.tm-sl-token {
  position: absolute;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.tm-sl-token--p1 { background: #2563eb; }
.tm-sl-token--p2 { background: #dc2626; top: 3px; }
.tm-mm-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 10px auto;
  gap: 0;
  background:
    linear-gradient(#a8a29e, #a8a29e) center/2px 100% no-repeat,
    linear-gradient(#a8a29e, #a8a29e) center/100% 2px no-repeat,
    #f5f5f4;
  border: 2px solid #57534e;
  border-radius: 12px;
  padding: 8px;
}
.tm-mm-node {
  width: 78%;
  aspect-ratio: 1;
  margin: auto;
  border: 2px solid #44403c;
  border-radius: 50%;
  background: #e7e5e4;
  cursor: pointer;
  padding: 0;
}
.tm-mm-node.is-a { background: #1d4ed8; border-color: #1e3a8a; }
.tm-mm-node.is-b { background: #b91c1c; border-color: #7f1d1d; }
.tm-mm-node.is-sel { box-shadow: 0 0 0 3px #fbbf24; }

/* arcade leaderboard */
.tm-arcade-lb-best { margin: 0.35rem 0 0.75rem; font-size: 0.9rem; font-weight: 700; color: var(--text-main, #0f172a); }
.tm-arcade-lb-tabs { margin-bottom: 0.75rem; }
.tm-arcade-lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.tm-arcade-lb-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg, #fff) 88%, #e2e8f0);
  border: 1px solid color-mix(in srgb, var(--border, #d6d3d1) 70%, transparent);
}
.tm-arcade-lb-row.is-me { outline: 2px solid #0ea5e9; }
.tm-arcade-lb-rank { font-weight: 900; color: var(--text-muted, #64748b); }
.tm-arcade-lb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-arcade-lb-score { font-variant-numeric: tabular-nums; font-weight: 900; color: #1d4ed8; }