:root{--bg-primary: #06061a;--bg-secondary: #0d0d2b;--bg-surface: #13133a;--bg-card: #1a1a4e;--bg-card-hover: #222266;--bg-overlay: rgba(6, 6, 26, .85);--color-primary: #6366f1;--color-primary-glow: rgba(99, 102, 241, .4);--color-secondary: #8b5cf6;--color-secondary-glow: rgba(139, 92, 246, .4);--color-accent: #06d6d6;--color-accent-glow: rgba(6, 214, 214, .3);--color-success: #10b981;--color-danger: #ef4444;--color-warning: #f59e0b;--color-info: #3b82f6;--color-player1: #3b82f6;--color-player1-glow: rgba(59, 130, 246, .4);--color-player2: #ef4444;--color-player2-glow: rgba(239, 68, 68, .4);--text-primary: #f0f0ff;--text-secondary: #a0a0cc;--text-muted: #6060a0;--text-accent: #c0c0ff;--border-color: rgba(99, 102, 241, .2);--border-glow: rgba(99, 102, 241, .5);--font-main: "Inter", system-ui, sans-serif;--font-display: "Orbitron", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}#app{width:100vw;height:100vh;overflow:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 50%,rgba(99,102,241,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(139,92,246,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(6,214,214,.04) 0%,transparent 50%);pointer-events:none;z-index:0}body:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(99,102,241,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}#particles-container{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;overflow:hidden}#notifications-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:8px;max-width:400px}.notification{padding:12px 20px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);font-size:.9rem;animation:notifSlideIn .3s ease,notifFadeOut .5s ease 3s forwards;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 20px #0000004d}.notification.attack{border-color:var(--color-danger);background:#ef444426}.notification.defense{border-color:var(--color-success);background:#10b98126}.notification.build{border-color:var(--color-primary);background:#6366f126}.notification.bonus{border-color:var(--color-warning);background:#f59e0b26}.notification.info{border-color:var(--color-info);background:#3b82f626}@keyframes notifSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes notifFadeOut{to{opacity:0;transform:translateY(-10px)}}#modal-container{position:fixed;top:0;left:0;right:0;bottom:0;display:none;justify-content:center;align-items:center;z-index:10001;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#modal-container.active{display:flex}.modal-content{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:40px;max-width:500px;width:90%;text-align:center;animation:modalPop .4s cubic-bezier(.16,1,.3,1)}@keyframes modalPop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.screen{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;z-index:1;animation:screenFadeIn .5s ease}.screen.exiting{animation:screenFadeOut .3s ease forwards}@keyframes screenFadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes screenFadeOut{to{opacity:0;transform:scale(1.02)}}.home-screen{justify-content:center;align-items:center;gap:10px;padding:40px;text-align:center;overflow-y:auto}.home-logo{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:900;background:linear-gradient(135deg,var(--color-primary),var(--color-accent),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;text-shadow:none;filter:drop-shadow(0 0 30px var(--color-primary-glow));animation:logoGlow 3s ease-in-out infinite alternate}@keyframes logoGlow{0%{filter:drop-shadow(0 0 20px var(--color-primary-glow))}to{filter:drop-shadow(0 0 40px var(--color-secondary-glow))}}.home-flag{font-size:clamp(2rem,4vw,3.5rem);animation:flagWave 2s ease-in-out infinite}@keyframes flagWave{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.home-subtitle{font-size:clamp(.9rem,2vw,1.3rem);color:var(--text-secondary);font-weight:300;letter-spacing:2px;text-transform:uppercase;max-width:600px}.home-buttons{display:flex;flex-direction:column;gap:14px;margin-top:20px;width:100%;max-width:380px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border:none;border-radius:var(--radius-lg);font-family:var(--font-main);font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;right:0;bottom:0;width:300%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;box-shadow:0 4px 20px var(--color-primary-glow)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--color-primary-glow)}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-glow);transform:translateY(-2px)}.btn-accent{background:linear-gradient(135deg,var(--color-accent),#0891b2);color:#fff;box-shadow:0 4px 20px var(--color-accent-glow)}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--color-accent-glow)}.btn-danger{background:linear-gradient(135deg,var(--color-danger),#dc2626);color:#fff}.btn-success{background:linear-gradient(135deg,var(--color-success),#059669);color:#fff}.btn-sm{padding:8px 16px;font-size:.8rem}.btn-lg{padding:20px 40px;font-size:1.1rem}.btn:active{transform:translateY(1px) scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.home-vs-display{display:flex;align-items:center;gap:20px;margin:10px 0;font-family:var(--font-display)}.home-vs-city{padding:10px 24px;background:var(--bg-card);border-radius:var(--radius-md);font-size:.9rem;font-weight:600;border:1px solid var(--border-color);animation:cityFloat 3s ease-in-out infinite}.home-vs-city:nth-child(1){color:var(--color-player1);border-color:var(--color-player1-glow);animation-delay:0s}.home-vs-city:nth-child(3){color:var(--color-player2);border-color:var(--color-player2-glow);animation-delay:1.5s}.home-vs-text{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,var(--color-primary),var(--color-danger));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes cityFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.join-input-group{display:flex;gap:10px;margin-top:20px}.input{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:14px 18px;color:var(--text-primary);font-family:var(--font-main);font-size:1rem;width:100%;transition:all var(--transition-normal);outline:none}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.input::placeholder{color:var(--text-muted)}.input-code{font-family:var(--font-display);font-size:1.5rem;text-align:center;letter-spacing:8px;text-transform:uppercase}.lobby-screen{justify-content:center;align-items:center;gap:30px;padding:40px;text-align:center}.lobby-code-display{background:var(--bg-card);border:2px solid var(--color-primary);border-radius:var(--radius-xl);padding:30px 50px;position:relative}.lobby-code-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px}.lobby-code{font-family:var(--font-display);font-size:3rem;font-weight:900;letter-spacing:12px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lobby-link{font-size:.8rem;color:var(--text-muted);margin-top:10px;word-break:break-all}.lobby-players{display:flex;flex-direction:column;gap:12px}.lobby-player{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--bg-card);border-radius:var(--radius-md);font-weight:600}.lobby-player .dot{width:12px;height:12px;border-radius:50%;background:var(--text-muted)}.lobby-player .dot.connected{background:var(--color-success);box-shadow:0 0 10px var(--color-success);animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}.lobby-player .dot.waiting{animation:blink 1.5s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.commune-search-container{width:100%;max-width:500px;position:relative}.commune-search-input{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:16px 20px 16px 50px;color:var(--text-primary);font-family:var(--font-main);font-size:1.1rem;width:100%;transition:all var(--transition-normal);outline:none}.commune-search-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-glow)}.commune-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:1.2rem;pointer-events:none}.commune-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);max-height:300px;overflow-y:auto;z-index:100;display:none}.commune-results.visible{display:block;animation:dropDown .2s ease}@keyframes dropDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.commune-result-item{padding:14px 20px;cursor:pointer;transition:all var(--transition-fast);border-bottom:1px solid rgba(99,102,241,.1);display:flex;justify-content:space-between;align-items:center}.commune-result-item:hover{background:var(--bg-card)}.commune-result-item:last-child{border-bottom:none}.commune-result-name{font-weight:700;font-size:1rem}.commune-result-info{font-size:.8rem;color:var(--text-secondary)}.commune-result-pop{font-size:.75rem;color:var(--text-muted);font-family:var(--font-display)}.commune-selected{background:var(--bg-card);border:2px solid var(--color-success);border-radius:var(--radius-lg);padding:20px;text-align:center;animation:lockIn .5s cubic-bezier(.16,1,.3,1)}.commune-selected h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:4px}.commune-selected p{color:var(--text-secondary);font-size:.85rem}@keyframes lockIn{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.countdown-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#06061af2;z-index:10002}.countdown-number{font-family:var(--font-display);font-size:10rem;font-weight:900;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:countPulse .8s ease}.countdown-battle{font-family:var(--font-display);font-size:4rem;font-weight:900;color:var(--color-danger);text-shadow:0 0 40px rgba(239,68,68,.5);animation:battleShake .5s ease}@keyframes countPulse{0%{transform:scale(2);opacity:0}50%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes battleShake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.reveal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:#06061af2;z-index:10002}.reveal-container{display:flex;align-items:center;gap:40px}.reveal-city{text-align:center;animation:revealSlideIn .6s cubic-bezier(.16,1,.3,1)}.reveal-city:nth-child(3){animation-delay:.3s;animation-fill-mode:both}.reveal-city-name{font-family:var(--font-display);font-size:2.5rem;font-weight:900}.reveal-city-info{color:var(--text-secondary);font-size:.9rem;margin-top:4px}.reveal-vs{font-family:var(--font-display);font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--color-danger),var(--color-warning));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vsPulse 1s ease-in-out infinite alternate}@keyframes revealSlideIn{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes vsPulse{0%{transform:scale(1)}to{transform:scale(1.15)}}.battle-screen{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:280px 1fr 280px;height:100vh;overflow:hidden;gap:0}.battle-topbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:10}.battle-score-left,.battle-score-right{display:flex;align-items:center;gap:12px;flex:1}.battle-score-right{justify-content:flex-end;text-align:right}.battle-score-name{font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:1px}.battle-score-left .battle-score-name{color:var(--color-player1)}.battle-score-right .battle-score-name{color:var(--color-player2)}.battle-score-bar{width:200px;height:8px;background:var(--bg-primary);border-radius:4px;overflow:hidden;position:relative}.battle-score-fill{height:100%;border-radius:4px;transition:width .5s ease}.battle-score-left .battle-score-fill{background:linear-gradient(90deg,var(--color-player1),#60a5fa)}.battle-score-right .battle-score-fill{background:linear-gradient(90deg,#f87171,var(--color-player2))}.battle-score-value{font-family:var(--font-display);font-size:1.3rem;font-weight:900}.battle-score-left .battle-score-value{color:var(--color-player1)}.battle-score-right .battle-score-value{color:var(--color-player2)}.battle-timer{display:flex;flex-direction:column;align-items:center;padding:4px 20px;min-width:100px}.battle-timer-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.battle-timer-value{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:var(--text-primary)}.battle-timer-value.warning{color:var(--color-warning);animation:timerPulse 1s infinite}.battle-timer-value.danger{color:var(--color-danger);animation:timerPulse .5s infinite}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.5}}.battle-left-panel{background:var(--bg-secondary);border-right:1px solid var(--border-color);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}.battle-right-panel{background:var(--bg-secondary);border-left:1px solid var(--border-color);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}.battle-center{display:flex;flex-direction:column;overflow:hidden;position:relative}.battle-map-area{flex:1;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.resource-panel{background:var(--bg-surface);border-radius:var(--radius-md);padding:10px}.resource-panel-title{font-family:var(--font-display);font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.resource-item{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg-card);font-size:.8rem}.resource-icon{font-size:.9rem;min-width:18px;text-align:center}.resource-value{font-family:var(--font-display);font-size:.75rem;font-weight:700;color:var(--text-accent)}.resource-rate{font-size:.6rem;color:var(--color-success)}.building-panel{background:var(--bg-surface);border-radius:var(--radius-md);padding:10px}.building-panel-title{font-family:var(--font-display);font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.building-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.building-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--text-primary);font-family:var(--font-main)}.building-btn:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--color-primary);transform:translateY(-1px)}.building-btn:disabled{opacity:.4;cursor:not-allowed}.building-btn .icon{font-size:1.3rem}.building-btn .name{font-size:.65rem;font-weight:600}.building-btn .cost{font-size:.6rem;color:var(--color-warning);font-family:var(--font-display)}.action-panel{background:var(--bg-surface);border-radius:var(--radius-md);padding:10px}.action-panel-title{font-family:var(--font-display);font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.action-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--text-primary);font-family:var(--font-main);position:relative;overflow:hidden}.action-btn:hover:not(:disabled){border-color:var(--color-danger);background:#ef44441a;transform:translateY(-1px)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn .icon{font-size:1.3rem}.action-btn .name{font-size:.65rem;font-weight:600}.action-btn .cost{font-size:.6rem;color:var(--color-accent);font-family:var(--font-display)}.action-cooldown-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;justify-content:center;align-items:center;font-family:var(--font-display);font-size:.9rem;color:var(--text-primary);border-radius:var(--radius-sm)}.cards-panel{background:var(--bg-surface);border-radius:var(--radius-md);padding:10px}.cards-panel-title{font-family:var(--font-display);font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.cards-hand{display:flex;gap:6px;flex-wrap:wrap}.card-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;background:linear-gradient(135deg,var(--bg-card),var(--bg-card-hover));border:1px solid var(--color-warning);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);flex:1;min-width:50px;color:var(--text-primary);font-family:var(--font-main)}.card-item:hover{transform:translateY(-4px);box-shadow:0 4px 15px #f59e0b4d}.card-item .icon{font-size:1.3rem}.card-item .name{font-size:.55rem;font-weight:600;text-align:center}.commentator{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:var(--bg-overlay);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:10px 24px;max-width:500px;text-align:center;font-size:.9rem;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5;animation:commentSlide .4s cubic-bezier(.16,1,.3,1);pointer-events:none}@keyframes commentSlide{0%{transform:translate(-50%) translateY(20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.france-map-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.france-map-svg{width:90%;height:90%;max-width:600px;max-height:600px}.france-map-svg path.france-outline{fill:var(--bg-card);stroke:var(--color-primary);stroke-width:1.5;opacity:.6}.city-marker{cursor:default;transition:all var(--transition-normal)}.city-marker circle{transition:all var(--transition-normal)}.city-marker.player1 circle{fill:var(--color-player1);filter:drop-shadow(0 0 8px var(--color-player1-glow))}.city-marker.player2 circle{fill:var(--color-player2);filter:drop-shadow(0 0 8px var(--color-player2-glow))}.city-marker text{fill:var(--text-primary);font-family:var(--font-display);font-size:8px;font-weight:700;text-anchor:middle}.attack-line{stroke:var(--color-danger);stroke-width:2;stroke-dasharray:6 4;animation:dashFlow .5s linear infinite;filter:drop-shadow(0 0 4px rgba(239,68,68,.5))}@keyframes dashFlow{to{stroke-dashoffset:-10}}.event-feed{position:absolute;top:10px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:5;pointer-events:none}.event-item{padding:6px 16px;background:var(--bg-overlay);border-radius:var(--radius-md);font-size:.8rem;font-weight:600;border:1px solid var(--border-color);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:eventPop .3s ease,eventFade .5s ease 2.5s forwards;white-space:nowrap}@keyframes eventPop{0%{transform:scale(.5) translateY(-10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes eventFade{to{opacity:0;transform:translateY(-20px)}}.floating-score{position:absolute;font-family:var(--font-display);font-size:1.2rem;font-weight:900;pointer-events:none;animation:floatUp 1s ease forwards;z-index:100}.floating-score.positive{color:var(--color-success)}.floating-score.negative{color:var(--color-danger)}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(.5)}}.battle-bottom{grid-column:1 / -1;display:none}.challenge-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:#06061ae6;z-index:10003;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.challenge-box{background:var(--bg-surface);border:2px solid var(--color-warning);border-radius:var(--radius-xl);padding:40px;max-width:550px;width:90%;text-align:center;animation:challengeIn .5s cubic-bezier(.16,1,.3,1)}.challenge-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--color-warning);margin-bottom:8px}.challenge-type{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px}.challenge-question{font-size:1.1rem;margin-bottom:20px;line-height:1.6}.challenge-options{display:flex;flex-direction:column;gap:8px}.challenge-option{padding:14px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);color:var(--text-primary);font-family:var(--font-main);font-size:1rem}.challenge-option:hover{background:var(--bg-card-hover);border-color:var(--color-primary)}.challenge-option.correct{background:#10b98133;border-color:var(--color-success)}.challenge-option.wrong{background:#ef444433;border-color:var(--color-danger)}.challenge-timer{width:100%;height:4px;background:var(--bg-primary);border-radius:2px;margin-top:16px;overflow:hidden}.challenge-timer-bar{height:100%;background:linear-gradient(90deg,var(--color-warning),var(--color-danger));border-radius:2px;transition:width .1s linear}.challenge-click-area{width:100%;height:200px;border:2px dashed var(--border-color);border-radius:var(--radius-lg);display:flex;justify-content:center;align-items:center;font-family:var(--font-display);font-size:3rem;cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.challenge-click-area:active{background:var(--bg-card);transform:scale(.98)}.challenge-input{font-family:var(--font-display);font-size:2rem;text-align:center;width:200px}@keyframes challengeIn{0%{transform:scale(.5) translateY(30px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.results-screen{justify-content:center;align-items:center;padding:40px;text-align:center;overflow-y:auto;gap:16px}.results-crown{font-size:4rem;animation:crownBounce 1s ease-in-out infinite}@keyframes crownBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.results-title{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;margin-bottom:4px}.results-winner{background:linear-gradient(135deg,var(--color-warning),#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.results-subtitle{color:var(--text-secondary);font-size:1rem}.results-scores{display:flex;gap:40px;align-items:center}.results-player-score{text-align:center}.results-player-name{font-family:var(--font-display);font-size:.9rem;font-weight:700;margin-bottom:4px}.results-player-points{font-family:var(--font-display);font-size:2.5rem;font-weight:900}.results-player-score.winner .results-player-points{color:var(--color-warning)}.results-player-score.loser .results-player-points{color:var(--text-muted)}.results-vs-text{font-family:var(--font-display);font-size:1.2rem;color:var(--text-muted)}.results-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:500px;width:100%}.results-stat{background:var(--bg-card);border-radius:var(--radius-md);padding:12px;text-align:center;border:1px solid var(--border-color)}.results-stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.results-stat-value{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--color-accent)}.results-mvp{background:linear-gradient(135deg,var(--bg-card),rgba(245,158,11,.1));border:1px solid var(--color-warning);border-radius:var(--radius-lg);padding:16px 32px;max-width:400px}.results-mvp-label{font-family:var(--font-display);font-size:.7rem;color:var(--color-warning);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px}.results-mvp-action{font-size:1rem;font-weight:600}.results-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.opponent-panel{background:var(--bg-surface);border-radius:var(--radius-md);padding:10px;border:1px solid rgba(239,68,68,.2)}.opponent-panel-title{font-family:var(--font-display);font-size:.65rem;color:var(--color-player2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.opponent-stat-row{display:flex;justify-content:space-between;padding:3px 0;font-size:.8rem}.opponent-stat-label{color:var(--text-secondary)}.opponent-stat-value{font-family:var(--font-display);font-size:.75rem;font-weight:600;color:var(--text-accent)}.opponent-hidden{color:var(--text-muted);font-style:italic;font-size:.75rem;text-align:center;padding:10px}.building-list{background:var(--bg-surface);border-radius:var(--radius-md);padding:10px}.building-list-title{font-family:var(--font-display);font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.building-list-item{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:.8rem}.building-list-item.disabled{opacity:.4;text-decoration:line-through}.confetti-piece{position:fixed;width:10px;height:10px;z-index:10000;animation:confettiFall linear forwards;pointer-events:none}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(100vh) rotate(720deg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-card);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.text-center{text-align:center}.text-left{text-align:left}.text-sm{font-size:.85rem}.text-xs{font-size:.75rem}.text-muted{color:var(--text-secondary)}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-1{margin-bottom:8px}.gap-1{gap:8px}.gap-2{gap:16px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.w-full{width:100%}.hidden{display:none!important}.commune-info-card{background:var(--bg-surface);border-radius:var(--radius-md);padding:10px}.commune-info-name{font-family:var(--font-display);font-size:.8rem;font-weight:700;margin-bottom:4px}.commune-info-detail{font-size:.75rem;color:var(--text-secondary);display:flex;justify-content:space-between;padding:2px 0}.loading-dots{display:inline-flex;gap:4px}.loading-dots span{width:8px;height:8px;border-radius:50%;background:var(--color-primary);animation:dotBounce 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes dotBounce{0%,80%,to{transform:scale(.4)}40%{transform:scale(1)}}@media(max-width:1024px){.battle-screen{grid-template-columns:220px 1fr 220px}}@media(max-width:768px){.battle-screen{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto}.battle-left-panel,.battle-right-panel{display:none}.battle-bottom{grid-column:1;display:flex;gap:8px;padding:8px;overflow-x:auto;background:var(--bg-secondary);border-top:1px solid var(--border-color)}}.advantage-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:1.5rem;font-weight:900;padding:12px 40px;border-radius:var(--radius-xl);z-index:10004;animation:bannerIn .5s cubic-bezier(.16,1,.3,1),bannerOut .5s ease 2s forwards;pointer-events:none;white-space:nowrap}.advantage-banner.lead{background:linear-gradient(135deg,#10b98133,#10b9810d);border:2px solid var(--color-success);color:var(--color-success)}.advantage-banner.comeback{background:linear-gradient(135deg,#f59e0b33,#f59e0b0d);border:2px solid var(--color-warning);color:var(--color-warning)}@keyframes bannerIn{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes bannerOut{to{transform:translate(-50%,-50%) scale(1.1);opacity:0}}.stats-battle-screen{background:radial-gradient(circle at center,#130f24,#06040a);display:flex;flex-direction:column;justify-content:space-between;padding:20px}.stats-header{display:flex;justify-content:space-between;align-items:center;padding:10px 40px}.player-score{font-family:var(--font-display);font-size:3rem;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5);background:#ffffff1a;padding:10px 30px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.round-display{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}#round-number{font-family:var(--font-display);color:var(--color-accent);letter-spacing:2px;font-weight:700}.timer-circle{width:60px;height:60px;border-radius:50%;background:#00000080;border:2px solid var(--color-primary);display:flex;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;box-shadow:0 0 15px var(--color-primary)}.category-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0a0a14d9;padding:30px 60px;border-radius:20px;text-align:center;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:100;box-shadow:0 20px 50px #00000080;transition:all .5s cubic-bezier(.175,.885,.32,1.275)}.category-banner.reveal{top:15%;transform:translate(-50%) scale(.8)}.category-banner h2{font-family:var(--font-display);font-size:2.5rem;margin-bottom:10px;background:linear-gradient(90deg,#00f2fe,#4facfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.category-banner p{color:#aaa;font-size:1.1rem}.stats-arena{display:flex;justify-content:center;align-items:stretch;gap:40px;flex:1;margin:40px 0}.city-card{flex:1;max-width:350px;background:#14141e99;border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;transition:transform .3s ease}.city-card.player1{border-top:4px solid var(--color-player1);box-shadow:0 -10px 40px #00d2ff1a}.city-card.player2{border-top:4px solid var(--color-player2);box-shadow:0 -10px 40px #ff33661a}.city-card.my-card{transform:scale(1.05);border:2px solid rgba(255,255,255,.3)}.city-card-header{text-align:center;margin-bottom:20px}.city-name{font-family:var(--font-display);font-size:2.2rem;margin:5px 0}.city-dpt,.city-region{color:#888;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.city-card-visual{flex:1;display:flex;justify-content:center;align-items:center;font-size:5rem}.stat-reveal-area{margin-top:20px;background:#0006;width:100%;padding:20px;border-radius:15px;text-align:center}.stat-value{font-family:var(--font-display);font-size:3.5rem;font-weight:900;transition:color .3s ease}.stat-value .unit{font-size:1.2rem;color:#888;margin-left:5px}.stat-value.winner{color:#0f8;text-shadow:0 0 20px rgba(0,255,136,.5);animation:pulseWinner 1s infinite}.stat-value.loser{color:#f36;opacity:.5}@keyframes pulseWinner{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.vs-badge{display:flex;justify-content:center;align-items:center;font-family:var(--font-display);font-size:3rem;font-weight:900;color:var(--color-accent);text-shadow:0 0 10px var(--color-accent);align-self:center}.powers-container{display:flex;justify-content:center;gap:20px;min-height:80px}.btn-glass{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:15px 25px;border-radius:12px;color:#fff;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s}.btn-glass:hover{background:#ffffff26;transform:translateY(-5px);box-shadow:0 10px 20px #0000004d}.power-icon{font-size:1.5rem}.power-name{font-weight:700;font-family:var(--font-display);letter-spacing:1px}.city-active-power{position:absolute;top:10px;right:10px}.power-badge{font-size:2rem;background:#00000080;border-radius:50%;padding:10px;animation:float 2s infinite ease-in-out}.power-active-msg{background:#0f83;color:#0f8;border:1px solid #00ff88;padding:15px 30px;border-radius:12px;font-weight:700;font-family:var(--font-display)}.desc-micro{font-size:.55rem;color:#888;text-align:center;line-height:1.1;margin:2px 0;display:block}