:root{--typesniper-primary: #3498db;--typesniper-secondary: #e74c3c;--typesniper-accent: #2ecc71;--typesniper-bg: rgba(255, 255, 255, .5);--typesniper-shadow: rgba(0, 0, 0, .2)}.typesniper-page .game-container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.typesniper-page .game-header{text-align:center;margin-bottom:var(--spacing-lg)}.typesniper-page .game-header h1{font-size:2.5rem;color:var(--typesniper-primary);margin-bottom:var(--spacing-sm)}.typesniper-page .game-controls{margin-top:var(--spacing-md)}.game-layout{display:flex;gap:var(--spacing-lg);min-height:600px}.game-sidebar{width:28%;display:flex;flex-direction:column;gap:var(--spacing-md)}.game-main{flex:1;width:70%}.canvas-container{background-color:var(--background-alt);border-radius:var(--border-radius);box-shadow:var(--shadow-md);overflow:hidden;position:relative;display:flex;justify-content:center;align-items:center;height:100%;min-height:500px}#gameCanvas{width:100%;height:100%;background-color:var(--background);display:block}#controls{display:flex;flex-direction:column;gap:var(--spacing-sm);background-color:var(--background-alt);padding:var(--spacing-md);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.sliders-container{display:flex;flex-direction:column;gap:var(--spacing-sm);background-color:var(--background-alt);padding:var(--spacing-sm);border-radius:var(--border-radius);flex:1;max-width:300px}.slider-control{display:flex;align-items:center;gap:var(--spacing-sm)}.slider-control label{font-weight:700;margin-right:var(--spacing-xs);white-space:nowrap;width:140px}.slider-control input[type=range]{flex:1;accent-color:var(--typesniper-primary);height:5px;border-radius:var(--border-radius)}#speed-display,#max-length-display{font-family:monospace;font-weight:700;color:var(--typesniper-primary);min-width:3em;text-align:center}#timer,#score{font-family:monospace;font-size:1.2rem;font-weight:700;color:var(--text);background-color:var(--background);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);width:100%;text-align:center}.room-controls{display:flex;flex-direction:column;gap:var(--spacing-sm);background-color:var(--background-alt);padding:var(--spacing-md);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.room-controls input{width:100%;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:1rem;box-sizing:border-box}.room-controls button{width:100%;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);font-size:1rem}.player-list-container{background-color:var(--background-alt);padding:var(--spacing-md);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);flex:1;display:flex;flex-direction:column;overflow:hidden}.player-list-container h3{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);color:var(--text);font-size:1.2rem}.room-code-bar{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding:var(--spacing-sm);background-color:var(--background);border-radius:var(--border-radius)}.current-room-code{font-family:monospace;font-size:1.1rem;font-weight:700;color:var(--typesniper-primary);text-align:center;padding:var(--spacing-sm) 0}.room-code-label{color:var(--text-muted);font-size:1rem;margin-right:var(--spacing-xs)}.room-code-text{color:var(--typesniper-primary);font-size:1.3rem}.room-code-bar .btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:.9rem;width:100%}.player-list{list-style:none;padding:0;margin:0;overflow-y:auto;flex:1;max-height:350px}.player-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);border-bottom:1px solid var(--border-color);transition:background-color .2s ease}.player-item:last-child{border-bottom:none}.player-item.current-player{background-color:#3498db1a;font-weight:700}.player-color{display:inline-block;width:16px;height:16px;border-radius:50%;margin-right:var(--spacing-sm);box-shadow:0 0 3px #0003}.player-name{flex:1}.player-score{font-weight:700;color:var(--typesniper-accent);margin-left:var(--spacing-sm)}.btn-danger{background-color:var(--typesniper-secondary);color:#fff;border-color:var(--typesniper-secondary)}.btn-danger:hover{background-color:#c0392b}.score-animation{position:absolute;color:var(--typesniper-accent);font-weight:700;font-size:1.5rem;pointer-events:none;animation:float-up 1s ease-out forwards;text-shadow:0 0 5px rgba(0,0,0,.3);z-index:10}.steal-score-animation{position:absolute;color:var(--typesniper-accent);font-weight:700;font-size:1.5rem;pointer-events:none;animation:float-up-steal 1.2s ease-out forwards;text-shadow:0 0 8px rgba(0,0,0,.5);z-index:10;white-space:nowrap;background:#fff3;padding:2px 8px;border-radius:10px;box-shadow:0 0 10px #ffd70099}@keyframes float-up{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}@keyframes float-up-steal{0%{transform:translateY(0) scale(1);opacity:1}30%{transform:translateY(-15px) scale(1.3);opacity:1}to{transform:translateY(-60px) scale(1);opacity:0}}@keyframes word-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes typing-flash{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@keyframes horizontal-motion{0%{text-shadow:-3px 0 3px rgba(0,0,0,.1)}to{text-shadow:3px 0 3px rgba(0,0,0,.1)}}@keyframes vertical-motion{0%{text-shadow:0 -3px 3px rgba(0,0,0,.1)}to{text-shadow:0 3px 3px rgba(0,0,0,.1)}}@keyframes fast-motion{0%{text-shadow:-2px -2px 4px rgba(0,0,0,.15)}25%{text-shadow:2px -2px 4px rgba(0,0,0,.15)}50%{text-shadow:2px 2px 4px rgba(0,0,0,.15)}75%{text-shadow:-2px 2px 4px rgba(0,0,0,.15)}to{text-shadow:-2px -2px 4px rgba(0,0,0,.15)}}.word-horizontal{animation:horizontal-motion .5s alternate infinite ease-in-out}.word-vertical{animation:vertical-motion .5s alternate infinite ease-in-out}.word-fast{animation:fast-motion .8s infinite linear}.word-edge{filter:drop-shadow(0 0 2px rgba(255,255,255,.5))}.word-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.word-outline{position:absolute;border-radius:4px;box-sizing:border-box;pointer-events:none}.word-text{position:relative;padding:2px 5px;white-space:nowrap}.typed-char{position:relative;z-index:5}.word-trail{position:absolute;pointer-events:none;z-index:-1;border-radius:50%;background:#ffffff38}.popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;z-index:1000;justify-content:center;align-items:center}.popup-content{background-color:var(--background);padding:var(--spacing-lg);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);position:relative;width:90%;max-width:500px;text-align:center}.close-popup{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);font-size:1.5rem;cursor:pointer;color:var(--text-muted)}.close-popup:hover{color:var(--text)}.popup h2{color:var(--typesniper-primary);margin-bottom:var(--spacing-md)}.popup p{margin-bottom:var(--spacing-sm);font-size:1.1rem}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;z-index:1000;overflow-y:auto}.modal-content{background-color:var(--background);margin:5% auto;padding:var(--spacing-lg);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);position:relative;width:90%;max-width:800px}.close-modal{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);font-size:1.5rem;cursor:pointer;color:var(--text-muted)}.close-modal:hover{color:var(--text)}@media(max-width:768px){.game-layout{flex-direction:column;min-height:auto}.game-sidebar{width:100%;order:2}.game-main{width:100%;order:1}#controls{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}#start-game{width:auto;flex:1;min-width:150px}#timer-container{width:auto;flex:1}.player-list{max-height:200px}.room-code-bar{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--spacing-sm)}.room-code-bar .btn-sm{width:auto;flex:0 0 auto}.canvas-container{min-height:400px;height:400px}}@media(max-width:480px){.typesniper-page .game-header h1{font-size:2rem}.canvas-container{min-height:350px;height:350px}#start-game,#timer-container{width:100%}#controls,.room-code-bar{flex-direction:column}.room-code-bar .btn-sm{width:100%}}.game-length-buttons{display:flex;gap:var(--spacing-xs)}.game-length-btn{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);background-color:var(--background);border:1px solid var(--border-color);cursor:pointer;transition:all .2s ease;font-weight:700;min-width:50px}.game-length-btn:hover:not(:disabled){background-color:var(--background-dark)}.game-length-btn.active{background-color:var(--typesniper-primary);color:#fff;border-color:var(--typesniper-primary)}.game-length-btn:disabled{opacity:.5;cursor:not-allowed}.leader-crown{font-size:1rem;margin-left:var(--spacing-xs);display:inline-block;vertical-align:middle}#podium-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:none;justify-content:center;align-items:center;z-index:1000}#podium-popup .popup-content{background-color:var(--background);border-radius:var(--border-radius);padding:var(--spacing-lg);max-width:600px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:popup-slide-in .3s ease-out}#podium-popup h2{text-align:center;margin-bottom:var(--spacing-md);color:var(--typesniper-primary)}.podium{display:flex;justify-content:center;align-items:flex-end;margin:var(--spacing-lg) 0;height:250px;position:relative;gap:var(--spacing-sm)}.podium-place{position:relative;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background-color:var(--background-alt);border-radius:var(--border-radius) var(--border-radius) 0 0;min-width:100px;border:1px solid var(--border-color);border-bottom:none;box-shadow:var(--shadow-md);transition:all .3s ease}.podium-place.current-player{background-color:#3498db1a}.podium-place:before{content:"";position:absolute;top:-30px;left:50%;transform:translate(-50%);font-size:1.5rem;font-weight:700}.place-1{height:200px;z-index:3;border-color:gold;order:2}.place-1:before{content:"🥇"}.place-2{height:170px;z-index:2;border-color:silver;order:1}.place-2:before{content:"🥈"}.place-3{height:140px;z-index:1;border-color:#cd7f32;order:3}.place-3:before{content:"🥉"}.podium-place .player-name{font-weight:700;text-align:center;margin-top:var(--spacing-xs);max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--spacing-xs)}.podium-place .player-score{font-size:1.5rem;font-weight:700;color:var(--typesniper-accent);margin-top:auto}.color-indicator{width:20px;height:20px;border-radius:50%;margin-top:var(--spacing-sm);box-shadow:0 0 3px #0003}.all-players-list{margin-top:var(--spacing-lg);background-color:var(--background-alt);border-radius:var(--border-radius);padding:var(--spacing-md)}.all-players-list h3{text-align:center;margin-bottom:var(--spacing-md)}.players-table{width:100%;border-collapse:collapse}.players-table th,.players-table td{padding:var(--spacing-sm);text-align:left;border-bottom:1px solid var(--border-color)}.players-table th{font-weight:700;color:var(--text);background-color:var(--background)}.players-table tr.current-player{background-color:#3498db1a}.player-name-cell{display:flex;align-items:center;gap:var(--spacing-xs)}.color-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:var(--spacing-xs)}.popup-buttons{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.popup-buttons button{padding:var(--spacing-sm) var(--spacing-md);min-width:120px}#start-game{width:100%;height:auto;padding:var(--spacing-md) var(--spacing-lg);font-size:1.2rem}#timer-container{width:100%;display:flex;justify-content:center;align-items:center;min-height:40px}#play-again-quick{width:100%;padding:var(--spacing-sm) var(--spacing-lg);font-size:1rem;font-weight:700;background-color:var(--typesniper-accent);border-color:var(--typesniper-accent);color:#fff;transition:all .3s ease}#play-again-quick:hover{background-color:#27ae60;border-color:#27ae60;transform:translateY(-1px);box-shadow:var(--shadow-md)}@keyframes popup-slide-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}#settingsModal .modal-content{max-width:500px}:root{--typesniper-primary: var(--primary);--typesniper-secondary: var(--secondary);--typesniper-accent: var(--tertiary);--typesniper-bg: var(--surface);--typesniper-shadow: transparent}.typesniper-page{background:var(--background)}.typesniper-page .game-container{padding-block:clamp(24px,5vw,52px)}.typesniper-page .game-header{max-width:760px;margin:0 0 28px;padding-left:18px;border-left:4px solid var(--primary);text-align:left}.typesniper-page .game-header h1{color:var(--text);font-size:clamp(2.2rem,6vw,4.4rem);line-height:.92;letter-spacing:-.035em}.typesniper-page .game-header p{max-width:650px;color:var(--text-light)}.typesniper-page .game-layout{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:14px;min-height:590px}.typesniper-page .game-sidebar,.typesniper-page .game-main{width:auto;min-width:0}.typesniper-page :is(#controls,.room-controls,.player-list-container,.sliders-container),.typesniper-page :is(.popup-content,.modal-content){background:var(--surface);border:1px solid var(--border-color);border-radius:2px;box-shadow:none}.typesniper-page .canvas-container{min-width:0;min-height:590px;height:100%;overflow:hidden;background:var(--background-alt);border:1px solid var(--border-color);border-radius:2px;box-shadow:none}.typesniper-page #gameCanvas{min-width:0;max-width:100%;background:var(--background)}.typesniper-page :is(input,select){background:var(--background);border-color:var(--border-color);border-radius:2px;color:var(--text)}.typesniper-page :is(button,input,select,canvas):focus-visible{outline:3px solid var(--primary);outline-offset:3px}.typesniper-page :is(.close-modal,.close-popup,.close-settings){padding:0;border:0;background:transparent;line-height:1}.typesniper-page .room-code-bar,.typesniper-page :is(#timer,#score),.typesniper-page .all-players-list,.typesniper-page .players-table th{background:var(--background-alt);border-radius:2px}.typesniper-page .word-trail{background:color-mix(in srgb,var(--primary) 22%,transparent)}@media(max-width:768px){.typesniper-page .game-layout{display:flex;gap:14px}.typesniper-page .canvas-container{min-height:400px;height:400px}}@media(max-width:480px){.typesniper-page .game-container{padding-inline:10px}.typesniper-page .canvas-container{min-height:350px;height:350px}}