:root{font-family:Arial,Helvetica,sans-serif;color:#f4f4ed;background:#202b42;font-synthesis:none;--green:#b5efa0;--yellow:#f7cd72;--gray:#657086}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}header{margin:0 5%;padding:23px 0;border-bottom:1px solid #ffffff21;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:inherit;text-decoration:none}.logo{width:33px;height:33px;display:grid;place-items:center;border-radius:7px;background:var(--green);color:#202b42;font-size:23px;transform:rotate(-8deg)}.edition,.eyebrow,.board-heading{font:700 11px/1.5 monospace;letter-spacing:1px}.edition{color:#acb6c8}main{width:100%;max-width:640px;margin:0 auto;padding:26px 18px 25px;flex:1}.intro{text-align:center}.eyebrow{color:var(--green);margin:0 0 11px}h1{font-size:38px;line-height:1.08;letter-spacing:-1.8px;margin:0}h1 span{color:var(--green)}.intro>p:last-child{color:#acb6c8;font-size:15px;margin:12px 0 22px}.board-heading{max-width:310px;margin:0 auto 12px;display:flex;justify-content:space-between;color:#b9c3d4;font-size:10px;letter-spacing:.5px}.board{width:min(100%,310px);margin:auto;display:flex;flex-direction:column;gap:7px}.row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.tile{aspect-ratio:1;display:grid;place-items:center;border:1.5px solid #52607a;border-radius:7px;background:#26334c;color:#fff;font-size:28px;font-weight:800;line-height:1;box-shadow:0 3px 0 #121d31}.tile.filled{border-color:#bac6da;background:#34445f}.tile.correct{background:var(--green);border-color:var(--green);color:#20391e}.tile.present{background:var(--yellow);border-color:var(--yellow);color:#483215}.tile.absent{background:var(--gray);border-color:var(--gray);color:#fff}.tile.reveal{animation:flip .3s ease-out}@keyframes flip{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}.row.shake{animation:shake .25s ease-in-out}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}.legend{display:flex;justify-content:center;gap:15px;font-size:11px;color:#b9c3d4;margin:17px 0 0}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:9px;height:9px;border-radius:2px}.legend .correct{background:var(--green)}.legend .present{background:var(--yellow)}.legend .absent{background:var(--gray)}.feedback{min-height:58px;margin:15px auto 13px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}#message{font-size:14px;line-height:1.4;margin:0;color:#d6ddec}.feedback.finished{background:#172237;border:1px solid #53607a;padding:18px;border-radius:12px}.finished #message{font-size:22px;letter-spacing:-.5px;font-weight:700;color:var(--green)}#again{padding:10px 18px;border:0;border-radius:6px;background:var(--green);color:#20391e;font-size:14px;font-weight:700;cursor:pointer}.keyboard{display:flex;flex-direction:column;gap:7px;max-width:520px;margin:auto}.key-row{display:flex;justify-content:center;gap:5px}.key{height:47px;min-width:0;flex:1;max-width:47px;padding:0;border:1px solid #62718b;border-radius:6px;background:#40516d;color:#fff;font:700 15px Arial;box-shadow:0 2px 0 #111e33;cursor:pointer;touch-action:manipulation}.key.wide{flex:1.7;max-width:78px;font-size:11px}.key.correct{background:var(--green);color:#20391e;border-color:var(--green)}.key.present{background:var(--yellow);color:#483215;border-color:var(--yellow)}.key.absent{background:#303b51;color:#aeb8ca;border-color:#52607a}.key:hover:enabled{filter:brightness(1.2)}.key:active:enabled{transform:translateY(2px);box-shadow:none}.key:disabled{cursor:default}.keyboard.locked{opacity:.6}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.input-note{text-align:center;color:#9fadc4;font-size:11px;margin:17px 0 0}footer{margin:0 5%;padding:18px 0;border-top:1px solid #ffffff21;display:flex;justify-content:space-between;gap:15px;color:#9fadc4;font-size:11px}@media(max-width:600px){header{padding:17px 0}.edition{display:none}main{padding:23px 12px}.brand{font-size:14px}h1{font-size:32px}.board{max-width:285px}.board-heading{max-width:285px}.tile{font-size:26px}.key{height:47px;font-size:14px}.key-row{gap:4px}.key.wide{font-size:10px}.legend{gap:11px;font-size:10px}footer{font-size:10px;flex-wrap:wrap}.intro>p:last-child{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
:root .tile.reveal{animation-duration:.45s}