*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#0a0a0a;font-family:Courier New,Courier,monospace;color:#0f0}.app{width:100%;height:100%;display:flex;flex-direction:column}.header{height:50px;background:#111;border-bottom:1px solid #333;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.header h1{font-size:18px;color:#0f0}.header-info{display:flex;gap:20px;font-size:14px}.status{display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;border-radius:50%;background:#666}.status-dot.connected{background:#0f0}.status-dot.connecting{background:#ff0;animation:pulse 1s infinite}.status-dot.error{background:red}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main-content{flex:1;display:flex;position:relative;overflow:hidden}.video-container{flex:1;display:flex;align-items:center;justify-content:center;background:#000;position:relative}.video-player{max-width:100%;max-height:100%;background:#000}.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.controls{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,#000c);display:flex;align-items:center;justify-content:space-between;padding:0 20px;opacity:0;transition:opacity .3s}.video-container:hover .controls{opacity:1}.control-btn{background:transparent;border:1px solid #00ff00;color:#0f0;padding:8px 16px;cursor:pointer;font-family:inherit;font-size:14px;transition:all .2s}.control-btn:hover{background:#0f0;color:#000}.control-btn:disabled{opacity:.5;cursor:not-allowed}.stats{display:flex;gap:20px;font-size:12px;color:#888}.lobby{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}.lobby h2{font-size:32px;color:#0f0}.lobby-actions{display:flex;gap:20px}.lobby-btn{background:transparent;border:2px solid #00ff00;color:#0f0;padding:15px 30px;font-size:18px;cursor:pointer;font-family:inherit;transition:all .2s}.lobby-btn:hover{background:#0f0;color:#000}.sessions-list{margin-top:30px;text-align:left}.sessions-list h3{margin-bottom:15px;font-size:16px;color:#888}.session-item{padding:10px 20px;border:1px solid #333;margin-bottom:10px;cursor:pointer;transition:all .2s}.session-item:hover{border-color:#0f0;background:#00ff001a}.session-item-info{display:flex;justify-content:space-between;font-size:14px}.loading{display:flex;align-items:center;justify-content:center;font-size:24px}.loading:after{content:"";animation:dots 1.5s infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.error-message{color:red;padding:20px;border:1px solid #ff0000;background:#ff00001a;margin:20px}.role-badge{padding:4px 8px;border-radius:4px;font-size:12px;text-transform:uppercase}.role-badge.player{background:#0f0;color:#000}.role-badge.viewer{background:#666;color:#fff}.viewer-count{font-size:12px;color:#888}.game-view{display:flex;width:100%;height:100%}.video-section{flex:1;display:flex;position:relative}.chat{width:280px;background:#111;border-left:1px solid #333;display:flex;flex-direction:column;transition:width .3s}.chat-collapsed{width:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}.chat-toggle-icon{font-size:20px}.chat-unread-badge{position:absolute;top:5px;right:5px;background:red;color:#fff;font-size:10px;padding:2px 6px;border-radius:10px}.chat-header{padding:10px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}.chat-toggle-btn{background:none;border:none;color:#888;cursor:pointer;font-size:12px}.chat-toggle-btn:hover{color:#0f0}.chat-messages{flex:1;overflow-y:auto;padding:10px}.chat-empty{color:#666;text-align:center;padding:20px;font-size:12px}.chat-message{margin-bottom:8px;font-size:12px;line-height:1.4}.chat-message.player-message .chat-sender{color:#0f0}.chat-sender{color:#888;margin-right:6px}.chat-content{color:#ddd;word-break:break-word}.chat-input-form{display:flex;padding:10px;border-top:1px solid #333;gap:5px}.chat-input-form input{flex:1;background:#222;border:1px solid #444;color:#0f0;padding:8px;font-family:inherit;font-size:12px}.chat-input-form input:focus{outline:none;border-color:#0f0}.chat-input-form button{background:#0f0;border:none;color:#000;padding:8px 12px;cursor:pointer;font-family:inherit;font-size:12px}.chat-input-form button:disabled{background:#333;color:#666;cursor:not-allowed}.chat-char-count{text-align:right;padding:2px 10px;font-size:10px;color:#666}.create-room-form{max-width:400px;padding:20px}.create-room-form h3{margin-bottom:20px;color:#888}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-size:12px;color:#888}.form-group input{width:100%;background:#222;border:1px solid #444;color:#0f0;padding:10px;font-family:inherit;font-size:14px}.form-group input:focus{outline:none;border-color:#0f0}.form-hint{display:block;margin-top:5px;font-size:10px;color:#666}.room-created{text-align:center}.room-created h3{color:#0f0;margin-bottom:20px}.share-link{margin:10px 0}.share-link-url{display:flex;gap:5px}.share-link-url input{flex:1;background:#222;border:1px solid #444;color:#0f0;padding:10px;font-family:inherit;font-size:12px}.copy-btn{background:#0f0;border:none;color:#000;padding:10px 15px;cursor:pointer;font-family:inherit;font-size:12px;transition:all .2s}.copy-btn.copied{background:#0a0}.share-popup{position:absolute;top:50px;left:50%;transform:translate(-50%);background:#111;border:1px solid #333;padding:15px;z-index:100;min-width:350px}.share-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.share-popup-header button{background:none;border:none;color:#888;cursor:pointer;font-size:16px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#111;border:1px solid #333;padding:30px;min-width:350px;max-width:90%}.modal-content h3{margin-bottom:10px;color:#0f0}.modal-content p{margin-bottom:20px;color:#888;font-size:14px}.modal-error{color:red;margin:10px 0;padding:10px;border:1px solid #ff0000;background:#ff00001a;font-size:12px}.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.modal-btn{padding:10px 20px;cursor:pointer;font-family:inherit;font-size:14px;border:1px solid}.modal-btn.cancel{background:transparent;border-color:#666;color:#666}.modal-btn.cancel:hover{border-color:#888;color:#888}.modal-btn.submit{background:#0f0;border-color:#0f0;color:#000}.modal-btn.submit:disabled{background:#333;border-color:#333;color:#666;cursor:not-allowed}.mode-indicator{position:absolute;top:10px;left:10px;padding:8px 15px;font-size:12px;display:flex;align-items:center;gap:10px}.mode-indicator.viewer-mode{background:#000000b3}.mode-indicator.player-mode{background:#0f03;border:1px solid #00ff00}.become-player-btn{background:#0f0;border:none;color:#000;padding:5px 10px;cursor:pointer;font-family:inherit;font-size:11px}.become-player-btn:hover{background:#0c0}.control-left{display:flex;align-items:center;gap:10px}.share-btn{background:#333;border-color:#666;color:#fff}.share-btn:hover{background:#444;border-color:#888}.session-name{font-weight:700}.session-status{font-size:12px}.game-loader{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:#000}.game-canvas{max-width:100%;max-height:100%}.game-loading-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10}.game-loading-text{font-size:18px;color:#0f0;margin-bottom:10px}.game-loading-status{font-size:14px;color:#888;margin-bottom:15px}.game-progress-bar{width:300px;height:20px;border:1px solid #00ff00;background:#111}.game-progress-fill{height:100%;background:#0f0;transition:width .2s}.game-container{background:#000}.live-indicator{background:red;color:#fff;padding:4px 10px;font-size:11px;font-weight:700;border-radius:2px;animation:live-pulse 2s infinite}@keyframes live-pulse{0%,to{opacity:1}50%{opacity:.7}}.streaming-active{background:red!important;border-color:red!important;color:#fff!important}.streaming-active:hover{background:#c00!important}.stream-error{position:absolute;top:50px;left:50%;transform:translate(-50%);background:#ff0000e6;color:#fff;padding:10px 20px;font-size:12px;border-radius:4px;z-index:100}.no-stream{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#111}.no-stream-message{text-align:center;color:#888}.no-stream-icon{font-size:48px;margin-bottom:15px;filter:grayscale(1)}.no-stream-hint{font-size:12px;color:#666;margin-top:10px}.session-streaming{color:red;font-size:10px;padding:2px 6px;background:#f003;border-radius:2px}.site-gate{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a0a,#1a1a1a)}.site-gate-box{background:#111;border:2px solid #00ff00;padding:40px 50px;text-align:center;max-width:400px}.site-gate-box h1{color:#0f0;font-size:28px;margin-bottom:8px;text-shadow:0 0 10px rgba(0,255,0,.5)}.site-gate-subtitle{color:#666;font-size:12px;margin-bottom:30px}.site-gate-box .form-group{margin-bottom:20px}.site-gate-box input{width:100%;padding:12px 15px;background:#000;border:1px solid #333;color:#0f0;font-family:Courier New,monospace;font-size:16px;text-align:center}.site-gate-box input:focus{outline:none;border-color:#0f0}.site-gate-box input::placeholder{color:#444}.site-gate-error{color:#f44;font-size:12px;margin-bottom:15px}.site-gate-btn{width:100%;padding:12px;background:transparent;border:2px solid #00ff00;color:#0f0;font-family:Courier New,monospace;font-size:16px;cursor:pointer;transition:all .2s}.site-gate-btn:hover{background:#0f0;color:#000}.site-gate-hint{color:#444;font-size:11px;margin-top:30px}.site-gate-box.shake{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.restricted-access{text-align:center;padding:50px}.restricted-access h2{color:#f80;margin-bottom:20px}.restricted-access p{color:#888;margin-bottom:10px}