@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";@import"https://fonts.googleapis.com/css2?family=VT323&display=swap";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0..1&display=swap";.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,var(--bg-primary) 0%,#1a1a3e 50%,var(--bg-secondary) 100%),repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(123,104,238,.03) 10px,rgba(123,104,238,.03) 20px);padding:20px;position:relative;overflow:hidden}.login-container:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(123,104,238,.1) 0%,transparent 50%);animation:pulse 8s ease-in-out infinite;pointer-events:none}@keyframes pulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.5}}.login-box{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border:4px solid var(--sn-white);padding:50px 40px;text-align:center;box-shadow:0 0 0 2px var(--sn-black),0 8px 16px #00000080,0 0 30px #7b68ee4d,inset 0 0 20px #7b68ee1a;max-width:450px;width:100%;image-rendering:pixelated;position:relative;z-index:1}.login-logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:30px;padding:20px 0}.login-logo{max-width:280px;max-height:200px;width:auto;height:auto;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain;filter:drop-shadow(0 0 15px rgba(255,215,0,.6)) drop-shadow(0 0 30px rgba(123,104,238,.5)) drop-shadow(3px 3px 6px rgba(0,0,0,.9));transition:transform .3s ease,filter .3s ease;animation:logoGlow 3s ease-in-out infinite}@keyframes logoGlow{0%,to{filter:drop-shadow(0 0 15px rgba(255,215,0,.6)) drop-shadow(0 0 30px rgba(123,104,238,.5)) drop-shadow(3px 3px 6px rgba(0,0,0,.9))}50%{filter:drop-shadow(0 0 20px rgba(255,215,0,.8)) drop-shadow(0 0 40px rgba(123,104,238,.7)) drop-shadow(3px 3px 6px rgba(0,0,0,.9))}}.login-logo:hover{transform:scale(1.05);animation:none;filter:drop-shadow(0 0 25px rgba(255,215,0,.9)) drop-shadow(0 0 50px rgba(123,104,238,.8)) drop-shadow(3px 3px 6px rgba(0,0,0,.9))}.login-logo-fallback{font-size:18px;color:var(--sn-yellow);margin:0;text-shadow:2px 2px 0 var(--sn-black),-1px -1px 0 var(--sn-black),1px -1px 0 var(--sn-black),-1px 1px 0 var(--sn-black),0 0 15px rgba(255,215,0,.6);letter-spacing:3px}.login-subtitle{font-size:8px;color:var(--text-secondary);margin-bottom:30px;line-height:1.8}.login-button{width:100%;font-size:10px;padding:12px 24px;margin-bottom:20px;background-color:var(--sn-blue);border:3px solid var(--sn-white);color:var(--text-primary);cursor:pointer;text-transform:uppercase;transition:all .1s;box-shadow:0 0 0 2px var(--sn-black),0 4px 0 var(--sn-black)}.login-button:hover:not(:disabled){background-color:var(--sn-purple);transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px 0 var(--sn-black)}.login-button:active:not(:disabled){transform:translateY(0);box-shadow:0 0 0 2px var(--sn-black),0 2px 0 var(--sn-black)}.login-button:disabled{opacity:.6;cursor:not-allowed}.error-message{background-color:var(--sn-red);border:2px solid var(--sn-white);color:var(--text-primary);padding:12px;margin-bottom:20px;font-size:8px;line-height:1.6;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d}.login-footer{font-size:6px;color:var(--sn-gray);margin-top:20px}.btn{font-family:var(--font-family-primary);border:var(--border-width-thin) solid var(--border-primary);padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all var(--transition-fast) var(--easing-default);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border-radius:0;-webkit-user-select:none;user-select:none;white-space:nowrap}.btn-primary{background:var(--color-primary);color:var(--text-primary)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-secondary)}.btn-secondary:hover:not(:disabled){background:var(--bg-elevated);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.btn-secondary:active:not(:disabled){transform:translateY(0)}.btn-success{background:var(--color-success);color:var(--text-primary)}.btn-success:hover:not(:disabled){background:var(--green-600);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.btn-success:active:not(:disabled){transform:translateY(0)}.btn-danger{background:var(--color-danger);color:var(--text-primary)}.btn-danger:hover:not(:disabled){background:var(--red-600);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.btn-danger:active:not(:disabled){transform:translateY(0)}.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-primary)}.btn-ghost:hover:not(:disabled){background:var(--bg-tertiary);transform:translateY(-2px)}.btn-ghost:active:not(:disabled){transform:translateY(0)}.btn-small{padding:var(--space-1) var(--space-3);font-size:7px}.btn-medium{padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs)}.btn-large{padding:var(--space-3) var(--space-6);font-size:var(--font-size-sm)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:var(--border-width-medium) solid var(--text-accent);outline-offset:2px}.btn-full-width{width:100%}@media (max-width: 767px){.btn{padding:var(--space-2) var(--space-3);font-size:7px}.btn-large{padding:var(--space-2) var(--space-4)}}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-6)}.loading-inline{display:inline-flex;padding:var(--space-2);gap:var(--space-2)}.loading-spinner{border:3px solid var(--border-secondary);border-top:3px solid var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.loading-small{width:16px;height:16px}.loading-medium{width:32px;height:32px}.loading-large{width:48px;height:48px}.loading-label{font-size:var(--font-size-xs);color:var(--text-secondary);margin:0;text-align:center;max-width:200px}.loading-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal-backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);background:var(--bg-secondary);border:var(--border-width-thick) solid var(--border-primary);padding:var(--space-8);box-shadow:var(--shadow-lg);z-index:var(--z-modal)}@media (max-width: 767px){.loading-container{padding:var(--space-6)}.loading-label{font-size:7px}}.card{border-radius:0;image-rendering:pixelated}.card-default{background:var(--bg-tertiary);border:var(--border-width-thick) solid var(--border-primary);box-shadow:var(--shadow-md);padding:var(--space-6)}.card-subtle{background:transparent;border:none;box-shadow:none;padding:var(--space-4)}.card-header{border-bottom:var(--border-width-medium) solid var(--border-secondary);padding-bottom:var(--space-4);margin-bottom:var(--space-4);font-size:var(--font-size-sm);color:var(--text-accent);font-weight:700;text-shadow:1px 1px 0 var(--gray-900)}.card-body{flex:1}.card-footer{border-top:var(--border-width-medium) solid var(--border-secondary);padding-top:var(--space-4);margin-top:var(--space-4);font-size:var(--font-size-xs);color:var(--text-secondary);display:flex;gap:var(--space-2);justify-content:space-between}.card-hoverable{transition:all var(--transition-fast) var(--easing-default);cursor:pointer}.card-hoverable:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.card-hoverable:active{transform:translateY(-2px)}@media (max-width: 767px){.card-default{padding:var(--space-4)}.card-header{font-size:var(--font-size-xs)}}.input-wrapper{display:flex;flex-direction:column;gap:var(--space-2)}.input-label{font-size:var(--font-size-xs);color:var(--text-accent);font-weight:700;text-shadow:1px 1px 0 var(--gray-900);-webkit-user-select:none;user-select:none}.input-required{color:var(--color-danger);margin-left:var(--space-1)}.input-container{position:relative;display:flex;align-items:center}.input{flex:1;background:var(--bg-primary);border:var(--border-width-thin) solid var(--border-secondary);color:var(--text-primary);font-size:var(--font-size-xs);padding:var(--space-3) var(--space-4);font-family:var(--font-family-primary);transition:all var(--transition-fast) var(--easing-default);padding-right:var(--space-6)}.input::placeholder{color:var(--text-tertiary)}.input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px #7b68ee1a}.input:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-tertiary)}.input-error{border-color:var(--color-danger)}.input-error:focus{border-color:var(--color-danger);box-shadow:0 0 0 2px #dc143c1a}.input-error-text{font-size:var(--font-size-xs);color:var(--color-danger);margin-top:var(--space-1)}.input-clear{position:absolute;right:var(--space-2);background:transparent;border:none;color:var(--text-tertiary);font-size:var(--font-size-sm);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast) var(--easing-default)}.input-clear:hover:not(:disabled){color:var(--text-primary)}.input-clear:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 767px){.input{font-size:7px;padding:var(--space-2) var(--space-3)}.input-label,.input-error-text{font-size:7px}}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--space-2)}.textarea-label{font-size:var(--font-size-xs);color:var(--text-accent);font-weight:700;text-shadow:1px 1px 0 var(--gray-900);-webkit-user-select:none;user-select:none}.textarea-required{color:var(--color-danger);margin-left:var(--space-1)}.textarea{background:var(--bg-primary);border:var(--border-width-thin) solid var(--border-secondary);color:var(--text-primary);font-size:var(--font-size-xs);padding:var(--space-3) var(--space-4);font-family:var(--font-family-primary);transition:all var(--transition-fast) var(--easing-default);resize:both;min-height:100px}.textarea::placeholder{color:var(--text-tertiary)}.textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px #7b68ee1a}.textarea:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-tertiary)}.textarea-error{border-color:var(--color-danger)}.textarea-error:focus{border-color:var(--color-danger);box-shadow:0 0 0 2px #dc143c1a}.textarea-footer{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);gap:var(--space-2);min-height:16px}.textarea-count{color:var(--text-tertiary);margin-left:auto}.textarea-error-text{color:var(--color-danger)}@media (max-width: 767px){.textarea{font-size:7px;padding:var(--space-2) var(--space-3);min-height:80px}.textarea-label,.textarea-footer{font-size:7px}}.badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);font-weight:700;white-space:nowrap;border-radius:0}.badge-online{background:var(--color-success);color:var(--text-primary)}.badge-offline{background:var(--gray-500);color:var(--text-primary)}.badge-warning{background:var(--color-warning);color:var(--gray-900)}.badge-danger{background:var(--color-danger);color:var(--text-primary)}.badge-info{background:var(--color-info);color:var(--gray-900)}.badge-small{padding:var(--space-1) var(--space-2);font-size:7px}.badge-medium{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs)}.badge-large{padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm)}.badge-icon{display:inline-flex;align-items:center;justify-content:center;font-size:1.2em}.badge-pill{border-radius:999px}@media (max-width: 767px){.badge-small{font-size:6px}.badge-medium{font-size:7px}.badge-large{font-size:var(--font-size-xs)}}.status{display:flex;align-items:center;gap:var(--space-3)}.status-horizontal{flex-direction:row}.status-vertical{flex-direction:column;align-items:flex-start}.status-content{display:flex;flex-direction:column;gap:var(--space-1)}.status-label{font-size:var(--font-size-xs);color:var(--text-primary);font-weight:700}@media (max-width: 767px){.status{gap:var(--space-2)}.status-label{font-size:7px}}.tabs-container{display:flex;flex-direction:column;gap:0;width:100%;height:100%}.tabs-list{display:flex;gap:0;border-bottom:var(--border-width-thin) solid var(--border-secondary);overflow-x:auto;scroll-behavior:smooth;background-color:var(--bg-secondary);flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.tabs-button{padding:var(--space-2) var(--space-3);background-color:transparent;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-xs);font-weight:700;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:var(--space-1);flex-shrink:0}.tabs-button:hover:not(:disabled){background-color:var(--bg-tertiary);color:var(--text-primary)}.tabs-button:focus-visible{outline:2px solid var(--text-accent);outline-offset:-2px}.tabs-button[aria-selected=true]{border-bottom-color:var(--color-primary);color:var(--text-accent);background-color:transparent}.tabs-button:disabled{opacity:.5;cursor:not-allowed}.tabs-icon{font-size:1.2em;display:inline-flex;align-items:center;line-height:1}.tabs-label{display:inline}.tabs-button:has(.tabs-icon:only-child){min-width:44px;min-height:44px;padding:var(--space-2)}.tabs-panel{padding:var(--space-4);animation:fadeIn .2s ease-in;display:none;overflow-y:auto;overflow-x:hidden}.tabs-panel.active{display:flex;flex-direction:column;flex:1;overflow-y:auto}@media (max-width: 767px){.tabs-button{padding:var(--space-1);font-size:7px;min-width:44px;min-height:44px}.tabs-icon{font-size:1.5em}.tabs-label{display:none}.tabs-button:has(.tabs-icon)+.tabs-button:has(.tabs-label) .tabs-label{display:inline}.tabs-panel{padding:var(--space-1)}.tabs-button{min-width:auto}.tabs-button .tabs-label{display:inline;font-size:6px;line-height:1}}@media (min-width: 768px) and (max-width: 1023px){.tabs-button{padding:var(--space-2) var(--space-2);font-size:9px;min-width:36px;min-height:36px}.tabs-panel{padding:var(--space-3)}}@media (min-width: 1024px){.tabs-button{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);min-width:auto;min-height:auto}.tabs-panel{padding:var(--space-4)}}.tabs-list::-webkit-scrollbar{height:4px}.tabs-list::-webkit-scrollbar-track{background:transparent}.tabs-list::-webkit-scrollbar-thumb{background:var(--border-secondary);border-radius:2px}.tabs-list::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}@media (prefers-contrast: more){.tabs-button{border-width:2px}.tabs-button[aria-selected=true]{border-bottom-width:4px}}@media (prefers-reduced-motion: reduce){.tabs-button,.tabs-panel{transition:none}.tabs-panel{animation:none}.tabs-list{scroll-behavior:auto}}.game-container{width:100%;height:100vh;display:flex;flex-direction:column;background-color:#1a1a2e}.game-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#16213e;border-bottom:4px solid #0f3460;box-shadow:0 2px 8px #0000004d}.game-title{color:gold;font-size:1.5rem;font-family:"Press Start 2P",monospace;text-shadow:2px 2px 4px rgba(0,0,0,.5);margin:0}.current-player-indicator{color:#0f0;font-family:"Press Start 2P",monospace;font-size:.8rem}.player-name{color:gold;font-weight:700}.btn-exit-game{background-color:#e94560;color:#fff;border:3px solid #c81d3f;padding:.5rem 1rem;font-family:"Press Start 2P",monospace;font-size:.7rem;cursor:pointer;box-shadow:0 4px #8b1428;transition:all .1s}.btn-exit-game:hover{background-color:#ff5572;transform:translateY(-2px);box-shadow:0 6px #8b1428}.btn-exit-game:active{transform:translateY(2px);box-shadow:0 2px #8b1428}.game-content{flex:1;overflow-y:auto;padding:1rem}.player-list{background-color:#16213e;border:3px solid #0f3460;padding:1rem;margin-bottom:1rem}.player-list-title{color:gold;font-family:"Press Start 2P",monospace;font-size:.9rem;margin:0 0 .5rem}.players{list-style:none;padding:0;margin:0}.player-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;margin-bottom:.25rem;background-color:#1a1a2e;border:2px solid #2d3561;color:#fff;font-family:"Press Start 2P",monospace;font-size:.7rem}.player-item.current{background-color:#2d4a2b;border-color:#0f0;animation:pulse 1.5s ease-in-out infinite}.player-item.disconnected{opacity:.5}.player-icon{color:#0f0;font-size:1rem}.player-item.disconnected .player-icon{color:#666}.player-name{flex:1}.player-score{color:gold;font-weight:700}@keyframes pulse{0%,to{box-shadow:0 0 5px #00ff0080}50%{box-shadow:0 0 15px #0f0c}}.dice-roller{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:16px;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d;margin-bottom:20px}.dice-roller-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dice-roller-header h3{font-size:10px;color:var(--sn-yellow);margin:0;font-family:"Press Start 2P",monospace}.rolls-remaining{font-size:7px;color:var(--text-secondary);font-family:"Press Start 2P",monospace}.waiting-turn{text-align:center;padding:20px;color:var(--text-secondary)}.waiting-turn p{font-size:8px;font-family:"Press Start 2P",monospace}.dice-empty{text-align:center;padding:20px}.dice-empty p{font-size:7px;color:var(--text-secondary);margin-bottom:16px;font-family:"Press Start 2P",monospace}.dice-container{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.die{aspect-ratio:1;background-color:var(--bg-primary);border:3px solid var(--sn-white);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .1s;box-shadow:0 0 0 2px var(--sn-black),0 2px 4px #0000004d;position:relative}.die:hover{background-color:var(--sn-blue);transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 4px 8px #00000080}.die.held{background-color:var(--sn-green);border-color:var(--sn-yellow);box-shadow:0 0 0 2px var(--sn-black),0 0 10px #ffd70080}.die-emoji{font-size:24px;margin-bottom:4px}.hold-indicator{position:absolute;top:4px;right:4px;color:var(--sn-yellow);font-size:10px;font-weight:700}.dice-actions{display:flex;gap:12px;justify-content:center;margin-bottom:12px}.roll-button,.collect-button{font-size:8px;padding:10px 20px;font-family:"Press Start 2P",monospace;cursor:pointer;border:3px solid var(--sn-white);box-shadow:0 0 0 2px var(--sn-black),0 4px 0 var(--sn-black);transition:all .1s}.roll-button{background-color:var(--sn-blue);color:var(--text-primary)}.roll-button:hover:not(:disabled){background-color:#4a9eff;transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px 0 var(--sn-black)}.roll-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 2px var(--sn-black),0 2px 0 var(--sn-black)}.collect-button{background-color:var(--sn-green);color:var(--text-primary)}.collect-button:hover:not(:disabled){background-color:#4ade4a;transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px 0 var(--sn-black)}.collect-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 2px var(--sn-black),0 2px 0 var(--sn-black)}.roll-button:disabled,.collect-button:disabled{opacity:.5;cursor:not-allowed}.dice-hint{text-align:center;padding:8px;background-color:var(--bg-primary);border:2px solid var(--sn-white)}.dice-hint p{font-size:6px;color:var(--text-secondary);margin:0;font-family:"Press Start 2P",monospace}@media (max-width: 767px){.dice-roller{padding:8px;margin-bottom:12px}.dice-roller-header{flex-direction:column;gap:4px;margin-bottom:8px}.dice-roller-header h3{font-size:8px}.rolls-remaining{font-size:6px}.dice-grid{grid-template-columns:repeat(2,1fr);gap:4px}.die{width:50px;height:50px;font-size:24px}.die.held{border-color:var(--sn-green)}.dice-actions{gap:4px}.dice-actions button{padding:6px 8px;font-size:7px;min-height:44px}.dice-empty p,.rolls-info{font-size:6px}.dice-hint{padding:6px}.dice-hint p{font-size:5px}}.building-panel{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:16px;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d;margin-bottom:20px}.building-panel-header{margin-bottom:16px;text-align:center}.building-panel-header h3{font-size:10px;color:var(--sn-yellow);margin:0 0 8px;font-family:"Press Start 2P",monospace}.building-panel-header p{font-size:7px;color:var(--text-secondary);margin:0;font-family:"Press Start 2P",monospace}.buildings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.building-card{background-color:var(--bg-primary);border:3px solid var(--sn-white);padding:12px;cursor:pointer;transition:all .1s;box-shadow:0 0 0 2px var(--sn-black),0 2px 4px #0000004d}.building-card:hover:not(.disabled){background-color:var(--sn-blue);transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 4px 8px #00000080}.building-card.selected{background-color:var(--sn-green);border-color:var(--sn-yellow);box-shadow:0 0 0 2px var(--sn-black),0 0 10px #ffd70080}.building-card.disabled{opacity:.5;cursor:not-allowed}.building-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.building-header h4{font-size:8px;color:var(--sn-yellow);margin:0;font-family:"Press Start 2P",monospace}.building-points{font-size:7px;color:var(--sn-cyan);font-family:"Press Start 2P",monospace}.building-cost{margin-top:8px}.cost-label{font-size:6px;color:var(--text-secondary);margin:0 0 4px;font-family:"Press Start 2P",monospace}.cost-item{display:flex;align-items:center;gap:4px;font-size:7px;font-family:"Press Start 2P",monospace;margin-bottom:2px}.cost-item .insufficient{color:var(--sn-red)}.building-error{margin-top:8px;padding:4px;background-color:var(--sn-red);border:2px solid var(--sn-white)}.building-error p{font-size:6px;color:var(--text-primary);margin:0;font-family:"Press Start 2P",monospace}.building-jokers-info{margin-top:8px;padding:4px;background-color:var(--sn-cyan);border:2px solid var(--sn-white);text-align:center}.building-jokers-info p{font-size:6px;color:var(--sn-bg-dark);margin:.25rem 0;font-family:"Press Start 2P",monospace}.jokers-available{font-size:5px;opacity:.9}.building-error-message{margin-bottom:12px;padding:8px;background-color:var(--sn-red);border:2px solid var(--sn-white);text-align:center}.building-error-message p{font-size:7px;color:var(--text-primary);margin:0;font-family:"Press Start 2P",monospace}.building-actions{display:flex;gap:12px;justify-content:center}.build-button,.end-turn-button{font-size:8px;padding:10px 20px;font-family:"Press Start 2P",monospace;cursor:pointer;border:3px solid var(--sn-white);box-shadow:0 0 0 2px var(--sn-black),0 4px 0 var(--sn-black);transition:all .1s}.build-button{background-color:var(--sn-green);color:var(--text-primary)}.build-button:hover:not(:disabled){background-color:#4ade4a;transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px 0 var(--sn-black)}.build-button:disabled{opacity:.5;cursor:not-allowed}.end-turn-button{background-color:var(--sn-blue);color:var(--text-primary)}.end-turn-button:hover{background-color:#4a9eff;transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px 0 var(--sn-black)}.end-turn-button:active{transform:translateY(2px);box-shadow:0 0 0 2px var(--sn-black),0 2px 0 var(--sn-black)}@media (max-width: 767px){.building-panel{padding:8px;margin-bottom:12px}.building-panel-header{flex-direction:column;gap:4px;margin-bottom:8px}.building-panel-header h3{font-size:8px}.buildings-grid{grid-template-columns:1fr;gap:4px}.building-card{padding:8px}.building-card-header{gap:4px}.building-name{font-size:7px}.building-points{font-size:6px}.building-costs{gap:2px}.building-cost-item{font-size:6px;padding:2px 4px}.building-actions{gap:4px}.building-actions button{padding:6px 8px;font-size:7px;min-height:44px}.end-turn-button{width:100%;padding:8px;font-size:7px}}.gold-trading-panel{background:var(--sn-bg-dark);border:3px solid var(--sn-border);border-radius:0;padding:1rem;margin:1rem 0;box-shadow:0 4px 0 var(--sn-shadow-dark),inset 0 2px #ffffff1a;font-family:"Press Start 2P",monospace;font-size:.7rem;color:var(--sn-text)}.gold-trading-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--sn-border)}.gold-trading-header h3{margin:0;font-size:.8rem;color:var(--sn-yellow);text-shadow:2px 2px 0 var(--sn-shadow-dark)}.gold-amount{display:flex;align-items:center;gap:.5rem;background:var(--sn-bg);padding:.5rem 1rem;border:2px solid var(--sn-border);border-radius:0}.gold-icon{font-size:1.2rem}.gold-value{font-size:.9rem;color:var(--sn-yellow);font-weight:700}.trade-info{text-align:center;margin:1rem 0;padding:.5rem;background:var(--sn-bg);border:2px solid var(--sn-border);font-size:.65rem;color:var(--sn-text-light)}.resource-selector{margin:1rem 0}.resource-selector label{display:block;margin-bottom:.5rem;font-size:.65rem;color:var(--sn-text)}.resource-select{width:100%;padding:.75rem;background:var(--sn-bg);border:3px solid var(--sn-border);border-radius:0;font-family:"Press Start 2P",monospace;font-size:.6rem;color:var(--sn-text);cursor:pointer;transition:all .1s}.resource-select:hover:not(:disabled){background:var(--sn-bg-light);border-color:var(--sn-yellow)}.resource-select:disabled{opacity:.5;cursor:not-allowed}.trade-button{width:100%;padding:.75rem;margin-top:1rem;font-size:.7rem;text-transform:uppercase;letter-spacing:1px}.trade-button:disabled{opacity:.5;cursor:not-allowed}.trade-warning{margin-top:.5rem;font-size:.6rem;color:var(--sn-red);text-align:center}@media (max-width: 767px){.gold-trading-panel{padding:8px;margin-bottom:12px}.gold-trading-panel h3{font-size:8px;margin-bottom:8px}.gold-amount{font-size:7px;margin-bottom:8px}.gold-icon{font-size:1.2em}.trade-row{gap:4px;margin-bottom:8px;flex-direction:column}.trade-label{font-size:7px}.trade-select{font-size:7px;padding:4px;min-height:32px}.trade-rate{font-size:6px}.trade-button{padding:6px 8px;font-size:7px;width:100%;min-height:44px}.trade-error{font-size:6px;padding:6px}}.turn-indicator{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:var(--space-3);box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d;display:grid;gap:var(--space-2);font-family:"Press Start 2P",monospace}.turn-info,.player-info,.phase-info{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xs)}.turn-label,.player-label,.phase-label{color:var(--sn-yellow);font-weight:700;min-width:70px}.turn-count,.player-name,.phase-name{color:var(--text-primary);flex:1}.player-name{animation:pulse 1.5s ease-in-out infinite}@media (max-width: 767px){.turn-indicator{padding:var(--space-2);gap:var(--space-1)}.turn-info,.player-info,.phase-info{font-size:7px}.turn-label,.player-label,.phase-label{min-width:auto;margin-right:var(--space-1)}}.waiting-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-6);min-height:200px;background-color:var(--bg-secondary);border:3px solid var(--sn-white);box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d;font-family:"Press Start 2P",monospace}.waiting-state.waiting-turn{background-color:var(--bg-tertiary);border-color:var(--sn-yellow)}.waiting-state.waiting-action{background-color:var(--bg-tertiary);border-color:var(--sn-cyan)}.loading-spinner{width:40px;height:40px;border:3px solid var(--sn-white);border-top-color:var(--sn-yellow);border-radius:50%;animation:spin .8s linear infinite}.waiting-message{color:var(--text-primary);font-size:var(--font-size-xs);text-align:center;margin:0;animation:blink 1s step-start infinite}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:.5}}@media (max-width: 767px){.waiting-state{padding:var(--space-3);gap:var(--space-2);min-height:150px}.loading-spinner{width:32px;height:32px;border-width:2px}.waiting-message{font-size:7px}}.resource-counter{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:var(--space-3);box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d;font-family:"Press Start 2P",monospace}.resource-counter.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.resource-counter.horizontal{display:flex;gap:var(--space-3);flex-wrap:wrap}.resource-counter.empty{color:var(--text-secondary);font-size:var(--font-size-xs);display:flex;align-items:center;justify-content:center;min-height:60px}.resource-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);background-color:var(--bg-secondary);border:2px solid var(--sn-white);cursor:pointer;transition:all .1s;box-shadow:0 0 0 1px var(--sn-black),inset 0 1px 2px #0000004d}.resource-item:hover{background-color:var(--sn-blue);transform:translateY(-2px);box-shadow:0 0 0 1px var(--sn-black),0 2px 4px #00000080}.resource-emoji{font-size:1.5em;display:inline-block;min-width:30px;text-align:center;image-rendering:pixelated}.resource-details{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}.resource-name{font-size:7px;color:var(--text-secondary);text-align:center;word-break:break-word;max-width:100%;line-height:1}.resource-count{font-size:8px;color:var(--sn-yellow);font-weight:700;min-width:20px;text-align:center}@media (max-width: 767px){.resource-counter{padding:var(--space-2);gap:var(--space-1)}.resource-counter.grid{grid-template-columns:repeat(2,1fr);gap:var(--space-1)}.resource-counter.horizontal{gap:var(--space-2)}.resource-item{padding:var(--space-1);gap:4px}.resource-emoji{font-size:1.2em;min-width:24px}.resource-name{font-size:6px}.resource-count{font-size:7px}}@media (min-width: 768px) and (max-width: 1023px){.resource-counter.grid{grid-template-columns:repeat(3,1fr)}}.scoreboard{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:var(--space-3);box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d;font-family:"Press Start 2P",monospace;display:flex;flex-direction:column;gap:var(--space-3)}.turn-counter{background-color:var(--bg-secondary);border:2px solid var(--sn-yellow);padding:var(--space-2);display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);box-shadow:0 0 0 1px var(--sn-black),inset 0 1px 2px #0000004d}.turn-label{color:var(--sn-yellow);font-weight:700}.turn-value{color:var(--text-primary)}.player-rankings{display:flex;flex-direction:column;gap:var(--space-2)}.player-rank{background-color:var(--bg-secondary);border:2px solid var(--sn-white);padding:var(--space-2);display:grid;grid-template-columns:30px 1fr 40px;gap:var(--space-2);align-items:center;font-size:var(--font-size-xs);box-shadow:0 0 0 1px var(--sn-black),inset 0 1px 2px #0000004d;transition:all .1s}.player-rank:hover{background-color:var(--sn-blue);transform:translateY(-2px);box-shadow:0 0 0 1px var(--sn-black),0 2px 4px #00000080}.player-rank.leader{background-color:var(--bg-primary);border-color:var(--sn-yellow);border-width:3px;box-shadow:0 0 0 2px var(--sn-black),0 0 10px #ffd70080}.player-rank.current-turn{background-color:var(--sn-blue);border-color:var(--sn-cyan)}.rank-number{color:var(--sn-yellow);font-weight:700;text-align:center;min-width:30px}.player-name{color:var(--text-primary);word-break:break-word}.player-score{color:var(--sn-yellow);font-weight:700;display:flex;align-items:center;gap:4px;justify-content:flex-end}.additional-info{grid-column:1 / -1;color:var(--text-secondary);font-size:6px;padding-top:4px;border-top:1px solid var(--sn-white);padding-left:30px}.current-indicator{grid-column:1 / -1;color:var(--sn-yellow);font-size:6px;font-weight:700;text-align:center;padding:var(--space-1) 0;background-color:#ffd7001a;border-top:1px solid var(--sn-yellow);animation:blink 1s ease-in-out infinite}@keyframes blink{0%,49%,to{opacity:1}50%,99%{opacity:.6}}.winning-condition{background-color:var(--bg-secondary);border:2px solid var(--sn-cyan);padding:var(--space-2);font-size:7px;color:var(--sn-cyan);text-align:center;box-shadow:0 0 0 1px var(--sn-black),inset 0 1px 2px #0000004d;line-height:1.4}@media (max-width: 767px){.scoreboard{padding:var(--space-2);gap:var(--space-2)}.turn-counter{padding:var(--space-1);font-size:7px}.player-rankings{gap:var(--space-1)}.player-rank{padding:var(--space-1);gap:var(--space-1);grid-template-columns:24px 1fr 30px;font-size:7px}.rank-number{min-width:24px}.player-score{font-size:7px}.score-label{font-size:5px}.additional-info{padding-left:24px;font-size:6px}.current-indicator{font-size:6px;padding:4px 0}.winning-condition{padding:var(--space-1);font-size:6px}}.game-over-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;padding:var(--space-4);font-family:"Press Start 2P",monospace;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-screen{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border:4px solid var(--sn-yellow);padding:var(--space-6);max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 0 0 4px var(--sn-black),0 20px 50px #000c;animation:slideIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.game-over-header{text-align:center;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:3px solid var(--sn-white)}.game-over-title{font-size:var(--font-size-lg);color:var(--sn-yellow);margin:0 0 var(--space-2) 0;text-shadow:2px 2px 0 var(--sn-black),-1px -1px 0 var(--sn-black)}.game-over-subtitle{font-size:var(--font-size-sm);color:var(--sn-cyan);margin:0;animation:pulse 1s ease-in-out infinite}.winners-section{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}.winner-card{background-color:var(--bg-primary);border:3px solid var(--sn-yellow);padding:var(--space-4);box-shadow:0 0 0 2px var(--sn-black),0 0 20px #ffd7004d;display:flex;align-items:center;gap:var(--space-4);animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1)}@keyframes bounceIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.winner-rank{font-size:2.5em;min-width:60px;text-align:center}.winner-info{flex:1}.winner-name{font-size:var(--font-size-md);color:var(--sn-yellow);margin:0 0 var(--space-1) 0;text-shadow:2px 2px 0 var(--sn-black),-1px -1px 0 var(--sn-black)}.winner-score{font-size:var(--font-size-sm);color:var(--text-primary);margin:0}.final-rankings{background-color:var(--bg-secondary);border:2px solid var(--sn-white);padding:var(--space-3);margin-bottom:var(--space-4);box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d}.rankings-title{font-size:var(--font-size-xs);color:var(--sn-cyan);margin:0 0 var(--space-2) 0;text-align:center}.rankings-list{display:flex;flex-direction:column;gap:var(--space-1)}.ranking-item{display:grid;grid-template-columns:30px 1fr 40px;gap:var(--space-1);padding:var(--space-1) var(--space-2);background-color:var(--bg-tertiary);border:1px solid var(--sn-white);font-size:7px;align-items:center}.ranking-item.winner{background-color:var(--bg-primary);border-color:var(--sn-yellow);border-width:2px}.ranking-position{color:var(--sn-yellow);font-weight:700;text-align:center}.ranking-name{color:var(--text-primary)}.ranking-score{color:var(--sn-yellow);font-weight:700;display:flex;align-items:center;gap:2px;justify-content:flex-end}.score-label{font-size:6px;color:var(--text-secondary);font-weight:400}.game-over-actions{text-align:center}@media (max-width: 767px){.game-over-overlay{padding:var(--space-2)}.game-over-screen{padding:var(--space-3);max-height:95vh;border-width:3px}.game-over-header{margin-bottom:var(--space-3);padding-bottom:var(--space-2)}.game-over-title{font-size:var(--font-size-md)}.game-over-subtitle{font-size:8px}.winners-section{gap:var(--space-2);margin-bottom:var(--space-3)}.winner-card{padding:var(--space-2);gap:var(--space-2)}.winner-rank{font-size:2em;min-width:50px}.winner-name{font-size:var(--font-size-sm)}.winner-score{font-size:8px}.final-rankings{padding:var(--space-2);margin-bottom:var(--space-3)}.rankings-title{font-size:8px;margin-bottom:var(--space-1)}.rankings-list{gap:4px}.ranking-item{padding:4px 8px;gap:4px;grid-template-columns:24px 1fr 30px;font-size:6px}}.game-action-button{font-family:"Press Start 2P",monospace;border:3px solid var(--sn-white);cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center;gap:var(--space-2);white-space:nowrap;font-size:var(--font-size-xs);box-shadow:0 0 0 2px var(--sn-black),0 4px 0 var(--sn-black)}.game-action-button.primary{background-color:var(--sn-green);color:var(--text-primary)}.game-action-button.primary:hover:not(:disabled){background-color:#4eef4e;transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px 0 var(--sn-black)}.game-action-button.primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 2px var(--sn-black),0 2px 0 var(--sn-black)}.game-action-button.secondary{background-color:var(--sn-blue);color:var(--text-primary)}.game-action-button.secondary:hover:not(:disabled){background-color:#3084ff;transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px 0 var(--sn-black)}.game-action-button.secondary:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 2px var(--sn-black),0 2px 0 var(--sn-black)}.game-action-button.danger{background-color:var(--sn-red);color:var(--text-primary)}.game-action-button.danger:hover:not(:disabled){background-color:#ff3860;transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px 0 var(--sn-black)}.game-action-button.danger:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 2px var(--sn-black),0 2px 0 var(--sn-black)}.game-action-button.small{padding:var(--space-1) var(--space-2);font-size:7px;min-height:32px;min-width:32px}.game-action-button.medium{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);min-height:40px;min-width:60px}.game-action-button.large{padding:var(--space-3) var(--space-4);font-size:var(--font-size-xs);min-height:50px;min-width:100px}.game-action-button:disabled,.game-action-button.disabled{opacity:.5;cursor:not-allowed;transform:none!important}.game-action-button.loading{opacity:.8}.game-action-button.loading .label{display:none}.game-action-button .icon{font-size:1.2em;display:inline-flex;align-items:center}.game-action-button .label{display:inline}.game-action-button .spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin-fast .6s linear infinite}@keyframes spin-fast{to{transform:rotate(360deg)}}@media (max-width: 767px){.game-action-button{padding:var(--space-2) var(--space-2);font-size:7px;min-height:44px;min-width:44px}.game-action-button.medium{min-height:44px;min-width:70px}.game-action-button.large{min-height:48px;width:100%}.game-action-button .spinner{width:14px;height:14px;border-width:2px}}.catan-dice-game{width:100%;height:100%;display:flex;flex-direction:column;padding:20px;color:var(--text-primary)}.catan-dice-loading{display:flex;justify-content:center;align-items:center;height:100%;font-size:12px;color:var(--sn-yellow);font-family:"Press Start 2P",monospace}.game-info{display:flex;flex-direction:column;gap:20px}.turn-info{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:12px;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d}.turn-info p{font-size:8px;margin:4px 0;color:var(--text-primary);font-family:"Press Start 2P",monospace}.player-resources{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:12px;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d}.player-resources h3{font-size:10px;color:var(--sn-yellow);margin:0 0 12px;font-family:"Press Start 2P",monospace}.resources-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.resource-item{display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-primary);border:2px solid var(--sn-white);padding:8px;font-size:7px;font-family:"Press Start 2P",monospace}.resource-item span:first-child{color:var(--text-primary)}.resource-item span:last-child{color:var(--sn-yellow);font-weight:700}.game-placeholder{background-color:var(--bg-tertiary);border:3px solid var(--sn-cyan);padding:40px;text-align:center;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d}.game-placeholder p{font-size:10px;margin:12px 0;color:var(--sn-cyan);font-family:"Press Start 2P",monospace}.building-phase{background-color:var(--bg-tertiary);border:3px solid var(--sn-green);padding:20px;margin-bottom:20px;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d}.phase-header h3{font-size:10px;color:var(--sn-green);margin:0 0 12px;font-family:"Press Start 2P",monospace}.phase-message{text-align:center}.phase-message p{font-size:8px;color:var(--text-primary);margin:8px 0;font-family:"Press Start 2P",monospace}.phase-hint{font-size:7px;color:var(--text-secondary);font-style:italic}.waiting-building{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:20px;margin-bottom:20px;text-align:center;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d}.waiting-building p{font-size:8px;color:var(--text-secondary);font-family:"Press Start 2P",monospace}.dice-finished{text-align:center;padding:12px}.dice-finished p{font-size:8px;color:var(--sn-green);margin-bottom:12px;font-family:"Press Start 2P",monospace}.player-jokers{background-color:var(--bg-tertiary);border:3px solid var(--sn-cyan);padding:12px;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d;margin-top:20px;text-align:center}.player-jokers h3{font-size:10px;color:var(--sn-cyan);margin:0 0 12px;font-family:"Press Start 2P",monospace}.jokers-display{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0;padding:12px;background-color:var(--bg-primary);border:2px solid var(--sn-cyan)}.joker-icon{font-size:24px}.jokers-count{font-size:20px;color:var(--sn-cyan);font-family:"Press Start 2P",monospace;font-weight:700}.jokers-hint{font-size:7px;color:var(--text-secondary);margin:8px 0 0;font-family:"Press Start 2P",monospace}.player-buildings{background-color:var(--bg-tertiary);border:3px solid var(--sn-white);padding:12px;box-shadow:0 0 0 2px var(--sn-black),inset 0 2px 4px #0000004d;margin-top:20px}.player-buildings h3{font-size:10px;color:var(--sn-yellow);margin:0 0 12px;font-family:"Press Start 2P",monospace}.buildings-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.building-item{display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-primary);border:2px solid var(--sn-white);padding:8px;font-size:7px;font-family:"Press Start 2P",monospace}.building-item span:first-child{color:var(--text-primary)}.building-item span:last-child{color:var(--sn-cyan);font-weight:700}.no-buildings{font-size:7px;color:var(--text-secondary);font-family:"Press Start 2P",monospace;text-align:center;padding:8px;margin:0}.total-score{text-align:center;padding:8px;background-color:var(--bg-primary);border:2px solid var(--sn-yellow);font-size:8px;color:var(--sn-yellow);font-family:"Press Start 2P",monospace;font-weight:700}.rps-player-display{flex:1;display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px;background-color:var(--panel-dark);border:2px solid rgba(255,255,255,.1);border-radius:16px;min-width:300px;max-width:400px}.rps-player-name{font-size:24px;font-family:"Press Start 2P",cursive;color:#fff;margin:0;letter-spacing:.05em;text-align:center}.rps-player-score{display:flex;flex-direction:column;align-items:center;gap:8px}.rps-score-label{font-size:10px;font-family:VT323,monospace;color:#ffffff80;text-transform:uppercase;letter-spacing:.1em}.rps-score-value{font-size:48px;font-family:"Press Start 2P",cursive;color:var(--arcade-orange);text-shadow:0 0 20px rgba(255,174,0,.8);line-height:1}.rps-choice-display{width:100%;min-height:200px;display:flex;align-items:center;justify-content:center}.rps-choice-revealed{display:flex;flex-direction:column;align-items:center;gap:16px;animation:reveal .5s ease-out}.rps-choice-icon{font-size:120px;line-height:1;animation:bounce .6s ease-out}.rps-choice-name{font-size:20px;font-family:"Press Start 2P",cursive;color:#fff;letter-spacing:.05em;text-transform:uppercase}.rps-choice-waiting{display:flex;flex-direction:column;align-items:center;gap:12px;color:#ffffff80;font-family:VT323,monospace;font-size:18px}.rps-choice-pulse{width:60px;height:60px;border:3px solid var(--arcade-blue);border-radius:50%;animation:pulse-ring 2s cubic-bezier(.4,0,.6,1) infinite}.rps-choice-ready{display:flex;flex-direction:column;align-items:center;gap:8px;color:#22c55e;font-family:"Press Start 2P",cursive;font-size:12px}.rps-choice-ready .material-symbols-outlined{font-size:48px;animation:check-bounce .5s ease-out}@keyframes reveal{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes pulse-ring{0%{transform:scale(.8);opacity:1}50%{transform:scale(1.2);opacity:.5}to{transform:scale(.8);opacity:1}}@keyframes check-bounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.rps-round-result{width:100%;max-width:600px;margin:32px 0;animation:slide-up .5s ease-out}.rps-result-content{background:linear-gradient(135deg,#ff2a2a33,#2aebff33);border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:32px;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.rps-result-icon{font-size:64px;margin-bottom:16px;animation:bounce .6s ease-out}.rps-result-title{font-size:32px;font-family:"Press Start 2P",cursive;color:#fff;margin:0 0 12px;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 20px rgba(255,255,255,.5)}.rps-result-message{font-size:18px;font-family:VT323,monospace;color:#fffc;margin:0 0 16px}.rps-result-winner{font-size:20px;font-family:"Press Start 2P",cursive;color:var(--arcade-orange);text-shadow:0 0 15px rgba(255,174,0,.8);letter-spacing:.05em;margin-top:16px}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.rps-game-over{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--bg-dark);display:flex;align-items:center;justify-content:center;z-index:1000}.rps-game-over-content{text-align:center;padding:48px;max-width:600px;animation:fade-in .5s ease-out}.rps-game-over-icon{font-size:120px;margin-bottom:24px;animation:bounce 1s ease-out}.rps-game-over-title{font-size:36px;font-family:"Press Start 2P",cursive;color:#fff;margin:0 0 32px;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 20px rgba(255,255,255,.5)}.rps-game-over-winner{margin-bottom:32px}.rps-winner-name{font-size:48px;font-family:"Press Start 2P",cursive;color:var(--arcade-orange);margin:0 0 8px;letter-spacing:.05em;text-shadow:0 0 30px rgba(255,174,0,.8);animation:glow-pulse 2s ease-in-out infinite}.rps-winner-label{font-size:16px;font-family:VT323,monospace;color:#ffffffb3;text-transform:uppercase;letter-spacing:.2em;margin:0}.rps-final-scores{background-color:var(--panel-light);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;margin-bottom:32px}.rps-final-scores-title{font-size:14px;font-family:"Press Start 2P",cursive;color:#fff9;text-align:center;margin:0 0 16px;letter-spacing:.05em;text-transform:uppercase}.rps-final-score-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid rgba(255,255,255,.05)}.rps-final-score-item:last-child{border-bottom:none}.rps-final-score-item.winner{background-color:#ffae001a;border:1px solid rgba(255,174,0,.3);border-radius:8px}.rps-final-score-name{font-size:16px;font-family:"Press Start 2P",cursive;color:#fff;letter-spacing:.05em}.rps-final-score-value{font-size:24px;font-family:"Press Start 2P",cursive;color:var(--arcade-orange)}.rps-return-button{width:100%;padding:16px 32px;background-color:var(--arcade-blue);color:#fff;font-family:"Press Start 2P",cursive;font-size:14px;border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:all .2s;box-shadow:0 0 20px #2aebff66;letter-spacing:.05em}.rps-return-button:hover{background-color:#1fc8d8;box-shadow:0 0 30px #2aebff99;transform:translateY(-2px)}.rps-return-button:active{transform:translateY(0) scale(.98)}.rps-return-button .material-symbols-outlined{font-size:20px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes glow-pulse{0%,to{text-shadow:0 0 30px rgba(255,174,0,.8)}50%{text-shadow:0 0 50px rgba(255,174,0,1)}}.rps-scoreboard{width:100%;max-width:600px;background-color:var(--panel-light);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px}.rps-scoreboard-title{font-size:14px;font-family:"Press Start 2P",cursive;color:var(--arcade-orange);text-align:center;margin:0 0 16px;letter-spacing:.05em;text-transform:uppercase}.rps-scoreboard-scores{display:flex;justify-content:space-around;gap:24px}.rps-scoreboard-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}.rps-scoreboard-name{font-size:12px;font-family:VT323,monospace;color:#fff9;text-transform:uppercase;letter-spacing:.1em}.rps-scoreboard-value{font-size:36px;font-family:"Press Start 2P",cursive;color:#fff;line-height:1}.rps-game{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background-color:var(--bg-dark);color:#fff;font-family:VT323,monospace;overflow:hidden;z-index:1}.rps-grid-pattern{position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px),linear-gradient(to bottom,#1a1a1a 1px,transparent 1px);background-size:40px 40px;opacity:.2;pointer-events:none;z-index:0}.rps-gradient{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,var(--bg-dark),transparent,var(--bg-dark));pointer-events:none;z-index:0}.rps-game .scanlines{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;opacity:.15}.rps-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px 48px;border-bottom:1px solid rgba(255,255,255,.1);background:#0006;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.rps-header-title{display:flex;align-items:center;gap:16px}.rps-header-title .material-symbols-outlined{font-size:32px;color:var(--arcade-red)}.rps-header-title h1{font-size:32px;font-family:"Press Start 2P",cursive;color:#fff;margin:0;letter-spacing:.05em;text-transform:uppercase}.rps-header-info{display:flex;align-items:center;gap:24px}.rps-round-indicator{font-size:16px;font-family:"Press Start 2P",cursive;color:var(--arcade-blue);letter-spacing:.1em;text-shadow:0 0 10px rgba(42,235,255,.7)}.rps-main{position:relative;z-index:10;height:calc(100vh - 100px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;gap:32px}.rps-players{display:flex;align-items:center;justify-content:center;gap:64px;width:100%;max-width:1400px}.rps-vs{display:flex;flex-direction:column;align-items:center;gap:16px;flex-shrink:0}.rps-vs-line{width:2px;height:60px;background:linear-gradient(to bottom,transparent,var(--arcade-red),transparent)}.rps-vs-text{font-size:48px;font-family:"Press Start 2P",cursive;color:var(--arcade-red);text-shadow:0 0 20px rgba(255,42,42,.8);letter-spacing:.1em}.rps-status{margin-top:24px}.rps-status-text{font-size:20px;font-family:"Press Start 2P",cursive;color:#ffffffb3;text-align:center;letter-spacing:.05em;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.rps-game-loading,.rps-game-error{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-color:var(--bg-dark);color:#fff;font-family:"Press Start 2P",cursive;font-size:24px}@media (max-width: 1024px){.rps-players{flex-direction:column;gap:32px}.rps-vs{flex-direction:row;gap:24px}.rps-vs-line{width:60px;height:2px;background:linear-gradient(to right,transparent,var(--arcade-red),transparent)}}.ttt-board{display:inline-flex;flex-direction:column;gap:4px;padding:24px;background:#00000080;border:3px solid rgba(255,255,255,.2);border-radius:12px;box-shadow:0 0 40px #000c}.ttt-board-row{display:flex;gap:4px}.ttt-cell{width:120px;height:120px;display:flex;align-items:center;justify-content:center;background:#1a1a1acc;border:2px solid rgba(255,255,255,.1);border-radius:8px;cursor:default;transition:all .3s ease;position:relative;overflow:hidden}.ttt-cell-empty{background:#1119}.ttt-cell-filled{background:#1a1a1ae6}.ttt-cell-winning{background:#2aebff33;border-color:#2aebff;box-shadow:0 0 20px #2aebff80;animation:winningPulse 1s ease-in-out infinite}@keyframes winningPulse{0%,to{box-shadow:0 0 20px #2aebff80}50%{box-shadow:0 0 30px #2aebffcc}}.ttt-symbol{font-size:64px;font-family:"Press Start 2P",cursive;font-weight:700;text-shadow:0 0 20px currentColor;animation:symbolAppear .3s ease-out}@keyframes symbolAppear{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.ttt-symbol-x{color:#ff2a2a;text-shadow:0 0 20px #ff2a2a,0 0 40px #ff2a2a}.ttt-symbol-o{color:#2aebff;text-shadow:0 0 20px #2aebff,0 0 40px #2aebff}.ttt-board-error{display:flex;align-items:center;justify-content:center;padding:48px;font-family:"Press Start 2P",cursive;color:#ff2a2a;text-align:center}@media (max-width: 768px){.ttt-board{padding:16px}.ttt-cell{width:80px;height:80px}.ttt-symbol{font-size:40px}}@media (max-width: 480px){.ttt-cell{width:60px;height:60px}.ttt-symbol{font-size:32px}}.ttt-game-over{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background-color:#050505;color:#fff;font-family:VT323,monospace;display:flex;align-items:center;justify-content:center;z-index:1000}.ttt-game-over .ttt-grid-pattern{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px),linear-gradient(to bottom,#1a1a1a 1px,transparent 1px);background-size:40px 40px;opacity:.2;pointer-events:none;z-index:0}.ttt-game-over .ttt-gradient{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#050505,transparent,#050505);pointer-events:none;z-index:0}.ttt-game-over .scanlines{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;opacity:.15}.ttt-game-over-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:48px;padding:48px;max-width:800px;text-align:center}.ttt-game-over-title{font-size:48px;font-family:"Press Start 2P",cursive;color:#ff2a2a;margin:0;letter-spacing:.1em;text-shadow:0 0 20px rgba(255,42,42,.8);animation:titlePulse 2s ease-in-out infinite}@keyframes titlePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.ttt-game-over-result{display:flex;flex-direction:column;align-items:center;gap:16px}.ttt-game-over-icon{font-size:80px;animation:iconBounce 1s ease-in-out infinite}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.ttt-game-over-result h2{font-size:36px;font-family:"Press Start 2P",cursive;margin:0;letter-spacing:.1em}.ttt-game-over-winner h2{color:#2aebff;text-shadow:0 0 20px rgba(42,235,255,.8)}.ttt-game-over-draw h2{color:#ffae00;text-shadow:0 0 20px rgba(255,174,0,.8)}.ttt-game-over-result p{font-size:18px;font-family:"Press Start 2P",cursive;color:#ffffffb3;margin:0}.ttt-game-over-symbol{font-size:24px;font-family:"Press Start 2P",cursive;color:#fff}.ttt-winner-symbol{color:#2aebff;text-shadow:0 0 15px rgba(42,235,255,.8);font-size:32px}.ttt-game-over-message{font-size:20px;color:#2aebff!important;text-shadow:0 0 10px rgba(42,235,255,.7)}.ttt-game-over-players{display:flex;align-items:center;gap:48px;width:100%;justify-content:center;padding:32px;background:#0006;border-radius:12px;border:2px solid rgba(255,255,255,.1)}.ttt-game-over-player{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;max-width:200px}.ttt-game-over-player-symbol{font-size:48px;font-family:"Press Start 2P",cursive;font-weight:700;text-shadow:0 0 15px currentColor}.ttt-game-over-player-name{font-size:16px;font-family:"Press Start 2P",cursive;color:#fff;text-align:center}.ttt-game-over-player-badge{font-size:12px;font-family:"Press Start 2P",cursive;color:#2aebff;background:#2aebff33;padding:4px 12px;border-radius:4px;border:1px solid #2aebff;text-shadow:0 0 10px rgba(42,235,255,.8);animation:badgePulse 1.5s ease-in-out infinite}@keyframes badgePulse{0%,to{opacity:1;box-shadow:0 0 10px #2aebff80}50%{opacity:.8;box-shadow:0 0 20px #2aebffcc}}.ttt-game-over-vs{font-size:20px;font-family:"Press Start 2P",cursive;color:#ffffff80;letter-spacing:.2em}.ttt-game-over-button{display:flex;align-items:center;gap:12px;padding:16px 32px;font-size:16px;font-family:"Press Start 2P",cursive;color:#fff;background:#ff2a2a33;border:2px solid #ff2a2a;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.1em;text-shadow:0 0 10px rgba(255,42,42,.8)}.ttt-game-over-button:hover{background:#ff2a2a66;box-shadow:0 0 20px #ff2a2a99;transform:translateY(-2px)}.ttt-game-over-button:active{transform:translateY(0)}.ttt-game-over-button .material-symbols-outlined{font-size:24px}@media (max-width: 768px){.ttt-game-over-content{padding:24px;gap:32px}.ttt-game-over-title{font-size:32px}.ttt-game-over-icon{font-size:60px}.ttt-game-over-result h2{font-size:24px}.ttt-game-over-players{flex-direction:column;gap:24px}.ttt-game-over-vs{transform:rotate(90deg)}}.ttt-game{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background-color:#050505;color:#fff;font-family:VT323,monospace;overflow:hidden;z-index:1}.ttt-grid-pattern{position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px),linear-gradient(to bottom,#1a1a1a 1px,transparent 1px);background-size:40px 40px;opacity:.2;pointer-events:none;z-index:0}.ttt-gradient{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#050505,transparent,#050505);pointer-events:none;z-index:0}.ttt-game .scanlines{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;opacity:.15}.ttt-game-loading,.ttt-game-error{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;font-family:"Press Start 2P",cursive;font-size:24px;color:#ff2a2a;text-align:center}.ttt-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px 48px;border-bottom:1px solid rgba(255,255,255,.1);background:#0006;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.ttt-header-title{display:flex;align-items:center;gap:16px}.ttt-header-title .material-symbols-outlined{font-size:32px;color:#ff2a2a}.ttt-header-title h1{font-size:32px;font-family:"Press Start 2P",cursive;color:#fff;margin:0;letter-spacing:.05em;text-transform:uppercase}.ttt-header-info{display:flex;align-items:center;gap:24px}.ttt-turn-indicator{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.ttt-turn-label{font-size:12px;font-family:"Press Start 2P",cursive;color:#ffffff80;letter-spacing:.1em}.ttt-turn-active{font-size:18px;font-family:"Press Start 2P",cursive;color:#2aebff;letter-spacing:.1em;text-shadow:0 0 10px rgba(42,235,255,.7);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.ttt-main{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;height:calc(100vh - 100px);gap:48px}.ttt-players{display:flex;align-items:center;gap:48px;width:100%;max-width:800px;justify-content:center}.ttt-player{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background:#0000004d;transition:all .3s ease;min-width:150px}.ttt-player-active{border-color:#2aebff;background:#2aebff1a;box-shadow:0 0 20px #2aebff4d}.ttt-player-symbol{font-size:48px;font-family:"Press Start 2P",cursive;font-weight:700;text-shadow:0 0 15px currentColor}.ttt-player-name{font-size:18px;font-family:"Press Start 2P",cursive;color:#fff;text-align:center}.ttt-vs{display:flex;align-items:center;gap:16px;font-family:"Press Start 2P",cursive;font-size:24px;color:#ffffff80}.ttt-vs-line{width:40px;height:2px;background:#fff3}.ttt-vs-text{letter-spacing:.2em}.ttt-board-container{display:flex;align-items:center;justify-content:center;padding:24px}.ttt-board-loading{display:flex;align-items:center;justify-content:center;padding:48px;font-family:"Press Start 2P",cursive;font-size:16px;color:#2aebff;text-align:center;min-height:200px}.ttt-status{text-align:center}.ttt-status-text{font-size:20px;font-family:"Press Start 2P",cursive;color:#2aebff;letter-spacing:.1em;text-shadow:0 0 10px rgba(42,235,255,.7);margin:0}@media (max-width: 768px){.ttt-header{padding:16px 24px}.ttt-header-title h1{font-size:20px}.ttt-main{padding:24px;gap:24px}.ttt-players{gap:24px;flex-wrap:wrap}.ttt-player{min-width:120px;padding:16px}.ttt-player-symbol{font-size:32px}.ttt-player-name{font-size:14px}}.arcade-header{width:100%;padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.05);background:#050505cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:40;position:relative}.header-left{display:flex;align-items:center;gap:1rem}.header-icon{font-size:2.25rem;color:var(--arcade-red);filter:drop-shadow(0 0 8px rgba(255,42,42,.5))}.header-title{font-family:var(--font-family-pixel);font-size:1.125rem;line-height:1.2;color:var(--text-primary);margin:0;letter-spacing:-.05em}.text-arcade-red{color:var(--arcade-red)}.header-subtitle{font-family:var(--font-family-mono);font-size:.875rem;color:#ffffff80;margin:0;letter-spacing:.2em;text-transform:uppercase}.header-right{display:flex;align-items:center;gap:1.5rem;font-size:1.25rem}.connection-status{display:flex;align-items:center;gap:.5rem;color:var(--arcade-blue);text-shadow:var(--glow-blue)}.connection-status .material-symbols-outlined{font-size:1.25rem}.connection-text{font-family:var(--font-family-mono);letter-spacing:.1em;font-size:1rem}.animate-pulse{animation:pulse 2s ease-in-out infinite}@media (max-width: 768px){.arcade-header{padding:1rem;flex-direction:column;gap:1rem}.header-left,.header-right{width:100%;justify-content:center}.header-title{font-size:.875rem}.header-subtitle{font-size:.75rem}}.arcade-sidebar{width:320px;border-right:1px solid rgba(255,255,255,.05);background:#11111180;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;padding:2rem;justify-content:space-between;position:relative;flex-shrink:0}.sidebar-accent{position:absolute;left:0;top:2.5rem;width:4px;height:80px;background:var(--arcade-red);box-shadow:0 0 10px var(--arcade-red)}.sidebar-content{display:flex;flex-direction:column;gap:2rem}.session-id-section{margin-top:1rem}.section-label{font-family:var(--font-family-pixel);font-size:.875rem;color:#fff6;margin:0 0 1rem;text-transform:uppercase;letter-spacing:.1em}.session-id-value{font-family:var(--font-family-pixel);font-size:3rem;color:var(--arcade-red);letter-spacing:.1em;line-height:1;text-shadow:var(--glow-red)}.qr-section{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}.qr-container{background:#ffffff0d;padding:1rem;border-radius:4px;border:1px solid rgba(255,255,255,.1);width:fit-content;transition:all .3s ease;cursor:pointer}.qr-container:hover{border-color:#2aebff80;opacity:1}.qr-image{width:128px;height:128px;object-fit:contain;opacity:.9;transition:opacity .3s ease}.qr-container:hover .qr-image{opacity:1}.qr-placeholder{width:128px;height:128px;display:flex;align-items:center;justify-content:center;color:#ffffff80;font-family:var(--font-family-mono);font-size:.875rem}.join-url{font-family:var(--font-family-mono);font-size:1.25rem;color:var(--text-primary);letter-spacing:.1em;margin:0}.scan-hint{font-family:var(--font-family-mono);font-size:.875rem;color:var(--arcade-blue);text-transform:uppercase;margin:0;animation:pulse 2s ease-in-out infinite}.sidebar-footer{font-family:var(--font-family-pixel);font-size:.75rem;color:#fff3;line-height:1.75;text-align:left}.free-play{color:#ff2a2a66}@media (max-width: 1024px){.arcade-sidebar{width:280px;padding:1.5rem}.session-id-value{font-size:2.5rem}}@media (max-width: 768px){.arcade-sidebar{width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.05);padding:1.5rem}.sidebar-accent{display:none}.sidebar-content{flex-direction:row;align-items:center;gap:2rem}.session-id-section{margin-top:0}.session-id-value{font-size:2rem}.qr-container{flex-shrink:0}}.copy-button{padding:8px 16px;margin-top:8px;border:2px solid #00ff00;background-color:#000;color:#0f0;font-family:"Press Start 2P",monospace;font-size:.6rem;cursor:pointer;text-transform:uppercase;letter-spacing:2px;transition:all .2s ease;box-shadow:0 0 10px #00ff004d;white-space:nowrap}.copy-button:hover:not(.copied){background-color:#0f0;color:#000;box-shadow:0 0 20px #0f09,inset 0 0 10px #0f03;transform:scale(1.05)}.copy-button:active:not(.copied){transform:scale(.95)}.copy-button.copied{background-color:#0f0;color:#000;box-shadow:0 0 15px #0f0c}.arcade-copy-btn,.controller-copy-btn{display:block;width:100%;margin-top:12px}.arcade-footer{width:100%;background:var(--gray-900);border-top:1px solid rgba(255,255,255,.1);padding:.5rem 2rem;display:flex;justify-content:space-between;align-items:center;z-index:40;position:relative}.footer-left,.footer-right{display:flex;align-items:center;gap:1rem;font-family:var(--font-family-mono);font-size:.75rem;color:#fff6;text-transform:uppercase;letter-spacing:.1em}.separator{width:1px;height:12px;background:#fff3}.shortcut{display:flex;align-items:center;gap:.25rem}.key{background:#ffffff1a;padding:.125rem .25rem;border-radius:2px;color:var(--text-primary)}@media (max-width: 768px){.arcade-footer{padding:.5rem 1rem;flex-direction:column;gap:.5rem;font-size:.625rem}.footer-left,.footer-right{width:100%;justify-content:center}}.players-section{margin-bottom:2rem}.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.05)}.section-title{font-family:var(--font-family-pixel);font-size:1.5rem;color:var(--text-primary);margin:0;display:flex;align-items:center;gap:1rem}.section-title .material-symbols-outlined{color:var(--arcade-orange);font-size:1.5rem}.subtitle{font-family:var(--font-family-mono);font-size:1rem;color:#ffffff4d;vertical-align:middle;margin-left:.5rem;letter-spacing:.05em}.ready-badge{font-family:var(--font-family-pixel);font-size:.75rem;color:var(--arcade-blue);background:#2aebff1a;padding:.25rem .75rem;border-radius:4px;border:1px solid rgba(42,235,255,.2)}.players-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;width:100%;align-items:start}.player-card{background:var(--panel-light);border:2px solid rgba(255,255,255,.1);padding:.75rem;border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:default;justify-content:space-between;width:100%;box-sizing:border-box;min-height:128px;height:128px}.player-card:hover{border-color:#fff3;transform:translateY(-2px)}.player-card.host{border-color:#ff2a2a4d;box-shadow:0 0 20px #ff2a2a1a;background:#ff2a2a0d}.host-badge{position:absolute;top:-.625rem;left:50%;transform:translate(-50%);background:var(--arcade-red);color:var(--gray-900);font-family:var(--font-family-pixel);font-size:.5rem;padding:.25rem .5rem;border-radius:2px;box-shadow:0 1px 4px #0000004d;z-index:10;line-height:1;white-space:nowrap;display:flex;align-items:center;gap:.25rem}.player-avatar{width:48px;height:48px;border-radius:50%;background:var(--gray-900);border:2px solid rgba(255,255,255,.1);overflow:hidden;position:relative;flex-shrink:0}.player-avatar img{width:100%;height:100%;object-fit:cover}.player-avatar .avatar-icon{font-size:1rem;color:var(--text-primary);width:100%;height:100%;display:flex;align-items:center;justify-content:center}.player-card.host .player-avatar{border-color:#ff2a2a4d}.player-name{font-family:var(--font-family-pixel);font-size:.625rem;color:var(--text-primary);margin:0;letter-spacing:.05em;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card.host .player-name{color:#ffffffe6}.player-card.empty{background:transparent;border:2px dashed rgba(255,255,255,.1);opacity:.5;cursor:default}.empty-avatar{width:48px;height:48px;border-radius:50%;background:#ffffff0d;display:flex;align-items:center;justify-content:center;flex-shrink:0}.empty-avatar .empty-icon{font-size:.875rem;color:#fff3}.kick-button{position:absolute;top:.25rem;right:.25rem;width:20px;height:20px;background:#ff2a2acc;border:1px solid var(--arcade-red);color:var(--text-primary);border-radius:3px;cursor:pointer;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;z-index:10}.kick-button:hover{background:var(--arcade-red);box-shadow:0 4px 12px #ff2a2a80}.kick-button:active{transform:scale(.95)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@media (min-width: 481px) and (max-width: 1024px){.players-grid{grid-template-columns:repeat(4,1fr);gap:.75rem}.player-card{min-height:120px;height:120px;padding:.6rem;gap:.4rem}.player-avatar,.empty-avatar{width:44px;height:44px}.player-avatar .avatar-icon{font-size:.875rem}.player-name{font-size:.55rem}}@media (max-width: 480px){.players-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.player-card{min-height:110px;height:110px;padding:.5rem;gap:.35rem}.player-avatar,.empty-avatar{width:40px;height:40px}.player-avatar .avatar-icon{font-size:1rem}.player-name{font-size:.5rem}.section-title{font-size:1.25rem}}.games-section{margin-top:2rem}.games-section .section-header{margin-bottom:1rem}.games-section .section-title{font-family:var(--font-family-pixel);font-size:.875rem;color:var(--arcade-blue);letter-spacing:.1em;display:flex;align-items:center;gap:.5rem;margin:0}.games-section .section-title .material-symbols-outlined{font-size:.875rem}.carousel-nav{display:flex;gap:.5rem}.nav-button{font-family:var(--font-family-mono);font-size:.75rem;color:#fff6;background:#ffffff0d;padding:.25rem .5rem;border-radius:4px;border:none;cursor:pointer;transition:all .2s ease}.nav-button:hover{color:var(--text-primary);background:#ffffff1a}.games-carousel{display:flex;gap:1.5rem;overflow-x:auto;overflow-y:hidden;padding-bottom:1rem;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.game-card{flex:none;width:280px;background:var(--panel-light);border:1px solid rgba(255,255,255,.1);border-radius:4px;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);opacity:.7;scroll-snap-align:center}.game-card:hover{border-color:#ffffff4d;opacity:1}.game-card.selected{width:400px;border:2px solid var(--arcade-red);box-shadow:0 0 30px #ff2a2a26;opacity:1;position:relative;background:#ff2a2a05}.game-card.selected:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,rgba(255,42,42,.1),transparent);pointer-events:none}.selected-badge{position:absolute;top:.5rem;left:.5rem;background:var(--arcade-red);color:var(--gray-900);font-family:var(--font-family-pixel);font-size:.625rem;padding:.125rem .5rem;border-radius:2px;z-index:10}.game-image{height:128px;background:var(--gray-900);position:relative;overflow:hidden}.game-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .3s ease}.game-card.selected .game-image img{transform:scale(1.1)}.game-card:not(.selected) .game-image img.grayscale{filter:grayscale(50%);transition:filter .3s ease}.game-card:not(.selected):hover .game-image img.grayscale{filter:grayscale(0%)}.game-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gray-900)}.game-placeholder .material-symbols-outlined{font-size:3rem;color:#fff3}.game-info{padding:1.25rem;display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:1rem}.game-title{font-family:var(--font-family-pixel);font-size:.875rem;color:var(--text-primary);margin:0 0 .5rem;line-height:1.2}.game-card.selected .game-title{font-size:1.25rem;margin-bottom:.5rem}.game-description{font-family:var(--font-family-mono);font-size:.875rem;color:#fff9;margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.game-card.selected .game-description{font-size:.875rem;color:#fff9}.start-button{width:100%;background:var(--text-primary);color:var(--gray-900);font-family:var(--font-family-pixel);font-size:.625rem;padding:.75rem;border:none;border-radius:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease;margin-top:1rem}.start-button:hover{background:var(--arcade-red);color:var(--text-primary)}.start-button .material-symbols-outlined{font-size:.875rem}.select-hint{font-family:var(--font-family-pixel);font-size:.625rem;color:var(--arcade-orange);margin-top:.75rem;opacity:0;transition:opacity .3s ease}.game-card:hover .select-hint{opacity:1}.game-card.locked{width:200px;background:#ffffff0d;border:1px dashed rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;cursor:default}.game-card.locked .material-symbols-outlined{font-size:2rem;color:#fff3}.game-card.locked span:last-child{font-family:var(--font-family-pixel);font-size:.625rem;color:#fff3}@media (max-width: 768px){.game-card{width:240px}.game-card.selected{width:100%}.games-carousel{gap:1rem}}.game-preview{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;overflow:hidden;z-index:100}.game-preview-compact{position:relative;width:100%;height:auto;min-height:400px;max-height:600px;overflow:visible;z-index:1;background-color:var(--panel-dark);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px}.game-preview-compact .game-preview-content{height:auto;padding:0;max-width:100%;margin:0}.game-preview-compact .game-preview-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.game-preview-compact .game-preview-logo-title{font-size:18px}.game-preview-compact .game-preview-logo-subtitle{font-size:10px}.game-preview-compact .game-preview-main{display:flex;flex-direction:column;gap:20px}.game-preview-compact .game-preview-info{width:100%}.game-preview-compact .game-preview-title{font-size:24px;margin-bottom:12px}.game-preview-compact .game-preview-tagline{font-size:14px;margin-bottom:16px;line-height:1.4}.game-preview-compact .game-preview-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.game-preview-compact .game-preview-chip{font-size:11px;padding:6px 10px}.game-preview-compact .game-preview-description{font-size:12px;line-height:1.5;margin-bottom:16px}.game-preview-compact .game-preview-rules{margin-top:16px}.game-preview-compact .game-preview-rules-title{font-size:14px;margin-bottom:12px}.game-preview-compact .game-preview-rules-content{font-size:11px;line-height:1.6;white-space:pre-line}.game-preview-rules-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.game-preview-rule-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#ffffff0d;border-radius:8px;border-left:3px solid var(--arcade-blue)}.game-preview-rule-icon{font-size:20px;color:var(--arcade-blue);flex-shrink:0}.game-preview-rule-content{flex:1;display:flex;flex-direction:column;gap:4px}.game-preview-rule-title{color:var(--arcade-blue);font-weight:700}.game-preview-compact .game-preview-rules-list{gap:8px}.game-preview-compact .game-preview-rule-item{padding:8px;gap:8px}.game-preview-compact .game-preview-rule-icon{font-size:16px}.game-preview-compact .game-preview-rule-content{font-size:11px}.game-preview-background{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;opacity:.6;transition:transform 20s ease-linear,opacity .5s;transform:scale(1.05)}.game-preview:hover .game-preview-background{transform:scale(1.1)}.game-preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,var(--bg-dark),rgba(5,5,5,.95),rgba(5,5,5,.3))}.game-preview-grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.03;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSBiYXNlRnJlcXVlbmN5PSIwLjkiIiBudW1PY3RhdmVzPSI0IiBzZWVkPSI1Ii8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4xIi8+PC9zdmc+);pointer-events:none}.game-preview .scanlines{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;opacity:.15}.game-preview-content{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;padding:32px 48px;max-width:1920px;margin:0 auto}.game-preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;flex-shrink:0}.game-preview-logo{display:flex;align-items:center;gap:16px;cursor:default}.game-preview-logo-icon{width:48px;height:48px;background-color:#f49d2533;border:1px solid rgba(244,157,37,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .3s}.game-preview-logo:hover .game-preview-logo-icon{background-color:#f49d254d}.game-preview-logo-icon .material-symbols-outlined{font-size:32px;color:var(--arcade-orange)}.game-preview-logo-title{font-size:24px;font-family:"Press Start 2P",cursive;color:#fff;margin:0;letter-spacing:.05em;line-height:1.2}.game-preview-logo-subtitle{font-size:10px;font-family:VT323,monospace;color:#ffffff80;text-transform:uppercase;letter-spacing:.1em;margin-top:4px}.game-preview-status{display:flex;align-items:center;gap:12px}.game-preview-online-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background-color:#22c55e1a;border:1px solid rgba(34,197,94,.3);border-radius:20px;font-size:12px;font-family:VT323,monospace;color:#22c55e;text-transform:uppercase;letter-spacing:.1em}.game-preview-dot{width:8px;height:8px;background-color:#22c55e;border-radius:50%;animation:pulse-dot 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse-dot{0%,to{opacity:1;box-shadow:0 0 #22c55eb3}50%{opacity:.8;box-shadow:0 0 0 4px #22c55e00}}.game-preview-main{flex:1;display:grid;grid-template-columns:1fr 400px;gap:48px;overflow-y:auto}.game-preview-main-compact{grid-template-columns:1fr;gap:20px}.game-preview-info{display:flex;flex-direction:column;gap:24px}.game-preview-info-compact{gap:16px}.game-preview-badges{display:flex;gap:12px;flex-wrap:wrap}.game-preview-badge{padding:6px 12px;border-radius:4px;font-size:11px;font-family:VT323,monospace;text-transform:uppercase;letter-spacing:.1em;border:1px solid}.game-preview-badge-category{background-color:#2aebff1a;border-color:#2aebff4d;color:var(--arcade-blue)}.game-preview-badge-new{background-color:#ff2a2a1a;border-color:#ff2a2a4d;color:var(--arcade-red)}.game-preview-title{font-size:48px;font-family:"Press Start 2P",cursive;color:#fff;margin:0;letter-spacing:.05em;line-height:1.2;text-transform:uppercase}.game-preview-tagline{font-size:18px;font-family:VT323,monospace;color:#fffc;line-height:1.5;margin:0}.game-preview-chips{display:flex;gap:12px;flex-wrap:wrap}.game-preview-chip{display:flex;align-items:center;gap:8px;padding:8px 16px;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;font-size:12px;font-family:VT323,monospace;color:#ffffffb3}.game-preview-chip .material-symbols-outlined{font-size:16px}.game-preview-chip-highlight{background-color:#f49d251a;border-color:#f49d254d;color:var(--arcade-orange)}.game-preview-description{font-size:14px;font-family:VT323,monospace;color:#ffffffb3;line-height:1.6;margin:0}.game-preview-rules{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}.game-preview-rules-title{display:flex;align-items:center;gap:12px;font-size:18px;font-family:"Press Start 2P",cursive;color:#fff;margin:0 0 16px;letter-spacing:.05em}.game-preview-rules-dot{width:8px;height:8px;background-color:var(--arcade-orange);border-radius:50%;box-shadow:0 0 8px #f49d2599}.game-preview-rules-content{font-size:12px;font-family:VT323,monospace;color:#ffffffb3;line-height:1.8;white-space:pre-line}.game-preview-join{display:flex;flex-direction:column;gap:24px}.game-preview-qr-card{background-color:var(--panel-light);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;position:relative;overflow:hidden}.game-preview-qr-live-badge{position:absolute;top:12px;right:12px;padding:4px 8px;background-color:#ff2a2a33;border:1px solid rgba(255,42,42,.4);border-radius:4px;font-size:10px;font-family:"Press Start 2P",cursive;color:var(--arcade-red);letter-spacing:.1em;text-transform:uppercase}.game-preview-qr-container{width:200px;height:200px;background-color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;padding:8px}.game-preview-qr-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#0000004d}.game-preview-qr-placeholder .material-symbols-outlined{font-size:64px}.game-preview-qr-info{text-align:center}.game-preview-qr-title{font-size:18px;font-family:"Press Start 2P",cursive;color:#fff;margin:0 0 8px;letter-spacing:.05em}.game-preview-qr-subtitle{font-size:12px;font-family:VT323,monospace;color:#fff9;margin:0 0 16px}.game-preview-room-code{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.game-preview-room-code-label{font-size:10px;font-family:VT323,monospace;color:#ffffff80;text-transform:uppercase;letter-spacing:.1em;margin:0 0 8px}.game-preview-room-code-value{font-size:24px;font-family:"Press Start 2P",cursive;color:var(--arcade-blue);letter-spacing:.1em;margin:0;text-shadow:0 0 10px rgba(42,235,255,.7)}.game-preview-waiting{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:12px;font-family:VT323,monospace;color:#ffffffb3}.game-preview-waiting-dot{width:8px;height:8px;background-color:var(--arcade-orange);border-radius:50%;animation:pulse-dot 2s cubic-bezier(.4,0,.6,1) infinite}.game-preview-waiting .material-symbols-outlined{font-size:16px;animation:spin 2s linear infinite}.game-preview-footer{display:flex;align-items:center;justify-content:center;gap:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.game-preview-footer-hint{display:flex;align-items:center;gap:8px;font-size:11px;font-family:VT323,monospace;color:#ffffff80}.game-preview-hint-key{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;font-size:10px;font-family:"Press Start 2P",cursive;color:#fff}.game-preview-footer-hint .material-symbols-outlined{font-size:16px}.game-preview-section{width:100%;min-height:400px}@media (max-width: 1024px){.game-preview-main{grid-template-columns:1fr}.game-preview-content{padding:24px}}.session-display{width:100%;height:100dvh;display:flex;flex-direction:column;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}.arcade-main{flex:1;display:flex;overflow:hidden;position:relative;z-index:30}.arcade-content{flex:1;display:flex;flex-direction:column;padding:2rem;gap:2rem;overflow-y:auto;overflow-x:hidden;position:relative;z-index:30}.session-display.loading,.session-display.error{justify-content:center;align-items:center;font-size:1.2rem}.session-display.error{background:linear-gradient(135deg,#8b3a3a,#5a2a2a)}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top:4px solid #e63946;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.session-header{padding:2rem;background:#0000004d;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #e63946;gap:2rem}.header-right{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.host-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffd70026;border:1px solid #ffd700;border-radius:20px;font-size:.9rem;color:gold;font-weight:500}.session-header h1{margin:0;font-size:2.5rem;font-weight:700;letter-spacing:2px;flex:0 0 auto}.controller-count{font-size:1.1rem;opacity:.9;flex:0 0 auto}.session-content{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.qr-section{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.qr-container{width:300px;height:300px;background:#fff;border-radius:12px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 30px #00000080;padding:8px;flex-shrink:0}.qr-image{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.qr-placeholder{color:#888;text-align:center;font-size:.9rem}.qr-label{margin:0;font-size:1.1rem;text-align:center;opacity:.8}.controllers-section{display:flex;flex-direction:column;gap:1rem;min-width:0}.controllers-section h3{margin:0 0 .5rem;font-size:1.3rem}.controllers-list{display:flex;flex-direction:column;gap:.8rem;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0}.controller-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#e639461a;border-left:3px solid #e63946;border-radius:6px;transition:all .3s ease;flex-shrink:0}.controller-item:hover{background:#e6394633;transform:translate(4px)}.controller-item .indicator{display:inline-block;width:12px;height:12px;background:#4ade80;border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #4ade80b3}50%{opacity:.5;box-shadow:0 0 0 8px #4ade8000}}.controller-item .name{flex:1;font-weight:500;font-size:1.1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controller-item .device-type{font-size:1.3rem;opacity:.8;flex-shrink:0}.empty-state{text-align:center;padding:2rem;opacity:.6;font-style:italic;margin:0}.host-actions{display:flex;gap:1rem;margin-top:auto;padding:1rem 0 0;border-top:1px solid rgba(230,57,70,.3);flex-wrap:wrap}.host-btn{flex:1;min-width:120px;padding:.75rem 1rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;text-transform:uppercase;letter-spacing:.5px}.host-btn.primary{background:linear-gradient(135deg,#e63946,#d62828);color:#fff}.host-btn.primary:hover:not(:disabled){transform:scale(1.05);box-shadow:0 8px 20px #e6394666}.host-btn.primary:active:not(:disabled){transform:scale(.98)}.host-btn.secondary{background:#ffd70026;border:1px solid #ffd700;color:gold}.host-btn.secondary:hover:not(:disabled){background:#ffd70040;box-shadow:0 8px 20px #ffd7004d}.host-btn.secondary:active:not(:disabled){transform:scale(.98)}.host-btn:disabled{opacity:.5;cursor:not-allowed}.kick-button{padding:.4rem .6rem;background:#e63946cc;border:1px solid #e63946;color:#fff;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s ease;flex-shrink:0}.kick-button:hover:not(:disabled){background:#e63946;box-shadow:0 4px 12px #e6394680}.kick-button:active:not(:disabled){transform:scale(.95)}.kick-button:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 1024px){.arcade-main{flex-direction:column}.arcade-content{padding:1.5rem}}@media (max-width: 768px){.arcade-content{padding:1rem;gap:1.5rem}}@media (max-width: 1024px){.session-content{grid-template-columns:1fr}.session-header{flex-direction:column;gap:1rem;text-align:center}.session-header h1{font-size:2rem}}@media (max-height: 600px){.session-header{padding:1rem}.session-content{padding:1rem;gap:1rem}.qr-container{width:200px;height:200px}.session-header h1{font-size:1.8rem}.session-header{border-bottom:1px solid #e63946}}@media (max-width: 480px){.session-header{padding:.75rem}.session-header h1{font-size:1.5rem;letter-spacing:1px}.controller-count{font-size:.9rem}.session-content{padding:.75rem}.qr-container{width:150px;height:150px}.controllers-section h3{font-size:1rem}.controller-item{padding:.75rem}.controller-item .name{font-size:.9rem}.host-actions{flex-direction:column;padding:.75rem 0 0}.host-btn{min-width:100%;padding:.6rem .75rem;font-size:.85rem}}.grid-pattern{background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px),linear-gradient(to bottom,#1a1a1a 1px,transparent 1px);background-size:40px 40px;position:fixed;top:0;left:0;right:0;bottom:0;opacity:.2;pointer-events:none;z-index:1}.gradient-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,var(--bg-dark) 0%,transparent 50%,var(--bg-dark) 100%);pointer-events:none;z-index:2}.glow-text-red{text-shadow:var(--glow-red)}.glow-text-blue{text-shadow:var(--glow-blue)}.glow-text-orange{text-shadow:var(--glow-orange)}.pixelated{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.session-display.retro-arcade{background:var(--bg-dark);color:var(--text-primary);font-family:var(--font-family-mono);position:relative}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.game-loading,.game-error-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;font-size:10px;color:var(--text-primary);gap:20px}.game-error-container{color:var(--sn-red)}.game-error-container button{background-color:var(--sn-blue);color:var(--text-primary);border:3px solid var(--sn-white);padding:8px 16px;font-size:8px;font-family:"Press Start 2P",monospace;cursor:pointer;margin-top:12px}.game-main{display:flex;gap:20px;height:100%}.game-board{flex:1;display:flex;flex-direction:column;min-height:0}.game-sidebar{width:250px;display:flex;flex-direction:column;gap:16px}.end-game-button{background-color:var(--sn-red);color:var(--text-primary);border:3px solid var(--sn-white);padding:12px;font-size:8px;font-family:"Press Start 2P",monospace;cursor:pointer;box-shadow:0 0 0 2px var(--sn-black),0 4px #8b1428;transition:all .1s}.end-game-button:hover{background-color:#ff5572;transform:translateY(-2px);box-shadow:0 0 0 2px var(--sn-black),0 6px #8b1428}.end-game-button:active{transform:translateY(2px);box-shadow:0 0 0 2px var(--sn-black),0 2px #8b1428}@media (max-width: 767px){.game-main{flex-direction:column;gap:12px;height:auto}.game-sidebar{width:100%;order:-1;gap:8px}.game-board{min-height:300px}.game-container{padding:8px}.end-game-button{width:100%;padding:8px 12px;font-size:7px}}@media (min-width: 768px) and (max-width: 1023px){.game-sidebar{width:200px}.game-main{gap:16px}}.overlay-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal-backdrop);animation:overlayFadeIn var(--transition-base) var(--easing-default);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.overlay-content{background:var(--bg-secondary);border:var(--border-width-thick) solid var(--border-primary);box-shadow:var(--shadow-lg);padding:var(--space-6);max-height:90vh;overflow-y:auto;animation:overlaySlideUp var(--transition-base) var(--easing-default);z-index:var(--z-modal);image-rendering:pixelated;position:relative}.overlay-small{width:400px}.overlay-medium{width:600px}.overlay-large{width:800px}.overlay-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--space-4);border-bottom:var(--border-width-medium) solid var(--border-primary);margin:calc(var(--space-6) * -1);margin-bottom:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-4)}.overlay-title{font-size:var(--font-size-md);color:var(--text-accent);margin:0;text-shadow:2px 2px 0 var(--gray-900);flex:1}.overlay-close-btn{background:transparent;border:var(--border-width-thin) solid var(--border-primary);color:var(--text-primary);width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--font-size-md);transition:all var(--transition-fast) var(--easing-default);flex-shrink:0}.overlay-close-btn:hover{background:var(--color-danger);transform:scale(1.1)}.overlay-close-btn:active{transform:scale(.95)}.overlay-close-btn-standalone{position:absolute;top:var(--space-3);right:var(--space-3)}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes overlaySlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.overlay-footer{display:flex;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:var(--border-width-thin) solid var(--border-primary);justify-content:flex-end}.overlay-action-btn{padding:var(--space-2) var(--space-4);font-size:var(--font-size-xs);border:var(--border-width-thin) solid var(--border-primary);cursor:pointer;transition:all var(--transition-fast) var(--easing-default);font-family:var(--font-family-primary);text-transform:uppercase;letter-spacing:.5px}.overlay-action-btn-primary{background:var(--color-primary);color:var(--text-primary)}.overlay-action-btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.overlay-action-btn-primary:active{transform:translateY(0)}.overlay-action-btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-secondary)}.overlay-action-btn-secondary:hover{background:var(--bg-elevated);transform:translateY(-2px)}.overlay-action-btn-secondary:active{transform:translateY(0)}.overlay-action-btn-danger{background:var(--color-danger);color:var(--text-primary)}.overlay-action-btn-danger:hover{background:var(--red-600);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.overlay-action-btn-danger:active{transform:translateY(0)}.overlay-content::-webkit-scrollbar{width:12px}.overlay-content::-webkit-scrollbar-track{background:var(--bg-primary);border:var(--border-width-thin) solid var(--border-secondary)}.overlay-content::-webkit-scrollbar-thumb{background:var(--gray-500);border:var(--border-width-thin) solid var(--border-secondary)}.overlay-content::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}@media (max-width: 1023px){.overlay-small{width:90vw;max-width:400px}.overlay-medium{width:90vw;max-width:600px}.overlay-large{width:90vw;max-width:800px}}@media (max-width: 767px){.overlay-small,.overlay-medium,.overlay-large{width:90vw;max-width:100%;max-height:95vh;margin:var(--space-4)}.overlay-header{margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-3);padding:var(--space-4) var(--space-6)}.overlay-title{font-size:var(--font-size-sm)}.overlay-footer{flex-direction:column}.overlay-action-btn{width:100%;justify-content:center}}.overlay-content-wrapper{display:flex;flex-direction:column;gap:var(--space-6)}.overlay-body-content{flex:1;min-height:0}.settings-modal{display:flex;flex-direction:column;gap:var(--space-6)}.settings-section{display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:var(--border-width-thin) solid var(--border-secondary)}.settings-section:last-child{border-bottom:none;padding-bottom:0}.settings-section-title{font-size:var(--font-size-sm);color:var(--text-accent);margin:0;text-shadow:1px 1px 0 var(--gray-900)}.settings-content{display:flex;flex-direction:column;gap:var(--space-2)}.settings-user-info{font-size:var(--font-size-xs);display:flex;gap:var(--space-3);margin:0;color:var(--text-primary)}.settings-label{color:var(--text-secondary);min-width:60px}.settings-value{color:var(--text-primary);word-break:break-all}.settings-checkbox-label{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-xs);cursor:pointer;color:var(--text-primary);-webkit-user-select:none;user-select:none}.settings-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--color-primary);flex-shrink:0}.settings-helper-text{font-size:var(--font-size-xs);color:var(--text-tertiary);margin:0;margin-left:calc(16px + var(--space-3));font-style:italic}@media (max-width: 767px){.settings-section{gap:var(--space-2)}.settings-section-title{font-size:var(--font-size-xs)}}.game-selector-modal{display:flex;flex-direction:column;gap:var(--space-4)}.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}.game-card{background:var(--bg-tertiary);border:var(--border-width-medium) solid var(--border-primary);padding:var(--space-4);text-align:center;cursor:pointer;transition:all var(--transition-fast) var(--easing-default);display:flex;flex-direction:column;gap:var(--space-3);image-rendering:pixelated}.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--blue-600)}.game-card:active{transform:translateY(-2px)}.game-icon{font-size:48px;display:flex;align-items:center;justify-content:center;height:60px}.game-name{font-size:var(--font-size-sm);color:var(--text-accent);margin:0;text-shadow:1px 1px 0 var(--gray-900)}.game-description{font-size:var(--font-size-xs);color:var(--text-secondary);margin:0;flex:1}.game-select-btn{background:var(--color-success);color:var(--text-primary);border:var(--border-width-thin) solid var(--border-primary);padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);font-family:var(--font-family-primary);cursor:pointer;transition:all var(--transition-fast) var(--easing-default);text-transform:uppercase;letter-spacing:.5px}.game-select-btn:hover{background:var(--green-600);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.game-select-btn:active{transform:translateY(0)}@media (max-width: 767px){.game-grid{grid-template-columns:1fr;gap:var(--space-3)}.game-card{padding:var(--space-3);gap:var(--space-2)}.game-icon{font-size:36px;height:50px}.game-name{font-size:var(--font-size-xs)}.game-description{font-size:7px}}.share-modal{display:flex;flex-direction:column;gap:var(--space-5)}.share-section{display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:var(--border-width-thin) solid var(--border-secondary)}.share-section:last-child{border-bottom:none;padding-bottom:0}.share-section-title{font-size:var(--font-size-sm);color:var(--text-accent);margin:0;text-shadow:1px 1px 0 var(--gray-900)}.share-content{display:flex;flex-direction:column;gap:var(--space-2)}.code-display{display:flex;gap:var(--space-2);background:var(--bg-primary);padding:var(--space-3);border:var(--border-width-thin) solid var(--border-secondary);align-items:stretch}.room-code{flex:1;font-family:monospace;color:var(--text-accent);font-size:var(--font-size-sm);margin:0;overflow:hidden;text-overflow:ellipsis;word-break:break-all;display:flex;align-items:center}.copy-btn{font-size:var(--font-size-md);flex-shrink:0;min-width:40px}.copy-btn-large{letter-spacing:.5px}.link-display{display:flex;gap:var(--space-2);background:var(--bg-primary);padding:0;border:var(--border-width-thin) solid var(--border-secondary);align-items:stretch}.room-link-input{flex:1;font-family:monospace}.room-topic-text{background:var(--bg-primary);border:var(--border-width-thin) solid var(--border-secondary);padding:var(--space-3);font-size:var(--font-size-xs);color:var(--text-primary);margin:0;border-radius:0}.players-count{background:var(--bg-primary);border:var(--border-width-thin) solid var(--border-secondary);padding:var(--space-3);font-size:var(--font-size-sm);color:var(--color-success);margin:0;display:flex;align-items:center;gap:var(--space-2);font-weight:700}.players-icon{font-size:var(--font-size-lg)}.players-number{font-size:var(--font-size-md)}.share-helper-text{font-size:var(--font-size-xs);color:var(--text-tertiary);margin:0;font-style:italic}@media (max-width: 767px){.share-modal{gap:var(--space-4)}.share-section{gap:var(--space-2);padding-bottom:var(--space-3)}.code-display,.link-display{flex-direction:column}.copy-btn,.copy-btn-large{width:100%}.room-link-input{padding:var(--space-2);font-size:7px}.share-section-title{font-size:var(--font-size-xs)}}.controller-layout{min-height:100vh;display:flex;flex-direction:column;background:transparent;color:#fff;padding:0;font-family:inherit;width:100%;height:100%}.controller-header{text-align:center;padding:1rem 0;border-bottom:2px solid rgba(255,255,255,.2)}.controller-header h1{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:.5px}.controller-content{flex:1;display:flex;align-items:stretch;justify-content:stretch;padding:0;min-height:0;width:100%;height:100%}.controller-footer{text-align:center;padding:1rem 0;border-top:2px solid rgba(255,255,255,.2)}.controller-hint{margin:0;font-size:.9rem;opacity:.8}.player-setup-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background-color:var(--bg-dark);color:#fff;font-family:VT323,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;z-index:1000}.player-setup-grid-pattern{position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px),linear-gradient(to bottom,#1a1a1a 1px,transparent 1px);background-size:40px 40px;opacity:.2;pointer-events:none;z-index:0}.player-setup-gradient{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,var(--bg-dark),transparent,var(--bg-dark));pointer-events:none;z-index:0}.player-setup-container{width:100%;max-width:400px;height:100%;max-height:800px;background-color:var(--panel-dark);position:relative;border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 40px #000c;z-index:10}@media (max-width: 640px){.player-setup-container{height:100vh;max-height:none;border:none;border-radius:0}}.player-setup-header{width:100%;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;background:#0006;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;z-index:20}.player-setup-connection{display:flex;align-items:center;gap:8px}.player-setup-wifi-icon{font-size:18px;color:#facc15;animation:blink 1s step-end infinite}.player-setup-connection-text{font-size:14px;color:#fff9;text-transform:uppercase;letter-spacing:.1em}.player-setup-session{text-align:right}.player-setup-session-label{font-size:10px;color:#ffffff4d;font-family:VT323,monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}.player-setup-session-id{font-size:20px;font-family:"Press Start 2P",cursive;color:var(--arcade-blue);letter-spacing:.05em;line-height:1;text-shadow:0 0 10px rgba(42,235,255,.7)}.player-setup-main{flex:1;overflow-y:auto;padding:20px 20px 96px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.player-setup-main::-webkit-scrollbar{display:none}.player-setup-main{-ms-overflow-style:none;scrollbar-width:none}.player-setup-title-section{text-align:center;margin-bottom:32px;margin-top:16px}.player-setup-subtitle{font-size:10px;font-family:"Press Start 2P",cursive;color:var(--arcade-blue);letter-spacing:.2em;text-transform:uppercase;margin:0 0 8px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.player-setup-title{font-size:24px;font-family:"Press Start 2P",cursive;color:#fff;text-transform:uppercase;line-height:1.2;margin:0;letter-spacing:.05em}.player-setup-form{width:100%;display:flex;flex-direction:column;gap:24px}.player-setup-form-group{display:flex;flex-direction:column;gap:12px}.player-setup-label{font-size:12px;font-family:VT323,monospace;color:#fff9;text-transform:uppercase;letter-spacing:.1em;text-align:center}.player-setup-input-wrapper{position:relative}.player-setup-input{width:100%;background-color:#000;border:2px solid rgba(255,255,255,.2);color:#fff;font-family:"Press Start 2P",cursive;font-size:16px;padding:12px 16px;text-align:center;text-transform:uppercase;letter-spacing:.1em;transition:border-color .3s;outline:none;border-radius:4px}.player-setup-input:focus{border-color:var(--arcade-red)}.player-setup-input::placeholder{color:#ffffff1a}.player-setup-input-cursor{position:absolute;bottom:12px;right:16px;width:8px;height:20px;background-color:var(--arcade-red);animation:blink 1s step-end infinite}.player-setup-error{color:var(--arcade-red);font-family:VT323,monospace;font-size:12px;text-align:center;margin-top:-8px}.player-setup-avatars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:8px}.player-setup-avatar-btn{aspect-ratio:1;position:relative;background-color:#000;border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#fff6;border-radius:4px;padding:0}.player-setup-avatar-btn:hover{border-color:#fff;background-color:#ffffff0d;color:#fff;transform:scale(1.05)}.player-setup-avatar-btn:active{transform:scale(.95)}.player-setup-avatar-btn.selected{background-color:#ff2a2a33;border-color:var(--arcade-red);color:#fff;box-shadow:0 0 15px #ff2a2a4d;transform:scale(1.05)}.player-setup-avatar-btn .material-symbols-outlined{font-size:32px}.player-setup-avatar-check{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background-color:var(--arcade-red);border:2px solid white;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000080;border-radius:50%}.player-setup-avatar-check .material-symbols-outlined{font-size:12px;color:#fff;font-weight:700}.player-setup-submit-btn{width:100%;background-color:var(--arcade-red);color:#fff;font-family:"Press Start 2P",cursive;font-size:12px;padding:16px;border-radius:8px;position:relative;overflow:hidden;border:none;cursor:pointer;transition:all .2s;box-shadow:0 0 20px #ff2a2a66;margin-top:8px}.player-setup-submit-btn:hover:not(:disabled){background-color:#f41;box-shadow:0 0 25px #ff2a2a99;transform:translateY(-2px)}.player-setup-submit-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.player-setup-submit-btn:disabled{opacity:.5;cursor:not-allowed}.player-setup-btn-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,transparent 25%,rgba(0,0,0,.1) 25%,rgba(0,0,0,.1) 50%,transparent 50%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1));background-size:20px 20px;opacity:.2}.player-setup-btn-content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px}.player-setup-btn-content .material-symbols-outlined{font-size:16px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.player-setup-info{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-family:VT323,monospace;font-size:12px;color:#ffffff4d;width:100%}.player-setup-free-play{color:var(--arcade-blue);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.player-setup-waiting{text-align:center;color:#fff6;font-family:VT323,monospace;margin-top:16px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.player-setup-footer{position:absolute;bottom:0;width:100%;background-color:#111111f2;border-top:1px solid rgba(255,255,255,.1);padding:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20}.player-setup-footer-content{display:flex;justify-content:center;align-items:center}.player-setup-footer-text{font-size:10px;font-family:"Press Start 2P",cursive;color:#2aebff99;letter-spacing:.1em;text-transform:uppercase;margin:0;text-align:center}button:focus-visible,input:focus-visible{outline:2px solid var(--arcade-blue);outline-offset:2px}.controller-join-container{width:100%;min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;position:relative;background:var(--bg-dark);color:var(--text-primary);font-family:var(--font-family-mono);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain}.join-grid-pattern{position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:1}.join-scanlines{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#fff0,#fff0 50%,#0003 50%,#0003);background-size:100% 4px;pointer-events:none;z-index:50}.join-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:4px solid rgba(255,255,255,.1);background:#0a0a0ce6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.header-left{display:flex;align-items:center;gap:.75rem}.header-icon{width:32px;height:32px;background:var(--arcade-red);border:1px solid var(--text-primary);display:flex;align-items:center;justify-content:center}.header-icon .material-symbols-outlined{color:var(--text-primary);font-size:1.125rem}.header-title{font-family:var(--font-family-pixel);font-size:.75rem;line-height:1.2;color:var(--text-primary);margin:0;letter-spacing:.1em;text-transform:uppercase;text-shadow:2px 2px 0px rgba(0,0,0,1)}.header-status{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:var(--panel-dark);border:1px solid rgba(42,235,255,.3)}.status-dot{width:8px;height:8px;background:var(--arcade-blue);border-radius:50%;animation:pulse 2s ease-in-out infinite;box-shadow:0 0 8px #2aebffcc}.status-text{font-family:var(--font-family-mono);font-size:1.125rem;color:var(--arcade-blue);text-transform:uppercase;letter-spacing:.1em;line-height:1}.join-main{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));width:100%;min-height:calc(100dvh - 80px);animation:flicker .15s infinite}@keyframes flicker{0%{opacity:.97}5%{opacity:.95}10%{opacity:.9}15%{opacity:.95}20%{opacity:.99}50%{opacity:.95}80%{opacity:.9}90%{opacity:.96}to{opacity:.99}}.join-card{width:100%;max-width:28rem;position:relative;background:var(--panel-dark);border:4px solid rgba(255,255,255,.2);padding:1.5rem 2rem;box-shadow:0 20px 60px #00000080;overflow:hidden}.join-card.error{border-color:var(--arcade-red)}.join-card.success{border-color:var(--arcade-blue)}.card-corners{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.corner{position:absolute;width:32px;height:32px;border-width:4px;border-style:solid}.corner-tl{top:0;left:0;border-top-color:var(--arcade-red);border-left-color:var(--arcade-red);border-right:none;border-bottom:none}.corner-tr{top:0;right:0;border-top-color:var(--arcade-red);border-right-color:var(--arcade-red);border-left:none;border-bottom:none}.corner-bl{bottom:0;left:0;border-bottom-color:var(--arcade-blue);border-left-color:var(--arcade-blue);border-right:none;border-top:none}.corner-br{bottom:0;right:0;border-bottom-color:var(--arcade-blue);border-right-color:var(--arcade-blue);border-left:none;border-top:none}.join-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.join-title{text-align:center;width:100%}.title-subtitle{font-family:var(--font-family-pixel);font-size:.625rem;color:var(--arcade-blue);letter-spacing:.3em;text-transform:uppercase;margin:0 0 .5rem;animation:pulse 2s ease-in-out infinite}.title-main{font-family:var(--font-family-pixel);font-size:1.875rem;color:var(--text-primary);text-transform:uppercase;line-height:1.2;margin:0;text-shadow:2px 2px 0px rgba(0,0,0,1)}.join-options{display:flex;flex-direction:column;gap:1rem;width:100%}.btn-retro-primary,.btn-retro-secondary{position:relative;width:100%;border:none;background:none;cursor:pointer;padding:0;transition:transform .1s ease}.btn-retro-primary:active,.btn-retro-secondary:active{transform:scale(.98)}.btn-retro-primary:disabled,.btn-retro-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-retro-primary .button-shadow{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--arcade-red);transform:translateY(8px) translate(0);transition:transform .3s ease}.btn-retro-primary:hover:not(:disabled) .button-shadow{transform:translateY(12px) translate(0)}.btn-retro-primary .button-content{position:relative;background:var(--arcade-red);border:2px solid var(--text-primary);padding:1rem;display:flex;align-items:center;justify-content:center;gap:.75rem;box-shadow:0 0 20px #f306;transition:background-color .3s ease}.btn-retro-primary:hover:not(:disabled) .button-content{background:#f41}.btn-retro-secondary .button-shadow{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--panel-light);transform:translateY(8px) translate(0);transition:transform .3s ease}.btn-retro-secondary:hover:not(:disabled) .button-shadow{transform:translateY(12px) translate(0)}.btn-retro-secondary .button-content{position:relative;background:var(--panel-light);border:2px solid rgba(255,255,255,.3);padding:1rem;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:border-color .3s ease}.btn-retro-secondary:hover:not(:disabled) .button-content{border-color:var(--text-primary)}.button-content .material-symbols-outlined{color:var(--text-primary);font-size:1.25rem}.button-content span:last-child{font-family:var(--font-family-pixel);color:var(--text-primary);font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.5)}.divider-retro{text-align:center;position:relative;margin:.5rem 0}.divider-retro:before,.divider-retro:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:#fff3}.divider-retro:before{left:0}.divider-retro:after{right:0}.divider-retro span{font-family:var(--font-family-mono);color:#fff6;font-size:.875rem;text-transform:uppercase;letter-spacing:.2em;padding:0 1rem;background:var(--panel-dark);position:relative;z-index:1}.join-hint{font-family:var(--font-family-mono);font-size:.875rem;color:#fff6;text-align:center;text-transform:uppercase;letter-spacing:.1em;margin:0}.loading-spinner-retro{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top:4px solid var(--arcade-red);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}.status-text-large{font-family:var(--font-family-pixel);font-size:.875rem;color:var(--text-primary);text-transform:uppercase;letter-spacing:.1em;margin:1rem 0 0;text-align:center}.error-title{font-family:var(--font-family-pixel);font-size:1.5rem;color:var(--arcade-red);text-transform:uppercase;margin:0 0 1rem;text-align:center}.error-message{font-family:var(--font-family-mono);font-size:1rem;color:var(--text-primary);text-align:center;margin:0 0 1.5rem}.success-title{font-family:var(--font-family-pixel);font-size:1.5rem;color:var(--arcade-blue);text-transform:uppercase;margin:0 0 1rem;text-align:center}.join-footer-marquee{position:relative;z-index:20;padding:.75rem 1.5rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom));text-align:center;background:var(--bg-dark);border-top:1px solid rgba(255,255,255,.1);overflow:hidden;white-space:nowrap;flex-shrink:0}.marquee-text{font-family:var(--font-family-mono);font-size:1rem;color:#2aebff99;text-transform:uppercase;letter-spacing:.1em;display:inline-block;animation:marquee 10s linear infinite}@keyframes marquee{0%{transform:translate(100%)}to{transform:translate(-100%)}}@media (min-width: 768px){.join-card{max-width:32rem;padding:2rem 2.5rem}.title-main{font-size:2.25rem}}@media (max-width: 480px){.join-card{padding:1.25rem 1.5rem}.title-main{font-size:1.5rem}.button-content span:last-child{font-size:.75rem}}.base-controller{display:flex;flex-direction:column;height:100dvh;min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;font-family:"Press Start 2P",monospace;overflow:hidden;padding:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left));position:fixed;top:0;left:0;right:0;bottom:0;width:100%}.base-controller.connecting,.base-controller.error{justify-content:center;align-items:center;text-align:center;gap:1rem}.base-controller.connecting .spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.base-controller.error h2{color:#e63946;margin:0 0 1rem}.base-controller.error p{color:#ccc;margin:0 0 1rem;font-size:.7rem}.base-controller.error button{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:4px;font-size:.7rem;font-weight:700;font-family:"Press Start 2P",monospace;cursor:pointer;transition:all .2s}.base-controller.error button:active{transform:scale(.95);background:#764ba2}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.controller-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#00000080;border-bottom:2px solid #667eea;font-size:.7rem}.user-info{display:flex;align-items:center;gap:.5rem}.user-name{font-weight:700;color:#667eea}.room-id{color:#ccc;font-size:.6rem}.context-indicator{padding:.25rem .5rem;background:#667eea;border-radius:4px;font-size:.6rem;text-transform:uppercase}.controller-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1rem;min-height:0}.controller-footer{padding:.5rem 1rem;background:#00000080;border-top:2px solid #667eea;text-align:center;font-size:.6rem}.connection-status{color:#06d6a0;display:flex;align-items:center;justify-content:center;gap:.5rem}.connection-status:before{content:"";display:inline-block;width:6px;height:6px;background:#06d6a0;border-radius:50%;animation:pulse 1.5s infinite}.lobby-guest-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background-color:var(--bg-dark);color:#fff;font-family:VT323,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;z-index:1}.lobby-guest-grid-pattern{position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px),linear-gradient(to bottom,#1a1a1a 1px,transparent 1px);background-size:40px 40px;opacity:.2;pointer-events:none;z-index:0}.lobby-guest-gradient{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,var(--bg-dark),transparent,var(--bg-dark));pointer-events:none;z-index:0}.lobby-guest-container{width:100%;max-width:400px;height:100%;max-height:800px;background-color:var(--panel-dark);position:relative;border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 40px #000c;z-index:10}@media (max-width: 640px){.lobby-guest-container{height:100vh;max-height:none;border:none;border-radius:0}}.lobby-guest-header{width:100%;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;background:#0006;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;z-index:20}.lobby-guest-connection{display:flex;align-items:center;gap:8px}.lobby-guest-wifi-icon{font-size:18px;color:#facc15;animation:blink 1s step-end infinite}.lobby-guest-connection-text{font-size:14px;color:#fff9;text-transform:uppercase;letter-spacing:.1em}.lobby-guest-session{text-align:right}.lobby-guest-session-label{font-size:10px;color:#ffffff4d;font-family:VT323,monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}.lobby-guest-session-id{font-size:20px;font-family:"Press Start 2P",cursive;color:var(--arcade-blue);letter-spacing:.05em;line-height:1;text-shadow:0 0 10px rgba(42,235,255,.7)}.lobby-guest-main{flex:1;overflow-y:auto;padding:20px 20px 96px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.lobby-guest-main::-webkit-scrollbar{display:none}.lobby-guest-main{-ms-overflow-style:none;scrollbar-width:none}.lobby-guest-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:32px;margin-top:8px}.lobby-guest-avatar-wrapper{position:relative;margin-bottom:12px}.lobby-guest-avatar-glow{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--arcade-blue);border-radius:50%;filter:blur(20px);opacity:.2;transition:opacity .5s}.lobby-guest-player-badge{position:absolute;top:-20px;left:50%;transform:translate(-50%);background-color:#000;border:2px solid var(--arcade-blue);color:var(--arcade-blue);font-family:"Press Start 2P",cursive;font-size:8px;padding:4px 12px;border-radius:4px;box-shadow:0 4px 8px #00000080;white-space:nowrap;z-index:20}.lobby-guest-avatar{width:80px;height:80px;border-radius:50%;background-color:#000;border:2px solid var(--arcade-blue);padding:4px;position:relative;z-index:10;overflow:hidden}.lobby-guest-avatar-img{width:100%;height:100%;background-size:cover;background-position:center;border-radius:50%}.lobby-guest-avatar-placeholder{width:100%;height:100%;background-color:#ffffff0d;display:flex;align-items:center;justify-content:center}.lobby-guest-avatar-placeholder .material-symbols-outlined{font-size:24px;color:#ffffff80}.lobby-guest-name{font-size:18px;font-family:"Press Start 2P",cursive;color:#fff;text-align:center;margin:0;text-transform:uppercase}.lobby-guest-status{font-size:12px;color:#fff6;font-family:VT323,monospace;margin-top:4px;letter-spacing:.1em}.lobby-guest-waiting-card{width:100%;background-color:var(--panel-light);border:1px solid rgba(255,255,255,.1);padding:24px;border-radius:8px;text-align:center;position:relative;overflow:hidden}.lobby-guest-waiting-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,var(--arcade-blue),transparent);opacity:.5}.lobby-guest-waiting-header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}.lobby-guest-waiting-header .material-symbols-outlined{font-size:32px;color:var(--arcade-blue);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.lobby-guest-waiting-title{font-size:14px;font-family:"Press Start 2P",cursive;color:var(--arcade-blue);letter-spacing:.1em;margin:0;text-transform:uppercase;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.lobby-guest-waiting-message{font-size:12px;font-family:VT323,monospace;color:#ffffff80;letter-spacing:.05em;text-transform:uppercase;margin:8px 0}.lobby-guest-host-name{font-size:10px;font-family:"Press Start 2P",cursive;color:var(--arcade-orange);letter-spacing:.05em;margin-top:12px;opacity:.8}.lobby-guest-footer{position:absolute;bottom:0;width:100%;background-color:#111111f2;border-top:1px solid rgba(255,255,255,.1);padding:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20}.lobby-guest-footer-content{display:flex;justify-content:center;align-items:center}.lobby-guest-exit-btn{display:flex;align-items:center;gap:8px;background:none;border:none;color:#ff2a2a99;font-family:"Press Start 2P",cursive;font-size:10px;cursor:pointer;transition:color .2s;padding:8px 16px;border-radius:4px}.lobby-guest-exit-btn:hover{color:var(--arcade-red);background-color:#ff2a2a1a}.lobby-guest-exit-btn .material-symbols-outlined{font-size:16px;transition:transform .2s}.lobby-guest-exit-btn:hover .material-symbols-outlined{transform:translate(-4px)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.animate-blink,.animate-pulse{animation:none;opacity:1}}.glow-text{text-shadow:0 0 10px rgba(255,42,42,.7)}.glow-text-blue{text-shadow:0 0 10px rgba(42,235,255,.7)}.hide-scroll::-webkit-scrollbar{display:none}.hide-scroll{-ms-overflow-style:none;scrollbar-width:none}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.animate-blink{animation:blink 1s step-end infinite}:root{--arcade-red: #ff2a2a;--arcade-orange: #ffae00;--arcade-blue: #2aebff;--bg-dark: #050505;--panel-dark: #111111;--panel-light: #1a1a1a}.bg-grid-pattern{background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px),linear-gradient(to bottom,#1a1a1a 1px,transparent 1px)}.bg-bg-dark{background-color:var(--bg-dark)}.scanlines{background:linear-gradient(#12101000 50%,#0000001a 50%),linear-gradient(90deg,#ff000008,#00ff0003,#0000ff08);background-size:100% 3px,3px 100%;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:50}.lobby-host-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background-color:var(--bg-dark);color:#fff;font-family:VT323,monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;z-index:1}.lobby-host-grid-pattern{position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right,#1a1a1a 1px,transparent 1px),linear-gradient(to bottom,#1a1a1a 1px,transparent 1px);background-size:40px 40px;opacity:.2;pointer-events:none;z-index:0}.lobby-host-gradient{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,var(--bg-dark),transparent,var(--bg-dark));pointer-events:none;z-index:0}.lobby-host-container{width:100%;max-width:400px;height:100%;max-height:800px;background-color:var(--panel-dark);position:relative;border:1px solid rgba(255,255,255,.1);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 40px #000c;z-index:10}@media (max-width: 640px){.lobby-host-container{height:100vh;max-height:none;border:none;border-radius:0}}.lobby-host-header{width:100%;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;background:#0006;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;z-index:20}.lobby-host-mode{display:flex;align-items:center;gap:8px}.lobby-host-indicator{width:8px;height:8px;background-color:var(--arcade-red);border-radius:50%;box-shadow:0 0 5px #ff2a2a;animation:blink 1s step-end infinite}.lobby-host-mode-text{font-size:10px;font-family:"Press Start 2P",cursive;color:#ffffff80;letter-spacing:.1em}.lobby-host-session{text-align:right}.lobby-host-session-label{font-size:10px;color:#ffffff4d;font-family:VT323,monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}.lobby-host-session-id{font-size:20px;font-family:"Press Start 2P",cursive;color:var(--arcade-blue);letter-spacing:.05em;line-height:1;text-shadow:0 0 10px rgba(42,235,255,.7)}.lobby-host-main{flex:1;overflow-y:auto;padding:20px 20px 96px;position:relative}.lobby-host-main::-webkit-scrollbar{display:none}.lobby-host-main{-ms-overflow-style:none;scrollbar-width:none}.lobby-host-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:32px;margin-top:8px}.lobby-host-avatar-wrapper{position:relative;margin-bottom:12px;cursor:pointer}.lobby-host-avatar-glow{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--arcade-red);border-radius:50%;filter:blur(20px);opacity:.2;transition:opacity .5s}.lobby-host-avatar-wrapper:hover .lobby-host-avatar-glow{opacity:.4}.lobby-host-avatar{width:80px;height:80px;border-radius:50%;background-color:#000;border:2px solid var(--arcade-red);padding:4px;position:relative;z-index:10;overflow:hidden}.lobby-host-avatar-img{width:100%;height:100%;background-size:cover;background-position:center;border-radius:50%}.lobby-host-avatar-placeholder{width:100%;height:100%;background-color:#ffffff0d;display:flex;align-items:center;justify-content:center}.lobby-host-avatar-placeholder .material-symbols-outlined{font-size:24px;color:#ffffff80}.lobby-host-you-badge{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);background-color:var(--arcade-red);color:#000;font-family:"Press Start 2P",cursive;font-size:8px;padding:2px 8px;border-radius:4px;box-shadow:0 4px 8px #0000004d;white-space:nowrap;z-index:20}.lobby-host-name{font-size:18px;font-family:"Press Start 2P",cursive;color:#fff;text-align:center;margin:0}.lobby-host-role{font-size:12px;color:#fff6;font-family:VT323,monospace;margin-top:4px;letter-spacing:.1em}.lobby-host-initiate-btn{width:100%;background-color:#fff;color:#000;font-family:"Press Start 2P",cursive;font-size:12px;padding:16px;border-radius:8px;margin-bottom:32px;position:relative;overflow:hidden;border:none;cursor:pointer;transition:all .2s;box-shadow:0 0 15px #ffffff1a}.lobby-host-initiate-btn:hover{background-color:var(--arcade-red);color:#fff;box-shadow:0 0 20px #ff2a2a66}.lobby-host-initiate-btn:active{transform:scale(.95)}.lobby-host-initiate-btn:disabled{opacity:.5;cursor:not-allowed}.lobby-host-btn-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,transparent 25%,rgba(0,0,0,.1) 25%,rgba(0,0,0,.1) 50%,transparent 50%,transparent 75%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.1));background-size:20px 20px;opacity:.2}.lobby-host-btn-content{position:relative;display:flex;align-items:center;justify-content:center;gap:12px}.lobby-host-btn-content .material-symbols-outlined{font-size:16px;transition:transform .2s}.lobby-host-initiate-btn:hover .lobby-host-btn-content .material-symbols-outlined{transform:translate(4px)}.lobby-host-squad{display:flex;flex-direction:column;gap:16px}.lobby-host-squad-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:8px}.lobby-host-squad-title{font-size:12px;font-family:"Press Start 2P",cursive;color:var(--arcade-orange);letter-spacing:.05em;display:flex;align-items:center;gap:8px;margin:0}.lobby-host-squad-title .material-symbols-outlined{font-size:14px}.lobby-host-ready-badge{font-size:10px;font-family:VT323,monospace;color:#fff6;background-color:#ffffff0d;padding:2px 8px;border-radius:4px}.lobby-host-players{display:flex;flex-direction:column;gap:8px}.lobby-host-player-card{background-color:var(--panel-light);border:1px solid rgba(255,255,255,.1);padding:12px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;transition:border-color .2s}.lobby-host-player-card:hover{border-color:#ffffff4d}.lobby-host-player-info{display:flex;align-items:center;gap:12px}.lobby-host-player-avatar{width:40px;height:40px;border-radius:50%;background-color:#000;border:1px solid rgba(255,255,255,.1);overflow:hidden}.lobby-host-player-avatar-img{width:100%;height:100%;background-size:cover;background-position:center;opacity:.8;transition:opacity .2s}.lobby-host-player-card:hover .lobby-host-player-avatar-img{opacity:1}.lobby-host-player-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.lobby-host-player-avatar-placeholder .material-symbols-outlined{font-size:14px;color:#ffffff80}.lobby-host-player-name{font-family:"Press Start 2P",cursive;font-size:10px;color:#fff}.lobby-host-player-status{font-family:VT323,monospace;font-size:10px;color:#22c55e;display:flex;align-items:center;gap:4px;margin-top:2px}.lobby-host-status-dot{width:4px;height:4px;background-color:#22c55e;border-radius:50%}.lobby-host-player-actions{display:flex;align-items:center;gap:8px}.lobby-host-action-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.05);color:#fff6;cursor:pointer;transition:all .2s;border:none}.lobby-host-action-btn:active{transform:scale(.9)}.lobby-host-transfer-btn:hover{color:var(--arcade-orange);border-color:#ffae0080;background-color:#ffae001a}.lobby-host-kick-btn:hover{color:var(--arcade-red);border-color:#ff2a2a80;background-color:#ff2a2a1a}.lobby-host-action-btn .material-symbols-outlined{font-size:18px}.lobby-host-waiting{border:1px dashed rgba(255,255,255,.1);padding:12px;border-radius:8px;display:flex;align-items:center;gap:12px;opacity:.3}.lobby-host-waiting-icon{width:40px;height:40px;border-radius:50%;background-color:#ffffff0d;display:flex;align-items:center;justify-content:center}.lobby-host-waiting-icon .material-symbols-outlined{font-size:14px}.lobby-host-waiting-text{font-family:"Press Start 2P",cursive;font-size:8px;color:#ffffff80;letter-spacing:.05em}.lobby-host-footer{position:absolute;bottom:0;width:100%;background-color:#111111f2;border-top:1px solid rgba(255,255,255,.1);padding:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20}.lobby-host-footer-content{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-family:"Press Start 2P",cursive;color:#ffffff4d}.lobby-host-footer-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ffffff4d;font-family:"Press Start 2P",cursive;font-size:10px;cursor:pointer;transition:color .2s}.lobby-host-footer-btn:hover{color:#fff}.lobby-host-exit-btn:hover{color:var(--arcade-red)}.lobby-host-footer-btn .material-symbols-outlined{font-size:12px}.bg-panel-dark{background-color:var(--panel-dark)}.bg-panel-light{background-color:var(--panel-light)}@media (max-width: 480px){.lobby-host-main{padding:16px}}button:focus-visible{outline:2px solid var(--arcade-blue);outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.animate-blink{animation:none;opacity:1}}.game-selector{width:100%;padding:20px;display:flex;flex-direction:column;gap:24px}.game-selector-empty{padding:40px 20px;text-align:center;color:#ffffff80;font-family:VT323,monospace;font-size:14px}.game-selector-header{margin-bottom:8px}.game-selector-title{font-size:24px;font-family:"Press Start 2P",cursive;color:#fff;margin:0 0 4px;letter-spacing:.05em}.game-selector-subtitle{font-size:12px;font-family:VT323,monospace;color:#ffffff80;margin:0}.game-selector-carousel-wrapper{position:relative;display:flex;align-items:center;gap:8px}.game-selector-carousel{flex:1;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:8px 0;-webkit-overflow-scrolling:touch}.game-selector-carousel::-webkit-scrollbar{display:none}.game-selector-carousel{-ms-overflow-style:none;scrollbar-width:none}.game-selector-nav{width:32px;height:32px;border-radius:50%;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;border:none}.game-selector-nav:hover{background-color:#fff3;transform:scale(1.1)}.game-selector-nav:active{transform:scale(.95)}.game-selector-nav .material-symbols-outlined{font-size:20px}.game-selector-card{position:relative;width:160px;min-width:160px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s;opacity:.7;border:2px solid rgba(255,255,255,.1)}.game-selector-card:hover{opacity:1;transform:scale(1.05)}.game-selector-card.selected{opacity:1;transform:scale(1.1);border-color:var(--arcade-blue);box-shadow:0 0 20px #2aebff80}.game-selector-selected-badge{position:absolute;top:8px;left:8px;background-color:var(--arcade-blue);color:#000;font-family:"Press Start 2P",cursive;font-size:8px;padding:4px 8px;border-radius:4px;z-index:10;box-shadow:0 2px 8px #00000080}.game-selector-card-image{width:100%;height:100%;background-size:cover;background-position:center;position:relative;transition:filter .3s}.game-selector-card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}.game-selector-card-grayscale{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#0006;transition:background-color .3s}.game-selector-card.selected .game-selector-card-grayscale{background-color:transparent}.game-selector-card-info{position:absolute;bottom:0;left:0;right:0;padding:12px;z-index:5}.game-selector-card-title{font-size:14px;font-family:"Press Start 2P",cursive;color:#fff;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.8);line-height:1.2}.game-selector-details{background-color:var(--panel-light);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;position:relative;overflow:hidden}.game-selector-details:before{content:"";position:absolute;top:0;right:0;width:128px;height:128px;background:radial-gradient(circle,rgba(42,235,255,.1),transparent);border-radius:50%;transform:translate(50%,-50%)}.game-selector-details-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;position:relative;z-index:1}.game-selector-details-title{font-size:20px;font-family:"Press Start 2P",cursive;color:#fff;margin:0;display:flex;align-items:center;gap:8px;letter-spacing:.05em}.game-selector-details-title .material-symbols-outlined{font-size:20px;color:var(--arcade-blue)}.game-selector-details-category{font-size:10px;font-family:VT323,monospace;color:#fff6;margin:4px 0 0;text-transform:uppercase;letter-spacing:.1em}.game-selector-details-icon{width:48px;height:48px;background-color:#ffffff1a;border-radius:8px;display:flex;align-items:center;justify-content:center}.game-selector-details-icon .material-symbols-outlined{font-size:24px;color:#ffffff4d}.game-selector-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px;position:relative;z-index:1}.game-selector-stat{background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px;display:flex;align-items:center;gap:12px}.game-selector-stat-icon{width:32px;height:32px;background-color:#2aebff33;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.game-selector-stat-icon .material-symbols-outlined{font-size:18px;color:var(--arcade-blue)}.game-selector-stat-label{font-size:10px;font-family:VT323,monospace;color:#fff6;text-transform:uppercase;margin:0 0 2px;font-weight:700}.game-selector-stat-value{font-size:14px;font-family:"Press Start 2P",cursive;color:#fff;margin:0;line-height:1.2}.game-selector-preview-indicator{display:flex;align-items:center;gap:8px;color:var(--arcade-blue);background-color:#2aebff1a;padding:8px 12px;border-radius:8px;border:1px solid rgba(42,235,255,.2);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;position:relative;z-index:1}.game-selector-preview-indicator .material-symbols-outlined{font-size:18px}.game-selector-preview-indicator span:last-child{font-size:10px;font-family:"Press Start 2P",cursive;letter-spacing:.1em}.game-selector-start-btn{width:100%;height:56px;background-color:var(--arcade-blue);color:#fff;font-family:"Press Start 2P",cursive;font-size:14px;border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 0 20px #2aebff66;letter-spacing:.05em}.game-selector-start-btn:hover:not(:disabled){background-color:#1fc8d8;box-shadow:0 0 30px #2aebff99;transform:translateY(-2px)}.game-selector-start-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.game-selector-start-btn:disabled{opacity:.5;cursor:not-allowed}.game-selector-btn-shine{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform 1.5s}.game-selector-start-btn:hover:not(:disabled) .game-selector-btn-shine{animation:shimmer 1.5s infinite}.game-selector-start-btn .material-symbols-outlined{font-size:20px;position:relative;z-index:1}.game-selector-start-btn span:last-child{position:relative;z-index:1}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.game-selector{padding:16px}.game-selector-card{width:140px;min-width:140px}.game-selector-title{font-size:18px}}:root{--purple-900: #2A1A4D;--purple-800: #3D2666;--purple-700: #4A3080;--purple-600: #5B3D99;--purple-500: #7B68EE;--purple-400: #9883F2;--purple-300: #B8A0E8;--purple-200: #D4C2F5;--purple-100: #E6D9FF;--blue-900: #0A1929;--blue-800: #1E3A80;--blue-700: #2952A3;--blue-600: #3366CC;--blue-500: #4169E1;--blue-400: #6A9FE8;--blue-300: #A8C8FF;--blue-200: #C4DBFF;--blue-100: #E3F0FF;--green-900: #0D3D0D;--green-800: #1A5C1A;--green-700: #228B22;--green-600: #28A428;--green-500: #32CD32;--green-400: #5FDB5F;--green-300: #8EE68E;--green-200: #B8F0B8;--green-100: #E0F9E0;--yellow-900: #4D3D00;--yellow-800: #805F00;--yellow-700: #B38600;--yellow-600: #CCAA00;--yellow-500: #FFD700;--yellow-400: #FFE033;--yellow-300: #FFEB66;--yellow-200: #FFF399;--yellow-100: #FFF9CC;--red-900: #4D0F1A;--red-800: #801929;--red-700: #A01F38;--red-600: #BF2648;--red-500: #DC143C;--red-400: #E54363;--red-300: #ED7289;--red-200: #F5A1B0;--red-100: #FCD0D8;--gray-900: #000000;--gray-800: #1A1A1A;--gray-700: #2F2F2F;--gray-600: #4D4D4D;--gray-500: #808080;--gray-400: #A6A6A6;--gray-300: #D3D3D3;--gray-200: #E6E6E6;--gray-100: #F5F5F5;--gray-0: #FFFFFF;--color-primary: var(--purple-500);--color-primary-hover: var(--purple-400);--color-primary-active: var(--purple-600);--color-secondary: var(--blue-500);--color-secondary-hover: var(--blue-400);--color-secondary-active: var(--blue-600);--color-success: var(--green-500);--color-warning: var(--yellow-500);--color-danger: var(--red-500);--color-info: var(--blue-300);--bg-primary: #0F0F23;--bg-secondary: #1A1A2E;--bg-tertiary: #16213E;--bg-elevated: #2A2A45;--bg-overlay: rgba(0, 0, 0, .85);--text-primary: var(--gray-0);--text-secondary: var(--gray-300);--text-tertiary: var(--gray-400);--text-disabled: var(--gray-600);--text-accent: var(--yellow-500);--border-primary: var(--gray-0);--border-secondary: var(--gray-600);--border-accent: var(--purple-500);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .5);--shadow-md: 0 4px 8px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .7);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .8);--shadow-glow-purple: 0 0 20px rgba(123, 104, 238, .4);--shadow-glow-blue: 0 0 20px rgba(65, 105, 225, .4);--shadow-glow-yellow: 0 0 20px rgba(255, 215, 0, .4);--shadow-glow-green: 0 0 20px rgba(50, 205, 50, .4);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--size-header: 60px;--size-footer: 40px;--size-sidebar: 280px;--size-max-content: 1400px;--font-family-primary: "Press Start 2P", cursive;--font-size-xs: 8px;--font-size-sm: 10px;--font-size-md: 12px;--font-size-lg: 14px;--font-size-xl: 16px;--font-size-2xl: 20px;--line-height-tight: 1.2;--line-height-normal: 1.6;--line-height-loose: 2;--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 900;--z-modal: 1000;--z-popover: 1100;--z-toast: 1200;--transition-fast: .1s;--transition-base: .2s;--transition-slow: .3s;--easing-default: cubic-bezier(.4, 0, .2, 1);--easing-bounce: cubic-bezier(.34, 1.56, .64, 1);--easing-smooth: cubic-bezier(.25, .46, .45, .94);--border-width-thin: 2px;--border-width-medium: 3px;--border-width-thick: 4px;--sn-white: #f8f8f8;--sn-black: #181818;--sn-yellow: #ffd700;--sn-cyan: #00d9ff;--sn-green: #28a028;--sn-blue: #0060ff;--sn-red: #c82030;--sn-bg-dark: #1a1a2e;--arcade-red: #ff2a2a;--arcade-orange: #ffae00;--arcade-blue: #2aebff;--bg-dark: #050505;--panel-dark: #111111;--panel-light: #1a1a1a;--glow-red: 0 0 10px rgba(255, 42, 42, .7);--glow-blue: 0 0 10px rgba(42, 235, 255, .7);--glow-orange: 0 0 10px rgba(255, 174, 0, .7);--glow-red-strong: 0 0 20px rgba(255, 42, 42, .5);--glow-blue-strong: 0 0 20px rgba(42, 235, 255, .5);--font-family-mono: "VT323", monospace;--font-family-pixel: "Press Start 2P", cursive}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:var(--font-family-primary);font-size:var(--font-size-md);line-height:var(--line-height-normal);color:var(--text-primary);background-color:var(--bg-primary);image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;overflow:hidden;height:100dvh;min-height:100vh;width:100vw;touch-action:manipulation;padding:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left))}canvas,img{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg-secondary);border:var(--border-width-thin) solid var(--border-secondary)}::-webkit-scrollbar-thumb{background:var(--gray-500);border:var(--border-width-thin) solid var(--border-secondary)}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;outline:none}button{cursor:pointer;-webkit-user-select:none;user-select:none}a{color:var(--color-primary);text-decoration:none}a:hover{color:var(--color-primary-hover)}::selection{background:var(--color-primary);color:var(--gray-0)}:focus-visible{outline:var(--border-width-medium) solid var(--text-accent);outline-offset:var(--space-1)}.app-container{display:grid;grid-template-rows:var(--size-header) 1fr var(--size-footer);height:100dvh;min-height:100vh;width:100vw;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.app-header{grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-bottom:var(--border-width-thick) solid var(--border-primary);box-shadow:var(--shadow-md);z-index:var(--z-sticky)}.header-left{display:flex;align-items:center;gap:var(--space-4)}.header-logo{height:40px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 0 10px var(--shadow-glow-yellow))}.header-title{font-size:var(--font-size-lg);color:var(--text-accent);text-shadow:2px 2px 0 var(--gray-900);display:none;margin:0}.header-right{display:flex;align-items:center;gap:var(--space-4)}.header-user-name{font-size:var(--font-size-sm);color:var(--text-secondary);display:none}.header-settings-btn{padding:var(--space-2) var(--space-3);background:var(--color-primary);border:var(--border-width-medium) solid var(--border-primary);color:var(--text-primary);font-size:var(--font-size-md);transition:all var(--transition-fast) var(--easing-default);cursor:pointer}.header-settings-btn:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.header-settings-btn:active{transform:translateY(0)}.main-content{grid-row:2;overflow:hidden;width:100%}.desktop-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);height:100%;width:100%;padding:var(--space-6)}.desktop-layout .chat-panel,.desktop-layout .rooms-panel{height:100%;width:100%;overflow:hidden;display:flex;flex-direction:column}.mobile-layout{display:none}.app-footer{grid-row:3;display:flex;align-items:center;justify-content:space-around;padding:0 var(--space-6);background:var(--bg-secondary);border-top:var(--border-width-thick) solid var(--border-primary);box-shadow:var(--shadow-md);z-index:var(--z-sticky);gap:var(--space-4)}.footer-stat{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--text-secondary);white-space:nowrap}.footer-stat-icon{font-size:var(--font-size-md)}.footer-stat-value{color:var(--text-primary);font-weight:700;min-width:30px}.footer-stat.online .footer-stat-value{color:var(--color-success)}.footer-stat.rooms .footer-stat-value{color:var(--color-info)}.footer-stat.ping .footer-stat-value{color:var(--color-warning)}@media (min-width: 1024px){.header-title,.header-user-name{display:block}}@media (max-width: 1023px){.desktop-layout{gap:var(--space-4);padding:var(--space-4)}.header-logo{height:35px}}@media (max-width: 767px){.app-container{grid-template-rows:50px 1fr 35px}.header-logo{height:30px}.desktop-layout{display:grid;grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-2)}.mobile-layout{display:flex}.app-footer{padding:0 var(--space-3)}.footer-stat{font-size:var(--font-size-xs)}}@media (min-width: 1400px){.desktop-layout{max-width:var(--size-max-content);margin:0 auto}}