@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap";:root{--bg: #020617;--bg-2: #0f172a;--panel: rgba(9, 15, 30, .72);--panel-solid: #060c1c;--line: rgba(148, 163, 184, .16);--line-strong: rgba(56, 189, 248, .35);--text: #e8f1ff;--text-dim: #93a7c4;--text-muted: #64748b;--accent: #22c55e;--cyan: #22d3ee;--blue: #38bdf8;--amber: #f59e0b;--danger: #ef4444;--violet: #a78bfa;--radius: 16px;--font-ar: "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--font-display: "Orbitron", "IBM Plex Sans Arabic", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font-ar);overflow:hidden;-webkit-font-smoothing:antialiased}button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}h1,h2,h3,p,ul{margin:0}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.tiny{font-size:10px;letter-spacing:.02em}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:radial-gradient(circle at 50% 40%,#061024,#020617 62%,#01040c)}.scene{position:absolute;top:0;right:0;bottom:0;left:0}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 46%,transparent 38%,rgba(2,6,23,.55) 78%,rgba(2,6,23,.92) 100%),radial-gradient(circle at 80% 8%,rgba(56,189,248,.1),transparent 45%)}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3;opacity:.35;background:repeating-linear-gradient(0deg,rgba(148,197,255,.045) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.top-bar{position:absolute;top:0;left:0;right:0;height:68px;z-index:20;display:flex;align-items:center;gap:18px;padding:0 18px;background:linear-gradient(180deg,rgba(4,10,24,.92),rgba(4,10,24,.42) 70%,transparent);border-bottom:1px solid rgba(56,189,248,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:11px;min-width:190px}.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#22c55e38,#22d3ee24);border:1px solid rgba(34,197,94,.42);color:#6ee7b7;box-shadow:0 0 22px #22c55e38}.brand-text h1{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15}.brand-text span{font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;color:var(--text-muted)}.hud-chips{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:10px;background:#0f172ab3;border:1px solid var(--line);font-size:12px;color:var(--text-dim);font-family:var(--font-mono);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}.season-chip{color:#a5f3fc;border-color:#22d3ee52}.pop-chip{color:#bbf7d0;border-color:#22c55e4d}.time-controls{display:flex;align-items:center;gap:6px}.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#0f172acc;border:1px solid var(--line);color:var(--text-dim);transition:all .2s ease}.icon-btn:hover{color:#fff;border-color:var(--line-strong);transform:translateY(-1px)}.icon-btn.active{color:#fde68a;border-color:#f59e0b73;background:#f59e0b1f}.speed-btn{display:inline-flex;align-items:center;gap:3px;height:34px;padding:0 10px;border-radius:10px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);border:1px solid transparent;transition:all .2s ease}.speed-btn:hover{color:var(--text);background:#38bdf814}.speed-btn.active{color:#7dd3fc;border-color:#38bdf866;background:#38bdf81f}.mobile-toggles{display:none;gap:6px}.panel{position:absolute;top:84px;bottom:190px;width:318px;z-index:12;background:linear-gradient(165deg,#0a1224e0,#040916c7);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 24px 60px -28px #000000e6,inset 0 1px #ffffff0a;animation:fadeUp .5s ease both}.country-panel{right:16px}.feed-panel{left:16px;width:304px}.panel-inner{display:flex;flex-direction:column;height:100%;padding:14px 14px 10px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:13px;font-weight:600;letter-spacing:.01em;display:flex;align-items:center;gap:7px;color:#dbeafe}.count{font-family:var(--font-mono);font-size:10px;color:#7dd3fc;padding:2px 8px;border-radius:999px;background:#38bdf81f;border:1px solid rgba(56,189,248,.3)}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 #22c55e99;animation:live 2s infinite}@keyframes live{0%{box-shadow:0 0 #22c55e8c}70%{box-shadow:0 0 0 8px #22c55e00}to{box-shadow:0 0 #22c55e00}}.attacker-pick{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.attacker-pick span{font-size:10px;color:var(--text-muted);letter-spacing:.04em}.attacker-pick select{width:100%;height:32px;border-radius:9px;padding:0 10px;background:#0f172ae6;color:var(--text);font-family:var(--font-ar);font-size:12px;border:1px solid var(--line);outline:none;cursor:pointer}.attacker-pick select:focus{border-color:var(--line-strong)}.country-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-left:2px}.country-row{border:1px solid rgba(148,163,184,.1);border-radius:12px;padding:9px 10px;background:#0f172a8c;transition:all .2s ease}.country-row:hover{border-color:#38bdf84d;background:#131e36bf;transform:translate(-2px)}.country-row.occupied{border-color:#ef444452;background:#2d0c148c}.row-main{display:flex;align-items:center;gap:8px}.dot{width:9px;height:9px;border-radius:50%;flex:none}.row-name{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.row-name strong{font-size:13px;font-weight:600}.row-name .tiny{color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{font-size:9px;padding:2px 7px;border-radius:999px;border:1px solid;font-family:var(--font-ar);white-space:nowrap;background:#02061780}.bar-row{display:flex;align-items:center;gap:7px;margin-top:7px}.bar{flex:1;height:4px;border-radius:999px;background:#94a3b829;overflow:hidden}.bar i{display:block;height:100%;border-radius:999px;transition:width .4s ease}.bar-row .tiny{color:var(--text-dim)}.bar-row .pop{color:#7dd3fc;min-width:40px;text-align:left}.occupy-line{font-size:10px;color:#fca5a5;margin-top:5px}.row-actions{display:flex;gap:5px;margin-top:8px}.row-actions button{flex:1;height:26px;display:grid;place-items:center;border-radius:7px;background:#0206178c;border:1px solid rgba(148,163,184,.16);color:var(--text-dim);transition:all .18s ease}.row-actions button:hover:not(:disabled){color:#e0f2fe;border-color:#38bdf873;background:#38bdf81f;transform:translateY(-1px)}.row-actions button:disabled{opacity:.3;cursor:not-allowed}.feed-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-left:2px}.feed-item{display:flex;gap:8px;padding:8px 9px;border-radius:10px;background:#0f172a73;border:1px solid rgba(148,163,184,.08);animation:fadeUp .32s ease both}.feed-icon{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:7px;background:#38bdf81a;color:#7dd3fc;border:1px solid rgba(56,189,248,.18)}.feed-body p{font-size:11.5px;line-height:1.55;color:#d7e3f4}.feed-body .tiny{color:var(--text-muted);font-size:9px}.type-war .feed-icon{color:#fca5a5;background:#ef44441f;border-color:#ef44444d}.type-war{border-color:#ef44442e}.type-coup .feed-icon{color:#fcd34d;background:#f59e0b1f;border-color:#f59e0b4d}.type-disaster .feed-icon{color:#fdba74;background:#f973161f;border-color:#f973164d}.type-doom .feed-icon{color:#f0abfc;background:#d946ef24;border-color:#d946ef59}.type-doom{border-color:#d946ef47}.dock{position:absolute;bottom:14px;left:50%;transform:translate(-50%);z-index:14;width:min(940px,calc(100% - 32px));background:linear-gradient(160deg,#0a1224eb,#040916db);border:1px solid var(--line);border-radius:18px;padding:10px 12px;-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:0 -10px 50px -20px #000000e6,inset 0 1px #ffffff0d;animation:fadeUp .55s ease both}.tool-row{display:flex;gap:6px;padding-bottom:9px;border-bottom:1px solid var(--line)}.tool-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 4px;border-radius:11px;border:1px solid transparent;color:var(--text-dim);font-size:10.5px;background:#0f172a66;transition:all .2s ease}.tool-btn:hover{color:#e0f2fe;border-color:#38bdf84d;background:#38bdf81a;transform:translateY(-2px)}.tool-btn.active{color:#052e16;background:linear-gradient(160deg,#34d399,#22c55e);border-color:#22c55e99;box-shadow:0 6px 20px -6px #22c55e99}.tool-btn.active svg{color:#04240f}.dock-lower{display:flex;align-items:flex-end;gap:14px;padding-top:9px;flex-wrap:wrap}.dock-label{font-size:9.5px;color:var(--text-muted);letter-spacing:.05em;display:flex;align-items:center;gap:4px}.season-group,.pop-group{display:flex;flex-direction:column;gap:6px}.season-group{flex:none}.season-btns{display:flex;gap:5px}.season-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border-radius:9px;font-size:10.5px;color:var(--text-dim);border:1px solid rgba(148,163,184,.14);background:#0f172a80;transition:all .2s ease}.season-btn:hover{color:#e0f2fe;border-color:#38bdf859;transform:translateY(-1px)}.season-btn.active{color:#a5f3fc;background:#22d3ee24;border-color:#22d3ee73}.pop-group{flex:1;min-width:190px}.pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.pop-head b{font-size:12px;color:#86efac}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:linear-gradient(90deg,#22c55ea6,#38bdf880);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#eafff3;border:2px solid #22c55e;box-shadow:0 0 12px #22c55eb3;transition:transform .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}.mini-stats{display:flex;gap:6px}.mini{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:46px;padding:5px 7px;border-radius:9px;background:#0f172a8c;border:1px solid rgba(148,163,184,.12);color:var(--text-dim)}.mini svg{color:#64748b}.mini b{font-family:var(--font-mono);font-size:12px;color:#e2e8f5}.mini span{font-size:8.5px;color:var(--text-muted)}.rebuild-all{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:10px;font-size:11px;color:#a7f3d0;background:#22c55e1a;border:1px solid rgba(34,197,94,.3);transition:all .2s ease;white-space:nowrap}.rebuild-all:hover{background:#22c55e33;transform:translateY(-1px)}.city-card{position:absolute;bottom:174px;left:50%;transform:translate(-50%);z-index:16;width:min(700px,calc(100% - 28px));padding:9px 12px 10px;background:linear-gradient(160deg,#0c162af0,#050b19e6);border:1px solid rgba(56,189,248,.28);border-radius:14px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 50px -22px #000000f2;animation:pop .22s ease both}.cc-head{display:flex;align-items:center;gap:10px}.cc-head h3{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;white-space:nowrap}.cc-head h3 svg{color:#7dd3fc}.cc-head h3 em{font-style:normal;font-size:9px;padding:1px 6px;border-radius:999px;color:#fcd34d;border:1px solid rgba(245,158,11,.4);background:#f59e0b1a}.cc-country{font-size:10.5px;color:var(--text-dim);white-space:nowrap}.cc-dmg{display:flex;align-items:center;gap:7px;margin-inline-start:auto;min-width:130px}.cc-dmg .dmg-bar{flex:1;margin:0}.cc-dmg .tiny{color:var(--text-muted);white-space:nowrap}.cc-body{display:flex;align-items:center;gap:10px;margin-top:8px}.cc-stats{display:flex;gap:5px;flex:none}.cc-stats>div{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:54px;padding:4px 6px;border-radius:8px;background:#0f172a99;border:1px solid rgba(148,163,184,.12)}.cc-stats svg{color:#64748b}.cc-stats b{font-family:var(--font-mono);font-size:11px}.cc-stats span{font-size:8.5px;color:var(--text-muted)}.dmg-bar{height:4px;border-radius:999px;background:#94a3b829;overflow:hidden}.dmg-bar i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#ef4444);transition:width .4s ease}.cc-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;flex:1}.cc-actions button{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:38px;border-radius:9px;font-size:10.5px;background:#0f172ab3;border:1px solid rgba(148,163,184,.16);color:var(--text-dim);transition:all .18s ease;white-space:nowrap}.cc-actions button:hover{color:#e0f2fe;border-color:#38bdf866;transform:translateY(-1px)}.cc-actions button.danger{color:#fca5a5;border-color:#ef444459}.cc-actions button.danger:hover{background:#ef444429;color:#fecaca}.hover-tip{position:fixed;z-index:30;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:10px;font-size:11px;background:#030814f0;border:1px solid rgba(56,189,248,.4);box-shadow:0 10px 30px -10px #000000e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hover-tip strong{font-size:12px}.hover-tip .mono{font-size:9.5px;color:var(--text-muted)}.toast{position:absolute;top:82px;left:50%;transform:translate(-50%);z-index:40;padding:9px 16px;border-radius:999px;font-size:12px;background:#061422f2;border:1px solid rgba(34,197,94,.45);color:#d1fae5;box-shadow:0 12px 36px -12px #000000e6;animation:fadeUp .25s ease both}.intro{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 50%,rgba(2,6,23,.62) 0%,rgba(2,6,23,.3) 42%,transparent 72%);pointer-events:none}.intro-card{pointer-events:auto}.intro-card{width:min(468px,100%);padding:22px;border-radius:20px;text-align:right;background:linear-gradient(165deg,#0c182ef5,#040916f0);border:1px solid rgba(56,189,248,.22);box-shadow:0 40px 90px -30px #000000f2,inset 0 1px #ffffff0f;animation:pop .4s ease both}.intro-card .tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.28em;color:#6ee7b7;padding:4px 9px;border-radius:999px;border:1px solid rgba(34,197,94,.35);background:#22c55e14}.intro-card h2{font-size:24px;margin:12px 0 8px;letter-spacing:-.02em;line-height:1.25}.intro-card .lead{font-size:12.5px;line-height:1.75;color:var(--text-dim)}.intro-list{list-style:none;padding:0;margin:14px 0 16px;display:grid;gap:7px}.intro-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:11px;background:#0f172a8c;border:1px solid rgba(148,163,184,.1)}.intro-list svg{color:#38bdf8;flex:none;margin-top:2px}.intro-list b{display:block;font-size:12.5px;margin-bottom:1px}.intro-list span{font-size:11.5px;color:var(--text-dim);line-height:1.6}.start-btn{width:100%;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;color:#04210f;background:linear-gradient(160deg,#4ade80,#22c55e);box-shadow:0 16px 40px -14px #22c55ecc;transition:transform .2s ease,box-shadow .2s ease}.start-btn:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px #22c55ee6}.intro-card .hint{display:block;text-align:center;margin-top:10px;font-size:10.5px;color:var(--text-muted)}.country-list::-webkit-scrollbar,.feed-list::-webkit-scrollbar{width:5px}.country-list::-webkit-scrollbar-track,.feed-list::-webkit-scrollbar-track{background:transparent}.country-list::-webkit-scrollbar-thumb,.feed-list::-webkit-scrollbar-thumb{background:#38bdf84d;border-radius:999px}.country-list::-webkit-scrollbar-thumb:hover,.feed-list::-webkit-scrollbar-thumb:hover{background:#38bdf88c}@media (max-width: 1280px){.panel{width:292px}.feed-panel{width:276px}.brand{min-width:168px}.mini-stats .mini:nth-child(4){display:none}}@media (max-width: 1024px){.top-bar{gap:10px;padding:0 12px}.hud-chips{justify-content:flex-start;overflow:hidden}.chip{font-size:11px;padding:0 9px}.panel{width:270px}.feed-panel{width:252px}.dock-lower{gap:10px}.mini-stats .mini:nth-child(3){display:none}}@media (max-width: 900px){.top-bar{height:60px}.brand{min-width:0;flex:1}.brand-text h1{font-size:15px}.brand-mark{width:32px;height:32px;border-radius:10px}.hud-chips{display:none}.time-controls{order:2}.mobile-toggles{display:flex;order:3}.panel{position:absolute;top:72px;left:10px;right:10px;width:auto;bottom:auto;max-height:54vh;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .22s ease,transform .22s ease}.panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.panel-inner{padding:12px}.dock{width:calc(100% - 16px);bottom:8px;padding:8px 9px;border-radius:15px}.tool-row{overflow-x:auto;padding-bottom:7px;gap:5px}.tool-btn{flex:0 0 auto;min-width:62px;padding:6px 4px}.dock-lower{gap:8px}.season-btn{padding:5px 7px}.season-btn span,.mini-stats{display:none}.pop-group{min-width:140px}.rebuild-all{height:30px;font-size:10px;padding:0 9px}.city-card{bottom:168px;top:auto;width:calc(100% - 20px);padding:8px 9px}.cc-head{flex-wrap:wrap;gap:6px}.cc-dmg{width:100%;margin:0}.cc-body{flex-direction:column;align-items:stretch;gap:7px}.cc-actions{grid-template-columns:repeat(3,1fr)}.cc-actions button{height:30px}.toast{top:68px;font-size:11px;padding:7px 12px}}@media (max-width: 560px){.intro-card{padding:18px}.intro-card h2{font-size:22px}.intro-card .lead{font-size:12px}.intro-list li{padding:8px}.season-group .dock-label{display:none}.pop-group{flex:1 1 100%}.rebuild-all{flex:1 1 auto;justify-content:center}}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}.gl-fallback{position:absolute;top:0;right:0;bottom:0;left:0;z-index:45;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 45%,#1e0c06db,#020617f5);text-align:center}.gl-fallback>div{max-width:430px;padding:22px;border-radius:16px;border:1px solid rgba(245,158,11,.4);background:#090f1ee6}.gl-fallback h3{font-size:16px;margin-bottom:8px;color:#fcd34d}.gl-fallback p{font-size:12.5px;line-height:1.9;color:var(--text-dim)}