.ts-card { text-align: center; }
.ts-bead { position: relative; display: grid; place-items: center; width: min(78vw, 300px); aspect-ratio: 1; margin: 18px auto 22px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FFE9B8, #E8B65A 40%, #9A6A22 100%); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 -10px 30px rgba(90, 50, 10, 0.4); color: var(--lapis); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.ts-bead svg { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); transform: rotate(-90deg); }
.ts-track { fill: none; stroke: rgba(242, 234, 216, 0.1); stroke-width: 6; }
.ts-ring { fill: none; stroke: var(--turquoise); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 565.5; stroke-dashoffset: 565.5; transition: stroke-dashoffset 0.25s var(--ease-out); }
.ts-count { font-family: var(--font-display); font-size: clamp(3.4rem, 18vw, 5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ts-hint { position: absolute; bottom: 22%; font-size: 0.82rem; font-weight: 650; opacity: 0.7; }
.ts-bead.is-tap { animation: ts-tap 0.18s var(--ease-out); }
@keyframes ts-tap { 50% { transform: scale(0.96); } }
.ts-stats { display: flex; justify-content: center; gap: 30px; margin-bottom: 14px; }
.ts-stats div { display: grid; }
.ts-stats b { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--gold-soft); }
.ts-stats span { font-size: 0.82rem; color: var(--mist); }