/* Box: coral. A heavy ink square with the letters outside it; every word you
   lock in leaves a solid coral line across the box, the one you're typing a
   dashed one. Letters you can't use next fade back. */

:root { --coral: #ff8a7a; --coral-ink: #d9503d; }
.box { --game: var(--coral); gap: 10px; padding-top: 14px; }

.top { display: grid; gap: 4px; text-align: center; }
.cur { display: flex; justify-content: center; align-items: center; min-height: 42px; margin: 0; font: 700 clamp(26px, 8vw, 32px)/1 var(--ui); text-transform: uppercase; letter-spacing: 0.03em; }
.cur .caret { width: 2px; height: 1.05em; margin-left: 2px; background: var(--coral-ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cur.shake { animation: shake 0.35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.chain { min-height: 22px; margin: 0; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.chain .dash { color: var(--muted); font-weight: 400; }
.par { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.square { display: block; width: min(100%, 340px); margin: 0 auto; touch-action: manipulation; user-select: none; }
.square .frame { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.square polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.square .done-path { stroke: var(--coral); stroke-width: 5; }
.square .cur-path { stroke: var(--coral-ink); stroke-width: 3; stroke-dasharray: 7 7; }
.letter { cursor: pointer; outline: none; }
.letter .hit { fill: transparent; }
.letter .dot { fill: var(--paper); stroke: var(--ink); stroke-width: 3; transition: fill 0.12s; }
.letter text { font: 700 26px var(--ui); text-transform: uppercase; text-anchor: middle; dominant-baseline: central; fill: var(--ink); }
.letter.used .dot { fill: var(--coral); }
.letter.used text { fill: var(--coral-ink); }
.letter.last .dot { fill: var(--ink); }
.letter.off { cursor: default; }
.letter.off text { fill: #c9c9c9; }
.letter.off .dot { stroke: #c9c9c9; }
.letter:focus-visible .hit { stroke: var(--ink); stroke-width: 2; }
.letter:not(.off):hover .dot { fill: #ffd9d2; }

.actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.actions .btn { height: 46px; padding: 0 20px; }

/* modals */
.ours { margin: -6px 0 16px; text-align: center; font-size: 15px; }
.ours b { text-transform: uppercase; letter-spacing: 0.02em; }

@media (prefers-reduced-motion: reduce) {
  .cur .caret, .cur.shake { animation: none; }
  .letter .dot { transition: none; }
}