/* ===== فاتحان دیجیتال — War Strategy Mini App theme ===== */
:root{
  --bg:#05060a; --bg2:#0a0e18;
  --panel:rgba(18,24,40,.55); --panel-solid:#121828;
  --stroke:rgba(120,160,255,.14); --stroke-gold:rgba(255,209,92,.3);
  --gold:#ffd15c; --gold2:#ffb020; --gold3:#fff3d6;
  --neon:#4dd2ff; --neon2:#7c4dff;
  --fire:#ff5a2c; --fire2:#ffb020;
  --green:#39e08a; --red:#ff4d6d;
  --txt:#eaf0ff; --muted:#8b96b5;
  --r:18px; --shadow:0 18px 50px rgba(0,0,0,.55);
  --shadow-gold:0 12px 34px rgba(255,180,32,.16),0 2px 0 rgba(255,255,255,.04) inset;
  --font:"Vazirmatn","Segoe UI",system-ui,sans-serif;
}
@font-face{font-family:"Vazirmatn";src:local("Vazirmatn");}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font-family:var(--font);overflow-x:hidden}
body{overscroll-behavior:none}
.hidden{display:none !important}

/* پوسته اصلی برنامه وقتی از حالت hidden خارج می‌شود (یعنی boot تمام شده و
   بازی نمایش داده می‌شود) یک fade کوتاه و سبک دارد تا حالا که دیگر تاخیر
   مصنوعی ۷۰۰ میلی‌ثانیه‌ای قبل از نمایش وجود ندارد، این تغییر به‌جای یک
   قطع ناگهانی، نرم حس شود. فقط روی #app است، نه روی کلاس عمومی .hidden
   (که در جاهای دیگر مثل مودال‌ها و گیت‌ها هم استفاده می‌شود) تا رفتار
   هیچ‌کدام از آن‌ها تغییر نکند.
*/
#app:not(.hidden){animation:appReveal .28s ease-out}
@keyframes appReveal{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  #app:not(.hidden){animation:none}
}

/* ---------- animated background ---------- */
#bg-particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(80,120,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,120,255,.06) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(circle at 50% 20%,#000 20%,transparent 75%)}
.bg-glow{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;opacity:.5}
.bg-glow-1{width:340px;height:340px;background:#2a3bff;top:-90px;right:-70px;animation:float1 14s ease-in-out infinite}
.bg-glow-2{width:300px;height:300px;background:#ff3b6b;bottom:-80px;left:-60px;animation:float2 16s ease-in-out infinite}
@keyframes float1{50%{transform:translate(-30px,40px) scale(1.1)}}
@keyframes float2{50%{transform:translate(40px,-30px) scale(1.15)}}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;background:radial-gradient(circle at 50% 35%,#0c1224,#05060a)}
.boot-crown{font-size:64px;animation:pulse 1.6s ease-in-out infinite;filter:drop-shadow(0 0 18px var(--gold))}
.boot-title{font-size:26px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(90deg,var(--gold),#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.boot-bar{width:200px;height:6px;border-radius:99px;background:#161c30;overflow:hidden}
.boot-bar span{display:block;height:100%;width:40%;border-radius:99px;
  background:linear-gradient(90deg,var(--neon),var(--neon2));animation:load 1.2s ease-in-out infinite}
.boot-sub{color:var(--muted);font-size:13px}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes pulse{50%{transform:scale(1.12)}}

/* ---------- shell ---------- */
.app{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:0 14px 96px;min-height:100vh}
.glass{background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--stroke);box-shadow:var(--shadow)}

/* profile header */
.profile-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;
  padding:12px 14px;margin:10px 0 12px}
.ph-left{display:flex;align-items:center;gap:12px}
.ph-avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:28px;flex:0 0 auto;
  background:linear-gradient(135deg,#1b2340,#2a3560);border:2px solid rgba(255,209,92,.55);
  box-shadow:0 0 0 3px rgba(5,6,10,.6),0 0 18px rgba(255,180,32,.35)}
.ph-meta{display:flex;flex-direction:column;gap:3px}
.ph-row{display:flex;align-items:center;gap:6px;font-size:13px}
.ph-row b{font-weight:800;color:#fff}
.ph-k{color:var(--muted);font-size:12px}
.ph-empire{font-size:16px;color:var(--gold)!important;text-shadow:0 0 12px rgba(255,180,32,.3)}
.ph-sub{font-size:11px;color:var(--muted)}
.ph-sub b{color:var(--neon);font-size:12px}
.ph-emp-icon,.ph-globe{font-size:13px}
.topbar-gear{width:36px;height:36px;border-radius:50%;border:1px solid var(--stroke);flex:0 0 auto;
  background:rgba(255,255,255,.05);color:#fff;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .15s}
.topbar-gear:active{transform:scale(.9) rotate(25deg)}
.chip{padding:6px 10px;border-radius:99px;font-size:12px;font-weight:700;border:1px solid var(--stroke)}
.chip-vip{background:linear-gradient(90deg,var(--gold2),var(--gold));color:#231a00;border:none;
  box-shadow:0 0 16px rgba(255,180,32,.5);display:inline-block;margin-top:8px;width:fit-content}

/* pages */
.page{display:none;animation:pageIn .35s ease}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page-title{font-size:20px;font-weight:800;margin:6px 4px 14px}

/* card entrance */
.card-in{animation:cardIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* trophy / score card (gold premium, matches the reference dashboard) */
.trophy-card{border-radius:var(--r);padding:18px;display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:12px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(30,26,16,.75),rgba(18,20,32,.8));
  border:1px solid rgba(255,209,92,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 30px rgba(255,180,32,.05)}
.trophy-card::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 85% 0%,rgba(255,210,92,.18),transparent 60%)}
.trophy-left{position:relative;z-index:1;display:flex;flex-direction:column}
.trophy-label{color:var(--muted);font-size:12px;margin-bottom:6px}
.trophy-score{font-size:30px;font-weight:900;color:var(--gold);text-shadow:0 0 20px rgba(255,180,32,.4);
  line-height:1.1}
.trophy-rank{font-size:12px;color:var(--muted);margin-top:6px}
.trophy-rank b{color:var(--neon);font-size:13px}
.trophy-building{position:relative;width:96px;height:96px;flex:0 0 auto;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#0d2340 0%,#0a1730 55%,#120a1c 100%);
  border:1px solid rgba(255,255,255,.08);display:grid;place-items:center}
.tb-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 30% 20%,rgba(255,255,255,.5) 0 1px,transparent 1px) 8px 10px/26px 26px,
  radial-gradient(circle at 70% 40%,rgba(255,255,255,.35) 0 1px,transparent 1px) 4px 4px/34px 34px;
  opacity:.6}
.tb-flag{position:absolute;top:6px;font-size:15px;filter:drop-shadow(0 0 6px rgba(255,90,60,.6));
  animation:flagWave 2.4s ease-in-out infinite}
@keyframes flagWave{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
.tb-palace{width:78%;height:auto;max-height:74%;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 4px 10px rgba(255,209,92,.5))}
.tb-palace-fallback{font-size:46px;filter:drop-shadow(0 0 10px rgba(255,209,92,.5));position:relative;z-index:1}
.tb-glow{position:absolute;bottom:0;left:0;right:0;height:40%;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,180,32,.35),transparent 70%)}


/* generic game card */
.gcard{border-radius:var(--r);padding:16px;margin-bottom:12px;position:relative;overflow:hidden;
  background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--stroke);box-shadow:var(--shadow)}
.gcard::before{content:"";position:absolute;top:0;right:0;left:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:.6}
.gcard-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.gcard-title{font-weight:800;font-size:15px}
.gcard-tag{font-size:10px;color:var(--green);border:1px solid rgba(57,224,138,.4);
  padding:2px 8px;border-radius:99px;animation:blink 2s infinite}
@keyframes blink{50%{opacity:.4}}

/* economy */
.gcard-econ{background:linear-gradient(135deg,rgba(60,45,10,.45),rgba(20,26,44,.6))}
.econ-vault{display:flex;flex-direction:column;margin-bottom:12px}
.econ-vault-label{color:var(--muted);font-size:12px}
.econ-vault-val{font-size:30px;font-weight:900;color:var(--gold);text-shadow:0 0 22px rgba(255,180,32,.4)}
.econ-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.econ-cell{background:rgba(0,0,0,.25);border:1px solid var(--stroke);border-radius:12px;padding:10px}
.econ-cell-label{color:var(--muted);font-size:11px;display:block}
.econ-cell-val{font-size:16px;font-weight:800;color:var(--green)}
.econ-spark{width:100%;margin-top:10px;display:block}

