:root{--color-primary: #ff6b6b;--color-secondary: #4ecdc4;--color-success: #51cf66;--color-warning: #ffd93d;--color-danger: #ff6b6b;--color-dark: #1a1a2e;--color-darker: #0f0f1e;--color-light: #f5f5f5;--color-text: #ffffff;--color-text-muted: #b0b0b0;--color-border: #333333;--color-surface: #2a2a3e;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-xxl: 32px;--transition: all .2s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:var(--color-dark);color:var(--color-text);font-size:var(--font-size-md);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}#root{width:100%;height:100%}.app{width:100%;height:100%;display:flex;flex-direction:column}.page{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;background-color:var(--color-dark);-webkit-overflow-scrolling:touch}.container{width:100%;max-width:100%;padding:var(--spacing-lg);margin:0 auto;flex:1;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:700;margin-bottom:var(--spacing-md);line-height:1.2}h1{font-size:var(--font-size-xxl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}.title{font-size:48px;font-weight:800;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-md)}.subtitle{color:var(--color-text-muted);font-size:var(--font-size-lg);margin-bottom:var(--spacing-lg)}.button{padding:12px 20px;border:none;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:600;cursor:pointer;transition:var(--transition);text-transform:uppercase;letter-spacing:.5px;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.button:active{transform:scale(.95)}.button-primary{background-color:var(--color-primary);color:#fff}.button-primary:hover{background-color:#ff5252;box-shadow:0 8px 24px #ff6b6b4d}.button-secondary{background-color:var(--color-secondary);color:#fff}.button-secondary:hover{background-color:#3abaaf;box-shadow:0 8px 24px #4ecdc44d}.button-text{background-color:transparent;color:var(--color-text-muted);text-transform:none;padding:8px 16px}.button-text:hover{color:var(--color-text);background-color:#ffffff1a}.button-large{padding:16px 32px;font-size:var(--font-size-lg);width:100%;border-radius:var(--radius-lg)}.input{width:100%;padding:14px 16px;border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:#ffffff0d;color:var(--color-text);font-size:var(--font-size-md);transition:var(--transition);min-height:44px;font-family:inherit}.input:focus{outline:none;border-color:var(--color-primary);background-color:#ffffff1a}.input::placeholder{color:var(--color-text-muted)}.form-group,.button-group{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.landing{background:linear-gradient(135deg,rgba(255,107,107,.1) 0%,rgba(78,205,196,.1) 100%)}.landing-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;flex:1}.header-section{text-align:center;margin-bottom:var(--spacing-lg)}.players-section{margin-bottom:var(--spacing-lg)}.players-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-md)}.player-card{background-color:var(--color-surface);padding:var(--spacing-md);border-radius:var(--radius-md);text-align:center;border:2px solid transparent;transition:var(--transition);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--spacing-sm);min-height:80px;word-break:break-word}.player-card:hover{border-color:var(--color-primary);background-color:#ff6b6b1a}.player-card.disconnected{opacity:.5}.player-name{font-weight:600;font-size:var(--font-size-sm)}.host-badge{font-size:20px}.host-controls{background-color:var(--color-surface);padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-top:var(--spacing-lg)}.setting-group{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.setting-group label{display:flex;align-items:center;gap:var(--spacing-md);font-weight:500;cursor:pointer}.setting-group input[type=checkbox]{width:20px;height:20px;cursor:pointer}.slider{width:100%;height:8px;border-radius:5px;background:linear-gradient(to right,var(--color-primary),var(--color-secondary));outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:0 4px 12px #0000004d}.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;box-shadow:0 4px 12px #0000004d}.waiting-section{background-color:var(--color-surface);padding:var(--spacing-lg);border-radius:var(--radius-lg);text-align:center;color:var(--color-text-muted);margin-top:var(--spacing-lg)}.play{display:flex;flex-direction:column}.play-header{padding-top:var(--spacing-md)}.question-section{margin:var(--spacing-lg) 0;text-align:center}.question{font-size:24px;font-weight:700;line-height:1.4;color:var(--color-primary)}.voting-section{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.vote-status{text-align:center;color:var(--color-success);font-weight:600;margin-bottom:var(--spacing-md);font-size:var(--font-size-lg)}.players-voting-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.vote-button{display:flex;align-items:center;justify-content:space-between;padding:16px;background-color:var(--color-surface);border:3px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition);min-height:56px;font-weight:600;font-size:var(--font-size-lg);touch-action:manipulation}.vote-button:not(.disabled):hover{background-color:#4ecdc433;border-color:var(--color-secondary)}.vote-button.selected{background-color:#51cf6633;border-color:var(--color-success)}.vote-button.disabled{opacity:.5;cursor:not-allowed;background-color:#ffffff0d}.vote-button.disabled-unselected{opacity:.3;cursor:not-allowed}.player-vote-name{flex:1;text-align:left}.vote-check{font-size:24px;color:var(--color-success)}.timer-component{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:linear-gradient(135deg,rgba(255,107,107,.2),rgba(78,205,196,.2));border-radius:var(--radius-lg)}.timer-display{display:flex;align-items:baseline;gap:var(--spacing-xs)}.timer-number{font-size:48px;font-weight:800;color:var(--color-primary)}.timer-label{font-size:24px;color:var(--color-text-muted)}.timer-progress-bar{width:100%;height:8px;background-color:#ffffff1a;border-radius:4px;overflow:hidden}.timer-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));transition:width .1s linear}.results-chart{display:flex;flex-direction:column;gap:var(--spacing-lg);margin:var(--spacing-lg) 0;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.result-bar-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}.result-bar-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600}.result-name{font-size:var(--font-size-md)}.result-votes{color:var(--color-primary);font-size:var(--font-size-lg)}.result-bar-container{width:100%;height:40px;background-color:#ffffff0d;border-radius:var(--radius-md);overflow:hidden}.result-bar{height:100%;display:flex;align-items:center;padding-left:var(--spacing-md);transition:width .4s ease;color:#fff;font-weight:600;font-size:var(--font-size-sm);background:linear-gradient(90deg,var(--color-primary),var(--color-secondary))}.result-bar.top-1{background:linear-gradient(90deg,#ffd700,#ffed4e)}.result-bar.top-2{background:linear-gradient(90deg,#c0c0c0,#e8e8e8)}.result-bar.top-3{background:linear-gradient(90deg,#cd7f32,#d9a574)}.drinking-rules{background-color:var(--color-surface);padding:var(--spacing-lg);border-radius:var(--radius-lg);margin:var(--spacing-lg) 0}.drinking-rules h3{margin-bottom:var(--spacing-md);text-align:center}.drinking-rule{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:#ffffff0d;border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);font-weight:600}.medal{font-size:32px;min-width:40px;text-align:center}.rule-text{flex:1;font-size:var(--font-size-md)}.host-actions{margin-top:var(--spacing-lg)}.round-progress{text-align:center;padding:var(--spacing-md);background-color:var(--color-surface);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);font-size:var(--font-size-lg);color:var(--color-secondary)}.game-end-banner{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg);text-align:center}.game-end-banner h2{font-size:var(--font-size-xxl);margin-bottom:var(--spacing-sm)}.game-end-banner p{font-size:var(--font-size-md);opacity:.9}.multiplier-info{background-color:var(--color-surface);padding:var(--spacing-md);border-radius:var(--radius-md);margin:var(--spacing-md) 0;text-align:center}.multiplier-info p{margin-bottom:var(--spacing-sm);color:var(--color-warning);font-weight:600}.multiplier-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center}.multiplier-badge{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:600;font-size:var(--font-size-sm)}.multiplier-2x{background-color:#ffd70033;color:gold;border:2px solid #ffd700}.multiplier-3x{background-color:#ff6b6b33;color:#ff6b6b;border:2px solid #ff6b6b}.podium-section{margin:var(--spacing-lg) 0;display:flex;justify-content:center;align-items:flex-end}.podium-container{display:flex;justify-content:center;align-items:flex-end;gap:var(--spacing-md);min-height:180px;width:100%}.podium-position{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);position:relative}.podium-medal{font-size:40px;line-height:1;margin-bottom:var(--spacing-xs)}.podium-name{font-weight:700;font-size:var(--font-size-md);text-align:center;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium-sips{font-weight:600;font-size:var(--font-size-sm);color:var(--color-secondary);margin-bottom:var(--spacing-sm)}.podium-step{border-style:solid;display:flex;align-items:center;justify-content:center;font-weight:700;transition:var(--transition)}.podium-first{order:2;z-index:3}.podium-first .podium-step{width:100px;height:100px;background:linear-gradient(135deg,#ffd700,#ffed4e);border:3px solid #ffb700;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:0 8px 20px #ffd70066}.podium-second{order:1;margin-right:var(--spacing-md)}.podium-second .podium-step{width:90px;height:75px;background:linear-gradient(135deg,#c0c0c0,#e8e8e8);border:3px solid #a0a0a0;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:0 6px 15px #c0c0c04d}.podium-third{order:3;margin-left:var(--spacing-md)}.podium-third .podium-step{width:90px;height:60px;background:linear-gradient(135deg,#cd7f32,#d9a574);border:3px solid #b5622d;border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:0 6px 15px #cd7f324d}.top-3-section,.top-3-container,.top-3-card,.medal-large,.top-3-name,.top-3-votes{display:none}.results-table-section{margin:var(--spacing-lg) 0}.results-table-section h2{margin-bottom:var(--spacing-md)}.results-table{background-color:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden}.table-header{display:grid;grid-template-columns:50px 1fr 80px;gap:var(--spacing-md);padding:var(--spacing-md);background-color:#ffffff1a;font-weight:600;border-bottom:2px solid var(--color-border)}.table-row{display:grid;grid-template-columns:50px 1fr 80px;gap:var(--spacing-md);padding:var(--spacing-md);border-bottom:1px solid var(--color-border);align-items:center}.table-row:last-child{border-bottom:none}.col-rank{text-align:center;font-weight:600;color:var(--color-secondary)}.col-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-votes{text-align:center;font-weight:600;color:var(--color-primary)}.col-bar,.col-bar .result-bar{display:none}.host-controls .setting-group{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background-color:#ffffff08;border-radius:var(--radius-md)}.host-controls .setting-group label{font-weight:500;display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer}.host-controls .setting-group input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--color-primary)}.host-controls .setting-group input[type=range]{width:100%;cursor:pointer;accent-color:var(--color-primary)}@media (max-width: 768px){.container{padding:var(--spacing-md)}.title{font-size:36px}.players-list{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.players-voting-list{gap:var(--spacing-sm)}.vote-button{padding:12px;font-size:var(--font-size-md)}.question{font-size:20px}.timer-number{font-size:40px}.timer-label{font-size:20px}.result-bar{height:36px}}@media (max-height: 600px){.button-large{padding:12px 24px;font-size:var(--font-size-md)}.vote-button{min-height:48px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}::-webkit-scrollbar-thumb{background:rgba(255,107,107,.5);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(255,107,107,.8)}.game-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-md);margin:var(--spacing-md) 0}.mode-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:var(--transition);font-size:var(--font-size-md);font-weight:500}.mode-button:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b33}.mode-button.active{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 0 20px #ff6b6b80}.mode-icon{font-size:28px}.mode-name{font-size:var(--font-size-sm)}@media (max-width: 600px){.game-modes{grid-template-columns:repeat(2,1fr)}.mode-button{padding:var(--spacing-sm)}.mode-icon{font-size:24px}}