*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #0a0818;--bg-panel: #0d0a1eee;--bg-card: #1a1430;--gold: #f5d060;--gold-dim: #b8860b;--gold-glow: #f5d06044;--text-primary: #e8dfc0;--text-secondary: #b8a060;--text-dim: #786e5a;--border: #3a2a6088;--red: #d22323;--green: #2d6b45;--blue: #1e50d2;font-family:Rajdhani,sans-serif;color:var(--text-primary)}body{background:var(--bg-dark);overflow:hidden;height:100vh;width:100vw}#root{height:100vh;width:100vw}.lobby-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:url(/images/title_page.png) center center / cover no-repeat fixed;gap:24px;position:relative}.lobby-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,#1a1040aa,#0a0818dd 70%);z-index:0}.lobby-container>*{position:relative;z-index:1}.lobby-title{font-family:Orbitron,sans-serif;font-size:48px;font-weight:900;color:var(--gold);text-shadow:0 0 30px var(--gold-glow);letter-spacing:4px}.lobby-subtitle{font-size:16px;color:var(--text-secondary);letter-spacing:8px;text-transform:uppercase;margin-top:-16px}.lobby-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:32px;min-width:500px;max-width:700px}.lobby-panel h2{font-family:Orbitron,sans-serif;font-size:18px;color:var(--gold);margin-bottom:16px;text-transform:uppercase;letter-spacing:2px}.lobby-input{width:100%;padding:12px 16px;background:#1a1430;border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:16px;font-family:Rajdhani,sans-serif;margin-bottom:12px;outline:none;transition:border-color .2s}.lobby-input:focus{border-color:var(--gold-dim)}.color-picker{display:flex;gap:12px;margin-bottom:16px}.color-option{width:48px;height:48px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;position:relative}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:var(--gold);box-shadow:0 0 12px var(--gold-glow)}.color-option.taken{opacity:.3;cursor:not-allowed}.color-option .color-label{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:10px;color:var(--text-dim);white-space:nowrap}.btn{padding:12px 24px;border:1px solid var(--gold-dim);background:linear-gradient(135deg,#2a1800,#1a0a00);color:var(--gold);font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:8px;cursor:pointer;transition:all .2s}.btn:hover{background:linear-gradient(135deg,#3a2800,#2a1800);box-shadow:0 0 20px var(--gold-glow)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-small{padding:6px 14px;font-size:11px}.btn-danger{border-color:var(--red);color:var(--red);background:linear-gradient(135deg,#2a0000,#1a0000)}.game-list{list-style:none;margin-top:16px}.game-list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;margin-bottom:8px}.game-list-item .game-info{display:flex;flex-direction:column;gap:4px}.game-list-item .game-players{font-size:12px;color:var(--text-dim)}.player-dots{display:flex;gap:6px;margin-top:4px}.player-dot{width:12px;height:12px;border-radius:50%;border:1px solid #fff2}.game-container{display:grid;grid-template-columns:220px 1fr 260px;grid-template-rows:auto 1fr auto auto;height:100vh;width:100vw;background:var(--bg-dark)}.game-header{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--bg-panel);border-bottom:1px solid var(--border);z-index:10}.game-header .game-title{font-family:Orbitron,sans-serif;font-size:16px;color:var(--gold);letter-spacing:2px}.game-header .turn-info{font-size:14px;color:var(--text-secondary)}.video-panel{grid-row:2;grid-column:1;display:flex;flex-direction:column;gap:4px;padding:8px;overflow-y:auto;background:#08060f}.video-feed{width:100%;aspect-ratio:4/3;background:#111;border-radius:8px;border:2px solid var(--border);overflow:hidden;position:relative}.video-feed video{width:100%;height:100%;object-fit:cover}.video-feed .video-label{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:#000a;font-size:11px;color:var(--text-primary)}.video-feed.disconnected{opacity:.4}.board-container{grid-row:2;grid-column:2;position:relative;overflow:hidden}.board-container canvas{width:100%!important;height:100%!important}.info-panel{grid-row:2;grid-column:3;display:flex;flex-direction:column;gap:8px;padding:8px;overflow-y:auto;background:#08060f}.player-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;position:relative}.player-card.current-turn{border-color:var(--gold-dim);box-shadow:0 0 10px var(--gold-glow)}.player-card .player-name{font-family:Orbitron,sans-serif;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}.player-card .player-color-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.player-card .player-vp{font-size:12px;color:var(--text-secondary);margin-top:4px}.player-card .player-resources{display:flex;gap:4px;margin-top:6px;font-size:11px}.player-card .resource-count{display:flex;align-items:center;gap:2px;padding:2px 6px;background:#0008;border-radius:4px}.player-card .player-specials{display:flex;gap:6px;margin-top:6px;font-size:10px}.player-card .special-badge{padding:2px 8px;border-radius:4px;background:var(--gold-dim);color:#000;font-weight:700}.game-log{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px;max-height:200px;overflow-y:auto;flex-shrink:0}.game-log h3{font-family:Orbitron,sans-serif;font-size:11px;color:var(--gold);margin-bottom:6px;letter-spacing:2px}.log-entry{font-size:11px;color:var(--text-dim);padding:2px 0;border-bottom:1px solid #ffffff08}.turn-indicator{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 16px;background:var(--bg-panel);border-top:1px solid var(--border);border-left:4px solid #fff;font-family:Orbitron,sans-serif;font-size:14px;letter-spacing:2px;text-transform:uppercase;z-index:10}.turn-indicator-dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor;animation:pulse-dot 2s infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.turn-indicator-name{font-weight:700}.turn-indicator-phase{color:var(--text-dim);font-size:12px}.hand-panel{grid-column:1 / -1;grid-row:4;display:flex;align-items:center;padding:8px 16px;background:var(--bg-panel);border-top:1px solid var(--border);gap:16px;z-index:10;min-height:100px}.resource-hand{display:flex;gap:6px;align-items:center}.resource-card-small{width:56px;height:76px;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #fff2;font-size:10px;font-weight:700;color:#fff;text-transform:uppercase;position:relative;cursor:default}.resource-card-small .res-count{font-size:22px;font-family:Orbitron,sans-serif}.resource-card-small .res-name{font-size:8px;letter-spacing:1px;opacity:.8}.dev-card-hand{display:flex;gap:6px}.dev-card-small{width:70px;height:90px;background:var(--bg-card);border:1px solid var(--gold-dim);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:4px;text-align:center}.dev-card-small:hover{transform:translateY(-4px);box-shadow:0 4px 12px var(--gold-glow)}.dev-card-small .dev-type{font-size:9px;color:var(--gold);font-weight:700;text-transform:uppercase}.dev-card-small .dev-name{font-size:8px;color:var(--text-dim);margin-top:2px}.action-buttons{display:flex;gap:8px;margin-left:auto}.dice-display{display:flex;gap:8px;align-items:center}.die{width:44px;height:44px;background:var(--bg-card);border:2px solid var(--gold-dim);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:Orbitron,sans-serif;font-size:22px;font-weight:900;color:var(--gold)}.dice-total{font-family:Orbitron,sans-serif;font-size:14px;color:var(--text-secondary);margin-left:4px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--bg-panel);border:1px solid var(--gold-dim);border-radius:12px;padding:32px;min-width:400px;max-width:600px;max-height:80vh;overflow-y:auto}.modal h2{font-family:Orbitron,sans-serif;font-size:18px;color:var(--gold);margin-bottom:16px;text-transform:uppercase;letter-spacing:2px}.modal p{color:var(--text-secondary);margin-bottom:12px}.trade-dialog{min-width:500px}.trade-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.trade-row label{width:80px;font-size:13px;color:var(--text-secondary);text-transform:uppercase}.trade-resource-inputs{display:flex;gap:8px}.trade-resource-input{display:flex;flex-direction:column;align-items:center;gap:4px}.trade-resource-input label{font-size:10px;width:auto}.trade-resource-input input{width:48px;padding:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);text-align:center;font-size:16px;font-family:Rajdhani,sans-serif}.trade-target-select{width:100%;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-family:Rajdhani,sans-serif;font-size:14px;margin-bottom:16px}.discard-count{font-family:Orbitron,sans-serif;font-size:24px;color:var(--red);text-align:center;margin-bottom:8px}.resource-chooser{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.resource-choice-btn{padding:12px 20px;border-radius:8px;border:2px solid transparent;cursor:pointer;font-family:Rajdhani,sans-serif;font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;transition:all .2s}.resource-choice-btn:hover{transform:scale(1.05);border-color:#fff4}.cosmic-event-popup{text-align:center}.cosmic-event-popup .event-title{font-family:Orbitron,sans-serif;font-size:24px;color:var(--gold);margin-bottom:8px}.cosmic-event-popup .event-flavor{font-style:italic;color:var(--text-dim);margin-bottom:8px}.cosmic-event-popup .event-effect{font-size:16px;color:var(--text-primary);padding:12px;background:var(--bg-card);border-radius:8px;margin-bottom:16px}.victory-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,#1a1040cc,#000e);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200}.victory-title{font-family:Orbitron,sans-serif;font-size:64px;font-weight:900;color:var(--gold);text-shadow:0 0 40px var(--gold-glow),0 0 80px var(--gold-glow);margin-bottom:16px}.victory-player{font-family:Orbitron,sans-serif;font-size:32px;color:var(--text-primary);margin-bottom:8px}.victory-subtitle{font-size:18px;color:var(--text-secondary)}.board-tooltip{position:absolute;background:var(--bg-panel);border:1px solid var(--gold-dim);border-radius:6px;padding:8px 12px;font-size:12px;color:var(--text-primary);pointer-events:none;z-index:50;white-space:nowrap}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.trade-notification{position:fixed;top:60px;right:20px;background:var(--bg-panel);border:1px solid var(--gold-dim);border-radius:12px;padding:16px 20px;z-index:90;min-width:300px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.trade-notification h3{font-family:Orbitron,sans-serif;font-size:12px;color:var(--gold);margin-bottom:8px}.trade-notification .trade-details{font-size:13px;margin-bottom:12px}.trade-notification .trade-buttons{display:flex;gap:8px}.build-mode-indicator{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--bg-panel);border:1px solid var(--gold-dim);border-radius:8px;padding:8px 20px;font-family:Orbitron,sans-serif;font-size:13px;color:var(--gold);z-index:20;animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 10px var(--gold-glow)}50%{box-shadow:0 0 25px var(--gold-glow)}}.waiting-overlay{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--bg-panel);border:1px solid var(--red);border-radius:8px;padding:8px 20px;font-size:13px;color:var(--red);z-index:20}.rules-modal{max-width:700px;max-height:85vh;overflow-y:auto}.rules-content h3{font-family:Orbitron,sans-serif;font-size:14px;color:var(--gold);margin-top:20px;margin-bottom:8px;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:4px}.rules-content p{font-size:14px;color:var(--text-primary);margin-bottom:6px;line-height:1.5}.rules-content em{color:var(--text-secondary)}.rules-terrain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}.rules-terrain-item{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px}.rules-terrain-item img{width:48px;height:48px;border-radius:6px;object-fit:cover}.rules-terrain-item span{font-size:13px;font-weight:600}.rules-table{width:100%;border-collapse:collapse;margin-bottom:8px}.rules-table td{padding:6px 10px;border-bottom:1px solid #ffffff08;font-size:13px}.rules-table td:first-child{color:var(--text-primary);font-weight:600}.rules-table td:last-child{color:var(--text-secondary);text-align:right}.rules-events{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.rules-events>div{font-size:13px;color:var(--text-primary);padding:6px 10px;background:var(--bg-card);border-radius:6px;line-height:1.4}.rules-events strong{color:var(--gold)}