/* dual cards */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:400px){.dual{grid-template-columns:1fr}}
.gcard-war{background:linear-gradient(135deg,rgba(80,20,30,.4),rgba(20,26,44,.6))}
.gcard-empire{background:linear-gradient(135deg,rgba(20,40,70,.4),rgba(20,26,44,.6))}
.stat-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px dashed rgba(255,255,255,.06);font-size:13px}
.stat-line b{font-size:15px;color:#fff}
.stat-line.small{font-size:12px;color:var(--muted)}
.btn-battle{width:100%;margin-top:12px;padding:11px;border:none;border-radius:12px;font-family:var(--font);
  font-weight:800;font-size:14px;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,var(--fire),var(--fire2));box-shadow:0 8px 24px rgba(255,90,44,.4);
  transition:transform .15s,box-shadow .15s}
.btn-battle:active{transform:scale(.96)}

/* inventory */
.inv-list{display:flex;flex-direction:column;gap:8px}
.inv-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;
  background:rgba(0,0,0,.22);border:1px solid var(--stroke)}
.inv-name{font-size:13px;font-weight:700}
.inv-cat{font-size:10px;padding:2px 7px;border-radius:99px;margin-right:6px}
.cat-economy{background:rgba(255,180,32,.15);color:var(--gold)}
.cat-defense{background:rgba(77,210,255,.15);color:var(--neon)}
.cat-attack{background:rgba(255,77,109,.15);color:var(--red)}
.inv-qty{font-weight:800;color:#fff;font-size:14px}
.inv-empty{color:var(--muted);text-align:center;padding:16px;font-size:13px}

/* ---------- WAR (command room) page ---------- */
.page-war{position:relative}
.war-scan{position:absolute;top:-10px;left:0;right:0;height:120px;pointer-events:none;overflow:hidden;
  border-radius:var(--r);opacity:.5}
.page-war.active .war-scan::before{content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  animation:warScan 3.2s linear infinite}
@keyframes warScan{0%{top:-10%}100%{top:110%}}
.war-big{font-size:30px;font-weight:900;color:#fff;text-align:center;padding:6px 0;
  text-shadow:0 0 18px rgba(77,210,255,.4)}
.gcard-war .war-big{color:#ff9a6a;text-shadow:0 0 18px rgba(255,90,44,.4)}
.gcard-empire .war-big{color:var(--neon)}
.btn-attack-main{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin:6px 0 12px;padding:16px;border:none;border-radius:18px;cursor:pointer;font-family:var(--font);
  font-size:17px;font-weight:900;color:#fff;letter-spacing:.3px;
  background:linear-gradient(135deg,var(--fire),var(--fire2));
  box-shadow:0 12px 32px rgba(255,90,44,.5),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.btn-attack-main::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:translateX(-120%);animation:sheen 2.6s ease-in-out infinite}
@keyframes sheen{60%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.btn-attack-main:active{transform:scale(.97)}
.baw-icon{font-size:22px;filter:drop-shadow(0 0 8px rgba(255,255,255,.6))}

/* ---------- SPY page ---------- */
.spy-locked{text-align:center;padding:26px 18px;background:linear-gradient(160deg,rgba(10,30,20,.6),rgba(10,14,26,.7))}
.spy-locked-icon{width:96px;height:96px;object-fit:contain;margin-bottom:10px;
  filter:drop-shadow(0 0 14px rgba(57,224,138,.5))}
.alliance-banner{display:flex;align-items:center;gap:10px;margin:6px 4px 14px}
.alliance-emblem-img{width:52px;height:52px;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(124,77,255,.4))}
.spy-locked p{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 14px}
.spy-cost{margin-bottom:14px;font-size:13px}
.spy-cost b{color:var(--gold)}
.spy-search{display:flex;gap:8px}
.spy-search input{flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(57,224,138,.3);border-radius:10px;
  padding:11px;color:#fff;font-family:var(--font);font-size:13px;outline:none}
.spy-search button{border:none;border-radius:10px;padding:0 16px;font-weight:800;color:#04170d;
  font-family:var(--font);background:linear-gradient(135deg,var(--green),#1fae6c);cursor:pointer}
.spy-search button:active{transform:scale(.96)}

.spy-radar{position:relative;height:180px;margin:16px 0;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(0,20,10,.9),#020705);
  border:1px solid rgba(57,224,138,.3);display:flex;align-items:center;justify-content:center}
.spy-radar-ring{position:absolute;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(57,224,138,.35)}
.spy-radar-ring::before,.spy-radar-ring::after{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(57,224,138,.22)}
.spy-radar-ring::before{inset:26px}
.spy-radar-ring::after{inset:52px}
.spy-radar-sweep{position:absolute;width:150px;height:150px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(57,224,138,.55),transparent 60deg);
  opacity:0}
.spy-radar.scan-play .spy-radar-sweep{opacity:1;animation:radarSweep 1.4s linear}
@keyframes radarSweep{from{transform:rotate(0deg)}to{transform:rotate(720deg)}}
.spy-radar-label{position:absolute;bottom:12px;font-size:11px;color:var(--green);letter-spacing:.5px}
.spy-report{background:linear-gradient(160deg,rgba(10,30,20,.55),rgba(20,26,44,.6));
  border-color:rgba(57,224,138,.3)}

/* ---------- shop ---------- */
.shop-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;scrollbar-width:none}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tab{white-space:nowrap;padding:8px 14px;border-radius:99px;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--panel);border:1px solid var(--stroke);color:var(--muted);transition:.2s}
.shop-tab.active{color:#fff;background:linear-gradient(135deg,var(--neon2),var(--neon));border:none;
  box-shadow:0 6px 18px rgba(124,77,255,.4)}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shop-card{position:relative;border-radius:16px;padding:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(30,38,64,.7),rgba(14,18,30,.8));border:1px solid var(--stroke);
  box-shadow:var(--shadow);transition:transform .2s;animation:cardIn .4s both}
.shop-card:active{transform:scale(.97)}
.shop-card .sc-icon{font-size:34px;text-align:center;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.sc-visual,.buy-visual{display:flex;justify-content:center;align-items:center}
.sc-item-img{width:100%;max-width:108px;height:68px;object-fit:cover;object-position:center;display:block;margin:0 auto;border-radius:10px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.48))}
.sc-icon-img{width:100%;max-width:64px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.shop-card .sc-name{font-size:13px;font-weight:800;text-align:center;margin:8px 0;min-height:34px;display:flex;align-items:center;justify-content:center}
.sc-row{display:flex;justify-content:space-between;font-size:12px;margin-top:4px}
.sc-stat{color:var(--neon);font-weight:700}
.sc-cost{color:var(--gold);font-weight:800}
.sc-vip{position:absolute;top:8px;left:8px;background:linear-gradient(90deg,var(--gold2),var(--gold));
  color:#231a00;font-size:9px;font-weight:800;padding:2px 7px;border-radius:99px}
.sc-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(77,210,255,.2),transparent 60%);pointer-events:none}
/* VIP pack cards full width */
.vip-card,.market-card{grid-column:1/-1;display:flex;gap:12px;align-items:center;cursor:pointer;transition:transform .15s;
  background:linear-gradient(135deg,rgba(70,55,15,.6),rgba(20,26,44,.7));border:1px solid rgba(255,209,92,.3)}
.vip-card:active,.market-card:active{transform:scale(.98)}
.vip-card .vc-icon,.market-card .vc-icon{font-size:40px}
.vip-card .vc-body,.market-card .vc-body{flex:1}
.vip-card .vc-title,.market-card .vc-title{font-weight:800;color:var(--gold)}
.vip-card .vc-desc{font-size:11px;color:var(--muted);white-space:pre-line;max-height:80px;overflow:auto}
.vip-price{text-align:left}
.vip-price .now{color:var(--green);font-weight:900;font-size:16px}
.vip-price .old{color:var(--muted);text-decoration:line-through;font-size:11px}
.market-orders-link{grid-column:1/-1;text-align:center;padding:10px;color:var(--neon);font-size:12px;
  font-weight:700;cursor:pointer;border:1px dashed var(--stroke);border-radius:10px;margin-bottom:4px}

/* چنج مارکت — unified coins/packages toggle */
.market-toggle{grid-column:1/-1;display:flex;gap:8px;background:var(--panel);border:1px solid var(--stroke);
  border-radius:14px;padding:4px;margin-bottom:2px}
.mt-btn{flex:1;padding:10px 6px;border:none;border-radius:11px;background:transparent;color:var(--muted);
  font-size:12px;font-weight:800;cursor:pointer;transition:.2s}
.mt-btn.active{color:#fff;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#231a00;
  box-shadow:0 6px 16px rgba(255,209,92,.35)}
