.num { font-family: var(--font-en); font-variant-numeric: tabular-nums; }
.grow { flex: 1; min-width: 0; }
.play-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.ring { position: relative; width: 86px; height: 86px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring .track { stroke: var(--surface-2); }
.ring .bar { stroke: var(--primary); stroke-linecap: round; stroke-dasharray: 276.5; transition: stroke .3s; }
.ring.is-low .bar { stroke: var(--danger); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; font-weight: 900; }
.ring.is-low b { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.live-team { font-weight: 900; font-size: 1.15rem; margin-top: .3rem; }
.round-pts { text-align: center; }
.round-pts span { display: block; color: var(--text-mute); font-size: .8rem; font-weight: 700; }
.round-pts b { font-size: 2rem; color: var(--primary-ink); font-weight: 900; }
.word-card { flex: 1; min-height: 260px; display: grid; place-items: center; border-radius: calc(var(--radius) + 8px); border: 2px solid var(--line); background: radial-gradient(ellipse at 50% 0%, rgb(var(--primary-rgb) / .16), transparent 70%), var(--surface); box-shadow: var(--shadow); padding: 2rem 1rem; text-align: center; overflow: hidden; }
.word-card span { font-size: clamp(2.4rem, 9vw, 4.6rem); font-weight: 900; line-height: 1.3; display: block; }
.word-card.in-right span { animation: out-right .35s var(--ease) forwards; }
.word-card.in-skip span { animation: out-skip .35s var(--ease) forwards; }
.word-card.is-new span { animation: word-in .4s var(--ease); }
@keyframes out-right { to { transform: translateY(-40px) scale(.9); opacity: 0; color: var(--ok); } }
@keyframes out-skip { to { transform: translateX(60px); opacity: 0; } }
@keyframes word-in { from { transform: scale(.85); opacity: 0; } }
.word-card.flash-ok { border-color: var(--ok); }
.g-actions.big { margin-top: 1.4rem; }
.g-actions.big .btn { flex: 1; max-width: 320px; }
.scores-row { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: .6rem 0 1rem; }
.scores-row span { padding: .45rem .9rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-soft); font-weight: 700; }
.scores-row span b { font-family: var(--font-en); color: var(--primary-ink); margin-inline-start: .4rem; }
.scores-row span.is-cur { border-color: var(--primary); }
.words { display: flex; flex-wrap: wrap; gap: .5rem; }
.words span { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 99px; font-weight: 700; border: 1px solid var(--line-soft); background: var(--surface-2); }
.words span.ok { border-color: rgb(34 197 94 / .45); color: var(--ok); }
.words span.no { color: var(--text-mute); text-decoration: line-through; }
.words span svg { width: 14px; height: 14px; }
