:root{color:#1f1f22;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--correct:#538d4e;--present:#b59f3b;--absent:#51545a;--ink:#121213;--border:#c8cbd1;--key:#d7dade;--surface:#fff;background:#f6f7f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(#fffffff0,#f6f7f8f0),repeating-linear-gradient(90deg,#0000 0 28px,#12121309 28px 29px);min-width:320px;min-height:100svh;margin:0}button{font:inherit}.app-shell{grid-template-rows:auto minmax(0,1fr) auto;gap:18px;width:min(100%,680px);min-height:100svh;margin:0 auto;padding:20px 18px 18px;display:grid}@supports (min-height:100dvh){body,.app-shell{min-height:100dvh}}.top-bar{border-bottom:2px solid var(--ink);text-align:center;justify-content:center;align-items:center;min-height:68px;display:flex}.logo-heading{justify-content:center;width:100%;margin:0;line-height:0;display:flex}.site-logo{width:320px;max-width:100%;height:auto;margin:0 auto;display:block}.game-area{align-content:center;justify-items:center;gap:18px;display:grid}.board{gap:6px;inline-size:min(100%,340px);display:grid}.row{perspective:900px;grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.row.shake{animation:.42s ease-in-out row-shake}.tile{--result-bg:var(--surface);aspect-ratio:1;border:2px solid var(--border);background:var(--surface);color:var(--ink);text-transform:uppercase;transform-style:preserve-3d;will-change:transform;place-items:center;font-size:1.8rem;font-weight:900;line-height:1;display:grid}.tile.filled{border-color:#6f6a63}.tile.filled:not(.correct):not(.present):not(.absent){animation:.11s ease-out tile-pop}.tile.correct,.tile.present,.tile.absent{background:var(--result-bg);color:#fff;border-color:#0000}.tile.correct{--result-bg:var(--correct)}.tile.present{--result-bg:var(--present)}.tile.absent{--result-bg:var(--absent)}.row.reveal .tile{animation:.65s ease-in-out both tile-flip;animation-delay:calc(var(--tile-index) * .22s)}.key.correct{background:var(--correct)}.tile.present,.key.present{background:var(--present)}.tile.absent,.key.absent{background:var(--absent)}.toast{border:2px solid var(--ink);background:var(--ink);color:#fff;text-align:center;justify-content:center;align-items:center;max-width:min(100%,360px);min-height:40px;padding:10px 16px;font-weight:800;display:inline-flex}.keyboard{width:100%;padding-bottom:env(safe-area-inset-bottom);gap:8px;display:grid}.key-row{justify-content:center;gap:6px;display:flex}.key{background:var(--key);width:auto;min-width:0;max-width:46px;height:54px;color:var(--ink);cursor:pointer;text-transform:uppercase;touch-action:manipulation;white-space:nowrap;border:0;border-radius:6px;flex:1 1 0;font-size:.95rem;font-weight:900;line-height:1}.key-wide{flex:0 0 72px;max-width:72px;font-size:.78rem}.key.correct,.key.present,.key.absent{color:#fff}.key:active{transform:translateY(1px)}.key:focus-visible{outline-offset:2px;outline:3px solid #287fbb}@keyframes tile-pop{0%{transform:scale(.88)}to{transform:scale(1)}}@keyframes tile-flip{0%{background:var(--surface);color:var(--ink);border-color:#6f6a63;transform:rotateX(0)}49%{background:var(--surface);color:var(--ink);border-color:#6f6a63;transform:rotateX(90deg)}50%{background:var(--result-bg);color:#fff;border-color:#0000;transform:rotateX(90deg)}to{background:var(--result-bg);color:#fff;border-color:#0000;transform:rotateX(0)}}@keyframes row-shake{0%,to{transform:translate(0)}15%,45%,75%{transform:translate(-8px)}30%,60%,90%{transform:translate(8px)}}@media (prefers-reduced-motion:reduce){.row.reveal .tile,.row.shake,.tile.filled:not(.correct):not(.present):not(.absent){animation:none}}@media (width<=480px){.app-shell{padding:10px 8px max(14px, env(safe-area-inset-bottom));grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.8svh,14px)}.top-bar{border-bottom-width:1px;min-height:50px}.site-logo{width:clamp(220px,72vw,250px)}.game-area{align-content:center;gap:clamp(8px,1.6svh,14px)}.board{gap:4px;inline-size:min(100%,306px)}.row{gap:4px}.tile{font-size:1.45rem}.toast{min-height:34px;padding:7px 12px;font-size:.85rem}.keyboard{gap:5px;padding-bottom:0}.key-row{gap:3px}.key{border-radius:5px;height:clamp(42px,6.5svh,48px);font-size:.76rem}.key-wide{flex-basis:56px;max-width:56px;font-size:.58rem}}
