:root{--color-bg-dark: #161819;--color-bg: #1e2021;--color-tile: #303436;--color-white: #ececec;--color-red: #c62121;--color-green: #55b725;--color-blue: #3a8dca;--color-yellow: #dac316;--color-orange: #e67e22;--color-inactive: #707070}*{margin:0;padding:0;box-sizing:border-box;touch-action:manipulation}html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--color-bg-dark);color:var(--color-white);height:100%;width:100%}.container{display:flex;flex-direction:column;min-height:100dvh;width:100%;max-width:800px;margin:0 auto;padding:.5rem;position:relative}.top-bar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 .5rem .5rem;min-height:40px;width:100%}.header{display:none}.connection-status{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.375rem;font-weight:600;font-size:.8rem;transition:all .3s ease;white-space:nowrap;position:relative;cursor:help}.connection-status #connection-icon{font-size:1rem}.connection-status #player-count-badge{font-size:.8rem}.connection-status.connecting{background-color:#dac31633;color:var(--color-yellow);border:1px solid var(--color-yellow)}.connection-status.connected{background-color:#55b72533;color:var(--color-green);border:1px solid var(--color-green)}.connection-status.error{background-color:#c6212133;color:var(--color-red);border:1px solid var(--color-red)}.connection-status.stale{background-color:#dac3164d;color:var(--color-yellow);border:2px solid var(--color-yellow);animation:pulse-warning 1.5s infinite}.connection-status.disconnected{background-color:#c6212126;color:#999;border:1px solid #666}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.6}}.connection-tooltip{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#000000f2;color:#fff;padding:.75rem;border-radius:.375rem;font-size:.75rem;font-weight:500;white-space:pre-line;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:1001;box-shadow:0 4px 12px #0000004d;max-width:300px;text-align:left;line-height:1.4;-webkit-user-select:text;user-select:text;cursor:text;margin-top:4px}.connection-status:hover .connection-tooltip,.connection-tooltip:hover{opacity:1;visibility:visible}.game-controls{display:flex;gap:.5rem;align-items:center}.control-group{display:flex;align-items:center;gap:.25rem;background-color:#30343699;padding:.25rem .5rem;border-radius:.3rem;border:1px solid rgba(255,255,255,.1)}.control-label{font-size:.75rem;font-weight:500;margin-right:.25rem}#word-length{font-weight:700;min-width:1rem;text-align:center;font-size:.9rem}.btn{padding:.35rem .75rem;border:none;border-radius:.3rem;font-weight:500;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(--color-blue);color:#fff}.btn-primary:active{background-color:#2a6daa;transform:translateY(1px)}.btn-secondary{background-color:var(--color-tile);color:var(--color-white);border:1px solid var(--color-white)}.btn-secondary:active{background-color:#3a3c3f}.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;padding-bottom:env(safe-area-inset-bottom)}.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 #555;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.filled{border-color:#888;animation:pop .1s ease-in-out}.tile.filled.placeholder{opacity:.5;border-color:#666;border-style:dashed;color:var(--color-inactive)}.tile.correct{background-color:var(--color-green);border-color:var(--color-green)}.tile.present{background-color:var(--color-yellow);border-color:var(--color-yellow)}.tile.absent{background-color:#1a1c1e;border-color:#333}.tile.disabled{opacity:.2;border-color:#444;background-color:#1a1c1e}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.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:#818384;color:#fff;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;font-size:clamp(.7rem,2vh,1rem)}.key:active{background-color:#6a6c6d;transform:translateY(1px)}.key.correct{background-color:var(--color-green)}.key.present{background-color:var(--color-yellow)}.key.absent{background-color:#3a3a3c}.theme-toggle{transition:transform .2s ease,background-color .2s ease}.theme-toggle:hover{transform:scale(1.1)}.theme-toggle:active{transform:scale(.95)}body[class*=theme-pastel] .key{background-color:var(--color-tile);color:var(--color-white);border:1px solid rgba(0,0,0,.1)}body[class*=theme-pastel] .key:active{filter:brightness(.9)}body[class*=theme-pastel] .key.correct{background-color:var(--color-green);color:var(--color-white)}body[class*=theme-pastel] .key.present{background-color:var(--color-yellow);color:var(--color-white)}body[class*=theme-pastel] .key.absent{background-color:#00000026;color:var(--color-inactive)}body[class*=theme-pastel] .tile{border-color:#00000026}body[class*=theme-pastel] .tile.filled{border-color:#00000040}body[class*=theme-pastel] .tile.disabled{background-color:#0000000d;border-color:#00000014}body[class*=theme-pastel] .tile.absent{background-color:#00000026;border-color:#0003;color:var(--color-inactive)}body[class*=theme-pastel] .message.error,body[class*=theme-pastel] .message.info{background-color:var(--color-tile);color:var(--color-white)}body[class*=theme-pastel] .btn-secondary{background-color:var(--color-tile);color:var(--color-white);border-color:#0003}body[class*=theme-pastel] .btn-primary{background-color:var(--color-blue);color:#fff}#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}.message.success{background-color:var(--color-green);color:#fff}.message.error,.message.info{background-color:var(--color-white);color:#333}.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%}@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}.connection-status{padding:.1rem .3rem}.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}}