.wpg-letterle-top { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.wpg-letterle-top b { color: var(--ink); font-variant-numeric: tabular-nums; }

.wpg-letterle-stage { display: flex; justify-content: center; padding: 16px 0 10px; perspective: 600px; }
.wpg-letterle-card {
    width: 128px; height: 148px; border-radius: 26px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #fff), color-mix(in srgb, var(--accent) 70%, #000));
    color: #fff; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .16), 0 14px 34px color-mix(in srgb, var(--accent) 38%, transparent);
    transition: background .25s, box-shadow .25s;
    position: relative;
}
.wpg-letterle-card::after {
    content: ''; position: absolute; inset: 8px; border-radius: 19px; border: 2px dashed rgba(255, 255, 255, .28); pointer-events: none;
}
.wpg-letterle-face { font-size: 86px; font-weight: 900; line-height: 1; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.wpg-letterle-card.is-miss { background: linear-gradient(145deg, #a3abb8, #6b7482); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .16), 0 8px 20px rgba(0, 0, 0, .12); }
.wpg-letterle-card.is-miss .wpg-letterle-face { opacity: .9; text-decoration: line-through; text-decoration-thickness: 6px; text-decoration-color: rgba(255, 255, 255, .7); }
.wpg-letterle-card.is-shake { animation: wpg-shake .4s; }
.wpg-letterle-card.is-flip { animation: wpg-letterle-flip .52s ease both; }
.wpg-letterle-card.is-won { background: linear-gradient(145deg, color-mix(in srgb, var(--ok) 80%, #fff), color-mix(in srgb, var(--ok) 75%, #000)); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .16), 0 14px 40px color-mix(in srgb, var(--ok) 45%, transparent); }
.wpg-letterle-card.is-won::after { border-style: solid; border-color: rgba(255, 255, 255, .4); }
.wpg-letterle-card.is-pop .wpg-letterle-face { animation: wpg-letterle-pop .6s var(--ease) both; }
@keyframes wpg-letterle-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes wpg-letterle-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }

.wpg-letterle-msg { min-height: 22px; margin-bottom: 6px; }
.wpg-letterle-msg b { color: var(--ink); text-transform: uppercase; }
.wpg-letterle-hist { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 28px; max-width: 520px; margin: 0 auto; }
.wpg-app--letterle .wpg-kb { margin-top: 8px; }
.wpg-letterle-chip {
    width: 26px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); font-weight: 800; font-size: 14px;
    text-transform: uppercase; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
    animation: wpg-pop .2s var(--ease);
}
.wpg-letterle-chip.is-hit { background: var(--ok); color: #fff; text-decoration: none; }
.wpg-page--letterle .wpg-dist__row span:first-child { width: 44px; white-space: nowrap; }
.wpg-page--letterle .wpg-modal__big small { font-size: 13px; color: var(--ink-soft); }

@media (max-width: 420px) {
    .wpg-letterle-stage { padding: 10px 0 8px; }
    .wpg-letterle-card { width: 112px; height: 128px; }
    .wpg-letterle-face { font-size: 74px; }
}