:root{--color-bg-dark:#161819;--color-bg:#1e2021;--color-tile:#303436;--color-red:#c62121;--color-green:#55b725;--color-blue:#3a8dca;--color-yellow:#dac316;--color-orange:#e67e22;--color-inactive:#707070;--text-color:#ececec;--text-on-dark:#fff;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--cursor-color:#3a9bdc;--cursor-shadow:#3a9bdc80;--border-default:#555;--border-filled:#888;--border-empty:#444;--theme-primary:#1e2021;--theme-secondary:#ececec;--theme-tertiary:#303436;--message-success-text:#fff;--message-error-bg:#ececec;--message-error-text:#333;--message-info-bg:#ececec;--message-info-text:#333;--connection-disconnected-text:#999;--connection-disconnected-border:#666;--chevron-color:#ececec;--spacing-xs:2px;--spacing-sm:4px;--spacing-md:8px;--spacing-lg:16px;--spacing-xl:24px;--tile-bg-empty:var(--color-tile,#303436);--tile-bg-filled:var(--color-tile,#303436);--tile-bg-placeholder:var(--color-tile,#303436);--tile-bg-correct:var(--color-green,#55b725);--tile-bg-present:var(--color-yellow,#dac316);--tile-bg-absent:#1a1c1e;--tile-bg-disabled:#1a1c1e;--tile-text-default:var(--text-color,#ececec);--tile-text-placeholder:#707070;--tile-text-correct:#fff;--tile-text-present:#fff;--tile-text-absent:var(--text-color,#ececec);--tile-text-disabled:var(--text-color,#ececec);--tile-border-empty:var(--border-default,#555);--tile-border-filled:var(--border-filled,#888);--tile-border-placeholder:var(--border-filled,#888);--tile-border-correct:var(--color-green,#55b725);--tile-border-present:var(--color-yellow,#dac316);--tile-border-absent:#333;--tile-border-disabled:#444;--tile-border-active:var(--cursor-color,#3a9bdc);--tile-cursor-color:var(--cursor-color,#3a9bdc);--tile-cursor-glow-weak:var(--cursor-shadow,#3a9bdc80);--tile-cursor-glow-strong:#3a9bdccc;--tile-width:60px;--tile-height:60px;--tile-margin:4px;--tile-border-width:2px;--tile-border-width-active:3px;--tile-border-radius:4px;--tile-font-size-responsive:clamp(1.2rem, 5vmin, 2.5rem);--tile-font-size-fixed:24px;--tile-font-weight:700;--tile-transition-transform:transform .15s ease;--tile-transition-color:background-color .2s;--tile-transition-border:border-color .2s;--tile-transition-all:all .2s ease;--tile-opacity-placeholder:.5;--tile-opacity-disabled:.2;--keyboard-bg:#818384;--keyboard-active:#6a6c6d;--keyboard-absent:#3a3a3c;--key-text:#fff;--key-correct-text:#fff;--key-present-text:#fff;--key-absent-text:#fff;--btn-primary-bg:#303436;--btn-primary-text:#fff;--btn-primary-hover-bg:#454749;--btn-primary-active-bg:#565a5d}*{box-sizing:border-box;touch-action:manipulation;margin:0;padding:0}html,body{font-family:var(--font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);background-color:var(--color-bg-dark);color:var(--text-color);overscroll-behavior-x:none;width:100%;height:100dvh;overflow:hidden auto}button,input,select,textarea{font-family:inherit}@media (display-mode:standalone),(display-mode:fullscreen){html,body{height:100svh}}.container{width:100%;max-width:800px;height:100dvh;padding-top:max(.5rem, env(safe-area-inset-top));padding-bottom:max(.5rem, env(safe-area-inset-bottom));padding-left:max(.5rem, env(safe-area-inset-left));padding-right:max(.5rem, env(safe-area-inset-right));flex-direction:column;margin:0 auto;display:flex;position:relative;overflow:hidden}@media (display-mode:standalone),(display-mode:fullscreen){.container{height:100svh;padding-top:max(.25rem, env(safe-area-inset-top));padding-bottom:max(.25rem, env(safe-area-inset-bottom))}.top-bar{align-items:center;min-height:30px;padding:0 .25rem .25rem;display:flex}.top-side{flex:1;align-items:center;display:flex}.top-side.right{justify-content:flex-end}#voice-input-btn{margin:0 auto}.game-board{gap:.5vh}.tiles{gap:.3vmin;max-height:55vh}.keyboard{gap:.4vh;padding:.25vh 0}.keyboard-row{height:7vh;max-height:65px}}.top-bar{flex:none;align-items:center;width:100%;min-height:40px;padding:0 .5rem .5rem;display:flex;position:relative}.top-side{flex:1;align-items:center;display:flex}.top-side.right{justify-content:flex-end}#voice-input-btn{margin:0 auto}.header{display:none}.game-controls{align-items:center;gap:.5rem;display:flex}.control-group{background-color:var(--color-tile);border:1px solid var(--border-default);color:var(--text-color);border-radius:.375rem;align-items:center;gap:0;width:fit-content;padding:0;display:flex;overflow:hidden}.control-label{color:var(--text-color);font-size:.9rem;font-weight:600}#word-length{color:var(--text-color);min-width:unset;background-color:#0000;padding:0;font-weight:800}#decrease-length,#increase-length,#new-game-btn{color:inherit;background-color:var(--color-tile);border:none;border-radius:0;margin:0;padding:.35rem .7rem}.divider{opacity:.5;color:inherit;-webkit-user-select:none;user-select:none;align-items:center;padding:0;font-size:.8rem;font-weight:300;display:flex;transform:scaleY(.7)}#decrease-length:active,#increase-length:active{background-color:#3a3c3f}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:.3rem;justify-content:center;align-items:center;padding:.35rem .75rem;font-size:.85rem;font-weight:600;display:flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-text)}.btn-primary:hover{background-color:var(--btn-primary-hover-bg)}.btn-primary:active{background-color:var(--btn-primary-active-bg);transform:translateY(1px)}.voice-input-btn{background-color:var(--btn-primary-bg);width:2.5rem;height:2.5rem;color:var(--btn-primary-text);border-radius:50%;justify-content:center;align-items:center;padding:.25rem;transition:all .2s;display:flex}.voice-input-btn:hover{background-color:var(--btn-primary-hover-bg);transform:scale(1.05)}.voice-input-btn:active{background-color:var(--btn-primary-active-bg);transform:scale(.95)}.voice-icon{object-fit:contain;width:1.5rem;height:1.5rem}.voice-input-btn.listening{background-color:#ef4444;animation:1s infinite pulse-mic}.tile.voice-interim{border-color:var(--color-yellow);border-style:solid;animation:.8s ease-in-out infinite voice-interim-pulse}@keyframes voice-interim-pulse{0%,to{border-color:var(--color-yellow)}50%{border-color:#0000}}@keyframes pulse-mic{0%,to{box-shadow:0 0 #ef4444b3}50%{box-shadow:0 0 0 8px #ef444400}}.game-board{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:1vh;width:100%;max-width:800px;min-height:0;display:flex}.tiles{grid-template-columns:repeat(var(--word-length,5), 1fr);aspect-ratio:var(--word-length,5) / 6;width:100%;height:auto;max-width:min(calc(var(--word-length,5) * 75px), calc(60vh * var(--word-length,5) / 6));flex:0 auto;place-content:center;gap:.5vmin;max-height:60vh;margin:0 auto;display:grid}@media (height<=450px){.tiles{max-height:70vh;max-width:min(calc(var(--word-length,5) * 75px), calc(70vh * var(--word-length,5) / 6))}}.tile{aspect-ratio:1;border:2px solid var(--border-default);text-transform:uppercase;background-color:var(--color-tile);-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;width:100%;max-width:75px;height:auto;max-height:75px;margin:auto;font-size:clamp(1.2rem,5vmin,2.5rem);font-weight:700;transition:transform .15s,background-color .2s,border-color .2s;display:flex}.tile.clickable{cursor:pointer}.tile.filled{border-color:var(--border-filled);animation:.1s ease-in-out pop}.tile.filled.no-pop{animation:none}.tile.filled.placeholder{opacity:.5;border-color:var(--border-default);color:var(--color-inactive);border-style:dashed}.tile[data-active]{border-color:var(--cursor-color);box-shadow:0 0 8px var(--cursor-shadow);border-width:3px;animation:.6s ease-in-out cursor-pulse}.tile.placeholder[data-active]{border-color:var(--cursor-color);border-style:solid}.tile.correct{background-color:var(--color-green);border-color:var(--color-green);color:var(--tile-text-correct)}.tile.present{background-color:var(--color-yellow);border-color:var(--color-yellow);color:var(--tile-text-present)}.tile.absent{background-color:var(--tile-bg-absent);border-color:var(--tile-border-absent);color:var(--tile-text-absent)}.tile.disabled{opacity:.2;border-color:var(--border-empty);background-color:var(--tile-bg-disabled);color:var(--text-color)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes cursor-pulse{0%{box-shadow:0 0 8px var(--cursor-shadow);transform:scale(1)}50%{box-shadow:0 0 15px var(--cursor-shadow);transform:scale(1.05)}to{box-shadow:0 0 8px var(--cursor-shadow);transform:scale(1)}}.keyboard{flex-direction:column;flex:none;justify-content:flex-end;gap:.8vh;width:100%;max-width:750px;margin-top:auto;padding:.5vh 0;display:flex}.keyboard-row{justify-content:center;gap:.6vmin;width:100%;height:8vh;min-height:35px;max-height:75px;display:flex}.key{background-color:var(--keyboard-bg);color:var(--key-text);cursor:pointer;text-transform:uppercase;-webkit-user-select:none;user-select:none;border:none;border-radius:4px;flex:1;justify-content:center;align-items:center;min-width:0;padding:0;font-size:clamp(.8rem,2.5vh,1.25rem);font-weight:600;display:flex}.key[data-key=enter],.key[data-key=backspace]{flex:1.5}.key:active{background-color:var(--keyboard-active);transform:translateY(1px)}.key.correct{background-color:var(--color-green);color:var(--key-correct-text)}.key.present{background-color:var(--color-yellow);color:var(--key-present-text)}.key.absent{background-color:var(--keyboard-absent);color:var(--key-absent-text)}.key-demo{background-color:var(--keyboard-bg);color:var(--key-text);text-transform:uppercase;-webkit-user-select:none;user-select:none;vertical-align:middle;border:none;border-radius:4px;justify-content:center;align-items:center;min-width:1.5rem;height:1.5rem;margin:0 .25rem;padding:.2rem .4rem;font-size:.9rem;font-weight:600;display:inline-flex}.theme-toggle{transition:transform .2s,background-color .2s}.theme-toggle:hover{transform:scale(1.1)}.theme-toggle:active{transform:scale(.95)}#message-container{z-index:1000;pointer-events:none;flex-direction:column;align-items:center;gap:10px;width:90%;max-width:400px;padding-top:.5rem;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}.message{text-align:center;pointer-events:auto;background-color:var(--color-tile);color:var(--text-color);border:2px solid var(--border-default);border-radius:5px;justify-content:center;align-items:center;gap:.75rem;padding:1rem;font-weight:600;animation:.3s fadeIn;display:flex;position:relative;box-shadow:0 4px 12px #00000080}.message-icon{stroke:currentColor;flex-shrink:0;width:1.5rem;height:1.5rem}.message.success,.message.warning,.message.error,.message.info{color:var(--text-color)}.message-close{color:inherit;cursor:pointer;opacity:.7;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;display:flex;position:absolute;top:4px;right:4px}.message-close:hover{opacity:1;background:#0000001a;border-radius:50%}.game-end-message{text-align:center;flex-direction:column;gap:.75rem;display:flex}.word-lookup-link{text-underline-offset:3px;color:inherit;cursor:pointer;white-space:nowrap;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:2px}.word-lookup-link:hover{opacity:.8}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (height<=450px){.top-bar{min-height:25px;margin-bottom:0;padding:0 .5rem}.btn{padding:.1rem .4rem;font-size:.7rem}.menu-playercount-status{padding:.1rem .5rem;font-size:.75rem}.menu-playercount-status #status-icon{font-size:.85rem}.menu-playercount-status #player-count{font-size:.7rem}.game-board{gap:1px}.keyboard-row{height:9vh;min-height:22px;max-height:30px}.key{font-size:.75rem}.keyboard{gap:1px;margin-bottom:2px;padding:1px 0}.tiles{gap:2px;max-height:60vh}.tile{border-width:1.5px;max-width:32px;min-height:10px;max-height:32px;font-size:.9rem}}.menu-playercount-status{cursor:pointer;border:1px solid #fff3;border-radius:.375rem;align-items:center;gap:.5rem;min-height:32px;padding:.35rem .75rem;font-size:.9rem;font-weight:600;line-height:1;transition:all .3s;display:flex}.menu-playercount-status .menu-text{font-size:.9rem}.menu-playercount-status .divider{opacity:.5;font-weight:300}.status-info{align-items:center;gap:.2rem;display:flex}.menu-playercount-status #status-icon{vertical-align:middle;flex-shrink:0;width:1.25rem;height:1.25rem;display:inline-block}.menu-playercount-status #status-icon path{stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.menu-logo svg{width:100%;height:auto}.menu-playercount-status #status-icon svg{width:100%;height:100%;display:block}.menu-playercount-status #player-count{min-width:1rem;font-size:.85rem;font-weight:700}.menu-playercount-status.status-connected{background-color:var(--status-ok-bg,#55b7254d);color:var(--status-ok-text,var(--tile-text-correct));border-color:var(--status-ok-border,var(--color-green))}.menu-playercount-status.status-warning{background-color:var(--status-warning-bg,#dac3164d);color:var(--status-warning-text,var(--tile-text-correct));border-color:var(--status-warning-border,var(--color-yellow));animation:1.5s infinite pulse-warning}.menu-playercount-status.status-error{background-color:var(--status-error-bg,#c621214d);color:var(--status-error-text,var(--tile-text-correct));border-color:var(--status-error-border,var(--color-red));animation:2s infinite pulse}.menu-playercount-status.status-disconnected{background-color:var(--status-error-bg,#c6212133);color:var(--status-error-text,var(--tile-text-correct));border-color:var(--status-error-border,var(--color-red));opacity:.85}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.7}}.menu-backdrop{z-index:999;cursor:pointer;background:#00000080;width:100%;height:100%;transition:opacity .3s linear;position:fixed;top:0;left:0}.menu-backdrop.hidden{display:none}.menu-sidebar{background-color:var(--color-bg);z-index:1000;width:min(85vw,400px);min-width:280px;height:100vh;transition:transform .3s linear;position:fixed;top:0;left:0;overflow:hidden auto;transform:translate(0);box-shadow:4px 0 12px #0000004d}.menu-sidebar.hidden{visibility:hidden;pointer-events:none;transition:transform .3s linear,visibility 0s linear .3s;transform:translate(-100%)}.menu-header{background-color:var(--color-bg-dark);border-bottom:2px solid var(--border-default);z-index:10;flex-direction:column;gap:.5rem;padding:1rem;display:flex;position:sticky;top:0}.menu-close-btn{background-color:var(--btn-primary-bg);border:2px solid var(--border-default);color:var(--text-color);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.5rem;transition:all .2s;display:flex;position:absolute;top:.5rem;right:.5rem}.menu-close-btn:hover{background-color:var(--btn-primary-hover-bg)}.menu-close-btn:focus-visible{outline:2px solid var(--cursor-color);outline-offset:2px}.menu-close-btn:active{background-color:var(--btn-primary-active-bg)}.menu-logo{justify-content:center;align-items:center;max-width:200px;margin:0 auto;display:flex}.menu-logo-img{width:100%;height:auto;max-height:80px}.menu-content{flex-direction:column;gap:1.5rem;padding:1rem;display:flex}.menu-section{border-bottom:1px solid var(--border-default);padding-bottom:1rem}.menu-section:last-child{border-bottom:none}.menu-section h3{color:var(--text-color);margin:0 0 .75rem;font-size:1.1rem;font-weight:600}.install-app-hint{color:var(--text-color);background:var(--bg-secondary,#0000000a);border-radius:6px;margin:.5rem 0 0;padding:.5rem .75rem;font-size:.9rem;line-height:1.4}.onboarding-intro{border-bottom:1px solid var(--border-default);margin-bottom:1rem;padding-bottom:1rem}.onboarding-intro p{color:var(--text-color);margin:.5rem 0;line-height:1.5}.join-room-error{color:var(--color-red);margin-top:.5rem;font-size:.9rem;line-height:1.3}.color-feedback-grid{grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-top:.75rem;display:grid}.feedback-tile{aspect-ratio:1;border:2px solid var(--border-default);color:#fff;text-align:center;box-sizing:border-box;border-radius:4px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:.25rem;width:100%;min-height:80px;padding:.5rem;font-size:1rem;font-weight:500;display:flex}.feedback-tile.correct{background-color:var(--color-green);color:var(--tile-text-correct);border-color:var(--border-default)}.feedback-tile.present{background-color:var(--color-yellow);color:var(--tile-text-present);border-color:var(--border-default)}.feedback-tile.absent{background-color:var(--tile-bg-absent);color:var(--tile-text-absent);border-color:var(--border-default)}.feedback-tile strong{font-weight:700}.control-item{color:var(--text-color);cursor:auto;margin:.5rem 0;line-height:1.5}.control-item button{vertical-align:middle;margin-right:.5rem;display:inline-block}.compact-color-feedback{margin:.75rem 0 0;padding:0;list-style:none}.compact-color-feedback li{color:var(--text-color);padding:.4rem 0;font-size:.9rem;line-height:1.3}.compact-color-feedback li strong{color:var(--text-color)}.hint-text{color:var(--color-yellow);text-align:center;margin-top:.75rem;font-size:.85rem;font-style:italic;display:block}.invite-content{flex-direction:column;gap:.5rem;display:flex}.invite-text{color:var(--text-color);margin:0;font-size:.9rem}.invite-url{background-color:var(--color-tile);border:1px solid var(--border-filled);width:100%;color:var(--text-color);cursor:text;border-radius:4px;padding:.5rem;font-family:monospace;font-size:.85rem}.invite-url:focus{outline:2px solid var(--color-blue)}.join-game-content{align-items:stretch;gap:.5rem;display:flex}.room-code-input{background-color:var(--color-tile);border:2px solid var(--border-filled);color:var(--text-color);text-align:center;text-transform:uppercase;letter-spacing:.1em;border-radius:4px;flex:1;padding:.5rem;font-size:1rem;font-weight:700}.room-code-input:focus{border-color:var(--color-blue);outline:none}.room-code-input::placeholder{color:var(--text-color);opacity:.5;text-transform:none;letter-spacing:normal;font-weight:400}.main-accordion{cursor:pointer;font-size:1.1rem;font-weight:600;list-style:none}.main-accordion summary{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color);justify-content:space-between;align-items:center;display:flex}.main-accordion summary::-webkit-details-marker{display:none}.main-accordion summary:after{content:"▶";color:var(--chevron-color);font-size:.85rem;transition:transform .2s;display:inline-block}.main-accordion[open] summary:after{transform:rotate(90deg)}.instructions-accordion{flex-direction:column;gap:.5rem;margin-top:.75rem;display:flex}.instruction-item{background-color:var(--color-tile);border-radius:4px;overflow:hidden}.instruction-item summary{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color);background-color:var(--color-tile);justify-content:space-between;align-items:center;padding:.75rem;font-weight:600;list-style:none;transition:background-color .2s;display:flex}.instruction-item summary:after{content:"▼";color:var(--chevron-color);font-size:.8rem;transition:transform .2s}.instruction-item[open] summary:after{transform:rotate(180deg)}.instruction-item summary:hover{background-color:var(--keyboard-active)}.instruction-item[open] summary{background-color:var(--keyboard-active);border-bottom:1px solid var(--border-default)}.instruction-content{color:var(--text-color);background-color:var(--color-bg);padding:.75rem;font-size:.9rem;line-height:1.5}.instruction-content p{margin:0 0 .5rem}.instruction-content p:last-child{margin-bottom:0}.instruction-content ul{margin:.5rem 0;padding-left:1.5rem}.instruction-content li{margin-bottom:.25rem}.main-accordion .instruction-content,.main-accordion .instruction-content *{cursor:auto}.menu-link{background-color:var(--color-tile);color:var(--text-color);text-align:center;border-radius:4px;padding:.75rem;font-weight:600;text-decoration:none;transition:all .2s;display:block}.menu-link:hover{background-color:var(--keyboard-active);transform:translate(-2px)}.btn-full-width{text-align:center;justify-content:center;width:100%}#menu-theme-btn{font-size:.95rem}#theme-btn-text{font-size:inherit}.btn-success{background-color:var(--color-green);color:var(--text-on-dark)}.debug-details summary{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-color);background-color:var(--color-tile);border-radius:4px;justify-content:space-between;align-items:center;padding:.75rem;font-weight:600;list-style:none;transition:background-color .2s;display:flex}.debug-details summary:after{content:"▼";font-size:.8rem;transition:transform .2s}.debug-details[open] summary:after{transform:rotate(180deg)}.debug-details summary:hover{background-color:var(--keyboard-active)}.debug-details[open] summary{background-color:var(--keyboard-active);border-bottom-right-radius:0;border-bottom-left-radius:0}.debug-content{background-color:var(--color-bg);border:2px solid var(--keyboard-active);border-top:none;border-bottom-right-radius:4px;border-bottom-left-radius:4px;padding:.75rem;font-size:.85rem}.debug-item{border-bottom:1px solid var(--border-default);color:var(--text-color);justify-content:space-between;align-items:center;padding:.5rem 0;display:flex}.debug-item:last-child{border-bottom:none;padding-bottom:0}.debug-item strong{color:var(--text-color)}.onboarding-intro p strong{color:var(--color-yellow)}.debug-item span{color:var(--text-color);font-family:monospace}.debug-sync-btn{border:1px solid var(--border-color,#555);color:var(--text-color);cursor:pointer;vertical-align:middle;background:0 0;border-radius:4px;margin-left:.4rem;padding:.1rem .35rem;font-size:.9rem;line-height:1}.debug-sync-btn:hover{background:var(--border-color,#555)}.debug-sync-btn.syncing{pointer-events:none;opacity:.6;animation:.8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#debug-errors-list{color:var(--color-red);margin:.5rem 0 0;padding-left:1.5rem;font-size:.8rem}#debug-errors-list li{margin-bottom:.25rem}@media (width<=600px){.menu-sidebar{width:85vw;min-width:0}.menu-content{padding:.75rem}.menu-section h3{font-size:1rem}}@media (height<=450px){.menu-header{padding:.5rem}.menu-content{gap:1rem;padding:.5rem}.menu-section{padding-bottom:.5rem}}