.market-hint{grid-column:1/-1;font-size:11px;color:var(--muted);text-align:center;margin:-4px 0 4px}
.market-grid{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vip-grid{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}
.vip-card{flex-direction:row;align-items:flex-start}
.sc-vip.best-value{left:auto;right:8px;top:8px;background:linear-gradient(90deg,#ff8a3d,#ff5252);color:#2a0500}
.sc-discount{position:absolute;top:8px;left:8px;background:rgba(57,224,138,.18);color:var(--green);
  border:1px solid rgba(57,224,138,.4);font-size:10px;font-weight:800;padding:2px 7px;border-radius:99px}
.vip-card .vc-perks{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:6px;font-size:11px;color:var(--muted)}
.vip-card .vc-perks span{white-space:nowrap}

/* referral / invite-friends modal */
.ref-link-box{background:rgba(0,0,0,.3);border:1px solid var(--stroke);border-radius:12px;padding:12px;margin:12px 0}
.ref-link-label{font-size:11px;color:var(--muted);margin-bottom:6px}
.ref-link-value{font-size:13px;color:#fff;direction:ltr;word-break:break-all;margin-bottom:10px;font-family:monospace}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.ref-stat{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:10px;text-align:center}
.ref-stat b{display:block;font-size:18px;color:var(--gold);margin-top:2px}
.ref-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}

/* real card-to-card payment flow */
.pay-card-box{background:rgba(0,0,0,.3);border:1px solid var(--stroke);border-radius:12px;
  padding:14px;text-align:center;margin:14px 0}
.pay-card-label{font-size:11px;color:var(--muted);margin-bottom:6px}
.pay-card-number{font-size:18px;font-weight:800;letter-spacing:1px;color:#fff;direction:ltr;margin-bottom:10px}
.pay-copy{border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:#fff;border-radius:8px;
  padding:7px 14px;font-size:12px;cursor:pointer}
.pay-note{font-size:11.5px;color:var(--muted);line-height:1.9;margin-bottom:14px}

/* ---------- ranking ---------- */
.podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:8px 0 18px}
.pod{flex:1;max-width:110px;border-radius:14px 14px 6px 6px;padding:12px 8px;text-align:center;
  background:var(--panel);border:1px solid var(--stroke);position:relative;animation:cardIn .5s both}
.pod-1{order:2;background:linear-gradient(180deg,rgba(255,209,92,.28),rgba(20,26,44,.6));
  box-shadow:0 0 30px rgba(255,180,32,.35);transform:translateY(-8px)}
.pod-2{order:1;background:linear-gradient(180deg,rgba(200,210,230,.22),rgba(20,26,44,.6))}
.pod-3{order:3;background:linear-gradient(180deg,rgba(205,127,50,.25),rgba(20,26,44,.6))}
.pod-medal{font-size:30px}
.pod-name{font-size:12px;font-weight:800;margin:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-score{font-size:12px;color:var(--gold);font-weight:800}
.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  background:var(--panel);border:1px solid var(--stroke)}
.rank-row.me{border-color:var(--gold);box-shadow:0 0 18px rgba(255,180,32,.25)}
.rank-num{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800;
  background:rgba(0,0,0,.3);font-size:13px}
.rank-info{flex:1}
.rank-empire{font-size:13px;font-weight:800}
.rank-level{font-size:11px;color:var(--muted)}
.rank-score{color:var(--gold);font-weight:800;font-size:13px}

/* ---------- alliance / chat ---------- */
.alliance-head{display:flex;justify-content:space-around;border-radius:14px;padding:12px;margin-bottom:12px;text-align:center}
.alliance-head .al-label{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}
.alliance-head b{font-size:15px;color:var(--gold)}
.pinned{border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:12px;color:var(--gold);
  border-left:3px solid var(--gold)}
.chat{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;padding:6px 2px 12px}
.bubble{max-width:82%;padding:9px 13px;border-radius:16px;position:relative;animation:bubbleIn .35s ease both}
@keyframes bubbleIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.bubble .b-name{font-size:11px;font-weight:800;margin-bottom:3px;display:flex;align-items:center;gap:4px}
.bubble .b-text{font-size:13px;line-height:1.6}
.bubble .b-time{font-size:9px;color:var(--muted);margin-top:3px;text-align:left}
.bubble.them{align-self:flex-start;background:rgba(30,38,64,.8);border:1px solid var(--stroke);border-bottom-right-radius:5px}
.bubble.me{align-self:flex-end;background:linear-gradient(135deg,var(--neon2),#4a2fd0);border-bottom-left-radius:5px}
.bubble.leader{border:1px solid var(--gold);box-shadow:0 0 16px rgba(255,180,32,.3)}
.bubble.system{align-self:center;background:rgba(57,224,138,.12);border:1px solid rgba(57,224,138,.3);
  color:var(--green);font-size:12px;text-align:center;max-width:92%}
.role-badge{font-size:9px;padding:1px 6px;border-radius:99px}
.r-leader{background:rgba(255,180,32,.2);color:var(--gold)}
.r-deputy{background:rgba(124,77,255,.2);color:#c6b3ff}
.r-member{background:rgba(120,160,255,.14);color:var(--neon)}
.chat-input{display:flex;gap:8px;padding:8px;border-radius:14px;margin:10px 0}
.chat-input input{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--stroke);border-radius:10px;
  padding:10px;color:#fff;font-family:var(--font);font-size:13px;outline:none}
.chat-input button{border:none;border-radius:10px;padding:0 16px;font-weight:800;color:#fff;font-family:var(--font);
  background:linear-gradient(135deg,var(--neon),var(--neon2));cursor:pointer}
.member-list{display:flex;flex-direction:column;gap:8px}
.member{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  background:rgba(0,0,0,.22);border:1px solid var(--stroke)}
.member .m-name{flex:1;font-size:13px;font-weight:700}
.member .m-score{color:var(--gold);font-size:12px;font-weight:800}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}
.empty-icon{font-size:52px;margin-bottom:10px}

/* ---------- bottom nav ---------- */
.nav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:492px;
  display:flex;justify-content:space-around;align-items:center;padding:8px;border-radius:20px;z-index:25}
.nav-btn{flex:1;background:none;border:none;color:var(--muted);font-family:var(--font);font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:.2s}
.nav-btn span{font-size:20px}
.nav-btn.active{color:var(--neon)}
.nav-battle{flex:0 0 auto;width:54px;height:54px;margin-top:-24px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,var(--fire),var(--fire2));box-shadow:0 8px 24px rgba(255,90,44,.5)}
.nav-battle span{font-size:24px}

/* ---------- attack result (simple modal, no animation scene) ---------- */
.result-box{text-align:center;padding:8px 4px}
.result-icon{font-size:52px;margin-bottom:10px}
.result-title{font-size:20px;font-weight:900;margin-bottom:10px}
.result-title.win{color:var(--gold);text-shadow:0 0 20px rgba(255,180,32,.5)}
.result-title.lose{color:var(--red);text-shadow:0 0 20px rgba(255,77,109,.5)}
.result-detail{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:18px}
.result-box .btn-confirm{width:100%}

/* ---------- floating numbers ---------- */
.float-layer{position:fixed;inset:0;z-index:40;pointer-events:none}
.float-num{position:absolute;font-weight:900;font-size:20px;color:var(--gold);
  text-shadow:0 2px 10px rgba(0,0,0,.6);animation:floatUp 1.4s ease-out forwards}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.6)}
  20%{opacity:1;transform:translateY(-14px) scale(1.1)}
  100%{opacity:0;transform:translateY(-70px) scale(1)}}

/* counter tick */
.counter{transition:color .2s}
.counter.tick{color:#fff}

/* ---------- vault bar: green rises on income, red drops on spend ---------- */
.vault-bar{margin-top:8px;height:22px}
.vault-bar-track{position:relative;height:100%;width:100%;border-radius:8px;overflow:hidden;
  background:rgba(0,0,0,.35);border:1px solid var(--stroke)}
.vault-bar-fill{position:absolute;left:0;right:0;height:0%;transition:height .1s linear}
.vault-bar-fill.up{bottom:0;background:linear-gradient(0deg,var(--green),rgba(57,224,138,.35));
  box-shadow:0 0 14px rgba(57,224,138,.6)}
.vault-bar-fill.down{top:0;background:linear-gradient(180deg,var(--red),rgba(255,77,109,.35));
  box-shadow:0 0 14px rgba(255,77,109,.6)}

.float-num.float-up{color:var(--gold)}
.float-num.float-down{color:var(--red)}

/* ---------- world / UN / council card (home screen entry point) ---------- */
.gcard-world{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;color:inherit;
  border:1px solid rgba(120,160,255,.2);text-align:right;font-family:var(--font)}
.gcard-world:active{transform:scale(.98)}
.world-icon{width:44px;height:44px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 0 10px rgba(77,210,255,.5))}
.world-text{flex:1}
.world-title{font-weight:800;font-size:14px}
.world-sub{font-size:11px;color:var(--muted);margin-top:2px}
.world-badge{background:var(--red);color:#fff;font-weight:900;font-size:12px;
  min-width:22px;height:22px;border-radius:99px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(255,77,109,.6);animation:pulse 2s ease-in-out infinite}

