.wd{position:relative;max-width:24rem;margin-inline:auto}.wd .score-box{display:flex;flex-direction:column;align-items:center;min-width:4.4rem;padding:.4rem .7rem;border-radius:.6rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-weight:800;font-size:1.2rem;color:#fff}.wd .score-label{font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-lime)}.wd-grid{display:grid;gap:.4rem;justify-content:center;margin-bottom:.85rem}.wd-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}.wd-tile{position:relative;width:clamp(2.8rem,13vw,3.4rem);aspect-ratio:1;display:grid;place-items:center;border:2px solid rgba(255,255,255,.14);border-radius:.4rem;font-family:var(--font-mono);font-weight:800;font-size:1.6rem;text-transform:uppercase;color:#fff}.wd-fill{position:absolute;inset:0;border-radius:.25rem;overflow:hidden;container-type:size;display:grid;place-items:center}.wd-fill i{font-family:var(--font-mono);font-feature-settings:"liga" 0;font-style:normal;font-weight:400;line-height:1;letter-spacing:0;font-size:3rem;font-size:92cqmin}.wd-ch{position:relative;z-index:1;line-height:1}.wd-tile.filled{border-color:#fff6}.wd-tile.filled .wd-ch{animation:wd-pop .12s ease}.wd-tile.correct{border-color:var(--color-lime)}.wd-tile.correct .wd-fill{color:var(--color-lime)}.wd-tile.correct .wd-ch{color:#0d1503}.wd-tile.present{border-color:var(--color-amber)}.wd-tile.present .wd-fill{color:var(--color-amber)}.wd-tile.present .wd-ch{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)}.wd-tile.absent{border-color:#ffffff29}.wd-tile.absent .wd-fill{color:#fff6}.wd-tile.absent .wd-ch{color:#e7e7f3a8;text-shadow:0 1px 2px rgba(7,7,14,.95)}.wd-tile.correct .wd-fill,.wd-tile.present .wd-fill,.wd-tile.absent .wd-fill{animation:wd-reveal .24s ease-out both}@keyframes wd-pop{0%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes wd-reveal{0%{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}.wd-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .95rem;list-style:none;margin:0 0 1rem;padding:0;font-size:.7rem;color:#ffffff80}.wd-legend li{display:inline-flex;align-items:center;gap:.38rem}.wd-sw{width:1.5rem;height:1.5rem;display:inline-grid;place-items:center;overflow:hidden;border:2px solid rgba(255,255,255,.16);border-radius:.3rem;flex:none}.wd-sw i{font-family:var(--font-mono);font-feature-settings:"liga" 0;font-style:normal;font-weight:400;font-size:1.38rem;line-height:1;letter-spacing:.075em}.wd-sw.correct{border-color:var(--color-lime);color:var(--color-lime)}.wd-sw.present{border-color:var(--color-amber);color:var(--color-amber)}.wd-sw.absent{color:#ffffff75}.wd-keyboard{display:flex;flex-direction:column;gap:.4rem;align-items:center}.wd-kbrow{display:flex;gap:clamp(.2rem,.9vw,.32rem);justify-content:center}.wd-key{position:relative;min-width:clamp(1.5rem,7.1vw,1.9rem);height:3rem;padding:0 clamp(.12rem,1.2vw,.45rem) .74rem;border-radius:.4rem;background:#ffffff14;border:none;color:#fff;cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:.82rem;text-transform:uppercase;transition:background .12s ease;display:flex;align-items:center;justify-content:center}.wd-key:hover{background:#ffffff29}.wd-key.wide{min-width:clamp(2.6rem,12vw,3.2rem);font-size:.66rem}.wd-km{position:absolute;left:.22rem;right:.22rem;bottom:.3rem;height:.62rem;overflow:hidden;text-align:center;white-space:nowrap;pointer-events:none;font-family:var(--font-mono);font-feature-settings:"liga" 0;font-weight:400;font-size:.72rem;line-height:.62rem;letter-spacing:0;color:transparent}.wd-key.correct{background:#a3e63529}.wd-key.correct .wd-km{color:var(--color-lime)}.wd-key.present{background:#fbbf2426}.wd-key.present .wd-km{color:var(--color-amber)}.wd-key.absent{background:#ffffff08;color:#6b6b80}.wd-key.absent .wd-km{color:#ffffff57}.wd-overlay{position:absolute;inset:0;border-radius:1rem;background:#07070ee6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:5}@media(prefers-reduced-motion:reduce){.wd-tile.filled .wd-ch,.wd-tile.correct .wd-fill,.wd-tile.present .wd-fill,.wd-tile.absent .wd-fill{animation:none}}