:root{--primary:#f59e0b;--primary-hover:#d97706;--secondary:#3b82f6;--bg-main:#0b0f19;--bg-card:#111827b3;--border:#ffffff12;--text-main:#f1f5f9;--text-muted:#94a3b8;--success:#10b981;--danger:#ef4444;--font-family:"Quicksand", sans-serif;--font-headers:"Carter One", cursive;--transition:all .25s cubic-bezier(.4, 0, .2, 1)}h1,h2,h3,h4,h5,h6{font-family:var(--font-headers);letter-spacing:.03em;font-weight:700}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-main);color:var(--text-main);background-image:radial-gradient(at 0 0,#1a24444d 0,#0000 50%),radial-gradient(at 100% 100%,#2c184c40 0,#0000 50%);min-height:100vh;overflow-x:hidden}#app{width:100%;min-height:100vh;position:relative}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px)saturate(180%);backdrop-filter:blur(12px)saturate(180%);border:1px solid var(--border);transition:var(--transition);border-radius:16px;padding:24px;box-shadow:0 10px 40px -10px #00000080}.glass-card:hover{border-color:#ffffff1f}.primary-btn{background:linear-gradient(135deg, var(--primary) 0%, #d35400 100%);color:#fff;cursor:pointer;width:100%;transition:var(--transition);border:none;border-radius:8px;padding:12px 24px;font-weight:600;box-shadow:0 4px 15px #f39c124d}.primary-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f39c1266}.primary-btn:disabled{color:#7f8c8d;box-shadow:none;cursor:not-allowed;background:#34495e}.secondary-btn{color:var(--text-main);border:1px solid var(--border);cursor:pointer;transition:var(--transition);background:0 0;border-radius:8px;padding:10px 20px;font-weight:600}.secondary-btn:hover{background:#ffffff0d;border-color:#fff3}.text-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;font-weight:500}.text-btn:hover{color:var(--text-main)}.small-btn{cursor:pointer;border:1px solid var(--border);color:var(--text-main);transition:var(--transition);background:#ffffff0d;border-radius:6px;padding:6px 12px;font-size:.85rem}.small-btn:hover{background:#ffffff1a;border-color:#ffffff4d}.form-group{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.form-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;font-weight:600}.form-group input,.form-group select{border:1px solid var(--border);color:#fff;font-family:var(--font-family);transition:var(--transition);background:#0003;border-radius:8px;outline:none;padding:12px;font-size:1rem}.form-group input:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 10px #f39c1226}.checkbox-group{cursor:pointer;flex-direction:row;align-items:center;gap:12px}.checkbox-group input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}.screen{width:100%;min-height:100vh;padding:20px;display:none}.screen.active{flex-direction:column;display:flex}#loading-screen{justify-content:center;align-items:center;gap:20px}.spinner-container{width:40px;height:40px;position:relative}.double-bounce1,.double-bounce2{background-color:var(--primary);opacity:.6;border-radius:50%;width:100%;height:100%;animation:2s ease-in-out infinite sk-bounce;position:absolute;top:0;left:0}.double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}#auth-screen{justify-content:center;align-items:center}.auth-card{text-align:center;width:100%;max-width:480px}.auth-card h1{background:linear-gradient(135deg, var(--primary) 0%, #f39c12 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:2.5rem;font-weight:700}.subtitle{color:var(--text-muted);margin-bottom:24px}.tab-container{border-bottom:1px solid var(--border);margin-bottom:24px;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:12px;font-weight:600}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.login-section{animation:.3s fadeIn;display:none}.login-section.active{display:block}.auth-note{color:var(--text-muted);margin-top:12px;font-size:.8rem}.dashboard-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 10px 14px;display:flex}.user-profile{align-items:center;gap:10px;font-size:1.1rem;font-weight:600;display:flex}.user-avatar{justify-content:center;align-items:center;width:28px;height:28px;display:flex}.user-avatar img{object-fit:contain;width:100%;height:100%}.dashboard-layout{grid-template-columns:1fr 1.2fr;align-items:start;gap:24px;margin-top:24px;display:grid}.form-grid{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.game-list-card{flex-direction:column;max-height:380px;display:flex}.panel-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.count-badge{background:#ffffff14;border-radius:20px;padding:4px 10px;font-size:.85rem;font-weight:600}.game-items-list{flex-direction:column;gap:12px;padding-right:4px;display:flex;overflow-y:auto}.game-item{border:1px solid var(--border);transition:var(--transition);background:#ffffff08;border-radius:10px;justify-content:space-between;align-items:center;padding:14px;display:flex}.game-item:hover{background:#ffffff0f}.game-info{flex-direction:column;gap:4px;display:flex}.game-title{font-weight:600}.game-meta{color:var(--text-muted);font-size:.8rem}.empty-msg{color:var(--text-muted);text-align:center;padding:30px;font-style:italic}.lobby-card{width:100%;max-width:800px;margin:40px auto}.lobby-subtitle{color:var(--text-muted);margin-bottom:16px}.share-link-box{border:1px solid var(--border);background:#0000004d;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:24px;padding:12px 16px;font-family:monospace;display:flex}.lobby-grid{grid-template-columns:1.2fr 1fr;gap:24px;margin-bottom:24px;display:grid}.lobby-list{flex-direction:column;gap:8px;margin-top:12px;display:flex}.lobby-player-row{border:1px solid var(--border);background:#ffffff05;border-radius:8px;align-items:center;gap:12px;padding:12px;display:flex}.player-color-dot{border-radius:50%;width:14px;height:14px}.settings-list{flex-direction:column;gap:8px;margin-top:12px;list-style:none;display:flex}.settings-list li{background:#ffffff03;border-radius:6px;justify-content:space-between;padding:8px 12px;font-size:.9rem;display:flex}.settings-list li span{color:var(--primary);font-weight:600}.lobby-actions{justify-content:flex-end;gap:16px;display:flex}#game-screen{flex-direction:column;height:100vh;padding:0;display:flex}.game-header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0b0f19e6;justify-content:space-between;align-items:center;padding:6px 16px;display:flex}.timer-display{color:#f87171;background:#ef444426;border:1px solid #ef44444d;border-radius:16px;padding:4px 10px;font-size:.9rem;font-weight:700;animation:1.5s infinite pulse}.timer-display.flashing{color:#fca5a5;background:#ef444459;border-color:#ef4444b3;animation:.6s infinite alternate fast-pulse}@keyframes fast-pulse{0%{opacity:.6;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}.game-layout{flex:1;grid-template-columns:320px 1fr 340px;height:calc(100vh - 48px);display:grid;overflow:hidden}.game-sidebar{border-right:1px solid var(--border);background:#0a0f1c80;flex-direction:column;gap:16px;padding:16px;display:flex;overflow-y:auto}.right-sidebar{border-right:none;border-left:1px solid var(--border)}.sidebar-section{padding:16px!important}.sidebar-section h3{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid #ffffff0d;margin-bottom:12px;padding-bottom:6px;font-size:1rem;font-weight:600}.center-content{flex-direction:column;align-items:center;display:flex}.log-section{flex-direction:column;flex:1;display:flex;overflow:hidden}.scrollable-log{flex-direction:column;flex:1;gap:8px;padding-right:4px;font-size:.85rem;display:flex;overflow-y:auto}.log-entry{border-left:3px solid var(--secondary);background:#ffffff05;border-radius:0 6px 6px 0;padding:8px;line-height:1.4}.log-entry.roll{border-color:#f1c40f}.log-entry.build{border-color:#2ecc71}.log-entry.trade{border-color:#9b59b6}.log-entry.discard{border-color:#e74c3c}.log-entry.clickable{cursor:pointer;transition:var(--transition)}.log-entry.clickable:hover{background:#ffffff0f}.log-entry.active-action{font-weight:600;border-left:3.5px solid var(--primary)!important;color:#fff!important;background:#f59e0b1f!important}.player-status-row{border:1px solid var(--border);transition:var(--transition);background:#ffffff05;border-radius:8px;flex-direction:column;gap:6px;margin-bottom:10px;padding:10px;display:flex}.player-status-row.active-turn{border-color:var(--primary);background:#f39c120f;box-shadow:0 0 15px #f39c121a}.player-info-main{justify-content:space-between;align-items:center;display:flex}.player-name-color{align-items:center;gap:8px;font-weight:600;display:flex}.player-score-badge{background:var(--primary);color:#000;border-radius:10px;padding:2px 8px;font-size:.8rem;font-weight:700}.player-details-grid{color:var(--text-muted);grid-template-columns:repeat(3,1fr);gap:4px;font-size:.75rem;display:grid}.dice-container{gap:16px;margin-bottom:12px;display:flex}.die{color:#000;background:#fff;border:2px solid #ccc;border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.6rem;font-weight:700;transition:transform .4s;display:flex;box-shadow:0 4px 10px #0003}.die.rolling{animation:.4s infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.game-board-container{background:#0b1120;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#svg-board-wrapper,#replay-svg-board-wrapper{width:100%;max-width:900px;height:100%;max-height:900px}svg{width:100%;height:100%}.hex-tile{stroke:#ffffff26;stroke-width:2px;cursor:pointer;transition:filter .2s,stroke .2s}.hex-tile:hover{filter:brightness(1.2)}.hex-tile.unrevealed{fill:url(#hidden-grad)!important}.tile-resource-label{font-family:var(--font-family);fill:#ffffffd9;text-anchor:middle;filter:drop-shadow(0 1px 2px #000000b3);pointer-events:none;font-size:.65rem;font-weight:700}.vertex-point{fill:#0000;stroke:#0000;stroke-width:3px;cursor:pointer;transition:var(--transition)}.vertex-point.buildable{fill:#ffffff40;stroke:#fff}.vertex-point:hover{transform:scale(1.4)}.vertex-point.built{stroke:#fff6;stroke-width:1px;filter:url(#piece-shadow)}.edge-line.built{filter:url(#piece-shadow)}.edge-line{stroke:#0000;stroke-width:6px;cursor:pointer;transition:var(--transition)}.edge-line.buildable{stroke:#ffffff40;stroke-width:5px;stroke-linecap:round}.edge-line.buildable:hover{stroke:#fff9;stroke-width:7px}.number-token-bg{fill:#fffbeb;stroke:#d97706;stroke-width:1.5px;filter:drop-shadow(0 2px 4px #0000004d)}.number-token-text{font-family:var(--font-headers);fill:#1e293b;text-anchor:middle;dominant-baseline:central;font-size:14px;font-weight:700}.number-token-text.red-token{fill:#ef4444;font-weight:900}.robber-token{fill:#374151;stroke:#fbbf24;stroke-width:2px;pointer-events:none;filter:drop-shadow(0 4px 6px #0006)}.port-badge{fill:#111827f2;stroke:var(--primary);stroke-width:1.5px}.port-text{fill:#fff;text-anchor:middle;dominant-baseline:central;font-size:9px;font-weight:600}.resource-hand{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.resource-card{border:1px solid var(--border);background:#ffffff08;border-radius:8px;flex-direction:column;align-items:center;padding:8px 4px;font-size:.8rem;display:flex}.resource-card .emoji{margin-bottom:4px;font-size:1.5rem}.resource-card .count{font-size:1.1rem;font-weight:700}.build-menu{grid-template-columns:1fr 1fr;gap:10px;display:grid}.build-item{border:1px solid var(--border);cursor:pointer;transition:var(--transition);color:#fff;font-family:var(--font-family);background:#ffffff08;border-radius:10px;align-items:center;gap:12px;width:100%;padding:10px 12px;display:flex}.build-item:hover:not(.disabled){border-color:var(--primary);background:#ffffff14}.build-item.active{border-color:var(--primary);background:#f59e0b1a;box-shadow:0 0 10px #f59e0b33}.build-item.disabled{opacity:.35;cursor:not-allowed}.build-icon{font-size:1.6rem;line-height:1}.build-info{text-align:left;flex-direction:column;align-items:flex-start;display:flex}.build-name{font-size:.85rem;font-weight:600}.build-cost{color:var(--text-muted);margin-top:2px;font-size:.75rem}.build-instruction{color:var(--primary);text-align:center;min-height:18px;margin-top:10px;font-size:.85rem;font-weight:600}.tab-container-small{border-bottom:1px solid var(--border);margin-bottom:12px;display:flex}.tab-btn-small{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:8px;font-size:.9rem;font-weight:600}.tab-btn-small.active{color:var(--primary);border-bottom-color:var(--primary)}.sub-panel{display:none}.sub-panel.active{flex-direction:column;display:flex}.trade-selector select{border:1px solid var(--border);color:#fff;width:100%;font-family:var(--font-family);background:#0003;border-radius:6px;margin-top:4px;margin-bottom:10px;padding:6px}.trade-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.trade-col h4{color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;font-size:.8rem}.trade-input-row{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.trade-input-row input{border:1px solid var(--border);color:#fff;text-align:center;background:#0003;border-radius:4px;width:50px;padding:4px}.trade-offer-box{background:#9b59b626;border:1px solid #9b59b666;border-radius:8px;margin-top:10px;padding:10px}.offer-actions{gap:8px;margin-top:8px;display:flex}.offer-actions button{flex:1}.offer-actions button.accept{background:var(--success);color:#000;border:none;font-weight:600}.offer-actions button.reject{background:var(--danger);color:#fff;border:none;font-weight:600}.devcard-list{flex-direction:column;gap:8px;display:flex}.devcard-item{border:1px solid var(--border);background:#ffffff05;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.devcard-play-btn{background:var(--secondary);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:4px 8px;font-size:.8rem;font-weight:600}.devcard-play-btn:disabled{cursor:not-allowed;opacity:.5;background:#34495e}.devcard-options{background:#3498db1a;border:1px solid #3498db4d;border-radius:8px;margin-top:10px;padding:10px}.devcard-options select{border:1px solid var(--border);color:#fff;background:#0003;border-radius:4px;margin-bottom:6px;margin-right:6px;padding:4px}.end-turn-box{margin-top:auto;padding-top:10px}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000d9;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-overlay.active{display:flex}.modal-card{text-align:center;width:90%;max-width:440px}.discard-selector{flex-direction:column;gap:12px;margin-top:20px;display:flex}.discard-row{background:#ffffff05;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.discard-row input{border:1px solid var(--border);color:#fff;text-align:center;background:#0000004d;border-radius:4px;width:60px;padding:4px}.replay-header{border-bottom:1px solid var(--border);background:#0b0f19e6;justify-content:space-between;align-items:center;padding:6px 16px;display:flex}.replay-controls-card{width:100%;max-width:300px}.replay-progress{color:var(--primary);text-align:center;margin-bottom:16px;font-size:1.1rem;font-weight:600}.replay-btn-row{justify-content:center;gap:10px;margin-bottom:20px;display:flex}.control-btn{border:1px solid var(--border);color:#fff;cursor:pointer;transition:var(--transition);background:#ffffff0d;border-radius:8px;padding:10px 16px}.control-btn:hover{background:#ffffff1a}.primary-control-btn{background:var(--primary);color:#000;border:none;font-weight:700}.primary-control-btn:hover{background:var(--primary-hover)}.speed-selector{flex-direction:column;gap:8px;display:flex}.speed-selector label{color:var(--text-muted);text-transform:uppercase;font-size:.85rem;font-weight:600}.speed-btn-group{border:1px solid var(--border);border-radius:8px;grid-template-columns:repeat(4,1fr);display:grid;overflow:hidden}.speed-btn{color:var(--text-muted);cursor:pointer;transition:var(--transition);border:none;border-right:1px solid var(--border);background:#0003;padding:8px 4px;font-size:.75rem}.speed-btn:last-child{border-right:none}.speed-btn.active{background:var(--primary);color:#000;font-weight:700}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}to{transform:scale(1)}}.hidden{display:none!important}.mt-10{margin-top:10px}.mt-20{margin-top:20px}