:root{--color-meta-blue:#1877f2;--color-bg:#fff;--color-text:#0a0a0a;--color-border:#dcdfe4;--tile-border:#dcdfe4;--tile-bg:#fff;--tile-text:#0a0a0a;--key-bg:#eef3ff;--key-text:#0a0a0a;--key-border:#d0dbff;--state-correct:#6aaa64;--state-present:#c9b458;--state-absent:#787c7e}*{box-sizing:border-box}body,html{padding:0;margin:0;color:var(--color-text);font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}.app-header,body,html{background:var(--color-bg)}.app-header{position:-webkit-sticky;position:sticky;top:0;z-index:10;border-bottom:1px solid var(--color-border)}.app-header-inner{display:flex;align-items:center;justify-content:center;height:64px;max-width:900px;margin:0 auto;padding:0 16px}.brand{margin:0;font-size:24px;font-weight:800;letter-spacing:.04em;color:var(--color-meta-blue);text-transform:uppercase}.container{max-width:900px;margin:0 auto;padding:24px 16px 64px}.game{display:flex;flex-direction:column;gap:24px;align-items:center}.grid{grid-template-rows:repeat(6,1fr);grid-gap:8px}.grid,.row{display:grid;gap:8px}.row{grid-template-columns:repeat(5,1fr);grid-gap:8px}.tile{width:56px;height:56px;border:2px solid var(--tile-border);background:var(--tile-bg);color:var(--tile-text);display:inline-flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:6px;transition:transform .12s ease,background-color .12s ease,border-color .12s ease,color .12s ease}.tile.filled{border-color:var(--color-meta-blue)}.tile.correct{background:var(--state-correct);border-color:var(--state-correct);color:#fff}.tile.present{background:var(--state-present);border-color:var(--state-present);color:#fff}.tile.absent{background:var(--state-absent);border-color:var(--state-absent);color:#fff}.keyboard{grid-gap:6px}.kb-row,.keyboard{display:grid;gap:6px}.kb-row{grid-auto-flow:column;grid-gap:6px;justify-content:center}.key{background:var(--key-bg);border:1px solid var(--key-border);color:var(--key-text);padding:12px 8px;border-radius:6px;font-weight:700;min-width:36px;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color .12s ease,transform 60ms ease,color .12s ease}.key:active{transform:translateY(1px)}.key.correct{background:var(--state-correct);color:#fff;border-color:var(--state-correct)}.key.present{background:var(--state-present);color:#fff;border-color:var(--state-present)}.key.absent{background:var(--state-absent);color:#fff;border-color:var(--state-absent)}.key.action{background:var(--color-meta-blue);color:#fff;border-color:var(--color-meta-blue)}.hud{display:flex;flex-direction:column;align-items:center;gap:8px}.message{min-height:24px;color:var(--color-meta-blue);font-weight:600}.actions{display:flex;gap:8px}.btn{background:var(--color-meta-blue);color:#fff;border:1px solid var(--color-meta-blue);padding:10px 14px;border-radius:6px;font-weight:700;cursor:pointer}.btn.secondary{background:#fff;color:var(--color-meta-blue)}.app-footer{border-top:1px solid var(--color-border);padding:24px 0}.app-footer-inner{max-width:900px;margin:0 auto;padding:0 16px;color:#687387;font-size:14px;display:flex;justify-content:center}.celebration-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:50;animation:overlay-fade-in .2s ease}.celebration-inner{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;border:1px solid var(--color-border);box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:51}.celebration-photo :where(img,picture,video){width:220px;height:220px;border-radius:12px;display:block}.celebration-text{margin-top:12px;font-size:20px;font-weight:800;color:var(--color-meta-blue)}.confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:52}.confetti-piece{position:absolute;top:-10px;border-radius:2px;animation-name:confetti-fall,confetti-spin;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,infinite}@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0deg);opacity:1}to{transform:translateY(110vh) rotate(2turn);opacity:1}}@keyframes confetti-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:480px){.tile{width:48px;height:48px;font-size:20px}}