:root{--color-bg: #1a1a2e;--color-bg-light: #16213e;--color-surface: rgba(26, 26, 46, .85);--color-surface-hover: rgba(26, 26, 46, .95);--color-primary: #4fc3f7;--color-primary-dim: #2196f3;--color-secondary: #e040fb;--color-accent: #69f0ae;--color-danger: #ff5252;--color-text: #e0e0e0;--color-text-bright: #ffffff;--color-text-dim: #9e9e9e;--color-gold: #ffd740;--font-family: "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "Consolas", "Monaco", monospace;--transition-fast: .15s ease;--transition-normal: .3s ease;--radius: 8px;--radius-lg: 16px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button{font-family:inherit;cursor:pointer;border:none;outline:none;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app{height:100%;width:100%;display:flex;flex-direction:column;align-items:center}.app>main{width:100%;flex:1;min-height:0;overflow:hidden}.ad-banner{width:100%;min-height:90px;display:flex;align-items:center;justify-content:center;background:var(--color-bg)}.ad-banner ins{width:100%;max-width:728px}@media(max-width:480px){.ad-banner{height:90px;min-height:unset;overflow:hidden;flex-shrink:0}}.skip-link:focus{position:fixed;top:1rem;left:1rem;width:auto;height:auto;padding:.75rem 1.25rem;margin:0;overflow:visible;clip:auto;white-space:normal;background:var(--color-primary);color:var(--color-bg);font-weight:600;border-radius:var(--radius);z-index:100;text-decoration:none}.start-screen{height:100%;width:100%;display:flex;align-items:center;justify-content:center;animation:fadeIn .5s ease;overflow-y:auto}.start-content{text-align:center;max-width:480px;width:100%;padding:2rem}.start-title{font-size:5rem;font-weight:900;letter-spacing:.3em;color:var(--color-primary);text-shadow:0 0 40px rgba(79,195,247,.4),0 0 80px rgba(79,195,247,.2);margin-bottom:.25rem}.start-subtitle{font-size:1.1rem;color:var(--color-text-dim);margin-bottom:2.5rem;font-style:italic}.start-rules{background:var(--color-surface);border-radius:var(--radius-lg);padding:1.5rem 2rem;margin-bottom:2.5rem;line-height:1.8;font-size:.95rem}.start-rules strong{color:var(--color-danger)}.start-scores{display:flex;justify-content:center;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap}.score-stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.score-value{font-size:1.6rem;font-weight:700;color:var(--color-primary)}.score-wins{color:var(--color-accent)}.score-losses{color:var(--color-danger)}.score-streak{color:var(--color-gold)}.score-label{font-size:.7rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.1em}.start-buttons{display:flex;flex-direction:column;gap:.75rem}.start-btn{padding:.9rem 2rem;font-size:1.1rem;font-weight:600;border-radius:var(--radius);transition:all var(--transition-fast)}.start-btn-primary{background:var(--color-primary);color:var(--color-bg)}.start-btn-primary:hover{background:#81d4fa;transform:translateY(-2px);box-shadow:0 4px 20px #4fc3f766}.start-btn-primary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;transform:translateY(-2px);box-shadow:0 4px 20px #4fc3f766}.start-btn-secondary{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary-dim)}.start-btn-secondary:hover{background:#4fc3f71a;border-color:var(--color-primary);transform:translateY(-2px)}.start-btn-secondary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;transform:translateY(-2px)}@media(max-width:480px){.start-content{padding:1.25rem}.start-title{font-size:3rem;letter-spacing:.25em}.start-subtitle{font-size:.95rem;margin-bottom:1.5rem}.start-rules{padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:.85rem;line-height:1.6}.start-scores{gap:1rem;margin-bottom:1.5rem}.score-value{font-size:1.3rem}.start-btn{padding:.8rem 1.5rem;font-size:1rem}}@media(max-height:600px){.start-content{padding:1rem}.start-title{font-size:2.5rem;margin-bottom:.1rem}.start-subtitle{margin-bottom:1rem}.start-rules{padding:.75rem 1rem;margin-bottom:1rem;font-size:.85rem;line-height:1.5}.start-scores{margin-bottom:1rem}}.lobby{height:100%;width:100%;display:flex;align-items:center;justify-content:center;animation:fadeIn .5s ease}.lobby-content{text-align:center;max-width:500px;width:100%;padding:2rem}.lobby-title{font-size:1.8rem;font-weight:700;color:var(--color-primary);margin-bottom:1.5rem}.lobby-create-btn{width:100%;padding:.9rem;font-size:1.1rem;font-weight:600;background:var(--color-primary);color:var(--color-bg);border-radius:var(--radius);margin-bottom:2rem;transition:all var(--transition-fast)}.lobby-create-btn:hover:not(:disabled){background:#81d4fa;transform:translateY(-2px)}.lobby-create-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.lobby-create-btn:disabled{opacity:.6;cursor:wait}.lobby-games{background:var(--color-surface);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.5rem}.lobby-games-title{font-size:.85rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.lobby-status{color:var(--color-text-dim);font-size:.9rem;padding:1rem 0}.lobby-error{color:var(--color-danger);font-size:.9rem;padding:1rem 0}.lobby-game-list{list-style:none;padding:0;margin:0}.lobby-game-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.lobby-game-row:last-child{border-bottom:none}.lobby-game-id{font-weight:600;color:var(--color-text);font-family:var(--font-mono);font-size:.9rem}.lobby-game-time{color:var(--color-text-dim);font-size:.8rem}.lobby-join-btn{background:transparent;color:var(--color-primary);border:1px solid var(--color-primary-dim);padding:.3rem .9rem;border-radius:var(--radius);font-size:.85rem;font-weight:600;transition:all var(--transition-fast)}.lobby-join-btn:hover{background:#4fc3f71a;border-color:var(--color-primary)}.lobby-join-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.lobby-back-btn{background:transparent;color:var(--color-text-dim);font-size:.9rem;padding:.5rem 1rem;transition:color var(--transition-fast)}.lobby-back-btn:hover{color:var(--color-text)}.lobby-back-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(max-width:480px){.lobby-content{padding:1.25rem}.lobby-title{font-size:1.4rem;margin-bottom:1rem}.lobby-create-btn{font-size:1rem;padding:.8rem;margin-bottom:1.5rem}.lobby-games{padding:1rem}}.game-status{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;padding:1rem;pointer-events:none;z-index:10}.game-status-word{font-size:1.5rem;font-weight:700;letter-spacing:.15em;color:var(--color-text-bright);text-shadow:0 0 20px rgba(79,195,247,.3);margin-bottom:.5rem}.game-status-id{font-size:.7rem;color:var(--color-text-dim);font-family:var(--font-mono);letter-spacing:.05em;margin-bottom:.25rem;opacity:.6}.game-status-text{font-size:.95rem;color:var(--color-text-dim);background:var(--color-surface);padding:.4rem 1rem;border-radius:var(--radius)}.game-status-timer{width:120px;height:3px;background:#ffffff1a;border-radius:2px;margin-top:.5rem;overflow:hidden}.timer-bar{height:100%;background:var(--color-primary);border-radius:2px;animation:timerShrink 1.5s linear forwards}@keyframes timerShrink{0%{width:100%}to{width:0%}}.hint-btn{pointer-events:auto;margin-top:.5rem;width:40px;height:40px;border-radius:50%;background:var(--color-surface);color:var(--color-gold);font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);border:1px solid rgba(255,215,64,.3)}.hint-btn:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-gold);transform:scale(1.1)}.hint-btn:disabled{opacity:.4;cursor:default}.hint-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.hint-backdrop{pointer-events:auto;position:fixed;inset:0;z-index:5}.hint-overlay{z-index:6;pointer-events:auto;margin-top:.75rem;background:var(--color-surface);border:1px solid rgba(79,195,247,.2);border-radius:var(--radius);padding:.75rem 1.25rem;max-width:350px;font-size:.85rem;line-height:1.5;color:var(--color-text);animation:fadeIn .3s ease}@media(max-width:480px){.game-status{padding:.4rem}.game-status-word{font-size:1rem;letter-spacing:.08em;margin-bottom:.15rem}.game-status-text{font-size:.75rem;padding:.2rem .6rem}.hint-btn{width:32px;height:32px;font-size:1rem;margin-top:.25rem}.hint-overlay{max-width:calc(100vw - 1.5rem);font-size:.75rem;padding:.5rem .75rem}}.chat-toggle{position:fixed;bottom:10rem;right:1rem;width:44px;height:44px;border-radius:50%;background:var(--color-surface);color:var(--color-text);font-size:1.3rem;display:flex;align-items:center;justify-content:center;z-index:30;transition:background var(--transition-fast)}.chat-toggle:hover{background:var(--color-surface-hover)}.chat-toggle--open{background:var(--color-primary-dim);color:var(--color-text-bright)}.chat-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--color-danger);color:var(--color-text-bright);font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}.chat-panel{position:fixed;bottom:13.5rem;right:1rem;width:300px;max-height:400px;background:var(--color-surface);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;z-index:30;animation:chatSlideIn .2s ease-out;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}@keyframes chatSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.chat-messages{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.4rem}.chat-empty{color:var(--color-text-dim);font-size:.8rem;text-align:center;margin-top:2rem}.chat-msg{display:flex;flex-direction:column;max-width:85%;padding:.35rem .6rem;border-radius:var(--radius);font-size:.8rem;line-height:1.4;word-break:break-word}.chat-msg--own{align-self:flex-end;background:var(--color-primary-dim);color:var(--color-text-bright)}.chat-msg--other{align-self:flex-start;background:#ffffff14;color:var(--color-text)}.chat-msg-author{font-size:.65rem;font-weight:600;opacity:.7;margin-bottom:1px}.chat-msg-text{white-space:pre-wrap}.chat-input-row{display:flex;gap:.4rem;padding:.5rem;border-top:1px solid rgba(255,255,255,.08);overflow:hidden}.chat-input{flex:1;min-width:0;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);color:var(--color-text);font-family:var(--font-family);font-size:16px;padding:.5rem .6rem;outline:none;transition:border-color var(--transition-fast)}.chat-input::placeholder{color:var(--color-text-dim)}.chat-input:focus{border-color:var(--color-primary)}.chat-send-btn{flex-shrink:0;padding:.5rem .75rem;border-radius:var(--radius);background:var(--color-primary);color:var(--color-text-bright);font-size:.85rem;font-weight:600;transition:opacity var(--transition-fast)}.chat-send-btn:disabled{opacity:.3;cursor:default}.chat-send-btn:not(:disabled):hover{background:var(--color-primary-dim)}@media(max-width:480px){.chat-toggle{bottom:6rem;right:.5rem;width:38px;height:38px;font-size:1.1rem}.chat-panel{bottom:9.5rem;right:.5rem;left:.5rem;width:auto;max-height:300px}}.game-board{position:relative;width:100%;height:100%;overflow:hidden;outline:none}.game-board:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.game-canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.game-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--color-text-dim);animation:fadeIn .3s ease;z-index:10}.game-back-btn{position:absolute;bottom:1rem;left:1rem;background:var(--color-surface);color:var(--color-text-dim);padding:.5rem 1rem;border-radius:var(--radius);font-size:.85rem;z-index:10;transition:all var(--transition-fast)}.game-back-btn:hover{color:var(--color-text);background:var(--color-surface-hover)}.game-back-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.game-rules{position:absolute;top:.5rem;left:1rem;text-align:left;color:var(--color-text-dim);font-size:.75rem;line-height:1.6;opacity:.5;pointer-events:none;z-index:10}.game-rules p{margin:0}.game-rules strong{color:#f87171}@media(max-width:480px){.game-back-btn{bottom:.4rem;left:.5rem;padding:.3rem .6rem;font-size:.75rem}.game-rules{top:auto;bottom:2.5rem;left:.5rem;font-size:.6rem;line-height:1.3}}.result-banner{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-size:3rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;pointer-events:none;z-index:20;animation:bannerFadeIn .3s ease-out;text-shadow:0 2px 12px rgba(0,0,0,.5)}.result-banner--win{color:#4ade80}.result-banner--lose{color:#f87171}@keyframes bannerFadeIn{0%{opacity:0;transform:translateY(-50%) scale(.8)}to{opacity:1;transform:translateY(-50%) scale(1)}}@media(max-width:480px){.result-banner{font-size:2rem}}.gameover-screen{height:100%;width:100%;display:flex;align-items:center;justify-content:center;animation:fadeIn .5s ease}.gameover-content{text-align:center;padding:2rem}.gameover-title{font-size:1.2rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.2em;margin-bottom:1rem}.gameover-winner{font-size:3rem;font-weight:900;margin-bottom:1rem}.gameover-win{color:var(--color-accent);text-shadow:0 0 30px rgba(105,240,174,.4)}.gameover-lose{color:var(--color-danger);text-shadow:0 0 30px rgba(255,82,82,.4)}.gameover-word{color:var(--color-text-dim);font-size:1rem;margin-bottom:2.5rem}.gameover-word strong{color:var(--color-primary);letter-spacing:.1em}.gameover-record{color:var(--color-text-dim);font-size:1.1rem;margin-bottom:2rem;letter-spacing:.05em}.record-wins{color:var(--color-accent);font-weight:700}.record-losses{color:var(--color-danger);font-weight:700}.record-streak{color:var(--color-gold)}.gameover-buttons{display:flex;flex-direction:column;gap:.75rem;align-items:center}.gameover-btn{padding:.8rem 2rem;font-size:1rem;font-weight:600;border-radius:var(--radius);transition:all var(--transition-fast);min-width:200px}.gameover-btn-primary{background:var(--color-primary);color:var(--color-bg)}.gameover-btn-primary:hover{background:#81d4fa;transform:translateY(-2px);box-shadow:0 4px 20px #4fc3f766}.gameover-btn-primary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;transform:translateY(-2px);box-shadow:0 4px 20px #4fc3f766}.gameover-btn-secondary{background:transparent;color:var(--color-text-dim);border:1px solid rgba(255,255,255,.15)}.gameover-btn-secondary:hover{color:var(--color-text);border-color:#ffffff4d}.gameover-btn-secondary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(max-width:480px){.gameover-content{padding:1.25rem}.gameover-winner{font-size:2.2rem}.gameover-word{margin-bottom:1.5rem}.gameover-btn{min-width:180px;padding:.75rem 1.5rem;font-size:.95rem}}