@import "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap";
:root{--color-bg:#fafaf9;--color-surface:#fff;--color-text:#1c1917;--color-text-muted:#b1ada9;--color-border:#e7e5e4;--color-primary:#1c1917;--color-primary-fg:#fafaf9;--color-success:#00a300;--color-success-fg:#fff;--color-warning:#f59e0b;--color-warning-fg:#fff;--color-error:red;--color-error-fg:#fff;--color-correct:#00a300;--color-present:#f90;--color-present-one:#ff0;--color-absent:#b1ada9;--radius-lg:16px;--radius-md:12px;--radius-sm:8px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--font-sans:"Inter",sans-serif;--font-mono:"Inter",sans-serif}html{overflow-y:scroll}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;margin:0;padding:0;display:flex;overflow-x:hidden}*,:before,:after{box-sizing:border-box}button{all:unset;box-sizing:border-box;cursor:pointer}main{justify-content:center;width:100%;display:flex}.site-footer{text-align:center;color:#696969;width:100%;padding:12px 0 16px;font-size:12px}.site-footer-link{color:inherit;text-underline-offset:2px;text-decoration:underline}.site-footer-link:hover{opacity:.85}.container{flex-direction:column;align-items:center;gap:24px;width:390px;max-width:100vw;padding:12px;display:flex}.card{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);width:100%;padding:24px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #00a30066}70%{transform:scale(1);box-shadow:0 0 0 10px #00a30000}to{transform:scale(1);box-shadow:0 0 #00a30000}}@keyframes flashYellow{0%,to{background-color:#0000}25%,75%{color:#000;background-color:#ff0}50%{color:#000;background-color:#ffe066}}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes flipIn{0%{opacity:0;transform:rotateX(90deg)}to{opacity:1;transform:rotateX(0)}}.animate-fade-in{animation:.5s ease-out forwards fadeIn}.animate-shake{animation:.4s ease-in-out shake}.animate-pop{animation:.3s cubic-bezier(.175,.885,.32,1.275) popIn}.animate-fade-in-delayed{opacity:0;animation:.6s ease-out 1.5s forwards fadeIn}.title-key{color:#000;border-radius:var(--radius-sm);text-shadow:0 2px #0000001a;justify-content:center;align-items:center;width:50px;height:50px;margin:0 2px;font-size:2.5em;font-weight:800;display:inline-flex}.red-title-key{color:#fff;background-color:red}.orange-title-key{color:#000;background-color:#f90}.yellow-title-key{color:#000;background-color:#ff0}.green-title-key{color:#fff;background-color:#00a300}h1{letter-spacing:-.05em;background:linear-gradient(135deg,var(--color-text)0%,var(--color-text-muted)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2.5rem;font-weight:800}p{line-height:1.6}.input-group{justify-content:center;gap:12px;margin:10px 0;display:flex}.input-slot{border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);width:60px;height:60px;font-family:var(--font-mono);color:var(--color-text);justify-content:center;align-items:center;font-size:2rem;font-weight:700;transition:all .2s;display:flex}.input-slot.active{border-color:var(--color-text);transform:translateY(-2px);box-shadow:0 0 0 4px #0000000d}.input-slot.filled{border-color:var(--color-text-muted);background-color:#f5f5f4}#virtualKeyboard{flex-direction:column;gap:6px;width:100%;display:flex}.keyboard-row{justify-content:center;gap:2px;display:flex}.keyboard-key{border-radius:var(--radius-sm);background:var(--color-surface);border:1px solid var(--color-border);height:48px;color:var(--color-text);font-family:var(--font-sans);transition:all .1s active;-webkit-user-select:none;user-select:none;border-bottom-width:3px;flex:0 0 9%;justify-content:center;align-items:center;min-width:24px;font-size:1.1rem;font-weight:700;display:flex}.keyboard-key:active:not(:disabled){border-bottom-width:1px;transform:translateY(2px)}.keyboard-key.special-key{text-transform:uppercase;letter-spacing:.05em;background-color:#e7e5e4;flex:1;font-size:.8rem}.keyboard-key.backspace-key{font-size:1.4rem}.keyboard-key:disabled{opacity:.5;cursor:not-allowed;border-bottom-width:1px;transform:none}.keyboard-key.correct{background-color:var(--color-correct);color:#fff;border-color:#00a300}.keyboard-key.present{background-color:var(--color-present);color:#000;border-color:#d97706}.keyboard-key.present-one{background-color:var(--color-present-one);color:#fff;border-color:#ca8a04}.keyboard-key.absent{background-color:var(--color-absent);color:#000;border-color:#57534e}#history{flex-flow:wrap;justify-content:center;gap:6px;width:100%;max-width:100%;margin-top:20px;display:flex;position:relative;overflow:visible}.history-item-wrapper{width:fit-content;display:inline-block;position:relative;overflow:visible}.history-item{background:var(--color-surface);border-radius:var(--radius-sm);font-family:var(--font-mono);letter-spacing:.05em;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;width:66px;min-width:66px;padding:5px 10px;font-size:1.35rem;font-weight:700;transition:transform .1s;display:inline-flex}.history-item:active{transform:scale(.95)}.history-item.zero-off{color:#fff;text-shadow:none;background-color:#00a300}.history-item.one-off{color:#000;background-color:#f90}.history-item.two-off{color:#000;background-color:#ff0}.history-item.three-off{color:#fff;background-color:red}.history-item.three-off-zero{color:#000;opacity:.8;background-color:#b1ada9}.history-item-wrapper .tooltip{background-color:var(--color-text);width:max-content;min-width:120px;max-width:280px;color:var(--color-bg);border-radius:var(--radius-sm);white-space:normal;text-align:center;word-wrap:break-word;z-index:1000;box-shadow:var(--shadow-lg);pointer-events:none;margin:0;padding:8px 12px;font-size:.9rem;font-weight:600;line-height:1.4;animation:.2s ease-out tooltipFadeIn;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}@media (max-width:480px){.history-item-wrapper .tooltip{max-width:250px;padding:6px 10px;font-size:.85rem}}.history-item-wrapper .tooltip:after{content:"";border:6px solid #0000;border-top-color:var(--color-text);width:0;height:0;position:absolute;top:100%;left:50%;transform:translate(-50%)}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%)translateY(4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.error-msg{color:red!important;font-weight:800!important}.subtitle-row{text-align:center;justify-content:center;align-items:center;width:100%;display:flex}.how-to-play-link{color:#1e90ff;text-underline-offset:4px;cursor:pointer;margin:9px auto;font-weight:400;text-decoration:underline;text-decoration-thickness:2px;display:inline-block}.feedback-msg{text-align:center;border-radius:var(--radius-lg);justify-content:center;align-items:center;padding:8px 20px;font-size:1.2rem;font-weight:800;display:flex}.last-guess-warning{border-radius:var(--radius-md);padding:6px 12px;font-weight:800;animation:1.6s ease-in-out 2 flashYellow}.feedback-red{color:#fff!important;background-color:red!important}.feedback-gray{color:#000!important;background-color:#b1ada9!important}.feedback-yellow{color:#000!important;background-color:#ff0!important}.feedback-orange{color:#000!important;background-color:#f90!important}.feedback-green,.feedback-success{color:#fff!important;background-color:#00a300!important}.share-button{border-radius:var(--radius-md);text-align:center;width:100%;transition:transform .1s active;margin-top:16px;padding:14px;font-size:1.1rem;font-weight:800;box-shadow:0 4px 6px -1px #0000001a;color:#fff!important;background-color:#1e90ff!important}.share-button:active{transform:scale(.98)}@media (max-width:480px){.keyboard-key.backspace-key{font-size:2.8rem}.history-item{min-width:45px;padding:4.5px 9px;font-size:1.215rem}}.modal-backdrop{z-index:9998;background-color:#00000080;animation:.2s ease-out fadeIn;position:fixed;inset:0}.modal-container{z-index:9999;pointer-events:none;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;border:1px solid var(--color-border);width:100%;max-width:500px;max-height:90vh;padding:24px;animation:.3s ease-out modalSlideIn;overflow-y:auto}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-body{color:var(--color-text);line-height:1.6}.modal-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.modal-header-text{flex-direction:column;flex:1;gap:4px;display:flex}.modal-title{color:var(--color-text);font-size:1.5rem;font-weight:800}.modal-title-divider{background-color:var(--color-border);width:100%;height:4px}.modal-footer{border-top:1px solid var(--color-border);flex-direction:column;gap:12px;margin-top:20px;padding-top:16px;display:flex}.modal-footer-tagline{color:var(--color-text);text-align:center;font-size:.85rem}.modal-footer-link{color:inherit;text-underline-offset:2px;text-decoration:underline}.modal-footer-link:hover{color:var(--color-text)}.modal-step-indicators{justify-content:center;gap:6px;display:flex}.modal-actions{justify-content:flex-end;display:flex}.modal-actions-group{gap:8px;display:flex}.modal-stack{flex-direction:column;gap:4px;display:flex}.modal-paragraph{font-size:1rem;line-height:1.6}.modal-feedback-list{flex-direction:column;gap:12px;display:flex}.modal-feedback-item{align-items:center;gap:12px;display:flex}.modal-feedback-word{text-align:center;flex:0 0 66px;width:66px;min-width:66px}.modal-feedback-text{font-size:.95rem;line-height:1.5}.modal-list{flex-direction:column;gap:12px;padding-left:18px;display:flex}.modal-list li{line-height:1.6;list-style:outside}.modal-close-button{border-radius:var(--radius-sm);color:#dc2626;cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;margin-left:16px;font-size:28px;font-weight:700;line-height:1;transition:all .2s;display:flex}.modal-close-button:hover{background-color:var(--color-border);color:#b91c1c}.modal-button{border-radius:var(--radius-md);cursor:pointer;border:none;padding:10px 20px;font-size:.95rem;font-weight:600;transition:all .2s}.modal-button-primary{color:#fff;background-color:#1e90ff}.modal-button-primary:hover{background-color:#1e90ff;transform:translateY(-1px)}.modal-button-secondary{background-color:var(--color-border);color:var(--color-text)}.modal-button-secondary:hover{background-color:var(--color-text-muted);color:var(--color-surface)}.step-indicator{background-color:var(--color-border);border-radius:50%;width:8px;height:8px;transition:all .2s}.step-indicator-active{background-color:#1e90ff;border-radius:4px;width:24px}.how-to-play-link:hover{color:#1e90ff}.how-to-play-link:active{transform:scale(.98)}@media (max-width:480px){.modal-content{max-width:100%;max-height:95vh;margin:10px}.modal-body{font-size:.9rem}}