/* world modal contents */
.world-panel{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.world-row{display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.22);
  border:1px solid var(--stroke);border-radius:10px;padding:9px 12px;font-size:12px}
.world-row b{color:var(--neon);font-size:13px}
.world-row b.warn{color:var(--red)}
.world-row b.ok{color:var(--green)}
.world-sub-title{font-size:12px;font-weight:800;color:var(--muted);margin:14px 0 8px}
.truce-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.truce-btn{background:rgba(77,210,255,.1);border:1px solid rgba(77,210,255,.3);border-radius:12px;
  padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  color:#fff;font-family:var(--font);transition:.2s}
.truce-btn:active{transform:scale(.95);background:rgba(77,210,255,.25)}
.truce-h{font-weight:800;font-size:13px;color:var(--neon)}
.truce-cost{font-size:10px;color:var(--muted)}
.sanction-form{display:flex;flex-direction:column;gap:8px}
.sanction-form input,.sanction-form textarea{background:rgba(0,0,0,.3);border:1px solid var(--stroke);border-radius:10px;
  padding:11px;color:#fff;font-family:var(--font);font-size:13px;outline:none;resize:none}
.sanction-actions{display:flex;gap:8px}
.btn-vote{flex:1;border:none;border-radius:10px;padding:11px 6px;font-weight:800;font-size:12px;
  cursor:pointer;font-family:var(--font);transition:.2s}
.btn-vote:active{transform:scale(.96)}
.btn-vote:disabled{opacity:.4;cursor:not-allowed;transform:none}
.vote-yes{background:linear-gradient(135deg,var(--red),#a02040);color:#fff}
.vote-no{background:rgba(255,255,255,.08);color:var(--txt);border:1px solid var(--stroke)}
.sanction-status{font-size:12px;color:var(--muted);min-height:16px;text-align:center}

/* ---------- richer chat bubble entrance (directional slide + fade) ---------- */
.bubble.me{animation:bubbleInRight .38s cubic-bezier(.2,.8,.2,1) both}
.bubble.them{animation:bubbleInLeft .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes bubbleInRight{from{opacity:0;transform:translateX(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes bubbleInLeft{from{opacity:0;transform:translateX(-24px) scale(.94)}to{opacity:1;transform:none}}
.bubble.system{animation:bubbleInFade .4s ease both}
@keyframes bubbleInFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- modals / toasts / pickers (write actions) ---------- */
.modal-ov{position:fixed;inset:0;z-index:70;background:rgba(2,3,10,.7);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.modal-ov.show{opacity:1}
.modal{width:100%;max-width:492px;border-radius:22px 22px 0 0;padding:20px 16px 26px;
  transform:translateY(30px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.modal-ov.show .modal{transform:none}
.modal-title{font-weight:800;font-size:17px;text-align:center;margin-bottom:14px}
.buy-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px}
.buy-icon{font-size:44px}
.buy-item-img{width:100%;max-width:180px;height:110px;object-fit:cover;object-position:center;display:block;border-radius:14px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.buy-name{font-weight:800;font-size:16px;text-align:center}
.buy-stat{text-align:center;color:var(--neon);font-weight:700;margin-bottom:14px}
.buy-qty{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.buy-qty input{width:90px;text-align:center;font-size:20px;font-weight:800;background:rgba(0,0,0,.3);
  border:1px solid var(--stroke);border-radius:12px;padding:10px;color:#fff;font-family:var(--font)}
.qbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);
  color:#fff;font-size:22px;font-weight:800;cursor:pointer}
.qbtn:active{transform:scale(.9)}
.buy-total{text-align:center;font-size:15px;margin-bottom:16px}
.buy-total b{color:var(--gold);font-size:18px}
.btn-confirm{width:100%;padding:13px;border:none;border-radius:14px;font-family:var(--font);font-weight:800;
  font-size:15px;color:#231a00;cursor:pointer;background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 8px 24px rgba(255,180,32,.4)}
.btn-confirm:active{transform:scale(.97)}

.target-list,.weapon-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;margin-bottom:12px}
.target-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;cursor:pointer;
  background:rgba(0,0,0,.25);border:1px solid var(--stroke);transition:.15s}
.target-row:active{transform:scale(.98);border-color:var(--red)}
.weapon-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
  border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--stroke)}
.w-info{display:flex;flex-direction:column}
.w-name{font-size:13px;font-weight:800}
.w-have{font-size:11px;color:var(--muted)}
.w-ctl{display:flex;align-items:center;gap:10px}
.w-cnt{min-width:22px;text-align:center;font-weight:800}

.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(20px);z-index:90;
  padding:12px 18px;border-radius:14px;font-size:13px;font-weight:700;opacity:0;transition:.3s;
  max-width:90%;text-align:center;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast-ok{background:rgba(57,224,138,.95);color:#04170d}
.toast-err{background:rgba(255,77,109,.95);color:#fff}

/* ============================================================
   GATE SCREENS — ban gate & registration/login gate
   ============================================================ */
.gate-screen{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(circle at 50% 20%,rgba(120,80,255,.12),transparent 60%),var(--bg);
  animation:gateIn .35s ease}
@keyframes gateIn{from{opacity:0}to{opacity:1}}
.gate-card{width:100%;max-width:380px;background:var(--panel);backdrop-filter:blur(16px);
  border:1px solid var(--stroke);border-radius:22px;padding:30px 24px;text-align:center;
  box-shadow:var(--shadow)}
.gate-icon{font-size:52px;margin-bottom:10px;filter:drop-shadow(0 0 16px rgba(255,77,109,.35))}
.gate-card h1{font-size:19px;margin:4px 0 8px}
.gate-sub{color:var(--muted);font-size:13px;line-height:1.9;margin:0 0 20px}
.gate-textarea{width:100%;padding:13px;border-radius:14px;border:1px solid var(--stroke);
  background:rgba(0,0,0,.25);color:var(--txt);font-size:13px;outline:none;resize:vertical;
  font-family:inherit;margin-bottom:12px;box-sizing:border-box}
.gate-textarea:focus{border-color:var(--gold)}
.gate-form{display:flex;flex-direction:column}
.gate-input{width:100%;padding:13px;border-radius:14px;border:1px solid var(--stroke);
  background:rgba(0,0,0,.25);color:var(--txt);font-size:13px;outline:none;
  font-family:inherit;margin-bottom:12px;box-sizing:border-box;text-align:right}
.gate-input:focus{border-color:var(--gold)}
.gate-error{color:#ff4d6d;font-size:12.5px;line-height:1.7;margin:-4px 0 12px;text-align:right}
.gate-btn{display:block;width:100%;box-sizing:border-box;border:none;border-radius:14px;padding:14px;
  font-weight:800;font-size:14px;cursor:pointer;text-decoration:none;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#241a00;
  box-shadow:0 8px 24px rgba(255,209,92,.25)}
.gate-btn:active{transform:scale(.98)}
.gate-btn-ghost{background:rgba(255,255,255,.06);color:var(--txt);box-shadow:none;
  border:1px solid var(--stroke);margin-top:4px}
.gate-pending{background:rgba(255,209,92,.1);border:1px solid rgba(255,209,92,.3);border-radius:14px;
  padding:16px;font-size:12.5px;line-height:1.8;color:var(--txt)}
.gate-pending-icon{font-size:26px;margin-bottom:6px}
.gate-ban-card .gate-icon{filter:drop-shadow(0 0 16px rgba(255,77,109,.5))}
#ban-appeal-resolved{margin-bottom:14px;background:rgba(255,77,109,.1);border-color:rgba(255,77,109,.3)}

/* ============================================================
   VISUAL UPGRADE LAYER — richer depth, motion & premium finish
   (kept as an additive layer so existing rules above stay intact)
   ============================================================ */

/* full-screen vignette + top sheen for more cinematic depth */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,rgba(120,90,255,.10),transparent 55%),
             radial-gradient(ellipse at 50% 110%,rgba(0,0,0,.55),transparent 60%);
}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  box-shadow:inset 0 0 140px rgba(0,0,0,.65);
}

/* respect client safe-areas (notches / gesture bars) inside Bale/Telegram */
.app{padding-top:max(0px, env(safe-area-inset-top));
     padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.nav{bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px))}

/* thin custom scrollbar (chat / lists) */
*{scrollbar-width:thin;scrollbar-color:rgba(255,209,92,.35) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-thumb{background:rgba(255,209,92,.35);border-radius:99px}

/* boot screen: rotating imperial rays behind the crown */
.boot{overflow:hidden}
.boot::before{content:"";position:absolute;width:640px;height:640px;
  background:conic-gradient(from 0deg,transparent 0 10deg,rgba(255,209,92,.10) 12deg 16deg,transparent 18deg 40deg);
  animation:rayspin 18s linear infinite;filter:blur(1px)}
@keyframes rayspin{to{transform:rotate(360deg)}}
.boot-crown{position:relative;z-index:1}
.boot-title{position:relative;z-index:1;background-size:200% auto;animation:shine 2.6s linear infinite, pulseText 1.6s ease-in-out infinite}
@keyframes shine{to{background-position:-200% center}}
@keyframes pulseText{50%{filter:drop-shadow(0 0 10px rgba(255,209,92,.45))}}

/* card polish: soft foil sheen sweep across gold/panel surfaces on entrance */
.trophy-card,.gcard{position:relative}
.trophy-card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.08) 34%,transparent 48%);
  background-size:250% 250%;animation:foilSweep 5s ease-in-out infinite}
@keyframes foilSweep{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
.gcard{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.gcard:active{transform:scale(.985)}

/* elevate the war/battle CTA into a glowing hero button */
.btn-attack-main{box-shadow:0 12px 30px rgba(255,90,44,.35),0 0 0 1px rgba(255,180,32,.25) inset}
.btn-battle,.btn-attack-main,.btn-confirm,.gate-btn{position:relative;overflow:hidden}
.btn-battle::after,.btn-attack-main::after,.btn-confirm::after,.gate-btn::after{
  content:"";position:absolute;top:0;bottom:0;width:60%;left:-70%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:btnSheen 3.2s ease-in-out infinite}
@keyframes btnSheen{0%{left:-70%}45%{left:130%}100%{left:130%}}

/* nav bar: deeper glass, glowing active pill + lifted battle button */
.nav{background:linear-gradient(180deg,rgba(15,19,32,.75),rgba(10,13,22,.9));
  border-radius:22px;box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset}
.nav-btn{position:relative;padding:8px 0;border-radius:14px;transition:color .2s}
.nav-btn.active::before{content:"";position:absolute;inset:2px 8px;border-radius:12px;z-index:-1;
  background:radial-gradient(circle at 50% 0%,rgba(77,210,255,.18),transparent 70%)}
.nav-battle{background:linear-gradient(145deg,var(--fire),#a02040);
  box-shadow:0 0 0 4px var(--bg),0 8px 22px rgba(255,90,44,.55)}
.nav-battle::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(255,180,32,.45);animation:ringPulse 2.4s ease-out infinite}
@keyframes ringPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* avatar gets a subtle breathing glow instead of a static shadow */
.ph-avatar{animation:avatarGlow 3.6s ease-in-out infinite}
@keyframes avatarGlow{0%,100%{box-shadow:0 0 0 3px rgba(5,6,10,.6),0 0 18px rgba(255,180,32,.35)}
  50%{box-shadow:0 0 0 3px rgba(5,6,10,.6),0 0 26px rgba(255,180,32,.55)}}

/* connection status rows in settings (ok/warn tints) */
.world-row b.ok{color:var(--green);text-shadow:0 0 8px rgba(57,224,138,.35)}
.world-row b.warn{color:var(--gold)}

/* small live/offline badge for boot or gate screens */
.live-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
  padding:5px 10px;border-radius:99px;border:1px solid var(--stroke);background:rgba(255,255,255,.04)}
.live-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulse 1.6s ease-in-out infinite}
.live-badge.offline .dot{background:var(--muted);box-shadow:none;animation:none}

/* ---------- Bot Maker Pro promo card (settings) ---------- */
.promo-bot-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;
  border-radius:16px;cursor:pointer;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,rgba(77,210,255,.14),rgba(124,77,255,.10));
  border:1px solid rgba(77,210,255,.35);
  box-shadow:0 10px 30px rgba(20,40,120,.28),0 0 0 1px rgba(255,255,255,.03) inset;
  transition:transform .18s ease,box-shadow .18s ease;contain:layout paint style}
.promo-bot-card:active{transform:scale(.97)}
.promo-bot-card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  padding:1px;background:conic-gradient(from var(--pa,0deg),var(--neon),var(--neon2),var(--gold),var(--neon));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:promoSpin 5s linear infinite}
@keyframes promoSpin{to{--pa:360deg}}
@property --pa{syntax:'<angle>';inherits:false;initial-value:0deg}
.promo-bot-text{flex:1;min-width:0}
.promo-bot-title{font-weight:800;font-size:13.5px;line-height:1.55;color:var(--txt)}
.promo-bot-title b{color:var(--neon);text-shadow:0 0 10px rgba(77,210,255,.4)}
.promo-bot-cta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:11px;
  font-weight:800;color:var(--gold);opacity:.95}
.promo-bot-avatar{flex:0 0 auto;width:54px;height:54px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.15);box-shadow:0 0 0 3px rgba(5,6,10,.5),0 0 18px rgba(77,210,255,.4);
  animation:avatarGlow 3.6s ease-in-out infinite}
.promo-bot-avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* promo modal (bot profile card) */
.promo-modal-avatar{width:96px;height:96px;border-radius:26px;overflow:hidden;margin:0 auto 12px;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 4px rgba(5,6,10,.55),0 0 30px rgba(77,210,255,.45);
  animation:avatarGlow 3.6s ease-in-out infinite}
.promo-modal-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.promo-modal-name{text-align:center;font-weight:800;font-size:17px;margin-bottom:2px}
.promo-modal-tag{text-align:center;font-size:12px;color:var(--muted);margin-bottom:14px}
.promo-modal-body{font-size:13px;line-height:2.05;color:var(--txt);white-space:pre-line;
  background:rgba(0,0,0,.22);border:1px solid var(--stroke);border-radius:14px;padding:14px;margin-bottom:14px}
.promo-modal-id{display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.3);
  border:1px solid var(--stroke);border-radius:12px;padding:10px 12px;margin-bottom:14px;font-size:12.5px}
