@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap";:root{--color-correct:#43a047;--color-present:#fb8c00;--color-absent:#616161;--color-text:#fafafa;--bg-color:#fafafa;--text-color:#424242;--border-color:#bdbdbd;--header-bg:#eee;--app-max-width:675px;--gap:8px;--tile-max-width:72px;--key-bg:#e0e0e0;--key-text:#212121;--key-height:56px;--pop-duration:.1s;--color-duration:.1s;--stagger-delay:.1s;--shake-duration:.4s;--fade-amount:32px}.board{gap:var(--gap);width:100%;max-width:min(100%, var(--cols) * var(--tile-max-width) + (var(--cols) - 1) * var(--gap));padding:0 var(--gap);margin:0 auto;display:grid}.word-row{grid-template-columns:repeat(var(--cols), 1fr);gap:var(--gap);width:100%;display:grid}.word-row.shake{animation:shake var(--shake-duration) cubic-bezier(.36, .07, .19, .97) both}.tile{aspect-ratio:1;border:2px solid var(--border-color);border-radius:calc(var(--gap) / 2);width:100%;font-size:clamp(1.2rem, 70vw / var(--cols) * .5, 2rem);text-transform:uppercase;transition:background-color var(--color-duration) ease-in var(--tile-delay), border-color var(--color-duration) ease-in var(--tile-delay), color var(--color-duration) ease-in var(--tile-delay);justify-content:center;align-items:center;font-weight:700;display:flex}.tile.is-pop{animation:typePop var(--pop-duration) ease-in-out;border-color:var(--text-color);transition:none}.tile:not(.correct):not(.present):not(.absent){transition:none!important}.tile.is-revealing{animation:revealPop var(--pop-duration) ease-in-out both;animation-delay:var(--tile-delay)}.tile.correct{background-color:var(--color-correct);border-color:var(--color-correct);color:var(--color-text)}.tile.present{background-color:var(--color-present);border-color:var(--color-present);color:var(--color-text)}.tile.absent{background-color:var(--color-absent);border-color:var(--color-absent);color:var(--color-text)}@keyframes typePop{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes revealPop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@media (width<=768px){.board{max-width:min(100%, var(--cols) * var(--tile-max-width) * .75 + (var(--cols) - 1) * var(--gap));gap:calc(var(--gap) * .75)}.word-row{gap:calc(var(--gap) * .75)}}.keyboard{gap:var(--gap);-webkit-user-select:none;user-select:none;flex-direction:column;width:100%;display:flex}.keyboard-row{gap:calc(var(--gap) / 2);touch-action:none;justify-content:center;width:100%;display:flex}.keyboard-row:nth-child(2){padding:0 var(--gap)}.key{height:var(--key-height);background-color:var(--key-bg);color:var(--key-text);border-radius:calc(var(--gap) / 2);text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--color-duration) ease, color var(--color-duration) ease, transform .1s ease;border:0;flex:1;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:flex}@media (hover:hover){.key:hover:not(.disabled){filter:brightness(1.05)}}.key:active:not(.disabled){filter:brightness(.9);transform:scale(.95)}.key.action-key{background-color:var(--border-color)}.key.action-key[data-key=ENTER]{pointer-events:none;opacity:.5}.key.wide{flex:1.5;font-size:clamp(.7rem,2vw,.9rem)}.key.correct{background-color:var(--color-correct);color:var(--color-text)}.key.present{background-color:var(--color-present);color:var(--color-text)}.key.absent{background-color:var(--color-absent);color:var(--color-text)}.key.ready{box-shadow:0 2px 8px #0000001a;background-color:var(--color-correct)!important;color:var(--color-text)!important;pointer-events:auto!important;opacity:1!important}.key.ready:active{filter:brightness(.9)}.key.disabled{opacity:.4;pointer-events:none}.key .key-icon{display:block}.key .key-text{display:none}@media (width>=500px){.key.wide .key-text{display:inline}.key.wide .key-icon{display:none}}.timer-container{max-width:var(--app-max-width);width:calc(100% - var(--gap) * 2);height:calc(var(--gap) * 1.5);background-color:var(--header-bg);border-radius:calc(var(--gap) * .75);transition:opacity var(--color-duration) ease-in-out;margin:0 auto;position:relative;overflow:hidden}.timer-bar{background-color:var(--color-correct);border-radius:calc(var(--gap) * .75);background-image:linear-gradient(90deg,#fff0 0%,#fff3 50%,#fff0 100%);background-size:200% 100%;height:100%;transition:width 1s linear;animation:2s linear infinite shimmer}.timer-bar.is-critical{background-color:var(--color-present);animation:.5s linear infinite shimmer}.timer-hidden{opacity:.25;pointer-events:none}.timer-hidden .timer-bar{animation:none}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.overlay-backdrop{-webkit-backdrop-filter:blur(var(--fade-amount));backdrop-filter:blur(var(--fade-amount));z-index:2000;padding:calc(var(--gap) * 2);animation:fadeIn var(--pop-duration) ease-out both;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.rules-card{background:var(--bg-color);color:var(--text-color);width:100%;max-width:440px;padding:calc(var(--gap) * 4) calc(var(--gap) * 3);border-radius:calc(var(--gap) * 2);text-align:left;animation:popIn var(--pop-duration) cubic-bezier(.175, .885, .32, 1.275) both;max-height:calc(100dvh - var(--gap) * 4);flex-direction:column;display:flex;box-shadow:0 25px 50px -12px #00000080}.rules-card .rules-header{text-align:center;height:100%;margin-bottom:calc(var(--gap) * 4);padding:var(--gap) 0;border-radius:var(--gap);flex-shrink:0}.rules-card .rules-header h1{letter-spacing:2px;color:var(--color-correct);margin-bottom:var(--gap);font-size:clamp(1.6rem,6vw,2.2rem)}.rules-card .rules-header .subtitle{opacity:.6;font-size:.95rem}.rules-scroll-area{margin-bottom:calc(var(--gap) * 4);flex:1;padding-right:4px;overflow-y:auto}.rules-scroll-area::-webkit-scrollbar{width:4px}.rules-scroll-area::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:2px}.rules-list{margin:0;padding:0;list-style:none}.rules-list li{gap:calc(var(--gap) * 2);margin-bottom:calc(var(--gap) * 3);align-items:flex-start;display:flex}.rules-list li .rule-icon{color:var(--text-color);background:var(--header-bg);padding:calc(var(--gap) * 1.5);border-radius:var(--gap);flex-shrink:0;font-size:24px;line-height:1}.rules-list li strong{margin-bottom:calc(var(--gap) * .25);font-size:1.1rem;display:block}.rules-list li p{opacity:.8;margin:0;font-size:.9rem;line-height:1.4}.start-btn{background-color:var(--color-correct);color:var(--color-text);width:100%;padding:calc(var(--gap) * 2);border-radius:var(--gap);cursor:pointer;border:none;flex-shrink:0;font-size:1.1rem;font-weight:700;transition:transform .1s}.start-btn:active{transform:scale(.97)}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.settings-modal{z-index:3000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-color);border:1px solid var(--header-bg);border-radius:calc(var(--gap) * 2);padding:calc(var(--gap) * 4);box-shadow:0 20px 40px #0000004d}.modal-content h2{text-align:center;color:var(--text-color);margin-top:0}.setting-item{margin:calc(var(--gap) * 4) 0}.setting-item .setting-info{margin-bottom:calc(var(--gap) * 2);justify-content:space-between;align-items:center;font-weight:600;display:flex}.setting-item .setting-info .value-badge{background:var(--color-correct);color:var(--color-text);padding:2px var(--gap);border-radius:calc(var(--gap) / 2)}.settings-slider{width:100%;accent-color:var(--color-correct);cursor:pointer}.modal-actions{gap:var(--gap);margin-top:calc(var(--gap) * 4);flex-direction:column;display:flex}.modal-actions button{padding:calc(var(--gap) * 2);border-radius:var(--gap);cursor:pointer;border:none;font-weight:700;transition:filter .2s}.modal-actions button:active{filter:brightness(.8)}.modal-actions .apply-btn{background:var(--color-correct);color:var(--color-text)}.modal-actions .cancel-btn{color:var(--text-color);opacity:.6;background:0 0}@keyframes fadeIn{0%{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(var(--fade-amount));backdrop-filter:blur(var(--fade-amount))}}@keyframes modalPop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.game-over-modal{z-index:4000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-backdrop{-webkit-backdrop-filter:blur(var(--fade-amount));backdrop-filter:blur(var(--fade-amount));animation:fadeIn var(--pop-duration) ease-out both;background:#0006;position:fixed;inset:0}.modal-wrapper{width:100%;max-width:420px;padding:calc(var(--gap) * 2);animation:modalPop var(--pop-duration) cubic-bezier(.34, 1.56, .64, 1) both;position:relative}.modal-content.game-over-card{background:var(--bg-color);border:2px solid var(--color-correct);border-radius:calc(var(--gap) * 2);padding:calc(var(--gap) * 4);text-align:center;box-shadow:0 20px 40px #0000004d}.modal-content.game-over-card.is-loss{border-color:var(--border-color)}.modal-content.game-over-card h2{letter-spacing:1px;margin-top:0;font-size:2.2rem}.modal-content.game-over-card .target-reveal{opacity:.9;margin:calc(var(--gap) * 2) 0;font-size:1.1rem}.modal-content.game-over-card .target-reveal strong{color:var(--color-present);text-transform:uppercase;letter-spacing:1px;margin-left:4px;font-size:1.3rem;display:inline-block}.modal-content.game-over-card .divider{border:none;border-top:1px solid var(--border-color);margin:calc(var(--gap) * 3) 0}.modal-content.game-over-card .stats-grid{gap:calc(var(--gap) * 2);margin-bottom:calc(var(--gap) * 2);grid-template-columns:1fr 1fr;display:grid}.modal-content.game-over-card .stat-box{background:var(--header-bg);padding:calc(var(--gap) * 2);border-radius:var(--gap);flex-direction:column;display:flex}.modal-content.game-over-card .stat-box .stat-val{color:var(--text-color);font-size:1.8rem;font-weight:700}.modal-content.game-over-card .stat-box .stat-label{text-transform:uppercase;opacity:.6;letter-spacing:1px;margin-top:4px;font-size:.8rem}.modal-content.game-over-card .modal-actions{margin-top:calc(var(--gap) * 4);flex-direction:column;display:flex}.modal-content.game-over-card .modal-actions .play-again-btn{width:100%;padding:calc(var(--gap) * 2);border-radius:var(--gap);cursor:pointer;background:var(--color-correct);color:var(--color-text);border:none;justify-content:center;align-items:center;gap:8px;font-weight:700;transition:transform .1s,filter .2s;display:flex}.modal-content.game-over-card .modal-actions .play-again-btn .material-symbols-outlined{font-size:24px}@media (hover:hover){.modal-content.game-over-card .modal-actions .play-again-btn:hover{filter:brightness(1.05)}}.modal-content.game-over-card .modal-actions .play-again-btn:active{filter:brightness(.95);transform:scale(.97)}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-color);color:var(--text-color);font-family:Montserrat,sans-serif}.layout-constrained,.game-element-wrapper,header .header-inner{width:100%;max-width:var(--app-max-width);padding:0 var(--gap);margin:0 auto}.app-wrapper{width:100%;display:block}header{height:var(--key-height);background-color:var(--header-bg);border-bottom:1px solid var(--border-color);margin-bottom:calc(var(--gap) * 3);width:100%}header .header-inner{height:100%;padding:0 calc(var(--gap) * 2);grid-template-columns:1fr auto 1fr;align-items:center;display:grid}header h1{text-align:center;letter-spacing:2px;white-space:nowrap;margin:0;font-size:1.5rem}.header-actions{align-items:center;gap:calc(var(--gap) / 2);height:100%;display:flex}.header-actions.left{justify-content:flex-start}.header-actions.right{justify-content:flex-end}.game-element-wrapper{margin-bottom:calc(var(--gap) * 3)}.icon-btn{height:calc(var(--key-height) * .7);width:calc(var(--key-height) * .7);cursor:pointer;color:var(--text-color);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.icon-btn .material-symbols-outlined{font-size:28px}.icon-btn:hover{opacity:.8;background-color:#ffffff0d}.icon-btn:active{transform:scale(.92)}@media (width<=768px){html,body{width:100%;height:100%;overflow-y:auto}.app-wrapper{flex-direction:column;width:100%;height:100dvh;display:flex}header{margin-bottom:calc(var(--gap) * 1.5);flex-shrink:0}.game-element-wrapper{margin-bottom:calc(var(--gap) * 1.5);padding:0 var(--gap)}.game-element-wrapper.board-wrapper{flex:1;justify-content:center;align-items:center;display:flex}.game-element-wrapper.timer-wrapper,.game-element-wrapper.keyboard-wrapper{flex-shrink:0}}