.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)}.codigo-container{display:flex;flex-direction:column;align-items:center;gap:9px;--codigo-w: min(340px, 90vw);--codigo-w: min(340px, 90vw, calc((100dvh - 405px) / 1.5))}.codigo-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}.codigo-board-wrap{position:relative;width:var(--codigo-w);z-index:1}.codigo-board{display:grid;grid-template-rows:repeat(6,1fr);gap:8px;width:100%}.codigo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.codigo-tile{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-family:var(--font-pixel);font-size:clamp(1.4rem,6vw,2.2rem);color:var(--text-primary);background:var(--bg-deep);border:2px solid rgba(var(--theme-rgb),.28);border-radius:var(--radius-sm);transition:transform .25s ease,background .25s ease,border-color .25s ease}.codigo-tile--filled{border-color:rgba(var(--theme-rgb),.6);animation:codigo-pop .12s ease}.codigo-tile--cursor{border-color:var(--theme);box-shadow:inset 0 0 0 1px rgba(var(--theme-rgb),.4)}.codigo-tile--revealed{animation:codigo-flip .5s ease both}.codigo-tile--g{background:#3aa76d;border-color:#3aa76d;color:#04201c}.codigo-tile--y{background:#d4a72c;border-color:#d4a72c;color:#2a1e02}.codigo-tile--x{background:#3a3a4a;border-color:#3a3a4a;color:#cfcfe0}@keyframes codigo-pop{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes codigo-flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.overlay-share-btn.codigo-share-btn{background:var(--theme-btn-gradient, var(--theme));color:var(--theme-btn-text, #04201c);font-size:1rem;font-weight:700;padding:13px 26px;border-radius:var(--radius-md);box-shadow:0 6px 20px rgba(var(--theme-rgb),.4)}.overlay-share-btn.codigo-share-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.overlay-wa-btn{background:#25d366;color:#04230f;font-family:var(--font-pixel);font-weight:700;font-size:.9rem;border:none;padding:13px 22px;border-radius:var(--radius-md);cursor:pointer;box-shadow:0 6px 18px #25d36659;transition:transform var(--transition-fast) ease,filter var(--transition-fast) ease}.overlay-wa-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.codigo-stats{width:var(--codigo-w);margin:4px auto 0}.codigo-stats-head{font-family:var(--font-pixel);font-size:var(--text-pixel);color:var(--theme);text-align:center;margin:0 0 10px}.codigo-stat-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}.codigo-stat-num{width:1em;text-align:center;font-family:var(--font-pixel);font-size:.75rem;color:var(--text-secondary);flex:0 0 auto}.codigo-stat-track{flex:1 1 auto;display:flex}.codigo-stat-bar{background:rgba(var(--theme-rgb),.35);border-radius:3px;min-width:1.6em;padding:2px 6px;display:flex;justify-content:flex-end;transition:width .5s ease}.codigo-stat-row--you .codigo-stat-bar{background:var(--theme)}.codigo-stat-count{font-family:var(--font-pixel);font-size:.7rem;color:#fff}.codigo-howto-backdrop{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;background:#080614cc}.codigo-howto-card{width:100%;max-width:360px;padding:26px 24px;text-align:center;background:var(--bg-elevated, #1a1230);border:1px solid rgba(var(--theme-rgb, 90, 209, 196),.4);border-radius:var(--radius-md);box-shadow:0 18px 50px #0009}.codigo-howto-card h2{margin:0 0 12px;font-family:var(--font-pixel);font-size:1.1rem;color:var(--theme, #5ad1c4)}.codigo-howto-intro{margin:0 0 18px;font-size:.9rem;line-height:1.5;color:var(--text-secondary)}.codigo-howto-rules{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;text-align:left}.codigo-howto-rule{display:flex;align-items:center;gap:12px}.codigo-howto-tile{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-family:var(--font-pixel);font-size:1rem}.codigo-howto-rule span:last-child{font-size:.86rem;color:var(--text-primary)}.codigo-howto-start{font-family:var(--font-pixel);font-weight:700;font-size:.95rem;padding:12px 28px;border:none;border-radius:var(--radius-md);cursor:pointer;background:var(--theme-btn-gradient, linear-gradient(180deg, #7fe0d5, #38b8aa));color:var(--theme-btn-text, #04201c)}.codigo-howto-start:hover{filter:brightness(1.06)}.codigo-help-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(var(--theme-rgb),.5);background:transparent;color:var(--theme);font-family:var(--font-pixel);font-size:.9rem;cursor:pointer;flex:0 0 auto}.codigo-help-btn:hover{background:rgba(var(--theme-rgb),.16)}.codigo-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 14px;width:var(--codigo-w);font-size:.72rem;color:var(--text-secondary)}.codigo-legend-item{display:inline-flex;align-items:center;gap:5px}.codigo-legend-swatch{width:13px;height:13px;border-radius:3px;flex:0 0 auto}.codigo-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:var(--codigo-w)}.codigo-key{font-family:var(--font-pixel);font-size:clamp(.9rem,4vw,1.3rem);padding:clamp(7px,1.1vh,12px) 0;border:none;border-radius:var(--radius-sm);color:var(--text-primary);background:var(--bg-elevated);cursor:pointer;transition:transform var(--transition-fast) ease,background var(--transition-fast) ease;-webkit-user-select:none;user-select:none}.codigo-key:hover{background:rgba(var(--theme-rgb),.22)}.codigo-key:active{transform:scale(.94)}.codigo-key--wide{font-size:clamp(.7rem,3vw,1rem);background:var(--theme-btn-gradient, rgba(var(--theme-rgb), .3));color:var(--theme-btn-text, var(--text-primary))}.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-score-summary{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 12px;margin:12px 0 14px;padding:12px 14px;border-radius:var(--radius-md);background:#0f0a1a7a;border:1px solid rgba(255,214,74,.24)}.signup-score-summary span{color:var(--text-secondary);font-size:.78rem;font-weight:800;text-transform:uppercase}.signup-score-summary strong{grid-row:span 2;font-family:var(--font-pixel);font-size:1.05rem;color:var(--accent-brand)}.signup-score-summary small{color:var(--text-muted);font-size:.78rem;font-weight:800}.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}}