.promo-modal-id b{color:var(--neon);direction:ltr;unicode-bidi:embed;font-family:monospace,var(--font)}
.promo-modal-go{width:100%;border:none;border-radius:14px;padding:14px;font-family:var(--font);
  font-weight:800;font-size:14px;color:#03121f;cursor:pointer;
  background:linear-gradient(135deg,var(--neon),var(--neon2));
  box-shadow:0 10px 26px rgba(77,210,255,.35);transition:transform .15s}
.promo-modal-go:active{transform:scale(.96)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ============================================================
   PHASE 1 — Premium UI polish
   Visual-only upgrade: no API/data behavior changes.
   ============================================================ */
:root{
  --bg:#04060b;
  --bg2:#0a1020;
  --panel:rgba(17,24,42,.68);
  --panel-solid:#10182a;
  --stroke:rgba(143,174,255,.18);
  --stroke-strong:rgba(143,174,255,.32);
  --stroke-gold:rgba(255,209,92,.38);
  --gold:#ffd96f;
  --gold2:#f2aa35;
  --neon:#65dcff;
  --neon2:#7f6cff;
  --green:#4ce39a;
  --red:#ff607d;
  --txt:#f4f7ff;
  --muted:#9ca8c7;
  --r:20px;
  --shadow:0 18px 50px rgba(0,0,0,.44);
  --shadow-soft:0 12px 28px rgba(0,0,0,.28);
  --premium-ease:cubic-bezier(.2,.75,.25,1);
}

html,body{
  background:
    radial-gradient(circle at 88% -5%,rgba(65,88,255,.16),transparent 34%),
    radial-gradient(circle at -10% 70%,rgba(255,79,119,.11),transparent 32%),
    linear-gradient(180deg,#050811 0%,#060913 48%,#03050a 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,217,111,.055),transparent 23%),
    linear-gradient(115deg,transparent 0 45%,rgba(255,255,255,.018) 50%,transparent 55% 100%);
}

.bg-grid{
  opacity:.25;
  background-size:52px 52px;
}
.bg-glow{opacity:.34;filter:blur(110px)}

.app{
  padding-inline:12px;
  padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));
}

/* Premium sticky command header */
.profile-header{
  position:sticky;
  overflow:hidden;
  align-items:center;
  padding:13px 14px;
  margin-top:8px;
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(19,28,49,.86),rgba(10,15,29,.74));
  border:1px solid rgba(152,181,255,.19);
  box-shadow:0 12px 36px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.045);
}
.profile-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 0%,rgba(101,220,255,.09),transparent 38%),
    radial-gradient(circle at 88% 0%,rgba(255,217,111,.08),transparent 34%);
}
.profile-header>*{position:relative;z-index:1}
.ph-avatar{
  width:58px;height:58px;
  background:
    radial-gradient(circle at 32% 25%,rgba(255,255,255,.12),transparent 30%),
    linear-gradient(145deg,#26385f,#121b32);
  border-color:rgba(255,217,111,.7);
  box-shadow:
    0 0 0 4px rgba(7,10,18,.72),
    0 0 22px rgba(255,186,54,.23),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.ph-empire{letter-spacing:.1px}
.topbar-gear{
  width:40px;height:40px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border-color:rgba(152,181,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.22);
}
.topbar-gear:active{transform:scale(.93) rotate(24deg)}

/* Page hierarchy */
.page-title{
  font-size:21px;
  letter-spacing:.1px;
  margin-bottom:16px;
  text-shadow:0 3px 18px rgba(0,0,0,.36);
}
.page-title::after{
  content:"";
  display:block;
  width:42px;height:3px;
  margin-top:7px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--neon));
  box-shadow:0 0 13px rgba(101,220,255,.24);
}

