/* Word Trainer badges (Claude Design "Word Trainer Badges"; markup from TrainerBadgesHelper#trainer_badge). Colors come
   from the theme (--paper, --card, --sand, --ink, --clay, --clay-soft, --gold, --gold-deep, --text-muted), so one design
   fits every language. Tier: color plus one outer ring per tier; state: reached (default), locked, new. */
.wt-emblem { --size: 64px; position: relative; display: inline-flex; width: var(--size); height: var(--size); flex-shrink: 0; border-radius: 50%;
             color: var(--badge-mark); }
.wt-badge-art { width: 100%; height: 100%; overflow: visible; display: block; }
.wt-shape { fill: var(--badge-fill); stroke: var(--badge-edge); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wt-sym { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.wt-dots { fill: currentColor; }
.wt-ring { fill: none; stroke: var(--badge-edge); stroke-width: 1.4; vector-effect: non-scaling-stroke; display: none; }
.wt-emblem.is-large .wt-ring { stroke-width: 2.4; }
.wt-emblem.is-large .wt-shape { stroke-width: 2.5; }

.wt-emblem[data-tier="1"] { --badge-fill: var(--clay-soft); --badge-edge: var(--clay); --badge-mark: var(--clay); }
.wt-emblem[data-tier="2"] { --badge-fill: var(--sand); --badge-edge: var(--text-muted); --badge-mark: var(--ink); }
.wt-emblem[data-tier="3"] { --badge-fill: var(--gold); --badge-edge: var(--gold-deep); --badge-mark: var(--ink); }
.wt-emblem[data-tier="4"] { --badge-fill: var(--ink); --badge-edge: var(--gold); --badge-mark: var(--gold); }
.wt-emblem[data-tier="2"] .wt-ring-1,
.wt-emblem[data-tier="3"] .wt-ring-1, .wt-emblem[data-tier="3"] .wt-ring-2,
.wt-emblem[data-tier="4"] .wt-ring { display: inline; }

/* On dark (Today's milestone card) */
.on-dark .wt-emblem[data-tier="2"] { --badge-edge: var(--paper); }

/* Locked: the next to reach */
.wt-emblem[data-state="locked"] { --badge-fill: var(--card); --badge-edge: var(--text-muted); --badge-mark: var(--text-muted); }
.wt-emblem[data-state="locked"] .wt-shape { stroke-dasharray: 3.5 2.5; }
.wt-emblem[data-state="locked"] .wt-ring { display: none; }
.on-dark .wt-emblem[data-state="locked"] { --badge-fill: transparent; --badge-edge: var(--sand); --badge-mark: var(--sand); }

/* Just reached: one pulse, then a settled gold ring */
.wt-emblem[data-state="new"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4.5px var(--gold); }
.on-dark .wt-emblem[data-state="new"] { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold); }
.wt-emblem[data-state="new"]::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0;
                                      pointer-events: none; animation: wt-ping 1s ease-out both; }
.wt-emblem.is-large[data-state="new"]::after { inset: -10px; }
@keyframes wt-ping { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.2); } }

/* The round summary moves one moment only: .wt-moment-perfect, -badge or -bars on its root */
@keyframes wt-pop { 0% { opacity: 0; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wt-draw { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
@keyframes wt-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wt-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wt-moment-perfect .wt-score { animation: wt-pop .5s cubic-bezier(.2, .8, .2, 1) both; }
.wt-moment-perfect .wt-score-ring { stroke-dasharray: 340; animation: wt-draw .9s .1s ease-out both; }
.wt-moment-perfect .wt-bonus, .wt-moment-perfect .wt-score-ticks { animation: wt-rise .4s .65s ease-out both; }
.wt-moment-bars .wt-bar-gain { transform-origin: left; animation: wt-grow .7s .15s ease-out both; }
[dir="rtl"] .wt-moment-bars .wt-bar-gain { transform-origin: right; }
.wt-moment-bars .wt-mastered-mark { animation: wt-rise .35s .8s ease-out both; }
.wt-summary:not(.wt-moment-badge) .wt-emblem[data-state="new"]::after { animation: none; display: none; }

@media (prefers-reduced-motion: reduce) {
  .wt-emblem::after { display: none; }
  .wt-summary *, .wt-emblem { animation: none !important; }
}