/* Daily Word structure. */
.ttl-text { font-family: var(--font-display); font-weight: 900; font-size: 4.6rem; letter-spacing: .8rem; text-transform: uppercase; }
.ttl-sub { font-size: 2.4rem; color: var(--muted); letter-spacing: .2rem; margin-top: .4rem; }
.word-side { position: absolute; left: 6rem; top: 15rem; width: 52rem; }
.word-side .mascot { position: absolute; left: -3rem; top: 2rem; width: 25rem; }
.word-side .bubble { position: absolute; left: 22rem; top: 4rem; width: 32rem; font-size: 3.2rem; }
.word-stats { position: absolute; right: 6rem; top: 20rem; width: 42rem; display: flex; flex-direction: column; gap: 2.2rem; }
.stat { padding: 2.4rem 3.2rem; border-radius: 3rem; }
.stat-a { font-size: 2.4rem; color: var(--muted); letter-spacing: .1rem; }
.stat-b { font-family: var(--font-display); font-weight: 800; font-size: 6rem; margin-top: .4rem; }
.stat-b span { font-size: 3rem; color: var(--muted); }
.stat-b.lime { color: var(--lime); }
.dots { display: flex; gap: 1rem; margin-top: 1.4rem; }
.dots i { flex: 1; height: 1.4rem; border-radius: .7rem; background: rgba(127,127,127,.18); }
.dots i.on { background: var(--accent); }
.word-mid { position: absolute; left: 50%; top: 17.2rem; transform: translateX(-50%); }
.board { display: flex; flex-direction: column; gap: 1.2rem; }
.row { display: flex; gap: 1.2rem; }
.row.shake { animation: shake .45s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-1.6rem); } 40%, 80% { transform: translateX(1.6rem); } }
.tile { width: 8.8rem; height: 8.8rem; border-radius: 1.8rem; display: flex; align-items: center; justify-content: center; font-size: 5.2rem; font-weight: 700; text-transform: uppercase; }
.tile.pop { animation: pop .12s ease; }
@keyframes pop { 50% { transform: scale(1.1); } }
.tile.flip, .tile.bounce { will-change: transform; }
.tile.flip { animation: flip .52s ease both; animation-delay: var(--d, 0ms); }
@keyframes flip { 0% { transform: perspective(42rem) rotateX(0); } 50% { transform: perspective(42rem) rotateX(90deg); } 100% { transform: perspective(42rem) rotateX(0); } }
.tile.bounce { animation: bounce .6s ease both; animation-delay: var(--d, 0ms); }
@keyframes bounce { 0%, 100% { transform: none; } 40% { transform: translateY(-3rem); } 60% { transform: translateY(.6rem); } }
.tile.ok { background: var(--ok); color: var(--ok-ink); box-shadow: inset 0 .2rem 0 rgba(255,255,255,.55), inset 0 -.6rem 1rem rgba(0,0,0,.25), var(--ok-glow), 0 1rem 1.8rem rgba(0,0,0,.35); }
.tile.near { background: var(--near); color: var(--near-ink); box-shadow: inset 0 .2rem 0 rgba(255,255,255,.55), inset 0 -.6rem 1rem rgba(0,0,0,.25), var(--near-glow), 0 1rem 1.8rem rgba(0,0,0,.35); }
.tile.miss { background: var(--miss); color: var(--miss-ink); box-shadow: inset 0 .2rem 0 rgba(255,255,255,.35), inset 0 -.6rem 1rem rgba(0,0,0,.2), 0 1rem 1.8rem rgba(0,0,0,.3); }
.kbd { position: absolute; left: 0; right: 0; top: 78rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.kbd.locked { opacity: .55; pointer-events: none; }
.krow { display: flex; gap: 1.2rem; }
.key { width: 12.8rem; height: 12rem; border-radius: 2.4rem; display: flex; align-items: center; justify-content: center; font-size: 4.6rem; font-weight: 700; transition: transform .1s, background .2s; }
.key.wide { width: 24.8rem; font-size: 3.6rem; }
.key.ok { background: var(--ok); color: var(--ok-ink); }
.key.near { background: var(--near); color: var(--near-ink); }