/* Cards: richer depth, quieter glass */
.gcard,.trophy-card,.alliance-head,.shop-card,.rank-row,.gate-card{
  border-color:rgba(145,176,255,.17);
  box-shadow:
    0 14px 34px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.gcard{
  border-radius:20px;
  background:
    linear-gradient(155deg,rgba(23,32,55,.76),rgba(11,16,29,.76));
}
.gcard::before{
  height:1px;
  opacity:.8;
  background:linear-gradient(90deg,transparent,rgba(101,220,255,.68),rgba(255,217,111,.36),transparent);
}
.gcard-head{margin-bottom:13px}
.gcard-title{font-size:15.5px;letter-spacing:.1px}

/* Hero card */
.trophy-card{
  min-height:134px;
  border-radius:23px;
  padding:20px;
  background:
    radial-gradient(circle at 90% 8%,rgba(255,217,111,.13),transparent 34%),
    radial-gradient(circle at 7% 100%,rgba(101,220,255,.07),transparent 36%),
    linear-gradient(145deg,rgba(31,28,18,.86),rgba(12,18,32,.9));
  border-color:rgba(255,217,111,.3);
}
.trophy-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 0 39%,rgba(255,255,255,.035) 45%,transparent 53%);
}
.trophy-score{
  font-size:32px;
  letter-spacing:.2px;
  color:#ffe38c;
  text-shadow:0 0 25px rgba(255,182,54,.3);
}
.trophy-building{
  width:104px;height:104px;
  border-radius:20px;
  border-color:rgba(255,217,111,.15);
  box-shadow:inset 0 0 30px rgba(101,220,255,.04),0 12px 25px rgba(0,0,0,.26);
}

/* Economy */
.gcard-econ{
  background:
    radial-gradient(circle at 92% 4%,rgba(255,217,111,.1),transparent 32%),
    linear-gradient(145deg,rgba(54,43,15,.48),rgba(14,23,41,.78));
  border-color:rgba(255,217,111,.19);
}
.econ-vault-val{
  font-size:32px;
  color:#ffe08a;
}
.econ-cell{
  border-radius:14px;
  background:linear-gradient(145deg,rgba(4,8,15,.35),rgba(255,255,255,.025));
  border-color:rgba(145,176,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.econ-cell-val{font-size:16.5px}

/* World shortcuts become premium action rows */
.gcard-world{
  min-height:74px;
  padding:13px 15px;
  border-radius:19px;
  background:
    radial-gradient(circle at 92% 20%,rgba(101,220,255,.065),transparent 34%),
    linear-gradient(145deg,rgba(22,31,52,.8),rgba(10,15,27,.82));
  transition:transform .16s var(--premium-ease),border-color .16s,background .16s;
}
.gcard-world .world-icon{
  width:46px;height:46px;
  padding:6px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(101,220,255,.08),rgba(127,108,255,.07));
  border:1px solid rgba(101,220,255,.13);
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.28));
}
.gcard-world:active{
  transform:scale(.985);
  border-color:rgba(101,220,255,.32);
}
.world-title{font-size:14.5px}
.world-sub{font-size:11.3px;line-height:1.6}

