:root{--bg:#121213;--ink:#ffffff;--muted:#8d8d8d;--tile-border-dark:#3a3a3c;--tile-border-light:#565758;--win:#538d4e;--present:#b59f3b;--absent:#3a3a3c;--key-bg:#818384;--accent:#4a90e2;--header-height: clamp(50px, 8dvh, 60px);--status-height: clamp(30px, 5dvh, 40px);--key-height: clamp(40px, 7dvh, 58px);--keyboard-gap: clamp(4px, 1.2dvh, 8px);--keyboard-pad-y: clamp(6px, 1dvh, 8px);--kb-rows: 3;--cols: 5;--rows: 6;--board-gap: clamp(4px, .8dvh, 5px);--game-max-width: 700px;--kb-h: calc((var(--kb-rows) * var(--key-height)) + ((var(--kb-rows) - 1) * var(--keyboard-gap)) + (2 * var(--keyboard-pad-y)) + env(safe-area-inset-bottom, 0px));--avail-h: calc(100dvh - var(--header-height) - var(--status-height) - var(--kb-h));--board-row-share: 1}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}*:focus{outline:none}::selection,::-moz-selection{background:transparent}html,body{height:100dvh;margin:0;background:var(--bg);color:var(--ink);font-family:Clear Sans,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial;-webkit-font-smoothing:antialiased}body{overflow:hidden;-webkit-user-select:none;user-select:none}.app{display:grid;grid-template-rows:var(--header-height) var(--status-height) minmax(0,1fr) auto;grid-template-columns:100%;height:100dvh;width:100%;align-items:stretch;justify-items:center}.header{grid-row:1;width:100%;max-width:var(--game-max-width);display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:100%;border-bottom:1px solid var(--tile-border-dark);position:relative;transition:max-width .25s ease}.title{position:absolute;left:50%;transform:translate(-50%);margin:0;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(1.5rem,4.5vmin,2.2rem)}.mode select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--absent);color:var(--ink);font-family:inherit;border:none;border-radius:6px;padding:8px 12px;font-weight:700;cursor:pointer;font-size:clamp(.8rem,2.2vmin,.9rem)}.icon-btn{background:none;border:none;padding:6px;color:var(--muted);cursor:pointer}.icon-btn:hover{color:var(--ink)}.icon-btn svg{width:26px;height:26px}.status{grid-row:2;height:100%;width:100%;display:grid;place-items:center}.status .msg{font-size:clamp(.8rem,2.2vmin,.95rem);font-weight:600}.game{grid-row:3;width:100%;max-width:var(--game-max-width);padding:0 clamp(8px,2vmin,16px);min-height:0;overflow:hidden;transition:max-width .25s ease}.board-grid{height:100%;display:grid;gap:clamp(8px,1.5vmin,16px);align-content:center;justify-items:center}body[data-mode=normal] .board-grid{grid-template-columns:1fr}body[data-mode=duet] .board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-mode=quartet] .board-grid{grid-template-columns:repeat(2,minmax(0,1fr));--board-row-share: 2}.board{--ratio: calc(var(--cols) / var(--rows));aspect-ratio:var(--ratio);width:min(100%,calc((var(--avail-h) / var(--board-row-share)) * var(--ratio)));max-width:100%;display:grid;grid-template-rows:repeat(var(--rows),1fr);gap:var(--board-gap)}.row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--board-gap)}.tile{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:4px;border:2px solid var(--tile-border-dark);font-weight:700;text-transform:uppercase;background:transparent;color:var(--ink);font-size:clamp(1rem,5vmin,2rem);transition:background-color .2s,border-color .2s}.tile:empty:before{content:"​"}.tile[data-state=filled],.tile.correct,.tile.present,.tile.absent{color:var(--ink)}.tile.correct,.tile.present,.tile.absent{color:#fff}.tile[data-state=filled]{border-color:var(--tile-border-light);animation:pop .1s}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.tile.flip-in{animation:flip-in .5s ease-in-out}@keyframes flip-in{50%{transform:rotateX(90deg)}}.tile.correct{background-color:var(--win);border-color:var(--win)}.tile.present{background-color:var(--present);border-color:var(--present)}.tile.absent{background-color:var(--absent);border-color:var(--absent)}.keyboard{grid-row:4;width:100%;max-width:var(--game-max-width);display:grid;gap:var(--keyboard-gap);padding:var(--keyboard-pad-y) 8px calc(var(--keyboard-pad-y) + env(safe-area-inset-bottom,0px)) 8px;transition:max-width .25s ease}.kb-row{display:flex;gap:var(--keyboard-gap);justify-content:center}.key{flex:1 1 0;min-width:0;height:var(--key-height);display:grid;place-items:center;background:var(--key-bg);color:var(--ink);border:none;border-radius:4px;font-weight:700;cursor:pointer;font-size:clamp(.8rem,2.5vmin,1rem);text-transform:uppercase;transition:background-color .2s,transform .1s}.key.tag{flex:1.5}.key:active{transform:translateY(1px)}.key.correct{background-color:var(--win)}.key.present{background-color:var(--present)}.key.absent{background-color:var(--absent)}.shake{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.modal{position:fixed;inset:0;z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:visibility .2s,opacity .2s ease}.modal.active{opacity:1;visibility:visible}.modal-overlay{position:absolute;inset:0;background-color:#000000b3}.modal-content{position:relative;background:var(--bg);color:var(--ink);padding:24px;border-radius:8px;border:1px solid var(--tile-border-dark);max-width:500px;width:90%;z-index:1;transition:transform .2s ease;transform:scale(.95)}.modal.active .modal-content{transform:scale(1)}.modal-content h3{margin-top:0;text-align:center}.modal-content p{line-height:1.6}.modal-content hr{border:none;border-top:1px solid var(--tile-border-dark);margin:20px 0}.modal-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:2rem;color:var(--muted);cursor:pointer;padding:0;line-height:1}.help-example{display:flex;gap:5px;margin-bottom:10px}.help-example .tile{width:40px;height:40px;font-size:1.5rem}.stats-grid{display:flex;justify-content:space-around;text-align:center;margin:20px 0}.stat-value{font-size:2rem;font-weight:700}.stat-label{font-size:.8rem;color:var(--muted)}.dist-grid{display:grid;gap:8px;padding:0 10px}.dist-row{display:flex;align-items:center;gap:10px;font-weight:700}.dist-bar{background-color:var(--absent);height:20px;display:flex;justify-content:flex-end;align-items:center;padding-right:8px;color:#fff;border-radius:2px}.dist-bar.highlight{background-color:var(--win)}.modal-tabs{display:flex;justify-content:center;margin-bottom:20px;background-color:var(--tile-border-dark);border-radius:8px;padding:4px}.tab-btn{flex:1;padding:8px 12px;font-size:.9rem;font-weight:700;color:var(--muted);background:none;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s,color .2s}.tab-btn:hover{background-color:var(--tile-border-light);color:var(--ink)}.tab-btn.active{background-color:var(--key-bg);color:var(--ink)}body[data-mode=multiplayer] #boardGrid{display:none}body[data-mode=multiplayer] #multiplayer-container{display:flex!important}.multiplayer-view{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;height:100%}#matchmaking-view h2{margin-top:20px;color:var(--muted)}#btn-cancel-matchmaking{margin-top:20px;background-color:var(--absent);color:var(--ink);border:1px solid var(--tile-border-light);padding:10px 20px;border-radius:6px;font-weight:700;cursor:pointer}.spinner{width:50px;height:50px;border:5px solid var(--tile-border-dark);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.countdown{font-size:6rem;font-weight:700;animation:countdown-pop 1s infinite}@keyframes countdown-pop{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.5}}#game-view-multiplayer{flex-direction:row;gap:10px;width:100%}.player-area{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px;border:2px solid transparent;border-radius:8px;transition:border-color .3s ease,box-shadow .3s ease}.player-area h2{margin:0;font-size:1rem;text-transform:uppercase;color:var(--muted)}#mp-end-answer{font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:10px 0 24px;font-size:.9rem}.end-emoji{font-size:4rem;text-align:center;margin-bottom:16px;animation:pop .5s ease-out}.play-again-btn{width:100%;padding:12px;font-size:1rem;font-weight:700;color:#fff;background-color:var(--win);border:none;border-radius:6px;cursor:pointer;transition:background-color .2s}.play-again-btn:hover{filter:brightness(.9)}