.fullscreen-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(200,140,255,.3);background:#823cc826;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--transition-fast) ease,background var(--transition-fast) ease;flex-shrink:0;touch-action:manipulation}.fullscreen-btn:hover{background:#823cc84d;transform:translateY(-1px)}.fullscreen-btn:active{transform:scale(.96)}.fullscreen-btn.is-fullscreen{border-color:#ffd64a66;background:#ffd64a1a;color:var(--accent-brand)}.fullscreen-btn .icon-compress,.fullscreen-btn.is-fullscreen .icon-expand{display:none}.fullscreen-btn.is-fullscreen .icon-compress{display:block}.canvas-fullscreen-btn{position:absolute;top:10px;left:12px;z-index:3}.music-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(200,140,255,.3);background:#823cc826;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--transition-fast) ease,background var(--transition-fast) ease;flex-shrink:0;touch-action:manipulation}.music-btn:hover{background:#823cc84d;transform:translateY(-1px)}.music-btn:active{transform:scale(.96)}.music-btn .icon-music-off{display:none}.music-btn.is-muted{border-color:#ff646459;background:#ff3c3c1a;color:var(--text-muted)}.music-btn.is-muted .icon-music-on{display:none}.music-btn.is-muted .icon-music-off{display:block}.canvas-music-btn{position:absolute;top:10px;left:62px;z-index:3}:fullscreen .game-body,:-webkit-full-screen .game-body{padding:12px;align-items:center}:fullscreen .game-stage,:-webkit-full-screen .game-stage{flex:1;align-self:stretch;align-items:center;justify-content:center}:fullscreen .canvas-frame,:-webkit-full-screen .canvas-frame{width:100%;display:flex;flex-direction:column;align-items:center}:fullscreen .canvas-wrap,:-webkit-full-screen .canvas-wrap{max-width:none;width:auto}:fullscreen .game-screen canvas,:-webkit-full-screen .game-screen canvas{max-width:none;width:auto;height:auto}:fullscreen .ttt-board-wrap,:-webkit-full-screen .ttt-board-wrap{width:min(72vh,80vw,700px)}:fullscreen .echo-board-wrap,:-webkit-full-screen .echo-board-wrap{width:min(65vh,70vw,600px)}:fullscreen .game-hud,:-webkit-full-screen .game-hud{max-width:min(75vh,90vw);padding-bottom:12px}.ttt-container{display:flex;flex-direction:column;align-items:center;gap:16px}.ttt-status{font-family:var(--font-pixel);font-size:var(--text-pixel);color:var(--text-secondary);text-align:center;min-height:1.5em;letter-spacing:.5px}.ttt-board-wrap{position:relative;width:min(420px,85vw);z-index:1}.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;background:#b07fff59;border-radius:var(--radius-md);padding:4px;width:100%;aspect-ratio:1;border:2px solid rgba(176,127,255,.4);box-shadow:0 12px 32px #00000080}.ttt-cell{background:var(--bg-deep);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:var(--font-pixel);font-size:clamp(1.6rem,5vw,2.8rem);cursor:pointer;border:none;color:var(--text-primary);transition:background var(--transition-fast) ease,transform var(--transition-fast) ease;width:100%}.ttt-cell:hover:not(:disabled):not(.ttt-x):not(.ttt-o){background:var(--bg-elevated)}.ttt-cell:disabled{cursor:default}.ttt-cell.ttt-x{color:var(--accent-ttt)}.ttt-cell.ttt-o{color:var(--accent-pong)}.ttt-cell.ttt-win{background:#b07fff2e;animation:ttt-win-pulse .45s ease both}@keyframes ttt-win-pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.echo-container{display:flex;flex-direction:column;align-items:center;gap:16px}.echo-status{font-family:var(--font-pixel);font-size:var(--text-pixel);color:var(--text-secondary);text-align:center;min-height:1.5em;letter-spacing:.5px}.echo-board-wrap{position:relative;width:min(440px,90vw);aspect-ratio:5 / 3;z-index:1}.echo-board{display:flex;align-items:flex-end;justify-content:center;gap:8px;width:100%;height:100%;padding:12px;border-radius:var(--radius-lg);background:var(--bg-deep);border:2px solid rgba(var(--theme-rgb),.3);box-shadow:0 12px 32px #00000080}.echo-pad{flex:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:filter .1s ease,transform .1s ease;-webkit-tap-highlight-color:transparent}.echo-pad:disabled{cursor:default}.echo-pad-coral{background:#9e3b3b;height:60%}.echo-pad-amber{background:#8b6a1a;height:80%}.echo-pad-mint{background:#1a7a77;height:100%}.echo-pad-sky{background:#2a5a9e;height:80%}.echo-pad-violet{background:#5a4a9e;height:60%}.echo-pad-coral.echo-pad-active{background:#ff7675;filter:brightness(1.4);box-shadow:0 0 30px #ff767599}.echo-pad-amber.echo-pad-active{background:#fdcb6e;filter:brightness(1.4);box-shadow:0 0 30px #fdcb6e99}.echo-pad-mint.echo-pad-active{background:#00cec9;filter:brightness(1.4);box-shadow:0 0 30px #00cec999}.echo-pad-sky.echo-pad-active{background:#74b9ff;filter:brightness(1.4);box-shadow:0 0 30px #74b9ff99}.echo-pad-violet.echo-pad-active{background:#a29bfe;filter:brightness(1.4);box-shadow:0 0 30px #a29bfe99}.echo-pad:not(:disabled):hover{filter:brightness(1.15)}.echo-pad:not(:disabled):active{transform:scale(.96)}.signup-prompt-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#0f0a1ae0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:16px;overflow-y:auto;animation:signup-fade-in .3s ease}@keyframes signup-fade-in{0%{opacity:0}to{opacity:1}}.signup-prompt-card{width:100%;max-width:400px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;background:#241845d1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-medium);border-radius:var(--radius-lg);padding:32px 28px 24px;box-shadow:var(--shadow-elevated);animation:signup-slide-up .3s ease}@keyframes signup-slide-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.signup-prompt-content{transition:opacity .2s ease,transform .2s ease}.signup-prompt-content.fade-out{opacity:0;transform:translateY(6px)}.signup-prompt-content.fade-in{animation:signup-content-in .2s ease}@keyframes signup-content-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.signup-prompt-card h2{font-family:var(--font-heading);font-weight:800;font-size:var(--text-h1);color:var(--accent-brand);margin:0 0 4px;text-align:left}.signup-prompt-desc{font-family:var(--font-body);font-size:var(--text-small);color:var(--text-secondary);text-align:left;margin:0 0 20px;line-height:1.5}.signup-prompt-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}.btn-choice{width:100%;padding:14px 20px;min-height:48px;font-family:var(--font-heading);font-weight:700;font-size:1rem;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s;text-align:center;line-height:1.2}.btn-choice:active{transform:scale(.97)}.btn-choice--primary{background:var(--accent-brand);color:var(--bg-deep);border:2px solid var(--accent-brand);box-shadow:0 2px 12px #ffd70040}.btn-choice--primary:hover{filter:brightness(1.1);box-shadow:0 4px 18px #ffd70059}.btn-choice--secondary{background:transparent;color:var(--accent-brand);border:2px solid var(--accent-brand)}.btn-choice--secondary:hover{background:#ffd70014}.signup-prompt-card .form-group{margin-bottom:14px}.signup-prompt-card .password-requirements{margin-top:6px}.signup-prompt-card .password-requirements.hidden-until-focus{display:none}.signup-prompt-dismiss{text-align:center;margin-top:12px}.signup-prompt-dismiss a{color:var(--text-muted);font-size:var(--text-small);text-decoration:underline;text-underline-offset:2px;transition:color var(--transition-fast)}.signup-prompt-dismiss a:hover{color:var(--text-secondary)}.signup-prompt-back{text-align:center;margin-top:14px}.signup-prompt-back a{color:var(--text-muted);font-size:var(--text-small);text-decoration:none;transition:color var(--transition-fast)}.signup-prompt-back a:hover{color:var(--text-secondary)}.forgot-password-link{text-align:center;margin-top:10px;margin-bottom:0}.forgot-password-link a{color:var(--text-muted);font-size:var(--text-small);text-decoration:underline;text-underline-offset:2px;transition:color var(--transition-fast)}.forgot-password-link a:hover{color:var(--text-secondary)}.signup-prompt-card .nickname-suggestion-area{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.signup-prompt-card .nickname-label{color:var(--text-secondary);font-size:.82rem;font-weight:600;letter-spacing:.3px}.signup-prompt-card .nickname-display-row{display:flex;align-items:center;gap:12px;background:var(--bg-elevated);border-radius:var(--radius-sm);padding:10px 14px;border:1.5px solid rgba(255,255,255,.06)}.signup-prompt-card .nickname-preview{flex:1;font-size:1.1rem;font-weight:700;font-family:var(--font-heading);color:var(--accent-brand);min-height:1.5rem;display:flex;align-items:center}.signup-prompt-card .btn-generate{padding:8px 14px;min-height:44px;font-size:.78rem;border-radius:var(--radius-sm);background:transparent;border:1.5px solid var(--accent-brand);color:var(--accent-brand);cursor:pointer;transition:background .15s,color .15s;font-family:var(--font-body);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;box-shadow:none;text-shadow:none;width:auto}.signup-prompt-card .btn-generate:hover{background:var(--accent-brand);color:var(--bg-deep);filter:none;transform:none;box-shadow:none}.signup-prompt-card .btn-generate:active{transform:scale(.95)}.signup-prompt-card .btn-generate:disabled{opacity:.5;cursor:not-allowed}@keyframes nickname-scramble-in{0%{opacity:0;filter:blur(4px);transform:translateY(4px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}.signup-prompt-card .nickname-preview.animate-in{animation:nickname-scramble-in .35s ease-out}@media(max-height:640px){.signup-prompt-card{padding:20px 18px 16px}.signup-prompt-card .form-group{margin-bottom:10px}}@media(max-height:500px){.signup-prompt-card{padding:16px 14px 12px}.signup-prompt-card h2{font-size:var(--text-h2)}.signup-prompt-card .form-group{margin-bottom:8px}}