*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{scroll-behavior:smooth}[data-theme=dark]{--bg-color: #000000;--bg-surface: #09090b;--bg-overlay: #18181b;--bg-hover: #27272a;--main-color: #facc15;--main-color-dim: rgba(250, 204, 21, .15);--text-color: #fafafa;--sub-color: #a1a1aa;--sub-alt-color: #27272a;--caret-color: #facc15;--error-color: #ef4444;--error-extra-color: #7f1d1d;--p1-color: #facc15;--p2-color: #60a5fa;--success-color: #22c55e;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-smooth: .4s cubic-bezier(.16, 1, .3, 1);--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 12px rgba(0,0,0,.25);--shadow-lg: 0 8px 30px rgba(0,0,0,.35);--shadow-glow-main: 0 0 20px rgba(245,200,66,.15);--shadow-glow-p1: 0 0 20px rgba(245,200,66,.2);--shadow-glow-p2: 0 0 20px rgba(137,180,250,.2)}body{background-color:var(--bg-color);color:var(--text-color);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6;font-size:16px}h1,h2,h3,h4,h5,h6{letter-spacing:-.03em}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:.9375rem;cursor:pointer;border:none;transition:all var(--transition-base);user-select:none;letter-spacing:.01em}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--main-color);color:#000}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-primary:active{filter:brightness(.95)}.btn-secondary{background:transparent;border:1.5px solid var(--main-color);color:var(--main-color)}.btn-secondary:hover{background:var(--main-color-dim)}.btn-ghost{background:transparent;color:var(--sub-color)}.btn-ghost:hover{color:var(--text-color)}.btn-icon{background:none;border:none;cursor:pointer;padding:.25rem;font-size:1.25rem;opacity:.6;transition:opacity var(--transition-fast)}.btn-icon:hover{opacity:1}input[type=text]{width:100%;padding:.75rem 1rem;background:var(--bg-surface);border:1.5px solid var(--sub-alt-color);border-radius:var(--radius-md);color:var(--text-color);font-size:1rem;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}input[type=text]:focus{border-color:var(--main-color);box-shadow:0 0 0 3px var(--main-color-dim)}input[type=text]::placeholder{color:var(--sub-color)}.input-group{display:flex;flex-direction:column;gap:.375rem}.input-group label{font-size:.8125rem;color:var(--sub-color);font-weight:500;text-transform:uppercase;letter-spacing:.06em}.screen{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-8) var(--space-4);position:relative;width:100%}.screen.active{display:flex}#app{position:relative;min-height:100vh;overflow:hidden}#toast-container{position:fixed;bottom:var(--space-8);left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:var(--space-2)}.toast{padding:.75rem 1.25rem;background:var(--bg-overlay);border:1px solid var(--sub-alt-color);border-radius:var(--radius-md);color:var(--text-color);font-size:.875rem;animation:slideUp .3s var(--transition-smooth);box-shadow:var(--shadow-md);white-space:nowrap}.toast.error{border-color:var(--error-color);color:var(--error-color)}.toast.success{border-color:var(--success-color);color:var(--success-color)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--sub-alt-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--sub-color)}::selection{background:#f5c84240;color:var(--text-color)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}[data-theme=midnight]{--bg-color: #0f0f23;--bg-surface: #1a1a3e;--bg-overlay: #1f1f4a;--bg-hover: #2a2a5e;--main-color: #00d4ff;--main-color-dim: rgba(0,212,255,.12);--text-color: #e0e0ff;--sub-color: #4a4a7a;--sub-alt-color: #2a2a5e;--caret-color: #00d4ff;--error-color: #ff6b6b;--error-extra-color: #4a1c1c;--p1-color: #00d4ff;--p2-color: #ffd700;--success-color: #69db7c}[data-theme=terminal]{--bg-color: #0a0a0a;--bg-surface: #141414;--bg-overlay: #1a1a1a;--bg-hover: #222;--main-color: #00ff41;--main-color-dim: rgba(0,255,65,.08);--text-color: #b3ffb3;--sub-color: #2a6b2a;--sub-alt-color: #1a3a1a;--caret-color: #00ff41;--error-color: #ff0040;--error-extra-color: #4a0015;--p1-color: #00ff41;--p2-color: #ff6600;--success-color: #00ff41}[data-theme=light]{--bg-color: #f0f0f2;--bg-surface: #ffffff;--bg-overlay: #e8e8ec;--bg-hover: #dddde3;--main-color: #d4820a;--main-color-dim: rgba(212,130,10,.1);--text-color: #2c2c3a;--sub-color: #8888a0;--sub-alt-color: #d0d0d8;--caret-color: #d4820a;--error-color: #d63e3e;--error-extra-color: #ffcfcf;--p1-color: #d4820a;--p2-color: #2b78e4;--success-color: #2e9e44;--shadow-sm: 0 1px 3px rgba(0,0,0,.08);--shadow-md: 0 4px 12px rgba(0,0,0,.06);--shadow-lg: 0 8px 30px rgba(0,0,0,.1)}.theme-selector{display:flex;flex-direction:row;gap:.5rem}.theme-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color var(--transition-fast)}.theme-swatch.active{border-color:var(--main-color)}.home-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg-color)}.home-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-8);width:100%;max-width:440px;animation:fadeIn .6s ease}.logo-section{text-align:center}.logo{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:900;color:var(--text-color);letter-spacing:-.04em;line-height:1.1}.logo .accent{color:var(--main-color)}.tagline{color:var(--sub-color);font-size:.9375rem;letter-spacing:.12em;text-transform:uppercase;margin-top:var(--space-2);font-weight:500}.auth-section{width:100%;max-width:440px;display:flex;justify-content:center}.user-profile{display:flex;align-items:center;justify-content:space-between;width:100%;background:color-mix(in srgb,var(--bg-surface) 60%,transparent);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--sub-alt-color)}.user-name{font-weight:600;color:var(--text-color)}.online-dropdown{position:relative}.online-list{position:absolute;top:calc(100% + var(--space-2));right:0;width:240px;background:var(--bg-surface);border:1px solid var(--main-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2);z-index:50;max-height:300px;overflow-y:auto}.online-list.hidden{display:none}.online-empty{color:var(--sub-color);font-size:.8125rem;text-align:center;padding:var(--space-2)}.online-player-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2);background:var(--bg-overlay);border-radius:var(--radius-sm)}.online-player-name{font-size:.875rem;font-weight:500;color:var(--text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-card{width:100%;background:var(--bg-surface);border:1px solid var(--sub-alt-color);border-radius:var(--radius-lg);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6);box-shadow:0 4px 20px #0006}.home-actions{display:flex;flex-direction:column;gap:var(--space-4)}.divider{display:flex;align-items:center;gap:var(--space-4)}.divider span{color:var(--sub-color);font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--sub-alt-color)}.join-row{display:flex;gap:var(--space-2)}.join-row .code-input{flex:1;text-transform:uppercase;font-family:JetBrains Mono,Fira Code,monospace;font-size:1.125rem;letter-spacing:.15em;text-align:center}.join-row .btn{flex-shrink:0}.theme-selector{margin-top:var(--space-4)}.home-footer{margin-top:auto;padding-top:var(--space-8);text-align:center;font-size:.75rem;color:var(--sub-color);letter-spacing:.05em;line-height:1.5;opacity:.8}.home-footer p{margin:0}.lobby-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);width:100%;max-width:560px;animation:fadeIn .4s ease}.lobby-back{align-self:flex-start}.lobby-title{font-size:1.5rem;font-weight:700;color:var(--text-color);letter-spacing:-.02em}.room-code-display{text-align:center;background:var(--bg-surface);border:1px solid var(--sub-alt-color);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);width:100%}.room-code-label{display:block;font-size:.75rem;color:var(--sub-color);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-2)}.room-code-value{display:inline-flex;align-items:center;gap:var(--space-3)}.room-code-value span{font-family:JetBrains Mono,Fira Code,monospace;font-size:clamp(2rem,5vw,2.75rem);font-weight:700;color:var(--main-color);letter-spacing:.2em}.room-code-hint{display:block;font-size:.8125rem;color:var(--sub-color);margin-top:var(--space-3)}.player-cards{display:flex;align-items:center;gap:var(--space-4);width:100%}.player-card{flex:1;background:var(--bg-surface);border:1px solid var(--sub-alt-color);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;transition:border-color var(--transition-base)}.player-card.ready{border-color:color-mix(in srgb,var(--main-color) 40%,transparent)}.player-card.waiting{opacity:.5;border-style:dashed}.player-card-dot{width:10px;height:10px;border-radius:50%}.player-card-dot.p1{background:var(--p1-color)}.player-card-dot.p2{background:var(--p2-color)}.player-card-name{font-weight:600;font-size:1.125rem;color:var(--text-color)}.player-card-badge{font-size:.75rem;padding:.25rem .75rem;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.player-card-badge.ready{background:var(--success-color);color:#1e1e2e}.player-card-badge.not-ready{background:var(--sub-alt-color);color:var(--sub-color)}.versus-badge{font-size:.875rem;font-weight:800;color:var(--sub-color);flex-shrink:0}.btn-ready{width:100%;max-width:300px;font-size:1rem;padding:.875rem}.results-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);width:100%;max-width:700px;animation:scaleIn .4s ease}.results-header{text-align:center}.results-title{font-size:clamp(2rem,5vw,3rem);font-weight:900;letter-spacing:-.03em}.results-title.win{color:var(--success-color)}.results-title.lose{color:var(--error-color)}.results-subtitle{color:var(--sub-color);font-size:1rem;margin-top:var(--space-2)}.results-comparison{display:flex;align-items:stretch;gap:var(--space-4);width:100%}.result-card{flex:1;background:var(--bg-surface);border:1px solid var(--sub-alt-color);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);position:relative}.result-card.winner{border-color:color-mix(in srgb,var(--main-color) 50%,transparent);box-shadow:var(--shadow-glow-main)}.result-crown{font-size:2rem;position:absolute;top:-1rem}.result-player-name{font-size:1.125rem;font-weight:700;color:var(--text-color)}.result-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);width:100%;text-align:center}.result-stat-value{display:block;font-size:1.5rem;font-family:JetBrains Mono,Fira Code,monospace;font-weight:700;color:var(--text-color)}.result-stat-label{display:block;font-size:.6875rem;color:var(--sub-color);text-transform:uppercase;letter-spacing:.08em;margin-top:var(--space-1)}.result-vs{font-weight:800;color:var(--sub-color);align-self:center}.results-actions{display:flex;gap:var(--space-3)}@media(max-width:640px){.player-cards,.results-comparison{flex-direction:column}.versus-badge,.result-vs{margin:var(--space-2) 0}}#screen-game.active{display:flex;flex-direction:column;padding:var(--space-4);gap:var(--space-4);justify-content:flex-start;min-height:100vh}.game-hud{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:960px;margin:0 auto;gap:var(--space-4)}.player-hud{background:color-mix(in srgb,var(--bg-surface) 70%,transparent);backdrop-filter:blur(12px);border:1px solid var(--sub-alt-color);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);min-width:140px}.p1-hud{border-left:3px solid var(--p1-color)}.p2-hud{border-right:3px solid var(--p2-color);text-align:right}.hud-name{font-size:.75rem;color:var(--sub-color);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.hud-stats{display:flex;gap:var(--space-4)}.p2-hud .hud-stats{justify-content:flex-end}.hud-stat{display:flex;align-items:baseline;gap:.2rem}.hud-stat-value{font-size:1.375rem;font-family:JetBrains Mono,Fira Code,monospace;font-weight:700;color:var(--text-color)}.hud-stat-unit{font-size:.6875rem;color:var(--sub-color)}.game-timer{font-family:JetBrains Mono,Fira Code,monospace;font-size:1.125rem;color:var(--sub-color);font-weight:500}.rope-container{width:100%;max-width:960px;margin:0 auto;padding:var(--space-2) 0}#rope-canvas{display:block;width:100%;height:100px;border-radius:var(--radius-md)}.rope-labels{display:flex;justify-content:space-between;padding:0 var(--space-2);margin-top:var(--space-1)}.rope-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.rope-label.p1-label{color:var(--p1-color)}.rope-label.p2-label{color:var(--p2-color)}.typing-area{position:relative;width:100%;max-width:900px;margin:0 auto;height:8em;overflow:hidden;cursor:text;padding:var(--space-4);background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--sub-alt-color)}.typing-area:focus-within{border-color:color-mix(in srgb,var(--main-color) 40%,transparent)}.typing-area.blur-overlay:after{content:"Click here or press any key to focus";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg-color) 60%,transparent);backdrop-filter:blur(4px);color:var(--sub-color);font-size:.875rem;z-index:5;border-radius:inherit;cursor:pointer}#words{display:flex;flex-wrap:wrap;position:relative;font-family:JetBrains Mono,Fira Code,monospace;font-size:1.5rem;line-height:2.2;user-select:none;transition:margin-top var(--transition-smooth)}.word{display:inline-flex;margin-right:.5em;position:relative}.word .letter{color:var(--sub-color);position:relative;transition:color var(--transition-fast)}.word .letter.correct{color:var(--text-color)}.word .letter.incorrect{color:var(--error-color);border-bottom:2px solid var(--error-color)}.word .letter.extra{color:var(--error-extra-color);font-size:.85em;opacity:.8}.word.error .letter:not(.correct){color:color-mix(in srgb,var(--error-color) 40%,var(--sub-color))}#caret{position:absolute;top:0;left:0;width:2.5px;height:1.3em;background:var(--caret-color);border-radius:2px;z-index:2;pointer-events:none;box-shadow:0 0 8px color-mix(in srgb,var(--caret-color) 50%,transparent);transition:transform 80ms ease-out;animation:blink 1s infinite}.typing #caret{animation:none;opacity:1}#typing-input{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}.countdown-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg-color) 85%,transparent);backdrop-filter:blur(10px);z-index:100;transition:opacity var(--transition-base)}.countdown-overlay.hidden{opacity:0;pointer-events:none;visibility:hidden}.countdown-number{font-size:clamp(6rem,15vw,10rem);font-weight:900;color:var(--main-color);text-shadow:0 0 60px rgba(245,200,66,.4);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.countdown-number.pop{animation:countdownPop .9s ease-out forwards}@keyframes countdownPop{0%{transform:scale(1.8);opacity:0}30%{transform:scale(1);opacity:1}80%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}.countdown-go{color:var(--success-color);text-shadow:0 0 60px rgba(166,227,161,.4)}@media(max-width:640px){.game-hud{flex-wrap:wrap;gap:var(--space-2)}.player-hud{width:100%;min-width:100%}.typing-area{font-size:1.25rem}}