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