/* War */
.btn-attack-main,.btn-battle{
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.17),transparent 28%),
    linear-gradient(135deg,#ff6540,#f29b31);
  box-shadow:0 12px 32px rgba(255,93,52,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-attack-main{
  border:1px solid rgba(255,184,104,.24);
}
.war-big{letter-spacing:.4px}

/* Shop */
.shop-grid{gap:11px}
.shop-card{
  border-radius:19px;
  padding:13px;
  min-height:182px;
  background:
    radial-gradient(circle at 50% 0%,rgba(101,220,255,.085),transparent 38%),
    linear-gradient(160deg,rgba(29,40,67,.82),rgba(10,15,27,.9));
  transition:transform .18s var(--premium-ease),border-color .18s,box-shadow .18s;
}
.shop-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.03) 48%,transparent 56%);
}
.shop-card:active{
  transform:scale(.975);
  border-color:rgba(101,220,255,.32);
  box-shadow:0 10px 24px rgba(0,0,0,.34),0 0 0 1px rgba(101,220,255,.04);
}
.sc-item-img{
  max-width:116px;
  height:73px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 10px 20px rgba(0,0,0,.23);
}
.shop-card .sc-name{font-size:13.2px}
.sc-cost{color:#ffdd78}
.sc-stat{color:#7be4ff}

/* Ranking and alliance */
.rank-row{
  border-radius:15px;
  background:linear-gradient(145deg,rgba(21,30,51,.74),rgba(10,15,27,.78));
}
.rank-row.me{
  border-color:rgba(255,217,111,.58);
  background:
    radial-gradient(circle at 94% 50%,rgba(255,217,111,.09),transparent 35%),
    linear-gradient(145deg,rgba(43,34,17,.7),rgba(14,20,34,.8));
}
.alliance-head{
  border:1px solid rgba(255,217,111,.16);
  background:
    radial-gradient(circle at 50% 0%,rgba(255,217,111,.075),transparent 45%),
    rgba(17,24,42,.72);
}

/* Modal sheet */
.modal-ov{
  background:rgba(2,4,10,.76);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal{
  position:relative;
  max-height:min(86vh,760px);
  overflow-y:auto;
  border-radius:26px 26px 0 0;
  padding:24px 17px calc(28px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(circle at 50% -5%,rgba(101,220,255,.09),transparent 34%),
    linear-gradient(180deg,rgba(19,27,47,.98),rgba(8,12,22,.99));
  border:1px solid rgba(145,176,255,.2);
  border-bottom:none;
  box-shadow:0 -18px 55px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
}
.modal::before{
  content:"";
  display:block;
  width:42px;height:4px;
  border-radius:99px;
  margin:-12px auto 14px;
  background:rgba(183,197,230,.3);
}
.modal-title{font-size:18px;margin-bottom:16px}
.buy-item-img{border:1px solid rgba(255,255,255,.07);box-shadow:0 14px 30px rgba(0,0,0,.34)}
.qbtn,.buy-qty input,.sanction-form input,.spy-search input,.chat-input input{
  border-color:rgba(145,176,255,.2);
  background:rgba(4,8,15,.42);
}
.qbtn:focus-visible,.buy-qty input:focus,.sanction-form input:focus,.spy-search input:focus,.chat-input input:focus{
  outline:none;
  border-color:rgba(101,220,255,.55);
  box-shadow:0 0 0 3px rgba(101,220,255,.08);
}

/* Five new ceasefire durations fit cleanly */
.truce-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.truce-btn{
  min-height:66px;
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 0%,rgba(101,220,255,.08),transparent 45%),
    rgba(101,220,255,.055);
  border-color:rgba(101,220,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.truce-btn:last-child:nth-child(odd){grid-column:1/-1}
.truce-btn:active{background:rgba(101,220,255,.12)}

/* Bottom navigation */
.nav{
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  padding:7px;
  border-radius:23px;
  background:
    linear-gradient(180deg,rgba(20,28,47,.91),rgba(8,12,22,.94));
  border-color:rgba(145,176,255,.2);
  box-shadow:0 16px 44px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-btn{
  position:relative;
  min-height:47px;
  justify-content:center;
  border-radius:15px;
  transition:color .18s,background .18s,transform .18s var(--premium-ease);
}
.nav-btn.active{
  color:#dff8ff;
  background:linear-gradient(180deg,rgba(101,220,255,.11),rgba(127,108,255,.07));
  box-shadow:inset 0 0 0 1px rgba(101,220,255,.08);
}
.nav-btn.active span{filter:drop-shadow(0 0 8px rgba(101,220,255,.4))}
.nav-btn:active{transform:scale(.94)}
.nav-battle{
  width:58px;height:58px;
  min-height:58px;
  margin-top:-26px;
  border:2px solid rgba(255,199,116,.28);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 25%),
    linear-gradient(145deg,#ff6840,#e88c25);
  box-shadow:0 10px 26px rgba(255,91,45,.36),0 0 0 5px rgba(6,9,16,.7);
}
.nav-battle.active{background:linear-gradient(145deg,#ff7048,#efaa32)}

/* Registration / gates */
.gate-card{
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,217,111,.08),transparent 34%),
    linear-gradient(160deg,rgba(22,31,52,.92),rgba(9,14,25,.94));
  border-color:rgba(145,176,255,.2);
}
.gate-input,.gate-textarea{
  border-color:rgba(145,176,255,.2);
  background:rgba(4,8,15,.48);
}
.gate-input:focus,.gate-textarea:focus{
  border-color:rgba(101,220,255,.52);
  box-shadow:0 0 0 3px rgba(101,220,255,.07);
}
.gate-btn{
  background:
    radial-gradient(circle at 30% 0%,rgba(255,255,255,.22),transparent 30%),
    linear-gradient(135deg,#ffe17e,#eda52f);
  box-shadow:0 10px 24px rgba(255,192,67,.2),inset 0 1px 0 rgba(255,255,255,.16);
}

/* Touch / small-screen tuning */
@media(max-width:390px){
  .profile-header{padding:11px 12px}
  .ph-avatar{width:52px;height:52px}
  .trophy-card{padding:16px;min-height:122px}
  .trophy-building{width:92px;height:92px}
  .trophy-score{font-size:28px}
  .shop-card{min-height:174px;padding:11px}
}
@media(min-width:480px){
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Keep the polish smooth on lower-power devices. */
@media (prefers-reduced-motion:reduce){
  .bg-glow,.tb-flag,.gcard-tag,.world-badge{animation:none!important}
  .shop-card,.gcard-world,.nav-btn,.topbar-gear{transition:none!important}
}


/* ============================================================
   V5 PHASE 2 — companies, defensive pacts, targeted operations
   ============================================================ */
.phase2-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.phase2-action{position:relative;display:flex;align-items:center;gap:11px;text-align:right;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:14px 12px;background:linear-gradient(145deg,rgba(17,24,39,.92),rgba(8,12,21,.96));color:#f7f9ff;box-shadow:0 12px 28px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04);overflow:hidden}
.phase2-action:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0,rgba(93,150,255,.14),transparent 52%);pointer-events:none}
.phase2-action.phase2-pact:before{background:radial-gradient(circle at 80% 0,rgba(57,224,138,.15),transparent 52%)}
.phase2-action-icon{font-size:28px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));z-index:1}
.phase2-action span:last-child{display:flex;min-width:0;flex-direction:column;gap:4px;z-index:1}
.phase2-action b{font-size:13px}
.phase2-action small{font-size:10px;line-height:1.55;color:rgba(226,232,240,.64)}
.phase2-note{margin:9px 0 13px;padding:11px 12px;border:1px solid rgba(111,147,207,.18);border-radius:14px;background:rgba(12,19,32,.72);font-size:11px;line-height:1.8;color:#b9c6da}
.company-list{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;padding:2px}
.company-card{border:1px solid rgba(72,187,120,.22);border-radius:17px;padding:13px;background:linear-gradient(145deg,rgba(9,25,24,.82),rgba(10,15,26,.9));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.company-card.breached{border-color:rgba(255,91,91,.35);background:linear-gradient(145deg,rgba(48,18,23,.72),rgba(14,14,24,.92))}
.company-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.company-card-head>div{display:flex;flex-direction:column;gap:4px}
.company-card-head b{font-size:14px}
.company-card-head small{font-size:10px;color:#9aa9bf}
.company-defense{white-space:nowrap;font-size:11px;color:#93c5fd;background:rgba(59,130,246,.09);border:1px solid rgba(96,165,250,.14);padding:6px 8px;border-radius:999px}
.company-stats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;font-size:10px;color:#b9c6da}
.company-stats span{padding:5px 8px;background:rgba(255,255,255,.035);border-radius:10px}
.company-actions{display:flex;gap:7px;flex-wrap:wrap}
.phase2-mini-btn{border:1px solid rgba(104,155,255,.22);border-radius:11px;background:rgba(41,91,170,.13);color:#dce9ff;padding:8px 10px;font-size:10px;font-weight:700}
.phase2-mini-btn.danger{border-color:rgba(255,93,93,.24);background:rgba(148,34,45,.13);color:#ffc1c6}
.phase2-mini-btn.wide{width:100%;margin-top:10px}
.phase2-empty{text-align:center;padding:20px;color:#8493a9;font-size:12px}
.phase2-create{display:flex;gap:8px;margin-top:12px}
.phase2-input{width:100%;min-width:0;border:1px solid rgba(132,160,210,.2);border-radius:13px;background:rgba(4,9,17,.75);color:#f5f7fb;padding:11px 12px;outline:none}
.phase2-input:focus{border-color:rgba(88,147,255,.55);box-shadow:0 0 0 3px rgba(65,118,211,.08)}
.phase2-create .btn-confirm{margin:0;white-space:nowrap;width:auto}
.allocation-list{display:flex;flex-direction:column;gap:8px;max-height:54vh;overflow:auto}
.allocation-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)}
.allocation-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.allocation-meta b{font-size:11px}
.allocation-meta small{font-size:9px;color:#8696ac;line-height:1.5}
.allocation-input{width:68px;flex:0 0 68px;border-radius:10px;border:1px solid rgba(113,145,195,.2);background:#080d16;color:#fff;padding:8px;text-align:center}
.phase2-divider{position:relative;text-align:center;margin:14px 0;color:#6e7d93;font-size:10px}
.phase2-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(255,255,255,.06)}
.phase2-divider span{position:relative;background:#0b101a;padding:0 10px}
.pact-code-card{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:13px;border-radius:15px;background:linear-gradient(145deg,rgba(22,52,47,.6),rgba(10,18,26,.92));border:1px solid rgba(57,224,138,.2)}
.pact-code-card span{font-size:10px;color:#9db1af}.pact-code-card b{font-size:20px;letter-spacing:2px;color:#86efac}
.pact-code-card .phase2-mini-btn{grid-column:1/-1}
.pact-members{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.pact-member{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.035);font-size:10px}
.pact-member.me{border:1px solid rgba(250,204,21,.18);background:rgba(120,91,19,.08)}
.pact-member b{color:#9ac1ff;font-size:9px}
.phase2-target-chip{display:inline-flex;margin:0 0 10px;padding:6px 9px;border-radius:999px;background:rgba(74,123,214,.12);border:1px solid rgba(99,153,255,.18);font-size:10px;color:#bcd2ff}
.scope-breached{opacity:.66}
.phase2-pact-result{margin:12px 0;padding:10px;border-radius:13px;background:rgba(42,99,78,.13);border:1px solid rgba(57,224,138,.17);color:#bff2d6;font-size:10px;line-height:1.7}
.ltr{direction:ltr;text-align:left}

@media (max-width:380px){
  .phase2-grid{grid-template-columns:1fr}
  .phase2-create{flex-direction:column}
  .phase2-create .btn-confirm{width:100%}
}


/* V5.2.1 — cleaner companies/deployment UI + newcomer onboarding */
.phase2-note.compact{margin:8px 0 11px;padding:9px 11px;line-height:1.65}
.company-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:9px 0}
.company-overview>div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border:1px solid rgba(112,145,198,.13);border-radius:12px;background:rgba(255,255,255,.026)}
.company-overview b{font-size:15px;color:#f4f7fb}.company-overview span{font-size:8.5px;color:#8595aa}
.company-overview .danger-stat{border-color:rgba(255,90,105,.22);background:rgba(137,30,44,.09)}
.company-table-wrap{display:flex;flex-direction:column;gap:6px;max-height:48vh;overflow:auto;padding:1px}
.company-table{display:grid;grid-template-columns:minmax(0,1.5fr) .55fr .85fr auto;align-items:center;gap:7px}
.company-table-head{padding:0 10px 5px;font-size:8px;color:#718198}
.company-table-row{padding:10px;border:1px solid rgba(89,153,119,.17);border-radius:13px;background:rgba(8,20,20,.66)}
.company-table-row.breached{border-color:rgba(255,91,91,.27);background:rgba(52,17,24,.5)}
.company-name-cell{display:flex;flex-direction:column;min-width:0;gap:3px}.company-name-cell b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.company-name-cell small{font-size:8px;color:#8ea0b4}
.company-table-row>span{font-size:10px;color:#d6e0ef;text-align:center}
.company-manage-btn{border:1px solid rgba(95,154,255,.22);border-radius:9px;background:rgba(50,105,195,.13);color:#dce9ff;padding:7px 8px;font-size:9px;font-weight:800}
.company-row-extra{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.04)}
.company-row-extra.subtle{justify-content:space-between;color:#75869b;font-size:8.5px}
.company-create-box{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:11px}
.company-create-box .btn-confirm{width:auto;margin:0;white-space:nowrap}
.company-manager-status{display:flex;gap:7px;margin:8px 0}.company-manager-status span{flex:1;text-align:center;padding:8px;border-radius:11px;background:rgba(255,255,255,.03);font-size:9px;color:#b9c7d9}
.allocation-list.clean{max-height:52vh;gap:10px}
.allocation-section{border:1px solid rgba(255,255,255,.055);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.018)}
.allocation-section-title{padding:9px 10px;font-size:10px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.05);color:#d9e6f7}
.allocation-table{display:grid;grid-template-columns:minmax(0,1.5fr) .55fr .7fr;align-items:center;gap:7px;padding:8px 10px}
.allocation-head{font-size:8px;color:#6f8095;background:rgba(255,255,255,.018)}
.allocation-data{border-top:1px solid rgba(255,255,255,.035)}
.allocation-data>span{font-size:9px;text-align:center;color:#b7c4d4}
.allocation-name{min-width:0;display:flex;flex-direction:column;gap:2px}.allocation-name b{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.allocation-name small{font-size:7.5px;color:#728399}
.allocation-table .allocation-input{width:58px;justify-self:center;padding:7px}
.phase2-empty.clean{display:flex;flex-direction:column;gap:5px}.phase2-empty.clean b{color:#c1ccda}.phase2-empty.clean span{font-size:9px;color:#718096}
.settings-tutorial-btn{width:100%;margin:0 0 12px;padding:11px 12px;border-radius:13px;border:1px solid rgba(83,139,235,.18);background:rgba(45,92,172,.1);color:#dbe9ff;font-weight:800}
.onboard-wrap{text-align:center;padding:3px 2px 2px}.onboard-progress{display:flex;justify-content:center;gap:5px;margin-bottom:15px}.onboard-progress i{width:22px;height:3px;border-radius:999px;background:rgba(255,255,255,.08)}.onboard-progress i.active{background:#6ea7ff}
.onboard-icon{font-size:44px;margin:5px 0 7px;filter:drop-shadow(0 7px 16px rgba(0,0,0,.35))}
.onboard-step{font-size:8.5px;color:#71839c;margin-bottom:5px}.onboard-title{font-size:16px;font-weight:900;color:#f4f7fb;margin-bottom:9px}.onboard-text{font-size:11px;line-height:1.9;color:#aebcd0;padding:0 6px}
.onboard-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:18px}.onboard-btn{padding:11px;border-radius:12px;font-weight:800;border:1px solid transparent}.onboard-btn.primary{background:linear-gradient(135deg,#315faa,#21477f);color:#fff;border-color:rgba(114,166,255,.25)}.onboard-btn.ghost{background:rgba(255,255,255,.035);color:#9aa9bd;border-color:rgba(255,255,255,.07)}
@media(max-width:380px){.company-overview{grid-template-columns:repeat(2,1fr)}.company-table{grid-template-columns:minmax(0,1.35fr) .5fr .75fr auto}.company-table-head{font-size:7px}.company-create-box{grid-template-columns:1fr}.company-create-box .btn-confirm{width:100%}}

/* ============================================================
   V5 PHASE 2.2 — Bale Web / desktop company modal scroll fix
   Keep a single vertical scroll owner (the modal sheet) to avoid
   nested wheel scrolling inside Bale Web on desktop.
   ============================================================ */
.modal{
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.company-list,
.company-table-wrap,
.allocation-list{
  max-height:none !important;
  overflow:visible !important;
  overscroll-behavior:auto;
}

/* Desktop Bale Web: make the wheel target unambiguous and keep
   the full company/defense content inside the modal scroll. */
@media (pointer:fine){
  .modal{
    overflow-y:auto;
    scrollbar-gutter:stable;
    touch-action:pan-y;
  }
  .company-list,
  .company-table-wrap,
  .allocation-list{
    touch-action:auto;
  }
}



/* ===== V5.2 strategic systems ===== */
.income-next{
  margin:10px 0 2px;
  padding:8px 10px;
  border:1px solid rgba(212,175,55,.2);
  border-radius:10px;
  background:rgba(212,175,55,.06);
  color:#d9c77b;
  font-size:12px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.v52-shortcuts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:10px 0 14px;
}
.v52-shortcut{
  min-height:88px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  color:var(--text,#f3f4f6);
  padding:12px;
  text-align:right;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:9px;
  align-items:center;
  cursor:pointer;
}
.v52-shortcut>span{grid-row:1/3;font-size:26px}
.v52-shortcut b{font-size:13px}
.v52-shortcut small{font-size:10px;color:var(--muted,#9298a5);font-weight:400}
.rank-tabs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:2px 1px 10px;
  scrollbar-width:none;
}
.rank-tabs::-webkit-scrollbar{display:none}
.rank-tab{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:#b9bec8;
  padding:8px 11px;
  border-radius:999px;
  font-size:11px;
}
.rank-tab.active{
  color:#f7df7c;
  border-color:rgba(212,175,55,.48);
  background:rgba(212,175,55,.12);
}
.rank-caption{font-size:11px;color:#8f96a3;margin:0 2px 12px}
.power-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:14px;
}
.power-hero>div{
  padding:14px 10px;
  border:1px solid rgba(212,175,55,.18);
  border-radius:14px;
  background:rgba(212,175,55,.055);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.power-hero span,.power-hero small{font-size:10px;color:#9ba1ac}
.power-hero b{font-size:25px;color:#f5da70}
.power-grid{display:grid;gap:9px}
.power-item{padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}
.power-item-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:7px}
.power-track{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.power-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8b742b,#e2c456)}
.news-feed,.history-list,.operations-list{display:grid;gap:9px}
.news-item{
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  padding:12px;
}
.news-meta{display:flex;justify-content:space-between;color:#8f96a3;font-size:10px;margin-bottom:7px}
.news-item>b{display:block;font-size:13px;margin-bottom:5px}
.news-item p{white-space:pre-line;color:#b9bec8;font-size:11px;line-height:1.75;margin:5px 0 0}
.news-agency{color:#c9ae55;font-size:10px}
.history-item{display:grid;grid-template-columns:12px 1fr;gap:9px;padding:10px 4px}
.history-dot{width:9px;height:9px;border-radius:50%;background:#c7a63c;margin-top:5px;box-shadow:0 0 0 4px rgba(199,166,60,.08)}
.history-item b{font-size:12px}
.history-item p{color:#aeb4bf;font-size:11px;margin:4px 0;line-height:1.65}
.history-item time{color:#747b88;font-size:9px}
.operation-create{display:grid;gap:8px;margin-bottom:14px}
.operation-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  padding:11px;
}
.operation-main{display:grid;gap:3px;min-width:0}
.operation-main b{font-size:12px}
.operation-main>span{font-size:10px;color:#a8aeba}
.op-status{font-size:9px;color:#d4bd65}
.operation-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:430px){
  .operation-row{align-items:flex-start;flex-direction:column}
  .operation-actions{width:100%;justify-content:flex-start}
}


/* ============================================================
   V6 command center
   ============================================================ */
.v6-launch-card{border-color:rgba(112,194,255,.28);box-shadow:0 18px 40px rgba(0,80,160,.10)}
.v6-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px}
.v6-summary>div{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;gap:6px}
.v6-summary span{font-size:12px;opacity:.72}.v6-summary b{font-size:14px}
.v6-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v6-card{min-height:105px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));color:inherit;padding:14px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.v6-card:active{transform:scale(.985)}.v6-card>span{font-size:27px}.v6-card b{font-size:13px}.v6-card small{font-size:10px;opacity:.58;text-align:center;line-height:1.5}.v6-card.wide{grid-column:1/-1;min-height:92px}
.v6-ready-list{display:grid;gap:9px;margin:12px 0}
.v6-ready-list button{border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.035);color:inherit;padding:13px;text-align:right;display:flex;flex-direction:column;gap:5px}
.v6-ready-list small{opacity:.62}
.v6-form{display:grid;gap:9px;margin:10px 0 15px}
.v6-list{display:grid;gap:8px;margin:10px 0 14px}
.v6-list-row{border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.028);padding:11px 12px;display:flex;flex-direction:column;gap:6px}
.v6-list-row.compact{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.v6-list-row.compact>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.v6-list-row b{font-size:13px;line-height:1.6}.v6-list-row span{font-size:11px;opacity:.68;line-height:1.7}.v6-list-row small{font-size:10px;opacity:.48}
.v6-inline-actions{display:flex;gap:7px;flex-wrap:wrap}
.v6-eq-row{border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.028);padding:11px;margin-bottom:8px}
.v6-eq-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}.v6-eq-head span{font-size:10px;opacity:.6}
.v6-eq-controls{display:grid;grid-template-columns:1.4fr .65fr auto;gap:7px;align-items:center}
@media(max-width:430px){.v6-eq-controls{grid-template-columns:1fr 90px}.v6-eq-controls .v6-eq-save{grid-column:1/-1}.v6-summary{grid-template-columns:1fr}.v6-grid{gap:8px}}