/* 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); }
/* Fix-a-letter controls (Tommy, Nov 3): 4th row of arrows, a labeled Delete, tappable slots, loud active slot */
.tile { cursor: pointer; }
.tile.act { outline: .6rem solid var(--accent, #00E5FF); outline-offset: .4rem; z-index: 1; }
.key.del { font-size: 3.8rem; width: 44rem; }
@media (orientation: landscape) {
  .word-mid { top: 15.6rem; } .tile { width: 8rem; height: 8rem; font-size: 4.8rem; }
  .kbd { top: 72.5rem; gap: 1.1rem; } .key { height: 10.4rem; } .key.arrow { width: 30rem; font-size: 4.4rem; }
}
/* Result card: next steps + win party (Tommy, Nov 3) */
.sheet-actions .res-play { font-size: 4rem; padding: 2.4rem 4.8rem; min-height: 11rem; flex: 1 1 100%; }
.sheet-actions { flex-wrap: wrap; gap: 1.6rem; }
.sheet-actions .res-more, .sheet-actions .res-board { flex: 1; min-height: 9rem; }
.res-next { font-size: 3.2rem; text-align: center; } .res-next b { font-size: 4.4rem; display: block; letter-spacing: .2rem; }
.win-bot { display: block; width: 22rem; margin: -2rem auto 0; transform-origin: 50% 90%; animation: botdance 1s ease-in-out infinite; filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.4)); }
@keyframes botdance { 0%, 100% { transform: rotate(-10deg) translateY(0); } 25% { transform: rotate(0) translateY(-2.4rem) scale(1.05); } 50% { transform: rotate(10deg) translateY(0); } 75% { transform: rotate(0) translateY(-2.4rem) scale(1.05); } }
.confetti-rain { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-rain i { position: absolute; top: -4vh; width: 1.4rem; height: 2.2rem; border-radius: .3rem; animation: confall linear forwards; }
@keyframes confall { to { top: 105vh; transform: rotate(720deg) translateX(6rem); } }
@media (prefers-reduced-motion: reduce) { .win-bot, .confetti-rain i { animation: none; } }