/* Chubblies letter tracing — the Play online board (v01). Uses the universe tokens. */
.lt-game { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; max-width: 940px; margin-inline: auto; }
.play-online .play-stage[data-game="trace"] { max-width: 940px; }
.lt-side { display: grid; gap: 12px; padding: 16px; border: var(--u-line); border-radius: 24px; background: #fff; box-shadow: 0 5px 0 var(--u-ink); }
.lt-case { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 2px solid var(--u-ink); border-radius: 999px; background: var(--u-paper); }
.lt-case button { min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--u-ink); font: 800 1.05rem var(--u-display); cursor: pointer; }
.lt-case button[aria-pressed="true"] { background: var(--u-sun); box-shadow: inset 0 0 0 2px var(--u-ink); }
.lt-alpha { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.lt-alpha button { aspect-ratio: 1; min-width: 0; padding: 0; border: 2px solid var(--u-ink); border-radius: 12px; background: #fff; color: var(--u-ink); font: 700 1.15rem/1 var(--u-display); cursor: pointer; transition: transform .1s ease; }
.lt-alpha button:hover { transform: translateY(-2px); background: var(--u-sun-hi); }
.lt-alpha button[aria-pressed="true"] { background: var(--u-ink); color: #fff; }

.lt-main { min-width: 0; }
.lt-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.lt-status { flex: 1 1 260px; margin: 0; min-height: 1.5em; font-weight: 800; font-size: 1.05rem; }
.lt-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-board { position: relative; border: var(--u-line); border-radius: 28px; background: #fff; box-shadow: var(--u-pop-lg); overflow: hidden; }
.lt-svg { display: block; width: 100%; height: auto; aspect-ratio: 1.15; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }

.lt-top, .lt-base { stroke: #7c9cdb; }
.lt-top { stroke-width: 1.6; }
.lt-base { stroke-width: 2.6; }
.lt-mid { stroke: #e2708b; stroke-width: 1.6; stroke-dasharray: 9 7; }
.lt-desc { stroke: #c3cee2; stroke-width: 1.4; stroke-dasharray: 3 7; }
.lt-road, .lt-guide, .lt-ink { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lt-road { stroke: #efeaff; stroke-width: 30; transition: stroke .2s ease; }
.lt-road.is-now { stroke: #e3dbff; }
.lt-guide { stroke: #9a91b8; stroke-width: 6; stroke-dasharray: 0 12; }
.lt-ink { stroke-width: 13; }
.lt-ink.is-done { animation: lt-glow .5s ease; }
.lt-start { fill: #1f9d66; }
.lt-pulse { fill: #1f9d66; opacity: .35; transform-box: fill-box; transform-origin: center; animation: lt-pulse 1.3s ease-out infinite; }
.lt-arrow { fill: #1f9d66; }
.lt-badge { fill: #1f9d66; }
.lt-badge-n { fill: #fff; font: 800 14px var(--u-text); text-anchor: middle; dominant-baseline: central; }
.lt-board.is-done .lt-road { stroke: #fff5c7; }
@keyframes lt-pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(2.6); opacity: 0; } }
@keyframes lt-glow { 50% { stroke-width: 17; } }

.lt-win { display: flex; justify-content: center; margin-top: 16px; }
.lt-win-card { display: grid; justify-items: center; gap: 4px; width: min(420px, 100%); padding: 14px 18px 16px; border: var(--u-line); border-radius: 24px; background: var(--u-sun-hi); box-shadow: 0 5px 0 var(--u-ink); text-align: center; animation: lt-in .35s cubic-bezier(.3, 1.5, .5, 1) both; }
.lt-win-pics { display: flex; justify-content: center; margin-top: -6px; }
.lt-win-pics img { width: 84px; height: 84px; object-fit: contain; animation: u-hop .7s ease 2; }
.lt-win-pics img + img { margin-left: -10px; animation-delay: .15s; }
.lt-win-title { margin: 0; font: 800 1.35rem/1.15 var(--u-display); }
.lt-win-cue { margin: 0; font-weight: 800; color: var(--u-ink-2); }
.lt-win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
@keyframes lt-in { from { opacity: 0; transform: translateY(20px) scale(.9); } }

@media (max-width: 760px) {
  .lt-game { grid-template-columns: 1fr; }
  .lt-side { order: 2; }
  .lt-alpha { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .lt-alpha button { font-size: 1rem; border-radius: 9px; }
  .lt-win-pics img { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-pulse, .lt-ink.is-done, .lt-win-card, .lt-win-pics img { animation: none; }
}