.letter-stage{align-content:start;gap:16px}.letter-show{justify-items:center;gap:14px;width:100%;padding-top:6px;display:grid}.letter-card{--card:var(--surface);--card-ink:var(--ink-3);aspect-ratio:1;background:var(--card);width:clamp(200px,58vw,300px);color:var(--card-ink);box-shadow:inset 0 0 0 clamp(6px, 3cqi, 10px) var(--wheel-rim), 0 14px 30px #16142b33;-webkit-user-select:none;user-select:none;border-radius:22%;place-items:center;display:grid;position:relative;container-type:inline-size}.letter-card[data-state=idle]{box-shadow:inset 0 0 0 clamp(6px, 3cqi, 10px) var(--line-strong), var(--shadow-1)}.letter-card__glyph{letter-spacing:-.03em;font-size:66cqi;font-weight:800;line-height:1;translate:0 -2%}.letter-card[data-state=rolling] .letter-card__glyph{opacity:.9}.letter-card.is-landed{animation:letter-land .5s var(--ease-out)}@keyframes letter-land{0%{transform:scale(.88)}55%{transform:scale(1.05)}to{transform:scale(1)}}.letter-card.is-time-up{box-shadow:inset 0 0 0 clamp(6px, 3cqi, 10px) var(--wheel-rim), 0 0 0 6px var(--accent), 0 14px 30px #16142b33;animation:.55s ease-in-out letter-shake}@keyframes letter-shake{20%,60%{transform:rotate(-4deg)}40%,80%{transform:rotate(4deg)}}@media (prefers-reduced-motion:reduce){.letter-card.is-landed,.letter-card.is-time-up{animation:none}}.letter-timer{gap:4px;width:clamp(200px,58vw,300px);display:grid}.letter-timer__row{justify-content:space-between;align-items:center;gap:8px;display:flex}.letter-timer__time{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:2rem;font-weight:780;line-height:1.1}.letter-timer[data-state=ready] .letter-timer__time{color:var(--ink-2)}.letter-timer[data-state=ending] .letter-timer__time,.letter-timer[data-state=up] .letter-timer__time{color:var(--danger)}.letter-timer__bar{background:color-mix(in srgb, var(--ink) 12%, transparent);border-radius:999px;height:8px;overflow:hidden}.letter-timer__bar i{border-radius:inherit;background:var(--accent);transform-origin:0;height:100%;transition:transform .2s linear;display:block}.letter-timer[data-state=paused] .letter-timer__bar i{background:var(--ink-3)}[data-timer-toggle] .icon--play,[data-timer-toggle].is-paused .icon--pause{display:none}[data-timer-toggle].is-paused .icon--play{display:block}.letter-timer [data-timer-toggle]:hover{background:color-mix(in srgb, var(--surface) 70%, transparent)}.letter-status{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px;display:flex}.letter-status .link-btn{margin:0}.letter-left{color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:center;font-weight:620}.letter-strip{flex-wrap:wrap;justify-content:center;gap:5px;max-width:520px;margin:0;padding:0;list-style:none;display:flex}.letter-strip li{background:var(--surface);border-radius:8px;place-items:center;min-width:30px;height:30px;padding:0 4px;font-size:.95rem;font-weight:720;display:grid}.letter-strip li.is-used{color:var(--ink-3);background:0 0;text-decoration:line-through;text-decoration-thickness:2px}.letter-strip li.is-current{background:var(--accent);color:#16142b}.letter-grid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;display:grid}.letter-toggle{background:var(--btn-bg);min-height:46px;color:var(--btn-ink);transition:background-color .15s, transform .15s var(--ease-out);border:0;border-radius:12px;font-size:1.15rem;font-weight:760}.letter-toggle:active{transform:scale(.94)}.letter-toggle[aria-pressed=false]{background:var(--surface-2);color:var(--ink-3);font-weight:560}.letter-toggle[aria-pressed=false]:hover{color:var(--ink)}@media (min-width:900px){.letter-card,.letter-timer{width:clamp(240px,100svh - 470px,320px)}}@media (max-width:599px){.letter-stage{gap:12px}.letter-strip li{min-width:28px;height:28px;font-size:.9rem}}.stage.is-present.letter-stage{align-content:center}.stage.is-present .letter-card,.stage.is-present .letter-timer{width:min(56vh,80vw)}.stage.is-present .letter-timer__time{font-size:clamp(2rem,6vh,4rem)}.stage.is-present .letter-timer__bar{height:12px}.stage.is-present .letter-strip{max-width:80vw}.stage.is-present .letter-strip li{min-width:clamp(30px,4.4vh,48px);height:clamp(30px,4.4vh,48px);font-size:clamp(.95rem,2.4vh,1.5rem)}