.rules-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.rules-modal{background:linear-gradient(135deg,#1a1f2e,#252d3d);border:2px solid var(--accent-gold);border-radius:16px;width:90vw;max-width:1000px;height:85vh;max-height:700px;display:flex;flex-direction:column;position:relative;box-shadow:0 20px 60px #00000080,0 0 40px #d4a9421a;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.rules-close-btn{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border:2px solid var(--border-color);border-radius:50%;background:var(--bg-primary);color:var(--text-secondary);font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all .2s}.rules-close-btn:hover{border-color:var(--player-red);color:var(--player-red);transform:scale(1.1)}.rules-header{padding:1.5rem 2rem;border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,rgba(212,169,66,.1) 0%,transparent 100%)}.rules-header h2{color:var(--accent-gold);font-size:1.8rem;margin:0;text-shadow:0 2px 10px rgba(212,169,66,.3)}.rules-container{display:flex;flex:1;overflow:hidden}.rules-nav{width:220px;min-width:220px;background:#0003;border-right:1px solid var(--border-color);padding:1rem 0;overflow-y:auto}.rules-nav-btn{width:100%;padding:.9rem 1.2rem;text-align:left;border:none;background:none;color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .2s;border-left:3px solid transparent}.rules-nav-btn:hover{background:#ffffff0d;color:var(--text-primary)}.rules-nav-btn.active{background:#d4a9421a;color:var(--accent-gold);border-left-color:var(--accent-gold)}.rules-content{flex:1;padding:1.5rem 2rem;overflow-y:auto}.rules-content h3{color:var(--accent-gold);font-size:1.5rem;margin:0 0 1.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.rules-text{color:var(--text-primary);line-height:1.7}.rules-text h4{color:var(--accent-copper);font-size:1.1rem;margin:1.5rem 0 .8rem}.rules-text p{margin:.5rem 0}.rules-text strong{color:var(--accent-gold)}.rules-text li{margin:.3rem 0 .3rem 1.5rem;list-style-type:disc}.rules-text br{display:block;content:"";margin:.5rem 0}.rules-content::-webkit-scrollbar,.rules-nav::-webkit-scrollbar{width:8px}.rules-content::-webkit-scrollbar-track,.rules-nav::-webkit-scrollbar-track{background:#0003;border-radius:4px}.rules-content::-webkit-scrollbar-thumb,.rules-nav::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.rules-content::-webkit-scrollbar-thumb:hover,.rules-nav::-webkit-scrollbar-thumb:hover{background:var(--accent-gold)}@media (max-width: 768px){.rules-modal{width:95vw;height:90vh;max-width:none;max-height:none}.rules-container{flex-direction:column}.rules-nav{width:100%;min-width:auto;flex-direction:row;display:flex;flex-wrap:wrap;padding:.5rem;border-right:none;border-bottom:1px solid var(--border-color);max-height:150px;overflow-y:auto}.rules-nav-btn{width:auto;padding:.6rem 1rem;font-size:.8rem;border-left:none;border-bottom:2px solid transparent;border-radius:4px}.rules-nav-btn.active{border-left-color:transparent;border-bottom-color:var(--accent-gold)}.rules-content{padding:1rem}.rules-content h3{font-size:1.2rem}}.lobby{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lobby-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 30%,rgba(212,169,66,.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(196,90,44,.1) 0%,transparent 50%),linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)}.lobby-bg:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L55 20 L55 50 L30 65 L5 50 L5 20 Z' fill='none' stroke='%23ffffff08' stroke-width='1'/%3E%3C/svg%3E");opacity:.5}.rules-btn{position:absolute;top:1.5rem;right:1.5rem;z-index:100;padding:.7rem 1.2rem;font-size:1rem;background:linear-gradient(135deg,#d4a94233,#c45a2c33);border:2px solid var(--accent-gold);border-radius:8px;color:var(--accent-gold);cursor:pointer;transition:all .3s ease;font-weight:600;letter-spacing:.05em}.rules-btn:hover{background:linear-gradient(135deg,var(--accent-gold) 0%,var(--accent-copper) 100%);color:var(--bg-primary);transform:translateY(-2px);box-shadow:0 6px 20px #d4a94266}.lobby-content{position:relative;z-index:1;text-align:center;padding:2rem}.lobby-header h1{font-size:5rem;color:var(--accent-gold);text-shadow:0 0 10px rgba(212,169,66,.5),0 4px 8px rgba(0,0,0,.5);letter-spacing:.4em;margin-bottom:.5rem;animation:fadeIn .5s ease-out}.lobby-header .subtitle{font-size:1.3rem;color:var(--text-secondary);letter-spacing:.2em;margin-bottom:3rem;animation:fadeIn .5s ease-out .2s both}.lobby-menu{display:flex;flex-direction:column;gap:1rem;max-width:320px;margin:0 auto}.menu-btn{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.2rem 2rem;font-size:1.2rem;border:2px solid var(--border-color);border-radius:12px;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));color:var(--text-primary);transition:all .3s ease}.menu-btn:hover{border-color:var(--accent-gold);transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.menu-btn .btn-icon{font-size:1.5rem}.create-btn:hover{background:linear-gradient(135deg,var(--bg-tertiary),rgba(212,169,66,.2))}.join-btn:hover{background:linear-gradient(135deg,var(--bg-tertiary),rgba(74,123,181,.2))}.lobby-form{max-width:360px;margin:0 auto;padding:2rem;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border:2px solid var(--border-color);border-radius:16px;box-shadow:0 10px 40px #0006}.back-btn{background:none;border:none;color:var(--text-secondary);font-size:1rem;margin-bottom:1rem;padding:.5rem}.back-btn:hover{color:var(--text-primary)}.lobby-form h2{color:var(--accent-gold);margin-bottom:1.5rem;font-size:1.5rem}.form-group{margin-bottom:1.5rem;text-align:left}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-secondary);font-size:.95rem}.form-group input{width:100%;padding:.9rem 1rem;font-size:1.1rem;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--accent-gold)}.form-group input::placeholder{color:var(--text-muted)}.code-input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-family:Cinzel,serif!important;font-weight:600}.error-message{background:#e6394633;border:1px solid var(--player-red);border-radius:8px;padding:.8rem;margin-bottom:1rem;color:#ff8a8a;font-size:.95rem}.submit-btn{width:100%;padding:1rem;font-size:1.2rem;border:none;border-radius:8px;background:linear-gradient(135deg,var(--accent-gold),var(--accent-copper));color:var(--bg-primary);font-weight:600;text-transform:uppercase;letter-spacing:.1em}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #d4a94266}.submit-btn:active{transform:translateY(0)}.game-mode-group{margin-bottom:1.5rem}.game-mode-options{display:flex;gap:.8rem}.mode-option{flex:1;padding:.8rem;border:2px solid var(--border-color);border-radius:10px;background:var(--bg-primary);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.3rem}.mode-option:hover{border-color:var(--accent-gold);background:#d4a9421a}.mode-option.active{border-color:var(--accent-gold);background:linear-gradient(135deg,#d4a94233,#c45a2c33);box-shadow:0 0 15px #d4a9424d}.mode-option .mode-icon{font-size:1.5rem}.mode-option .mode-label{font-weight:600;color:var(--text-primary);font-size:.95rem}.mode-option .mode-desc{font-size:.75rem;color:var(--text-secondary)}.mode-option.active .mode-label{color:var(--accent-gold)}.special-build-option{margin-top:.5rem;padding:.8rem;background:#0003;border-radius:8px;border:1px solid var(--border-color)}.checkbox-label{display:flex!important;align-items:flex-start;gap:.8rem;cursor:pointer;margin:0!important}.checkbox-label input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--accent-gold);cursor:pointer;flex-shrink:0}.checkbox-text{display:flex;flex-direction:column;gap:.2rem}.checkbox-title{font-weight:600;color:var(--text-primary);font-size:.95rem}.checkbox-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.3}.lobby-footer{margin-top:3rem;color:var(--text-muted);font-size:.95rem}.lobby-footer .credits{margin-top:1rem;font-size:.85rem;color:var(--text-secondary);opacity:.8}.lobby-footer .creator-name{color:var(--accent-gold);font-weight:600;text-decoration:none}@media (max-width: 600px){.lobby-header h1{font-size:3rem;letter-spacing:.2em}.rules-btn{top:1rem;right:1rem;padding:.5rem .8rem;font-size:.9rem}}.hex-board{width:100%;height:100%;max-width:500px;max-height:440px}.hex{transition:all .2s ease}.hex.clickable{cursor:pointer}.hex.clickable:hover path:first-child{filter:brightness(1.2)}.hex.has-robber path:first-child{filter:brightness(.7)}.robber{animation:robberBob 2s ease-in-out infinite}@keyframes robberBob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.vertex-placeholder{fill:#fff3;stroke:#ffffff80;stroke-width:2;stroke-dasharray:4 2;cursor:pointer;transition:all .2s ease}.vertex-placeholder:hover{fill:#d4a94280;stroke:var(--accent-gold);stroke-width:3}.edge-placeholder{cursor:pointer;transition:all .2s ease}.edge-placeholder:hover{stroke:#d4a942b3!important}.settlement{transition:all .2s ease}.settlement.upgradeable{cursor:pointer}.settlement.upgradeable:hover{filter:brightness(1.3) drop-shadow(0 0 8px rgba(212,169,66,.8))}.city{animation:cityGlow 3s ease-in-out infinite}@keyframes cityGlow{0%,to{filter:url(#hex-shadow)}50%{filter:url(#hex-shadow) drop-shadow(0 0 4px rgba(255,255,255,.3))}}.player-panel{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:10px;padding:.5rem .6rem;transition:all .3s ease}.player-panel.current-turn{border-color:var(--accent-gold);box-shadow:0 0 15px #d4a9424d}.player-panel.is-me{background:linear-gradient(135deg,var(--bg-secondary),rgba(212,169,66,.1))}.player-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}.turn-order-badge{width:20px;height:20px;border-radius:50%;background:var(--accent-gold);color:var(--bg-primary);font-family:Cinzel,serif;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}.player-color-badge{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}.player-name{flex:1;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.you-badge{font-size:.65rem;padding:.15rem .4rem;background:var(--accent-gold);color:var(--bg-primary);border-radius:8px;font-weight:700;letter-spacing:.05em}.victory-points{display:flex;align-items:baseline;gap:.2rem;background:var(--bg-tertiary);padding:.3rem .6rem;border-radius:8px}.vp-number{font-family:Cinzel,serif;font-size:1.2rem;font-weight:700;color:var(--accent-gold)}.hidden-vp{font-family:Cinzel,serif;font-size:.85rem;font-weight:600;color:var(--text-muted);opacity:.6;padding:0 .2rem;cursor:help;animation:secretPulse 2s ease-in-out infinite}.revealed-vp{font-family:Cinzel,serif;font-size:.7rem;font-weight:500;color:var(--accent-gold);opacity:.8;padding:0 .2rem;cursor:help}@keyframes secretPulse{0%,to{opacity:.5}50%{opacity:.8}}.vp-label{font-size:.7rem;color:var(--text-muted)}.player-stats{display:flex;gap:.6rem;margin-bottom:.3rem;padding:.3rem;background:var(--bg-tertiary);border-radius:6px}.stat{display:flex;align-items:center;gap:.3rem;font-size:.85rem}.stat-icon{font-size:.9rem}.stat-value{color:var(--text-secondary)}.player-pieces{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted)}.piece-count{display:flex;align-items:center;gap:.3rem}.piece-icon{font-size:.9rem}.player-achievements{display:flex;flex-direction:column;gap:.3rem;margin-top:.5rem}.achievement{font-size:.75rem;padding:.25rem .5rem;background:linear-gradient(135deg,var(--accent-gold),var(--accent-copper));color:var(--bg-primary);border-radius:6px;font-weight:600;text-align:center}.has-info{cursor:context-menu;position:relative;transition:background-color .2s}.has-info:hover{background-color:#d4a9421a;border-radius:4px}.stat.has-info:hover,.piece-count.has-info:hover{transform:scale(1.05)}.resource-cards{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.resource-card{display:flex;flex-direction:column;width:65px;background:linear-gradient(180deg,var(--bg-tertiary),var(--bg-secondary));border:2px solid var(--border-color);border-radius:8px;overflow:hidden;transition:all .2s ease}.resource-card.empty{opacity:.5}.resource-card.selectable{cursor:pointer}.resource-card.selectable:hover:not(.empty){transform:translateY(-4px);border-color:var(--resource-color);box-shadow:0 4px 12px #0000004d}.card-top{background:var(--resource-color);padding:.4rem;text-align:center}.resource-icon{font-size:1.3rem}.card-bottom{padding:.3rem;text-align:center;position:relative}.resource-name{display:block;font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.resource-count{display:block;font-family:Cinzel,serif;font-size:1.3rem;font-weight:700;color:var(--text-primary)}.selected-indicator{position:absolute;top:-8px;right:4px;background:var(--player-red);color:#fff;padding:.1rem .4rem;border-radius:8px;font-size:.75rem;font-weight:600}.resource-cards.compact{gap:.3rem}.resource-cards.compact .resource-card{width:50px}.resource-cards.compact .card-top{padding:.3rem}.resource-cards.compact .resource-icon{font-size:1.1rem}.resource-cards.compact .resource-name{font-size:.55rem}.resource-cards.compact .resource-count{font-size:1rem}.total-cards{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-tertiary);border-radius:8px}.total-cards .card-icon{font-size:1.2rem}.total-cards .count{color:var(--text-secondary)}.resource-card.has-info{cursor:context-menu}.resource-card.has-info:hover:not(.empty):not(.selectable){transform:translateY(-2px);border-color:var(--accent-gold);box-shadow:0 4px 12px #d4a94233}.action-panel{display:flex;flex-direction:column;gap:.3rem}.action-panel h3{color:var(--accent-gold);font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem}.action-panel h4{color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin:.3rem 0 .2rem}.action-section{border-top:1px solid var(--border-color);padding-top:.3rem}.action-btn{width:100%;padding:.5rem .8rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.85rem;display:flex;align-items:center;gap:.4rem;text-align:left}.action-btn:hover:not(:disabled){border-color:var(--text-muted);background:#ffffff0d}.action-btn:disabled{opacity:.4}.action-btn.active{border-color:var(--accent-gold);background:#d4a94226;box-shadow:0 0 10px #d4a94233}.action-btn.primary{background:linear-gradient(135deg,var(--accent-gold),var(--accent-copper));border-color:var(--accent-gold);color:var(--bg-primary);font-weight:600}.action-btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #d4a94266}.action-btn.highlight{border-color:var(--accent-green);background:#4a8b3c33}.action-btn.highlight:hover:not(:disabled){background:#4a8b3c4d}.roll-btn{font-size:.95rem;padding:.6rem}.build-btn{flex-wrap:wrap}.build-btn .btn-icon{font-size:1.1rem;width:24px;text-align:center}.build-btn .btn-label{flex:1}.build-btn .cost{font-size:.75rem;color:var(--text-muted);width:100%;margin-top:.2rem;padding-left:28px}.build-btn .remaining{font-size:.7rem;color:var(--accent-copper);margin-left:.5rem}.trade-btn{background:#457b9d33;border-color:var(--accent-blue)}.trade-btn:hover:not(:disabled){background:#457b9d4d}.end-turn-btn{margin-top:.5rem}.special-action{background:#d4a94226;border:1px solid var(--accent-gold);border-radius:8px;padding:.8rem;margin-bottom:.5rem}.special-action p{color:var(--accent-gold);font-size:.9rem;margin-bottom:.5rem}.special-action button{width:100%;padding:.5rem;background:var(--accent-gold);border:none;border-radius:6px;color:var(--bg-primary);font-weight:600}.special-action button.active{background:var(--accent-copper)}.special-build-indicator{background:linear-gradient(135deg,#6a994e33,#4a7c3e33);border:1px solid #6a994e;border-radius:8px;padding:.6rem .8rem;color:#8fb974;font-weight:600;font-size:.9rem;text-align:center;margin-bottom:.5rem;animation:specialBuildGlow 1.5s ease-in-out infinite}@keyframes specialBuildGlow{0%,to{box-shadow:0 0 5px #6a994e4d}50%{box-shadow:0 0 15px #6a994e80}}.special-build-indicator .no-trade-hint{display:block;font-size:.75rem;font-weight:400;color:var(--text-muted);margin-top:.2rem}.action-section h4 .disabled-hint{font-size:.65rem;color:var(--text-muted);font-weight:400;font-style:italic}.trade-modal{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:16px;padding:1.5rem;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;position:relative;animation:fadeIn .2s ease-out}.trade-modal h2{color:var(--accent-gold);text-align:center;margin-bottom:1rem}.close-btn{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:50%;color:var(--text-primary);font-size:1.5rem;display:flex;align-items:center;justify-content:center;line-height:1}.close-btn:hover{background:var(--player-red);border-color:var(--player-red)}.trade-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}.trade-tabs button{flex:1;padding:.7rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:.95rem}.trade-tabs button.active{border-color:var(--accent-gold);color:var(--accent-gold);background:#d4a9421a}.trade-builder{display:flex;flex-direction:column;gap:1.5rem}.trade-section h4{color:var(--text-secondary);margin-bottom:.5rem;font-size:.9rem}.resource-selectors{display:flex;flex-wrap:wrap;gap:.5rem}.resource-selector{display:flex;align-items:center;gap:.3rem;background:var(--bg-tertiary);padding:.4rem .6rem;border-radius:8px;border:1px solid var(--border-color)}.resource-selector .icon{font-size:1.2rem}.selector-controls{display:flex;align-items:center;gap:.3rem}.selector-controls button{width:24px;height:24px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:1rem;display:flex;align-items:center;justify-content:center}.selector-controls button:hover:not(:disabled){border-color:var(--accent-gold)}.selector-controls .amount{width:24px;text-align:center;font-family:Cinzel,serif;font-weight:600}.resource-selector .available{font-size:.75rem;color:var(--text-muted)}.propose-btn{width:100%;margin-top:1.5rem;padding:1rem;background:linear-gradient(135deg,var(--accent-blue),#3a6a8a);border:none;border-radius:8px;color:#fff;font-size:1.1rem;font-weight:600}.propose-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #457b9d66}.trade-display{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}.trade-side{flex:1;background:var(--bg-tertiary);padding:1rem;border-radius:8px}.trade-side h4{color:var(--text-muted);font-size:.8rem;margin-bottom:.5rem}.resource-list{display:flex;flex-wrap:wrap;gap:.5rem}.resource-item{display:flex;align-items:center;gap:.3rem;background:var(--bg-primary);padding:.4rem .6rem;border-radius:6px}.resource-item .amount{font-family:Cinzel,serif;font-weight:600}.trade-arrow{font-size:1.5rem;color:var(--text-muted)}.trade-actions{display:flex;gap:1rem}.accept-btn,.decline-btn{flex:1;padding:.8rem;border:none;border-radius:8px;font-size:1rem;font-weight:600}.accept-btn{background:var(--accent-green);color:#fff}.decline-btn{background:var(--player-red);color:#fff}.pending-trade{background:#d4a94226;border:1px solid var(--accent-gold);border-radius:8px;padding:1rem;text-align:center}.pending-trade p{color:var(--accent-gold);margin-bottom:.5rem}.pending-trade button{padding:.5rem 1rem;background:var(--player-red);border:none;border-radius:6px;color:#fff}.bank-trade{text-align:center}.bank-info{color:var(--text-muted);margin-bottom:1.5rem}.bank-trade-builder{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.bank-section{flex:1}.bank-section h4{color:var(--text-secondary);font-size:.85rem;margin-bottom:.5rem}.bank-options{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.bank-resource{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;min-width:50px}.bank-resource:hover:not(:disabled){border-color:var(--text-muted)}.bank-resource.selected{border-color:var(--accent-gold);background:#d4a94226}.bank-resource .icon{font-size:1.3rem}.bank-resource .count{font-size:.75rem;color:var(--text-muted)}.bank-arrow{font-size:1.5rem;color:var(--text-muted)}.bank-trade-btn{padding:.8rem 2rem;background:linear-gradient(135deg,var(--accent-gold),var(--accent-copper));border:none;border-radius:8px;color:var(--bg-primary);font-size:1rem;font-weight:600}.bank-trade-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #d4a94266}.my-ports{background:#2a9d8f26;border:1px solid var(--accent-green);border-radius:8px;padding:.75rem;margin-bottom:1rem}.my-ports h4{color:var(--accent-green);font-size:.85rem;margin-bottom:.5rem}.port-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.port-badge{background:var(--bg-tertiary);padding:.3rem .6rem;border-radius:12px;font-size:.8rem;color:var(--text-secondary);border:1px solid var(--border-color)}.bank-resource .ratio{font-size:.65rem;color:var(--text-muted);background:var(--bg-primary);padding:.1rem .3rem;border-radius:4px}.bank-resource.has-port .ratio{color:var(--accent-green);background:#2a9d8f33}.bank-resource.has-port{border-color:var(--accent-green)}.dice-display{position:absolute;top:20px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border:2px solid var(--border-color);border-radius:16px;padding:1rem 1.5rem;text-align:center;box-shadow:0 8px 30px #0006;z-index:10}.dice-display.seven{border-color:var(--player-red);box-shadow:0 8px 30px #e639464d}.dice-container{display:flex;gap:.5rem;justify-content:center;margin-bottom:.5rem}.die{font-size:2.5rem;color:var(--text-primary);text-shadow:0 2px 4px rgba(0,0,0,.3)}.dice-display.animating .die{animation:diceRoll .5s ease-out}@keyframes diceRoll{0%{transform:rotateX(0) rotateY(0);opacity:0}25%{transform:rotateX(90deg) rotateY(90deg)}50%{transform:rotateX(180deg) rotateY(180deg)}75%{transform:rotateX(270deg) rotateY(270deg)}to{transform:rotateX(360deg) rotateY(360deg);opacity:1}}.dice-total{font-family:Cinzel,serif;font-size:1.8rem;font-weight:700;color:var(--accent-gold);display:flex;align-items:center;justify-content:center;gap:.5rem}.dice-display.seven .dice-total{color:var(--player-red)}.robber-alert{font-size:1rem;animation:pulse 1s ease-in-out infinite}.chat-panel{position:fixed;bottom:80px;right:20px;width:320px;max-height:400px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 8px 30px #0006;z-index:50;animation:fadeIn .2s ease-out}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--border-color)}.chat-header h3{color:var(--text-primary);font-size:1rem;margin:0}.close-chat{width:28px;height:28px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:50%;color:var(--text-primary);font-size:1.2rem;display:flex;align-items:center;justify-content:center}.close-chat:hover{background:var(--player-red);border-color:var(--player-red)}.chat-messages{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem;min-height:200px;max-height:280px}.no-messages{color:var(--text-muted);text-align:center;padding:2rem;font-style:italic}.chat-message{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem;font-size:.9rem}.message-author{font-weight:600}.message-text{color:var(--text-primary);word-break:break-word}.message-time{color:var(--text-muted);font-size:.7rem;margin-left:auto}.chat-input{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--border-color)}.chat-input input{flex:1;padding:.6rem .8rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:.9rem}.chat-input input:focus{outline:none;border-color:var(--accent-blue)}.chat-input button{padding:.6rem 1rem;background:var(--accent-blue);border:none;border-radius:8px;color:#fff;font-size:.9rem}.chat-input button:hover{background:#3a6a8a}.dev-card-modal{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:16px;padding:1.5rem;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;position:relative;animation:fadeIn .2s ease-out}.dev-card-modal h2{color:var(--accent-gold);text-align:center;margin-bottom:1.5rem}.no-cards{text-align:center;color:var(--text-muted);padding:2rem}.card-list{display:flex;flex-direction:column;gap:1rem}.card-list.small{flex-direction:row;flex-wrap:wrap}.dev-card{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:12px;padding:1rem;transition:all .2s ease}.dev-card.playable{cursor:pointer}.dev-card.playable:hover{border-color:var(--accent-gold);transform:translateY(-2px)}.dev-card.new{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;opacity:.7}.card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.card-icon{font-size:1.5rem}.card-name{font-family:Cinzel,serif;font-weight:600;color:var(--text-primary);flex:1}.card-count{font-family:Cinzel,serif;font-size:1.1rem;color:var(--accent-gold)}.card-description{color:var(--text-secondary);font-size:.9rem;margin-bottom:.8rem}.play-card-btn{width:100%;padding:.6rem;background:linear-gradient(135deg,var(--accent-gold),var(--accent-copper));border:none;border-radius:6px;color:var(--bg-primary);font-weight:600;font-size:.95rem}.play-card-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 10px #d4a94266}.play-card-btn:disabled{background:var(--border-color);color:var(--text-muted)}.new-cards{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border-color)}.new-cards h4{color:var(--text-muted);font-size:.85rem;margin-bottom:.8rem}.year-of-plenty-picker,.monopoly-picker{background:#d4a9421a;border:1px solid var(--accent-gold);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.year-of-plenty-picker h3,.monopoly-picker h3{color:var(--accent-gold);font-size:1.1rem;text-align:center;margin-bottom:1rem}.resource-buttons{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.resource-pick-btn{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.8rem 1rem;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;min-width:70px;transition:all .2s ease}.resource-pick-btn:hover{border-color:var(--accent-gold);transform:translateY(-2px)}.resource-pick-btn.selected{border-color:var(--accent-gold);background:#d4a94233}.resource-pick-btn .icon{font-size:1.5rem}.resource-pick-btn .name{font-size:.75rem;color:var(--text-secondary);text-transform:capitalize}.monopoly-actions{display:flex;gap:1rem;margin-top:1rem;justify-content:center}.monopoly-actions button{padding:.6rem 1.5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-tertiary);color:var(--text-primary)}.monopoly-actions button.confirm{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--bg-primary);font-weight:600}.discard-modal{background:var(--bg-secondary);border:2px solid var(--player-red);border-radius:16px;padding:1.5rem;width:90%;max-width:400px;text-align:center;animation:fadeIn .2s ease-out}.discard-modal h2{color:var(--player-red);margin-bottom:.5rem}.discard-info{color:var(--text-secondary);margin-bottom:1.5rem}.discard-info strong{color:var(--accent-gold)}.discard-progress{height:24px;background:var(--bg-tertiary);border-radius:12px;overflow:hidden;position:relative;margin-bottom:1.5rem}.progress-bar{height:100%;background:linear-gradient(90deg,var(--player-red),var(--accent-copper));border-radius:12px;transition:width .3s ease}.progress-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:Cinzel,serif;font-weight:600;color:var(--text-primary);text-shadow:0 1px 2px rgba(0,0,0,.5)}.resource-discard-list{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.5rem}.resource-discard-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;background:var(--bg-tertiary);border-radius:8px}.resource-discard-row .resource-icon{font-size:1.3rem}.resource-discard-row .resource-name{flex:1;text-align:left;text-transform:capitalize;color:var(--text-primary)}.resource-discard-row .resource-available{color:var(--text-muted);font-size:.85rem}.discard-controls{display:flex;align-items:center;gap:.3rem}.discard-controls button{width:28px;height:28px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:1.1rem;display:flex;align-items:center;justify-content:center}.discard-controls button:hover:not(:disabled){border-color:var(--player-red);background:#e6394633}.discard-amount{width:28px;text-align:center;font-family:Cinzel,serif;font-weight:600;color:var(--player-red)}.confirm-discard{width:100%;padding:1rem;background:linear-gradient(135deg,var(--player-red),#b82e3b);border:none;border-radius:8px;color:#fff;font-size:1.1rem;font-weight:600}.confirm-discard:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #e6394666}.confirm-discard:disabled{opacity:.5;cursor:not-allowed}.card-reveal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:2000;cursor:pointer;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.card-reveal-container{display:flex;flex-direction:column;align-items:center;gap:2rem}.card-reveal{width:280px;height:400px;perspective:1000px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);cursor:default}.card-reveal.animating{animation:cardEntrance .5s ease-out}@keyframes cardEntrance{0%{transform:scale(.5) translateY(-100px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.card-reveal.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;box-shadow:0 20px 60px #00000080,0 0 30px #ffd7004d}.card-back{background:linear-gradient(135deg,#1a237e,#283593,#3949ab);display:flex;justify-content:center;align-items:center}.card-back-design{width:90%;height:90%;border:3px solid rgba(255,215,0,.5);border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:repeating-linear-gradient(45deg,rgba(255,215,0,.05),rgba(255,215,0,.05) 10px,transparent 10px,transparent 20px)}.card-back-pattern{width:100px;height:100px;border:3px solid rgba(255,215,0,.6);border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:1rem;background:#0000004d}.card-back-icon{font-size:3rem}.card-back-text{color:#ffd700cc;font-family:Cinzel,serif;font-size:1rem;text-transform:uppercase;letter-spacing:2px}.card-front{transform:rotateY(180deg);display:flex;justify-content:center;align-items:center;padding:8px}.card-border{width:100%;height:100%;border:3px solid rgba(255,255,255,.3);border-radius:12px;display:flex;flex-direction:column;background:#0003;overflow:hidden}.card-header{padding:1rem;text-align:center;border-bottom:2px solid rgba(255,255,255,.2);background:#0003}.card-icon-large{font-size:2rem;display:block;margin-bottom:.25rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.card-title{margin:0;font-family:Cinzel,serif;font-size:1.4rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:2px}.card-body{flex:1;display:flex;flex-direction:column;padding:1rem}.card-art{flex:1;display:flex;justify-content:center;align-items:center;background:#ffffff1a;border-radius:8px;margin-bottom:1rem}.card-art-icon{font-size:4rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:iconPulse 2s ease-in-out infinite}@keyframes iconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.card-description{font-size:.85rem;color:#fffffff2;line-height:1.4;text-align:center;margin:0;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.card-footer{padding:.75rem;text-align:center;border-top:2px solid rgba(255,255,255,.2);background:#0003}.card-type{font-size:.7rem;color:#fff9;text-transform:uppercase;letter-spacing:3px}.card-reveal-hint{color:#fff9;font-size:.9rem;animation:pulseHint 1.5s ease-in-out infinite}@keyframes pulseHint{0%,to{opacity:.6}50%{opacity:1}}.card-reveal.flipped .card-front:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);animation:shimmer 2s ease-in-out infinite;pointer-events:none;border-radius:16px}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.info-popup{position:fixed;z-index:3000;background:linear-gradient(135deg,#1a1f2e,#252d3d);border:2px solid var(--accent-gold);border-radius:12px;padding:0;min-width:240px;max-width:300px;box-shadow:0 10px 40px #0009,0 0 20px #d4a94233;animation:popupAppear .2s ease-out;overflow:hidden}@keyframes popupAppear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.info-popup-header{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;background:linear-gradient(135deg,#d4a94226,#c45a2c26);border-bottom:1px solid var(--border-color)}.info-popup-icon{font-size:1.5rem}.info-popup-title{font-weight:700;color:var(--accent-gold);font-size:1.1rem;text-shadow:0 1px 3px rgba(0,0,0,.3)}.info-popup-body{padding:1rem}.info-popup-description{color:var(--text-primary);font-size:.9rem;line-height:1.5;margin:0 0 .8rem}.info-popup-cost,.info-popup-detail,.info-popup-number{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-secondary);margin-top:.4rem;padding:.4rem .6rem;background:#0003;border-radius:6px}.cost-label,.detail-label{color:var(--text-muted);font-weight:600;min-width:60px}.info-popup-cost{color:var(--accent-copper)}.info-popup-number .probability{color:var(--accent-gold);font-size:.8rem;margin-left:auto}.info-popup-hint{padding:.5rem 1rem;background:#0000004d;color:var(--text-muted);font-size:.7rem;text-align:center;border-top:1px solid var(--border-color)}.has-info-popup{cursor:context-menu}.has-info-popup:hover:after{content:"ℹ️";position:absolute;top:-5px;right:-5px;font-size:.6rem;opacity:.7}.confetti-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;top:-20px;opacity:0;animation:confetti-fall linear forwards}.confetti-piece.square{border-radius:2px}.confetti-piece.circle{border-radius:50%}@keyframes confetti-fall{0%{opacity:1;top:-5%;transform:translate(0) rotate(0)}25%{opacity:1;transform:translate(30px) rotate(90deg)}50%{opacity:1;transform:translate(-20px) rotate(180deg)}75%{opacity:.8;transform:translate(40px) rotate(270deg)}to{opacity:0;top:105%;transform:translate(-10px) rotate(360deg)}}.winner-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:auto;animation:winner-appear .5s ease-out forwards}@keyframes winner-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}50%{transform:translate(-50%,-50%) scale(1.1)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.winner-trophy{font-size:5rem;animation:trophy-bounce 1s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(212,169,66,.8))}@keyframes trophy-bounce{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-15px) rotate(5deg)}}.winner-text{font-size:3.5rem;font-family:Cinzel,serif;color:var(--accent-gold);text-shadow:0 0 20px rgba(212,169,66,.8),0 4px 15px rgba(0,0,0,.5);margin:1rem 0;letter-spacing:.1em;animation:text-glow 2s ease-in-out infinite}@keyframes text-glow{0%,to{text-shadow:0 0 20px rgba(212,169,66,.8),0 4px 15px rgba(0,0,0,.5)}50%{text-shadow:0 0 40px rgba(212,169,66,1),0 0 60px rgba(212,169,66,.6),0 4px 15px rgba(0,0,0,.5)}}.winner-subtitle{font-size:1.5rem;color:var(--text-secondary);margin-bottom:1.5rem}.celebration-emojis{font-size:2.5rem;animation:emoji-wave 1.5s ease-in-out infinite}@keyframes emoji-wave{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.confetti-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;pointer-events:auto}.back-to-lobby-btn{margin-top:2rem;padding:1rem 2rem;font-size:1.2rem;font-weight:600;background:linear-gradient(135deg,var(--accent-gold),var(--accent-copper));border:none;border-radius:12px;color:var(--bg-primary);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #d4a94266}.back-to-lobby-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px #d4a94299}.back-to-lobby-btn:active{transform:translateY(0) scale(1)}.game-board{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgba(42,157,143,.05) 0%,transparent 60%),var(--bg-primary)}.game-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;background:linear-gradient(180deg,var(--bg-secondary),transparent);border-bottom:1px solid var(--border-color);flex-shrink:0}.game-code-display{display:flex;align-items:center;gap:.5rem}.game-code-display .label{color:var(--text-muted);font-size:.9rem}.game-code-display .code{font-family:Cinzel,serif;font-weight:600;font-size:1.2rem;color:var(--accent-gold);letter-spacing:.2em;background:var(--bg-tertiary);padding:.3rem .8rem;border-radius:6px;border:1px solid var(--border-color)}.turn-indicator{display:flex;align-items:center;gap:1rem}.current-player-badge{padding:.4rem 1rem;border-radius:20px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}.status-message{color:var(--text-secondary);font-size:1.1rem}.leave-btn{padding:.5rem 1rem;background:transparent;border:1px solid var(--player-red);color:var(--player-red);border-radius:6px;font-size:.9rem}.leave-btn:hover{background:var(--player-red);color:#fff}.game-main{flex:1;display:flex;padding:.5rem;gap:.5rem;overflow:hidden;min-height:0}.sidebar{width:260px;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;flex-shrink:0}.sidebar h3{color:var(--accent-gold);font-size:1rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}.left-sidebar{padding-right:1rem}.right-sidebar{padding-left:1rem}.board-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-width:0}.start-game-btn{padding:1rem;background:linear-gradient(135deg,var(--accent-green),#3a7a30);border:none;border-radius:8px;color:#fff;font-size:1.1rem;font-weight:600;margin-top:1rem}.start-game-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #4a8b3c66}.my-resources-bar{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:.5rem 1rem;background:linear-gradient(0deg,var(--bg-secondary),transparent);border-top:1px solid var(--border-color);flex-shrink:0}.dev-cards-summary{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-tertiary);border-radius:8px;border:1px solid var(--border-color);cursor:pointer;transition:all .2s}.dev-cards-summary:hover{border-color:var(--accent-gold)}.dev-cards-summary .label{color:var(--text-muted);font-size:.9rem}.dev-cards-summary .count{font-family:Cinzel,serif;font-weight:600;color:var(--text-primary)}.dev-cards-summary .new-badge{background:var(--accent-gold);color:var(--bg-primary);padding:.2rem .5rem;border-radius:10px;font-size:.75rem;font-weight:600}.chat-toggle{padding:.8rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;margin-top:auto}.chat-toggle{position:relative}.chat-toggle:hover{border-color:var(--accent-blue);background:#457b9d33}.chat-notification-dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;background:#e63946;color:#fff;font-size:.7rem;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:2px;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100}.steal-modal{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:16px;padding:2rem;text-align:center;animation:fadeIn .2s ease-out}.steal-modal h3{color:var(--accent-gold);margin-bottom:1.5rem}.steal-options{display:flex;flex-direction:column;gap:.5rem}.steal-btn{padding:.8rem 1.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.steal-btn:hover:not(:disabled){border-color:var(--accent-gold);background:#d4a9421a}.steal-btn .no-cards{color:var(--text-muted);font-size:.85rem}.steal-ok-btn{margin-top:1rem;padding:.8rem 2rem;background:var(--accent-gold);border:none;border-radius:8px;color:var(--bg-primary);font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease}.steal-ok-btn:hover{background:#f4c430;transform:scale(1.05)}.waiting-badge{background:var(--bg-tertiary)!important;border:1px solid var(--border-color)}.waiting-controls{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.shuffle-btn{padding:.8rem 1rem;background:var(--bg-tertiary);border:1px solid var(--accent-blue);border-radius:8px;color:var(--accent-blue);font-size:1rem}.shuffle-btn:hover{background:#457b9d33}.waiting-text{color:var(--text-muted);text-align:center;padding:1rem;font-style:italic}.resource-gain-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border:2px solid var(--accent-gold);border-radius:16px;padding:1.5rem 2rem;text-align:center;z-index:10000;animation:resourcePopup .3s ease-out;box-shadow:0 10px 40px #00000080}@keyframes resourcePopup{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.resource-gain-title{font-family:Cinzel,serif;font-size:1.2rem;color:var(--accent-gold);margin-bottom:.5rem}.resource-gain-content{font-size:1.5rem;color:var(--text-primary)}.trade-notification-banner{position:fixed;top:80px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#1a472a,#2d5a27);border:2px solid var(--accent-gold);border-radius:12px;padding:.8rem 1.5rem;display:flex;align-items:center;gap:1rem;cursor:pointer;z-index:1000;box-shadow:0 8px 32px #0006,0 0 20px #d4a9424d;animation:tradeBannerPulse 2s ease-in-out infinite,tradeBannerSlide .5s ease-out}@keyframes tradeBannerSlide{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes tradeBannerPulse{0%,to{box-shadow:0 8px 32px #0006,0 0 20px #d4a9424d}50%{box-shadow:0 8px 32px #0006,0 0 30px #d4a94280}}.trade-notification-banner:hover{transform:translate(-50%) scale(1.02)}.trade-notification-banner .trade-icon{font-size:1.5rem;animation:tradeIconBounce 1s ease-in-out infinite}@keyframes tradeIconBounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.trade-notification-banner .trade-text{color:#fff;font-size:.95rem}.trade-notification-banner .trade-text strong{color:var(--accent-gold)}.trade-notification-banner .view-trade-btn{background:var(--accent-gold);color:var(--bg-primary);border:none;padding:.4rem 1rem;border-radius:6px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s ease}.trade-notification-banner .view-trade-btn:hover{background:#f4c430;transform:scale(1.05)}.trade-notification-banner .dismiss-trade-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#ffffffb3;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;transition:all .2s ease;padding:0;margin-left:.5rem}.trade-notification-banner .dismiss-trade-btn:hover{background:#fff3;border-color:#ffffff80;color:#fff}.robber-notification-banner{position:fixed;top:80px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#4a1a1a,#6b2b2b);border:2px solid #ff6b6b;border-radius:12px;padding:.8rem 1.5rem;display:flex;align-items:center;gap:1rem;z-index:1000;box-shadow:0 8px 32px #0006,0 0 20px #ff6b6b4d;animation:robberBannerPulse 1s ease-in-out infinite,tradeBannerSlide .5s ease-out}@keyframes robberBannerPulse{0%,to{box-shadow:0 8px 32px #0006,0 0 20px #ff6b6b4d;border-color:#ff6b6b}50%{box-shadow:0 8px 32px #0006,0 0 30px #ff6b6b99;border-color:#f99}}.robber-notification-banner .robber-icon{font-size:1.8rem;animation:robberIconShake .5s ease-in-out infinite}@keyframes robberIconShake{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.robber-notification-banner .robber-text{color:#fff;font-size:1rem}.robber-notification-banner .robber-text strong{color:#ff6b6b}.discard-notification-banner{position:fixed;top:80px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#4a3a1a,#6b5a2b);border:2px solid #f0ad4e;border-radius:12px;padding:.8rem 1.5rem;display:flex;align-items:center;gap:1rem;z-index:1000;box-shadow:0 8px 32px #0006,0 0 20px #f0ad4e4d;animation:tradeBannerSlide .5s ease-out}.discard-notification-banner .discard-icon{font-size:1.5rem;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.discard-notification-banner .discard-text{color:#fff;font-size:.95rem}.special-build-banner{position:fixed;top:80px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#1a4a1a,#2b6b2b);border:2px solid #6a994e;border-radius:12px;padding:.8rem 1.5rem;display:flex;align-items:center;gap:1rem;z-index:1000;box-shadow:0 8px 32px #0006,0 0 20px #6a994e4d;animation:specialBuildPulse 1.5s ease-in-out infinite,tradeBannerSlide .5s ease-out}@keyframes specialBuildPulse{0%,to{box-shadow:0 8px 32px #0006,0 0 20px #6a994e4d;border-color:#6a994e}50%{box-shadow:0 8px 32px #0006,0 0 30px #6a994e99;border-color:#8fb974}}.special-build-banner .special-build-icon{font-size:1.8rem;animation:specialBuildBounce 1s ease-in-out infinite}@keyframes specialBuildBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.special-build-banner .special-build-text{color:#fff;font-size:.95rem;max-width:400px}.special-build-banner .special-build-text strong{color:#8fb974}.special-build-done-btn{background:linear-gradient(135deg,#6a994e,#4a7c3e);border:none;color:#fff;padding:.5rem 1rem;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.special-build-done-btn:hover{background:linear-gradient(135deg,#8fb974,#6a994e);transform:scale(1.05)}.app{min-height:100vh;display:flex;flex-direction:column}.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)}.loading-content{text-align:center}.loading-content h1{font-size:4rem;color:var(--accent-gold);text-shadow:0 0 20px rgba(212,169,66,.5);margin-bottom:1rem;letter-spacing:.3em}.loading-content p{color:var(--text-secondary);font-size:1.2rem;margin-bottom:2rem}.loading-spinner{width:50px;height:50px;border:3px solid var(--border-color);border-top-color:var(--accent-gold);border-radius:50%;margin:0 auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.notifications{position:fixed;top:20px;right:20px;z-index:999999;display:flex;flex-direction:column;gap:10px}.notification{background:linear-gradient(135deg,#2a2420,#3a3430);border:2px solid #d4a942;border-radius:8px;padding:12px 20px;color:#f4e4c8;font-weight:500;box-shadow:0 4px 20px #00000080;max-width:320px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}.server-full .loading-content h2{color:#ff6b6b;font-size:1.8rem;margin-bottom:.5rem}.server-full-icon{font-size:4rem;margin-bottom:1rem;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.server-full-hint{color:var(--text-muted);font-size:1rem;margin-bottom:2rem}.retry-btn{background:linear-gradient(135deg,var(--accent-gold),var(--accent-copper));border:none;border-radius:8px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:var(--bg-primary);cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #d4a9424d}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #d4a94266}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #1a1612;--bg-secondary: #2a2420;--bg-tertiary: #3a3430;--text-primary: #f4e4c8;--text-secondary: #c9b896;--text-muted: #8a7a64;--accent-gold: #d4a942;--accent-copper: #c45a2c;--accent-green: #4a8b3c;--accent-blue: #4a7bb5;--border-color: #5a4a3a;--brick: #c45a2c;--lumber: #2d5a27;--wool: #90c26a;--grain: #d4a942;--ore: #6b6b6b;--desert: #e8d5a3;--player-red: #e63946;--player-blue: #457b9d;--player-orange: #f4a261;--player-teal: #2a9d8f}body{font-family:Crimson Text,Georgia,serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:Cinzel,serif;font-weight:600}button{font-family:Cinzel,serif;cursor:pointer;transition:all .2s ease}button:disabled{opacity:.5;cursor:not-allowed}input{font-family:Crimson Text,Georgia,serif}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--accent-gold)}50%{box-shadow:0 0 20px var(--accent-gold),0 0 30px var(--accent-gold)}}.fade-in{animation:fadeIn .3s ease-out}.pulse{animation:pulse 2s ease-in-out infinite}.glow{animation:glow 2s ease-in-out infinite}