:root{--green: #538d4e;--yellow: #b59f3b;--color-tone-1: #1a1a1b;--color-tone-2: #787c7e;--color-tone-3: #878a8c;--color-tone-4: #d3d6da;--color-tone-5: #edeff1;--color-tone-6: #f6f7f8;--tile-text-color: #ffffff;--tile-font-size: clamp(1.4rem, 7vw, 2.2rem);--key-height: clamp(44px, 8vh, 58px);--header-height: clamp(44px, 7vh, 56px)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;height:100dvh;margin:0;padding:0}body{font-family:Libre Franklin,system-ui,sans-serif;background:#fff;color:var(--color-tone-1);overscroll-behavior:none;overflow:hidden;-webkit-font-smoothing:antialiased}#game{max-width:500px;margin:0 auto;height:100%;height:100dvh;display:flex;flex-direction:column;padding:0 8px;padding-bottom:env(safe-area-inset-bottom)}header{position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--color-tone-4);height:var(--header-height);flex-shrink:0}.board-close-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:6px;color:var(--color-tone-1);display:flex;align-items:center;justify-content:center}.board-close-x svg{width:24px;height:24px;fill:currentColor}.title{font-size:clamp(20px,5vw,28px);font-weight:700;letter-spacing:.1rem;text-transform:uppercase}#board-container{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:4px 0}#board{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;aspect-ratio:5 / 6;height:min(420px,100%,calc((min(100vw,500px) - 16px) * 6 / 5))}@supports (width: 1cqw){#board-container{container-type:size}#board{aspect-ratio:auto;--tile: min( calc((100cqw - 20px)/5) , calc((100cqh - 25px) / 6), 66px);width:calc(var(--tile) * 5 + 20px);height:calc(var(--tile) * 6 + 25px)}}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.tile{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--tile-font-size);font-weight:700;text-transform:uppercase;border:2px solid var(--color-tone-4);-webkit-user-select:none;user-select:none;transition:border-color 50ms}.tile[data-state=tbd]{border-color:var(--color-tone-3)}.tile[data-state=correct]{background:var(--green);border-color:var(--green);color:var(--tile-text-color)}.tile[data-state=present]{background:var(--yellow);border-color:var(--yellow);color:var(--tile-text-color)}.tile[data-state=absent]{background:var(--color-tone-2);border-color:var(--color-tone-2);color:var(--tile-text-color)}#keyboard-container{padding:0 4px 8px;flex-shrink:0}.keyboard-row{display:flex;justify-content:center;gap:clamp(3px,1vw,6px);margin-bottom:clamp(4px,1vh,8px);touch-action:manipulation}.keyboard-row:last-child{margin-bottom:0}.keyboard-row button{flex:1;max-width:43px;height:var(--key-height);border:none;border-radius:4px;background:var(--color-tone-4);color:var(--color-tone-1);font-family:inherit;font-size:clamp(11px,3vw,13px);font-weight:700;text-transform:uppercase;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.keyboard-row button.wide{flex:1.5;font-size:clamp(10px,2.5vw,12px);max-width:65px}.keyboard-row .spacer{flex:.5}button[data-state=correct]{background:var(--green);color:#fff}button[data-state=present]{background:var(--yellow);color:#fff}button[data-state=absent]{background:var(--color-tone-2);color:#fff}button svg{width:20px;height:20px;fill:currentColor}#toaster{position:fixed;top:60px;left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{background:var(--color-tone-1);color:#fff;padding:10px 16px;border-radius:4px;font-weight:700;font-size:14px;animation:SlideIn .2s ease forwards}.toast.fade{opacity:0;transition:opacity .3s}#overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#ffffffd9;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;z-index:500}#overlay.show{opacity:1;visibility:visible;transition:opacity .3s}.reveal-card{position:relative;background:#fff;border:1px solid var(--color-tone-4);border-radius:12px;padding:40px 32px 32px;max-width:380px;width:90%;text-align:center;animation:PopUp .2s ease forwards}.reveal-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-tone-2);margin:0 0 8px}.reveal-sentence{font-size:22px;font-weight:700;margin:0}.reveal-sentence .hl{color:var(--green)}.close-x{position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;padding:4px;color:var(--color-tone-3);display:flex;align-items:center;justify-content:center}.close-x svg{width:20px;height:20px;fill:currentColor}#completion-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:600;background:#e3e3e1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 24px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;animation:FadeIn .3s ease}.comp-back{position:absolute;top:16px;left:12px;background:none;border:none;cursor:pointer;padding:6px;color:var(--color-tone-1);display:flex;align-items:center;justify-content:center}.comp-back svg{width:28px;height:28px;fill:currentColor}.comp-logo{display:grid;grid-template-columns:repeat(3,18px);grid-template-rows:repeat(3,18px);gap:2px;margin-top:40px;flex-shrink:0}.comp-logo span{border-radius:2px}.comp-logo span.g{background:var(--green)}.comp-logo span.y{background:var(--yellow)}.comp-logo span.w{background:#fff;border:1px solid var(--color-tone-4)}.comp-brand{font-family:Georgia,Times New Roman,serif;font-weight:700;font-size:28px;margin-top:10px;flex-shrink:0}.comp-body{display:flex;flex-direction:column;align-items:center;gap:12px;margin:auto 0;max-width:420px;padding:24px 0}.comp-title{font-family:Georgia,Times New Roman,serif;font-weight:700;font-size:clamp(32px,9vw,44px);margin:0}#completion-screen .reveal-sentence{font-size:clamp(16px,4.5vw,20px)}#completion-screen .win-photo{width:auto;max-width:min(200px,80vw);max-height:clamp(140px,34vh,340px);margin-top:8px}.comp-admire{background:var(--color-tone-1);color:#fff;border:none;border-radius:999px;padding:14px 36px;font-family:inherit;font-weight:700;font-size:16px;margin-top:20px;cursor:pointer}.comp-results{background:none;border:none;padding:4px;margin-top:12px;font-family:inherit;font-weight:600;font-size:15px;color:var(--color-tone-1);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.comp-masthead{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:14px;text-align:center}.comp-date{font-weight:700;font-size:20px;margin:0}.comp-masthead-num,.comp-masthead-editor{font-weight:400;font-size:17px;margin:0;color:var(--color-tone-1)}@media (max-height: 720px){.comp-logo{margin-top:16px}.comp-body{padding:12px 0;gap:8px}.comp-title{font-size:clamp(26px,7vw,34px)}#completion-screen .reveal-sentence{font-size:clamp(15px,4vw,18px)}#completion-screen .win-photo{max-height:22vh}.comp-admire{margin-top:12px}.comp-masthead{margin-top:12px;gap:2px}.comp-date{font-size:17px}.comp-masthead-num,.comp-masthead-editor{font-size:14px}}#postgame-actions{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 16px calc(24px + env(safe-area-inset-bottom));flex-shrink:0}.postgame-btn{background:#fff;color:var(--color-tone-1);border:1px solid var(--color-tone-1);border-radius:999px;padding:14px 0;width:min(320px,85%);font-family:inherit;font-weight:700;font-size:16px;cursor:pointer}#results-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:700}.results-score{font-size:20px;font-weight:700;margin:0 0 16px}.results-grid{display:flex;flex-direction:column;align-items:center;gap:4px}.results-row{display:flex;gap:4px}.results-row span{width:26px;height:26px;border-radius:3px;background:var(--color-tone-4)}.results-row span[data-state=correct]{background:var(--green)}.results-row span[data-state=present]{background:var(--yellow)}.results-row span[data-state=absent]{background:var(--color-tone-2)}.results-copy{margin-top:20px}.win-photo{display:block;width:100%;max-width:280px;margin:16px auto 0;border-radius:10px;object-fit:cover}@keyframes PopIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes FlipIn{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes FlipOut{0%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes Shake{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-4px)}30%,70%{transform:translate(4px)}}@keyframes Bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-30px)}50%{transform:translateY(5px)}60%{transform:translateY(-15px)}80%{transform:translateY(2px)}to{transform:translateY(0)}}@keyframes SlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes FadeIn{0%{opacity:0}to{opacity:1}}@keyframes PopUp{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.tile.pop{animation:PopIn .1s linear}.tile.flip-in{animation:FlipIn .25s ease-in}.tile.flip-out{animation:FlipOut .25s ease-in}.row.shake{animation:Shake .6s}.tile.bounce{animation:Bounce 1s}@media (prefers-reduced-motion: reduce){.tile.pop,.tile.flip-in,.tile.flip-out,.row.shake,.tile.bounce,.toast,.reveal-card,#completion-screen{animation:none!important}}button:focus-visible,.close-x:focus-visible{outline:2px solid var(--color-tone-1);outline-offset:2px}