:root{
  --bg:#06101d;--bg2:#0a1524;--panel:#0f1c2f;--panel2:#15253d;--line:#223652;--txt:#edf4ff;--muted:#8ea6c8;
  --red:#ff4d5e;--red2:#d22947;--green:#17c964;--amber:#ffb020;--blue:#4b8dff;--cyan:#20c8ff;--violet:#9d7bff;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;scroll-behavior:smooth} body{font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at top,#13243f 0%,var(--bg) 38%,#020812 100%);color:var(--txt)}
a{color:inherit;text-decoration:none} .container.wide{max-width:1320px;margin:0 auto;padding:0 18px}.page{padding:28px 0 60px}
.topbar{position:sticky;top:0;z-index:30;background:rgba(3,9,18,.76);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.08em;font-size:1.1rem}.brand-mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--red),var(--violet));color:#fff;box-shadow:0 8px 24px rgba(157,123,255,.24)}
.topnav{display:flex;gap:10px;flex-wrap:wrap}.topnav a{padding:10px 14px;border-radius:14px;color:#cbdbf2;border:1px solid transparent}.topnav a:hover,.topnav a.active-link,.topnav a.current{background:#132136;border-color:rgba(255,255,255,.08)}.topnav .danger-link{background:rgba(239,68,68,.13);color:#ffb2b2}
.hero{padding:68px 0 38px}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.hero h1{font-size:clamp(2.2rem,5vw,4.8rem);margin:0 0 14px;line-height:1.02;letter-spacing:-.04em}.hero p{color:var(--muted);font-size:1.06rem;max-width:720px}
.card,.panel{background:linear-gradient(180deg,rgba(18,32,53,.96),rgba(10,19,32,.96));border:1px solid rgba(130,153,185,.14);border-radius:24px;box-shadow:0 22px 60px rgba(0,0,0,.30)}
.card{padding:22px}.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:22px}
.grid-2,.grid-3,.grid-4,.dash-grid,.admin-grid,.grid-5{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.dash-grid{grid-template-columns:1.35fr .75fr}.admin-grid{grid-template-columns:290px 1fr}
.stat-card .label,.muted{color:var(--muted)} .stat-card .value{font-size:2rem;font-weight:900;margin-top:10px}.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:.83rem;font-weight:700}
.badge.red{background:rgba(239,68,68,.12);color:#ffb2b2}.badge.green{background:rgba(16,185,129,.14);color:#96f4d0}.badge.amber{background:rgba(245,158,11,.14);color:#ffd48a}.badge.blue{background:rgba(59,130,246,.14);color:#a6c6ff}.badge.violet{background:rgba(157,123,255,.16);color:#dacfff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border:none;border-radius:14px;font-weight:800;cursor:pointer;transition:.2s;position:relative;overflow:hidden}.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg,var(--red),var(--red2));color:#fff}.btn-secondary{background:#16253b;color:#fff;border:1px solid rgba(255,255,255,.08)}.btn-success{background:linear-gradient(90deg,#059669,#047857);color:#fff}.btn-warning{background:linear-gradient(90deg,#f59e0b,#d97706);color:#140b00}.btn-sm{padding:9px 12px;border-radius:12px;font-size:.9rem}.btn.is-loading{opacity:.85;pointer-events:none}
.notice{padding:14px 16px;border-radius:16px;margin-bottom:18px;font-weight:600}.notice-success{background:rgba(16,185,129,.13);border:1px solid rgba(16,185,129,.25)}.notice-danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25)}.notice-warning{background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.25)}
.form-grid{display:grid;gap:14px}.field label{display:block;font-size:.92rem;font-weight:700;margin-bottom:8px}.input,.select,.textarea,input[type=file]{width:100%;background:#0b1728;color:#fff;border:1px solid #263b56;border-radius:14px;padding:13px 14px;outline:none}.textarea{min-height:120px;resize:vertical}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}.table th{font-size:.84rem;text-transform:uppercase;color:#9db0c9;letter-spacing:.05em;text-align:left}
.city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.city-card{position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}.city-card:hover{transform:translateY(-2px)}.city-card .city-id{font-size:.75rem;color:#8fa0b8}.city-card .hp{height:12px;background:#20334a;border-radius:999px;overflow:hidden}.city-card .hp>span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#34d399)}
.city-card.under-attack .hp>span{background:linear-gradient(90deg,var(--amber),var(--red))}
.attack-btn.fire{animation:firePulse .28s ease 1}.city-card.hit{animation:cardHit .35s ease 1}
.small{font-size:.9rem}.right{margin-left:auto}.stack{display:flex;flex-direction:column;gap:16px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.between{display:flex;justify-content:space-between;gap:12px;align-items:center}.mt-1{margin-top:8px}.mt-2{margin-top:14px}.mt-3{margin-top:20px}.mt-4{margin-top:28px}.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:14px}.mb-3{margin-bottom:20px}.text-center{text-align:center}
.login-shell{max-width:520px;margin:36px auto}.panel-title{font-size:1.25rem;font-weight:800;margin:0 0 14px}.section-title{font-size:1.35rem;font-weight:900;margin:0 0 16px}.sub{font-size:.95rem;color:var(--muted)}
.sidebar-card{padding:18px;position:sticky;top:94px}.sidebar-title{font-size:1rem;font-weight:800;color:#fff;margin-bottom:10px}.side-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:#d8e6fb}.side-link:hover,.side-link.current{background:#162840}
.footer{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;color:#7e92ad}.kpi{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.kpi i{font-size:1.4rem;color:#a7c4f9}
.kicker{color:#9db0c9;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;font-weight:800}.hero-panel{position:relative;overflow:hidden}.hero-panel::after{content:'';position:absolute;inset:auto -40px -50px auto;width:180px;height:180px;background:radial-gradient(circle,var(--cyan),transparent 65%);opacity:.15}
.metric{padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
#toast-root{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:70}.toast{padding:13px 16px;border-radius:14px;background:#0c192b;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px rgba(0,0,0,.28);opacity:0;transform:translateY(10px);transition:.22s}.toast.show{opacity:1;transform:translateY(0)}.toast-success{border-color:rgba(16,185,129,.25)}.toast-error{border-color:rgba(239,68,68,.25)}.toast-warning{border-color:rgba(245,158,11,.25)}
.progress-ring{display:flex;align-items:center;gap:12px}.chip{padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
@keyframes firePulse{0%{transform:scale(1)}35%{transform:scale(.95)}70%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes cardHit{0%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
@media (max-width: 1080px){.hero-grid,.dash-grid,.admin-grid,.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.sidebar-card{position:static}.topbar-inner{flex-direction:column;align-items:flex-start;padding:14px 0}.topnav{width:100%}}
@media (max-width: 720px){.page{padding-top:18px}.card{padding:18px}.hero{padding:36px 0 24px}.hero h1{font-size:2.3rem}.topnav{overflow:auto;white-space:nowrap;padding-bottom:6px}.topnav a{flex:0 0 auto}.table th,.table td{padding:12px 8px;font-size:.92rem}#toast-root{left:14px;right:14px;bottom:14px}}


.metric .value{font-size:2.1rem;font-weight:900;margin-top:6px}
.section-title{font-size:1.2rem;font-weight:900}
.panel-title{font-size:1.02rem;font-weight:800}
.stack{display:grid;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mt-2{margin-top:12px}.mt-4{margin-top:24px}.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
.chip{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.city-card.hit{animation:cityHit .38s ease}
.attack-btn.fire{transform:scale(.96)}
.impact-ring{position:absolute;inset:20%;border:2px solid rgba(255,77,94,.45);border-radius:999px;animation:impact .6s ease-out;pointer-events:none}
.footer{padding:28px 0 90px;color:#91a7c6}
.mobile-dock{display:none}
@keyframes impact{0%{transform:scale(.2);opacity:.8}100%{transform:scale(1.4);opacity:0}}
@keyframes cityHit{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px) scale(1.01)}50%{transform:translateX(2px)}75%{transform:translateX(-2px)}}
@media (max-width: 1100px){
  .grid-4,.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-grid,.admin-grid,.hero-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .container.wide{padding:0 14px}
  .topnav{display:none}
  .hero{padding:34px 0 24px}
  .grid-2,.grid-3,.grid-4,.grid-5,.city-grid{grid-template-columns:1fr}
  .card{padding:18px}
  .stat-card .value,.metric .value{font-size:1.5rem}
  .mobile-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:fixed;left:10px;right:10px;bottom:10px;z-index:60;background:rgba(7,16,29,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
  .mobile-dock a{display:grid;justify-items:center;gap:5px;padding:10px;border-radius:14px;color:#d5e3f7;font-size:.78rem}
  .mobile-dock a:hover,.mobile-dock a:focus{background:#132136}
  .footer{padding-bottom:120px}
}


body{background:linear-gradient(90deg,#06132a 0,#081a35 55%,#06132a 100%)}
.brand-red{color:#ff585d}
.topbar{background:rgba(3,10,23,.95);border-bottom:1px solid rgba(255,255,255,.08)}
.topnav{align-items:center}
.topnav a,.menu-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#0f1e35}
.topnav .danger-link{width:44px;justify-content:center}
.menu-pills{display:flex;gap:10px;align-items:center;margin-right:8px}
.menu-pill.green{border-color:rgba(17,208,131,.5);color:#58f0b4}
.menu-pill.red{border-color:rgba(255,61,123,.45);color:#ff7bb0}
.menu-pill.amber{border-color:rgba(255,196,32,.45);color:#ffd258}
.hero-ops{border:1px solid rgba(0,238,166,.18);background:linear-gradient(180deg,#09182f 0,#081326 100%)}
.ops-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.menu-alert,.airdrop-box,.countdown-bar,.shield-banner{border-radius:18px;padding:16px 20px;font-weight:800}
.menu-alert{border:1px dashed rgba(0,198,255,.5);color:#18cfff;background:rgba(0,198,255,.05);text-transform:uppercase;text-align:center}
.airdrop-box{background:linear-gradient(90deg,#ff4559,#d82344);color:#fff;text-align:center;font-size:1.2rem;box-shadow:0 15px 40px rgba(255,69,89,.25)}
.hero-ref{background:linear-gradient(90deg,rgba(1,75,58,.7),rgba(14,128,70,.65));border:1px solid rgba(34,197,94,.35);border-radius:20px;padding:24px}
.hero-title{font-size:clamp(2rem,4vw,3.4rem);margin:10px 0;color:#10ce75}
.countdown-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#780018,#650014);border:1px solid rgba(255,52,82,.5);color:#fff}
.radar-panel{border:1px solid #04dcae;border-radius:18px;overflow:hidden;background:#031913}
.radar-head{display:flex;justify-content:space-between;padding:12px 18px;background:linear-gradient(90deg,#013c2f,#05251f);color:#0de4b0;font-weight:900;letter-spacing:.06em}
.radar-body{position:relative;height:230px;background:linear-gradient(180deg,rgba(0,255,165,.04),rgba(0,0,0,.18))}
.radar-grid{position:absolute;inset:0;background:
linear-gradient(rgba(0,255,187,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,187,.15) 1px, transparent 1px);
background-size:38px 38px}
.radar-dot{position:absolute;display:inline-flex;align-items:center;gap:8px;color:#ff7272}
.radar-dot::before{content:'';display:block;width:16px;height:16px;border-radius:50%;background:#ff585d;box-shadow:0 0 0 10px rgba(255,88,93,.1),0 0 18px rgba(255,88,93,.8)}
.radar-dot b{font-size:.92rem}
.city-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.city-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:#1a2941;border:1px solid rgba(255,255,255,.06);font-size:1.4rem}
.city-icon.shield{color:#1ee6a4}.city-icon.target{color:#ff4656}
.stat-line{display:flex;justify-content:space-between;align-items:center;color:#b8cae4;font-weight:800}
.feed-item{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.feed-item:last-child{border-bottom:none}
.danger-text{color:#ff5d68}
.btn-lg{padding:16px 24px;font-size:1.05rem}
.tactical-panel{box-shadow:0 0 0 1px rgba(0,225,255,.08),0 25px 60px rgba(0,0,0,.24)}
@media (max-width: 980px){.ops-grid{grid-template-columns:1fr}}


.realistic-icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 36px rgba(0,0,0,.26);
  font-size:1.8rem;
}
.realistic-icon.blue{color:#89c2ff;background:linear-gradient(180deg, rgba(75,141,255,.24), rgba(75,141,255,.08));}
.realistic-icon.amber{color:#ffd27d;background:linear-gradient(180deg, rgba(255,176,32,.24), rgba(255,176,32,.08));}
.realistic-icon.red{color:#ff919b;background:linear-gradient(180deg, rgba(255,77,94,.24), rgba(255,77,94,.08));}
.onboarding-steps .step-card{
  position:relative;
  padding:24px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(17,31,52,.96), rgba(10,19,32,.96));
  border:1px solid rgba(255,255,255,.08);
}
.onboarding-steps .step-no{
  position:absolute;
  top:18px;
  right:18px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:900;
}
.onboarding-steps h3{margin:16px 0 8px;font-size:1.18rem}
.onboarding-steps p{margin:0;color:var(--muted);line-height:1.6}
.topnav a i,
.mobile-dock a i,
.side-link i,
.menu-pill i,
.btn i,
.badge i{
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.28));
}
.brand-mark{
  background:radial-gradient(circle at 30% 30%, #ff9aa5 0, #ff4d5e 35%, #8420ff 100%);
}


.story-layout{align-items:stretch}
.story-block{
  padding:22px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}
.story-block .section-title{margin-top:14px}
.story-block .sub{line-height:1.75}


.radar-ticker{
  margin-top:20px;
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg,#0b1a2c,#07121f);
  border:1px solid rgba(255,255,255,.08);
}
.radar-label{
  font-weight:800;
  margin-bottom:8px;
  color:#ff4d5e;
}
.ticker-wrap{
  overflow:hidden;
  position:relative;
}
.ticker-track{
  display:flex;
  gap:40px;
  white-space:nowrap;
  animation: tickerMove 18s linear infinite;
}
.ticker-item{
  color:#fff;
  font-weight:600;
}
@keyframes tickerMove{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}


body{background:
linear-gradient(90deg,rgba(30,72,128,.08) 1px,transparent 1px),
linear-gradient(180deg,rgba(30,72,128,.08) 1px,transparent 1px),
linear-gradient(90deg,#06122a 0,#071831 35%,#081326 100%);
background-size:42px 42px,42px 42px,100% 100%}
.brand,.section-title,.hero-title,.sidebar-title,.radar-head,.page-title{font-family:"Barlow Condensed", Inter, sans-serif;letter-spacing:.02em}
.brand{font-size:1.55rem}
.topbar{background:#030c1c}
.topnav a,.menu-pill{padding:8px 12px;border-radius:12px;font-size:.88rem;background:#0c172b}
.menu-pill{font-weight:800}
.menu-pill.green{color:#14d28a}.menu-pill.red{color:#ff6492}.menu-pill.amber{color:#ffc83d}
.page-title{font-size:3.6rem;line-height:.9;margin:0;text-transform:uppercase}
.page-subtitle{max-width:840px;color:#c4d2ea}
.btn{border-radius:10px;text-transform:uppercase;letter-spacing:.02em}
.btn-primary{background:linear-gradient(180deg,#ef2f34,#c71620)}
.btn-secondary{background:#1d2d45}
.btn-success{background:linear-gradient(180deg,#1dbd71,#158d56)}
.btn-warning{background:linear-gradient(180deg,#f5b413,#d88711)}
.panel-title,.section-title{font-family:"Barlow Condensed", Inter, sans-serif}
.panel-title{font-size:1.25rem}.section-title{font-size:1.8rem}
.card{border-radius:16px;background:linear-gradient(180deg,#192842,#121e33);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.hero-landing{position:relative;overflow:hidden;padding:54px 0 90px;background:
radial-gradient(circle at 50% 10%, rgba(87,120,255,.18), transparent 22%),
linear-gradient(180deg, rgba(8,18,43,.45), rgba(6,13,25,.84)),
linear-gradient(180deg,#071021,#081731)}
.hero-landing::before{content:"";position:absolute;inset:0;background-image:
radial-gradient(circle at 10% 20%, rgba(255,255,255,.08) 0 2px, transparent 3px),
radial-gradient(circle at 70% 35%, rgba(255,255,255,.06) 0 2px, transparent 3px),
radial-gradient(circle at 80% 80%, rgba(255,255,255,.06) 0 2px, transparent 3px),
radial-gradient(circle at 30% 75%, rgba(255,255,255,.05) 0 2px, transparent 3px);
opacity:.35}
.hero-landing .centered{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:14px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:2px solid #f4b913;color:#ffd059;border-radius:999px;font-family:"Barlow Condensed";font-size:1.1rem;background:rgba(0,0,0,.3)}
.hero-action{min-width:180px}
.metric-bar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:720px;margin:48px auto 0}
.metric-box{background:#1d2a43;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:18px;text-align:center}
.metric-box .value{font-family:"Barlow Condensed";font-size:2.7rem;color:#ff5b5b}
.metric-box .label{font-size:.86rem;font-weight:800;text-transform:uppercase}
.tutorial-section{padding:36px 0 10px}
.tutorial-head{text-align:center;margin-bottom:28px}
.onboarding-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step-card{text-align:center;padding:10px 18px}
.step-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:rgba(48,110,255,.15);border:2px solid rgba(51,131,255,.55);color:#59a6ff;font-size:1.6rem}
.step-card h3{font-family:"Barlow Condensed";font-size:1.5rem;margin:0 0 8px}
.step-card p{font-size:.92rem;color:#c7d5ea;margin:0 auto;max-width:270px}
.ops-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ops-chip{padding:16px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.1);font-family:"Barlow Condensed";font-size:1.3rem;text-transform:uppercase}
.ops-chip.info{border-style:dashed;color:#17c6ff;background:#081623}
.ops-chip.alert{background:#a11d2d;color:#fff}
.ref-banner{background:linear-gradient(90deg,#08362b,#0f7b4d);border:1px solid rgba(53,225,132,.42);padding:18px;border-radius:12px}
.ref-banner h2{font-family:"Barlow Condensed";font-size:2rem;color:#11d06d;margin:0 0 8px}
.inline-box{background:#1d2938;border-radius:10px;padding:14px;border:1px solid rgba(255,255,255,.08)}
.countdown-strong{font-family:"Barlow Condensed";font-size:2.2rem;letter-spacing:.08em}
.attack-ticker{padding:10px 14px;border:1px solid rgba(255,255,255,.14);background:#1d293c;border-radius:10px;overflow:hidden}
.attack-track{display:flex;gap:42px;white-space:nowrap;min-width:max-content;animation:tickerFlow 30s linear infinite}
.attack-item{color:#dbe7fa}.attack-item strong{color:#ff5158}
@keyframes tickerFlow{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.radar-panel{border-radius:12px;overflow:hidden;border:1px solid rgba(0,255,166,.5)}
.radar-head{background:#053f2e;color:#12d89a;padding:8px 14px;font-size:1.15rem;display:flex;justify-content:space-between;text-transform:uppercase}
.radar-body{height:210px}
.city-grid.cards-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.target-card{padding:20px;border-radius:14px;border:1px solid rgba(86,115,156,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.target-card.home{box-shadow:0 0 0 1px rgba(5,244,187,.4),0 0 24px rgba(5,244,187,.12)}
.city-name{font-family:"Barlow Condensed";font-size:1.95rem;margin:0}
.city-meta{color:#90a7c8;font-size:.92rem}
.health-label{font-size:.82rem;color:#9db2cf;text-transform:uppercase;font-weight:800}
.health-val{font-family:"Barlow Condensed";font-size:1.4rem}
.attack-cost{font-size:.88rem;color:#ffc538}.damage-val{font-size:.88rem;color:#ff6a74}
.modal-overlay{position:fixed;inset:0;background:rgba(2,8,16,.72);display:none;align-items:center;justify-content:center;z-index:100}
.modal-overlay.open{display:flex}
.game-modal{width:min(980px,92vw);background:#121e33;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.45)}
.game-modal.small{width:min(700px,92vw)}
.game-modal .modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.1);font-family:"Barlow Condensed";font-size:1.8rem}
.game-modal.commander .modal-head{color:#ff4c58;background:linear-gradient(90deg,rgba(124,18,35,.28),rgba(41,17,33,.3))}
.game-modal.airdrop .modal-head{color:#10cb78;background:linear-gradient(90deg,rgba(8,80,56,.34),rgba(12,42,40,.32))}
.modal-body-grid{display:grid;grid-template-columns:280px 1fr;min-height:420px}
.modal-portrait{display:flex;align-items:end;justify-content:center;padding:28px;background:linear-gradient(180deg,#0f1c35,#0b1324)}
.portrait-placeholder{width:170px;height:220px;border-radius:20px;background:linear-gradient(180deg,#223756,#0f1d34);display:grid;place-items:center;font-size:5rem;color:#7e9cc9;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.modal-copy{padding:22px;overflow:auto;max-height:450px}
.quote-box{border-left:5px solid #ff5b61;background:rgba(255,255,255,.05);padding:16px 18px;border-radius:10px;font-size:1.12rem;line-height:1.6;margin-bottom:18px}
.modal-number{font-family:"Barlow Condensed";font-size:1.55rem;margin:14px 0 6px}
.modal-number.blue{color:#14cfff}.modal-number.amber{color:#ffc728}.modal-number.red{color:#ff4d5e}.modal-number.green{color:#16d47d}
.modal-actions{padding:16px 22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;background:#0d1730}
.profile-shell{width:min(760px,94vw);margin:0 auto}
.profile-card{padding:0}
.profile-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.12);font-family:"Barlow Condensed";font-size:1.8rem;color:#11c879}
.avatar-ring{width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%, rgba(25,230,176,.3), rgba(16,50,75,.3));border:2px solid #12f4cf;font-size:2rem}
.score-slim{height:10px;background:#23354f;border-radius:999px;overflow:hidden}.score-slim span{display:block;height:100%;background:#16d47d}
.kpi-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi-mini{background:#1c2a40;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:16px;text-align:center}
.kpi-mini .num{font-family:"Barlow Condensed";font-size:2rem}
.invite-box{background:#15263d;border:1px solid #ffca1f;border-radius:12px;padding:14px}
.invite-box input{background:#0d1728;border:1px solid rgba(255,255,255,.12);color:#fff}
.wallet-layout{display:grid;grid-template-columns:360px 1fr;gap:14px}
.wallet-box-title,.store-title,.tasks-title,.honor-title{font-family:"Barlow Condensed";font-size:2.4rem;margin:0}
.store-hero{text-align:center;padding:16px 0 22px}
.store-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.store-pack{padding:22px;text-align:center;border-radius:14px;position:relative}
.store-pack.popular{box-shadow:0 0 0 1px rgba(255,194,31,.65)}
.store-pack .pack-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:#f3bb19;color:#141414;font-weight:900;font-size:.78rem}
.store-pack .big{font-family:"Barlow Condensed";font-size:3rem}
.dual-panels{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.dark-panel{border-radius:14px;padding:18px}
.dark-panel.blue{background:linear-gradient(180deg,#1f3a83,#1c2f66)}.dark-panel.green{background:linear-gradient(180deg,#065b45,#074232)}
.honor-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}
.honor-board thead th{text-align:center}.honor-board td:nth-child(1){width:34px}.honor-board td:last-child{color:#ff4d5e;text-align:right;font-weight:800}
.report-panel{border:1px solid rgba(255,79,79,.8)}
.report-note{background:#d8dde3;color:#596170;padding:12px;border-radius:6px;text-align:center}
@media (max-width: 1100px){
  .city-grid.cards-6,.metric-bar-grid,.store-pack-grid,.wallet-layout,.dual-panels,.honor-layout,.onboarding-steps,.ops-strip{grid-template-columns:1fr}
  .modal-body-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .page-title{font-size:2.5rem}
  .topnav{display:none}
  .wallet-layout,.dual-panels,.honor-layout,.onboarding-steps,.ops-strip,.store-pack-grid,.metric-bar-grid,.city-grid.cards-6{grid-template-columns:1fr}
  .game-modal .modal-head{font-size:1.4rem}
  .modal-body-grid{grid-template-columns:1fr}
}

.radar-dot.blinking::before{animation:radarBlink .9s ease-in-out infinite}
@keyframes radarBlink{0%,100%{opacity:1;box-shadow:0 0 0 10px rgba(255,88,93,.10),0 0 18px rgba(255,88,93,.8)}50%{opacity:.35;box-shadow:0 0 0 2px rgba(255,88,93,.15),0 0 2px rgba(255,88,93,.2)}}
.btn-reset{background:none;border:none;color:inherit;cursor:pointer}

.radar-notice{position:absolute;left:16px;bottom:12px;z-index:3}.radar-warning{padding:8px 12px;border-radius:999px;background:rgba(255,77,94,.18);border:1px solid rgba(255,77,94,.5);color:#fff;font-weight:800;backdrop-filter:blur(10px)}@media (max-width:760px){.container.wide{padding:0 12px}.page{padding:18px 0 110px}.ops-strip,.grid-2,.grid-3,.grid-4,.grid-5,.cards-6,.store-pack-grid,.wallet-layout,.dual-panels,.honor-layout,.admin-grid,.city-grid{grid-template-columns:1fr !important}.topnav{display:none}.card{padding:14px;border-radius:14px}.city-name{font-size:1.5rem}.page-title,.store-title,.tasks-title,.wallet-box-title,.honor-title{font-size:2rem !important}.countdown-strong{font-size:1.4rem}.attack-item{font-size:.82rem}.radar-body{height:180px}.mobile-dock{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;position:fixed;left:8px;right:8px;bottom:8px;z-index:60;background:rgba(7,16,29,.96);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:10px}.mobile-dock a{display:grid;justify-items:center;gap:4px;padding:8px 4px;border-radius:12px;color:#d5e3f7;font-size:.68rem}}
.progress{height:10px;background:#23354f;border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,#14d0ff,#2e8cff)}
.guide-shell{max-width:780px;margin:0 auto;display:grid;gap:16px}
.guide-card{padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#16243b,#10192a)}
.guide-card.gold{border-color:rgba(246,190,29,.5)}
.guide-card.blue{border-color:rgba(76,132,255,.5)}
.guide-card.red{border-color:rgba(255,87,87,.5)}
.guide-card.violet{border-color:rgba(168,101,255,.5)}
.guide-card-title{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.9rem;margin-bottom:10px}
.guide-final{padding:22px;border-radius:14px;border:1px solid rgba(255,87,87,.5);background:linear-gradient(180deg,#34131c,#231721);text-align:center}
.selection-shell{max-width:1480px;margin:0 auto}
.hero-belt{padding:16px 18px;border-radius:14px;border:1px solid rgba(245,191,30,.55);background:linear-gradient(90deg,#352a35,#40352c);font-family:"Barlow Condensed";font-size:2rem;text-align:center;color:#ffca34}
.big-stat{font-family:"Barlow Condensed";font-size:4rem}.big-stat.gold{color:#ffca34}.big-stat.blue{color:#5ea4ff}
.constitution-box ul,.guide-card ul,.feature-list{margin:12px 0 0 20px;color:#d7e2f3;line-height:1.7}
.selection-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.selection-city{padding:18px;text-align:center}
.selection-city h3{font-family:"Barlow Condensed";font-size:1.8rem;margin:0 0 12px}
.selection-meta{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);margin-top:8px}
.status-bar.free{padding:14px;border-radius:10px;background:rgba(20,208,120,.16);text-align:center;color:#18d27d;font-weight:900;margin:18px 0}
.seat-list{display:grid;gap:10px;margin:18px 0}.seat-row{display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:10px;background:rgba(255,255,255,.03)}
.badge.green{background:rgba(20,208,120,.18);color:#98f3c8}
.radar-dot.blinking::before{animation:radarBlink .9s ease-in-out infinite}
@keyframes radarBlink{0%,100%{opacity:1;box-shadow:0 0 0 10px rgba(255,88,93,.10),0 0 18px rgba(255,88,93,.8)}50%{opacity:.35;box-shadow:0 0 0 2px rgba(255,88,93,.15),0 0 2px rgba(255,88,93,.2)}}
.radar-notice{position:absolute;left:16px;bottom:12px;z-index:3}
.radar-warning{padding:8px 12px;border-radius:999px;background:rgba(255,77,94,.18);border:1px solid rgba(255,77,94,.5);color:#fff;font-weight:800;backdrop-filter:blur(10px)}
@media (max-width: 760px){
  .selection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-belt{font-size:1.3rem}
  .big-stat{font-size:2.6rem}
  .guide-shell,.selection-shell{max-width:100%}
}

.chat-fab{position:fixed;right:18px;bottom:88px;z-index:80;width:58px;height:58px;border:none;border-radius:50%;background:linear-gradient(180deg,#ff7f11,#ff4d5e);color:#fff;font-size:1.2rem;box-shadow:0 16px 30px rgba(0,0,0,.32);cursor:pointer}
.chat-panel{position:fixed;right:18px;bottom:156px;z-index:81;width:min(360px,calc(100vw - 24px));height:440px;display:none;grid-template-rows:auto auto 1fr auto;background:linear-gradient(180deg,#12223a,#0a1528);border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.4)}
.chat-panel.open{display:grid}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.35rem}
.chat-tabs{display:grid;grid-template-columns:1fr 1fr;padding:8px;gap:8px}
.chat-tab{border:none;border-radius:10px;background:#162841;color:#d4e3f8;padding:10px 12px;cursor:pointer;font-weight:800}
.chat-tab.active{background:#2d63ff;color:#fff}
.chat-messages{padding:12px;overflow:auto;display:grid;gap:10px}
.chat-message{display:grid;gap:4px;background:rgba(255,255,255,.04);padding:10px 12px;border-radius:12px}
.chat-message strong{color:#7ec8ff}.chat-message small{opacity:.65}
.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.08)}
.admin-shell .card,.admin-grid .card{background:linear-gradient(180deg,#182944,#101b30)}
.admin-hero{padding:24px;border-radius:18px;background:linear-gradient(135deg,#203b68,#111e33);border:1px solid rgba(255,255,255,.1)}
.admin-kpi{padding:18px;border-radius:16px;background:linear-gradient(180deg,#1a2d4a,#132238);border:1px solid rgba(255,255,255,.08)}
.admin-kpi .value{font-family:"Barlow Condensed",Inter,sans-serif;font-size:2.8rem}
.offerwall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.store-top-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.store-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.crypto-card{background:linear-gradient(180deg,#04573f,#08382d)!important}
.balance-card{background:linear-gradient(180deg,#223c8f,#203266)!important}
.shopier-note{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.18)}
.watch-modal-video{display:grid;gap:14px}
.watch-screen{height:220px;border-radius:16px;background:linear-gradient(180deg,#0d1830,#050b17);display:grid;place-items:center;border:1px solid rgba(255,255,255,.08)}
.watch-count{font-family:"Barlow Condensed",Inter,sans-serif;font-size:4rem}
.selection-city{cursor:pointer}
.city-open-btn{border:none}
@media (max-width:760px){
  .chat-fab{bottom:98px}
  .chat-panel{right:8px;left:8px;bottom:168px;width:auto}
  .offerwall-grid,.store-top-grid,.store-bottom-grid{grid-template-columns:1fr}
}

.office-modal-visual{width:min(1320px,96vw)}
.office-panel{margin:12px;padding:18px;border-radius:18px;background:linear-gradient(180deg,#16243b,#10192a)}
.office-title{font-size:2.6rem}.office-title.gold{color:#f4c131}.office-title.blue{color:#5aa3ff}
.office-sub{margin-bottom:16px}
.office-features{display:grid;gap:12px;margin:18px 0}
.office-feature{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;padding:14px;border-radius:14px;background:rgba(255,255,255,.03)}
.office-feature i{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.04)}
.office-feature span{display:block;color:#bfcde4;font-size:.95rem;margin-top:4px}
.office-buy-btn{width:100%;min-height:58px;font-size:1.15rem}
.office-seat-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:760px){
  .office-seat-actions{grid-template-columns:1fr}
}

.video-hero{position:relative;padding:34px 0 50px;background:
radial-gradient(circle at 50% 10%, rgba(91,128,255,.16), transparent 24%),
linear-gradient(180deg, rgba(5,12,24,.56), rgba(5,10,18,.9)),
url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat}
.video-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,17,35,.65),rgba(5,11,22,.9))}
.video-hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;display:grid;justify-items:center;text-align:center;gap:14px;padding:0 18px}
.video-hero-logo{font-family:"Barlow Condensed",Inter,sans-serif;font-size:2.4rem;font-weight:900;letter-spacing:.05em}.video-hero-logo span{color:#ff5d62}
.video-badge{margin-top:6px}
.landing-top-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:520px}
.landing-square-btn{min-height:84px;border-radius:16px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;text-align:center;font-weight:800;padding:10px 8px;background:rgba(10,21,39,.65)}
.landing-square-btn.ghost{border-color:#ffc538;color:#ffc538}
.landing-square-btn.dark{background:rgba(12,25,46,.88)}
.landing-square-btn.red{background:#ff5b61;color:#fff}
.video-hero-title{font-family:"Barlow Condensed",Inter,sans-serif;font-size:5.2rem;line-height:.88;margin:12px 0 0}
.video-hero-subtitle{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.7rem;line-height:1.15;letter-spacing:.02em}
.landing-main-cta{min-width:230px;min-height:58px}
.landing-meta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;color:#d8e4f4}
.landing-meta-row i{color:#1fdc91}
.landing-metric-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:760px;margin-top:12px}
.landing-metric-card{background:rgba(26,39,62,.9);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px;text-align:center}
.landing-metric-card .value{font-family:"Barlow Condensed",Inter,sans-serif;font-size:3.4rem;color:#ff5959}
.landing-metric-card .value.city{font-size:2.8rem;color:#ff6767}
.landing-metric-card .label{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.1rem;letter-spacing:.08em}
.landing-about{padding:12px 0 24px}
.task-card-pro{border:1px solid rgba(255,255,255,.08)}
.task-bottom-bar{gap:10px;align-items:center;flex-wrap:wrap}
.admin-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.admin-kpi{display:flex;align-items:center;gap:14px;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.admin-kpi-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.35rem;background:rgba(255,255,255,.08)}
.admin-kpi-copy{min-width:0}
.admin-kpi .sub{font-size:.9rem;white-space:normal}
.admin-kpi .value{font-family:"Barlow Condensed",Inter,sans-serif;font-size:2.4rem;line-height:1}
.tone-sky{background:linear-gradient(180deg,#183a67,#12263f)}
.tone-violet{background:linear-gradient(180deg,#352768,#201a40)}
.tone-amber{background:linear-gradient(180deg,#634717,#3a2910)}
.tone-green{background:linear-gradient(180deg,#0f5e42,#0d3c2d)}
.tone-red{background:linear-gradient(180deg,#66212c,#3f1720)}
.tone-pink{background:linear-gradient(180deg,#61254e,#3a1a30)}
.admin-link-card{min-height:150px}
.order-chip{background:rgba(255,255,255,.04)}
.admin-hero.colorful{background:
linear-gradient(135deg, rgba(61,102,255,.35), rgba(255,94,98,.18)),
linear-gradient(180deg,#203b68,#111e33)}
@media (max-width:760px){
  .video-hero{padding:22px 0 36px}
  .video-hero-logo{font-size:2rem;justify-self:start;width:100%;text-align:left}
  .video-hero-title{font-size:4rem}
  .video-hero-subtitle{font-size:1.32rem}
  .landing-top-actions,.landing-metric-strip,.admin-kpi-grid{grid-template-columns:1fr}
  .landing-square-btn{min-height:76px}
  .landing-main-cta{width:100%}
}


/* v18 reference layout + cpx */
.store-header-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.alert-custom{background:rgba(59,130,246,.1);border:2px dashed #3b82f6;color:#f8fafc;border-radius:12px;padding:22px}
.highlight-email{background:#000;color:#fbbf24;padding:8px 15px;border-radius:8px;font-weight:700;letter-spacing:1px;border:1px solid #fbbf24;display:inline-block}
.pkg-card{background:#1e293b;border:2px solid #334155;border-radius:15px;text-align:center;padding:30px 20px;transition:all .3s;position:relative;height:100%;display:flex;flex-direction:column}
.pkg-card:hover{transform:translateY(-10px);box-shadow:0 10px 25px rgba(0,0,0,.5)}
.pkg-popular{border-color:#fbbf24;box-shadow:0 0 20px rgba(251,191,36,.2)}
.pkg-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#fbbf24;color:#000;padding:5px 20px;font-weight:900;border-radius:20px;font-size:.85rem;letter-spacing:1px}
.pkg-icon{font-size:3rem;color:#94a3b8;margin-bottom:15px}
.pkg-popular .pkg-icon{color:#fbbf24}
.pkg-title{font-size:1.5rem;font-weight:800;margin-bottom:5px}
.pkg-desc{color:#10b981;font-weight:900;font-size:1.2rem;margin-bottom:15px}
.pkg-price{font-size:2.5rem;font-weight:900;margin-bottom:20px;color:#f8fafc}
.pkg-price span{font-size:1.2rem;color:#94a3b8;font-weight:400}
.btn-shopier{background:#e67e22;color:#fff;font-weight:700;border-radius:8px;padding:12px;border:none;width:100%}
.btn-shopier:hover{background:#d35400;color:#fff}
.crypto-card{background:linear-gradient(145deg,#064e3b 0%,#022c22 100%)!important;border:1px solid #10b981;box-shadow:0 0 30px rgba(16,185,129,.2)}
.balance-card{background:linear-gradient(145deg,#1e3a8a 0%,#1e293b 100%)!important;border:1px solid #3b82f6;box-shadow:0 0 30px rgba(59,130,246,.2)}
.history-card{background:rgba(30,41,59,.8)!important;border:1px solid var(--line)}
.table-custom{color:#f8fafc}.table-custom th{border-bottom:2px solid #334155;color:#94a3b8;font-weight:400;font-size:.9rem}.table-custom td{border-bottom:1px solid #334155;padding:15px 10px;vertical-align:middle}
.crypto-qr{width:190px;height:190px;border-radius:16px;border:1px solid rgba(255,255,255,.15);background:#fff;padding:12px}
.cpx-intel-band{background:linear-gradient(90deg,#151f63,#191f45)!important;border-color:rgba(92,106,255,.42)!important}
.earn-main-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:start}
.earn-left-stack{display:grid;gap:18px}
.cpx-wall-card{min-height:100%}
.cpx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cpx-card{display:block;padding:16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.cpx-card:hover{transform:translateY(-2px);border-color:rgba(255,196,45,.5)}
.cpx-money{font-family:"Barlow Condensed",Inter,sans-serif;font-size:2rem;color:#ffb020;margin:10px 0 6px}
.cpx-meta{display:flex;justify-content:space-between;gap:10px;color:#d6e1f3;font-size:.92rem}
.cpx-iframe-wrap{height:720px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#08111e}
.cpx-iframe-wrap iframe{width:100%;height:100%;border:0}
.shortlink-gate{max-width:680px;margin:0 auto;padding:26px}
.task-panel-yellow{background:linear-gradient(145deg,rgba(99,71,23,.28),rgba(20,27,44,.95))!important;border:1px solid rgba(251,191,36,.3)!important}
.task-panel-blue{background:linear-gradient(145deg,rgba(30,58,138,.32),rgba(20,27,44,.95))!important;border:1px solid rgba(59,130,246,.28)!important}
.dual-action-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.refer-card{background:linear-gradient(135deg,rgba(15,23,42,.95) 0%, rgba(22,101,52,.9) 100%)!important;border:1px solid #10b981!important;overflow:hidden}
.dash-side-box{min-width:320px;max-width:360px}
.dark-mini-box{padding:12px;border-radius:10px;background:rgba(2,8,23,.7);border:1px solid rgba(16,185,129,.28);color:#10b981;font-weight:800}
.countdown-wrapper{background:linear-gradient(90deg,rgba(55,6,23,.9),rgba(106,4,15,.9));border:1px solid #ef4444;border-radius:12px;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 0 15px rgba(239,68,68,.3);animation:pulse-red 2s infinite;backdrop-filter:blur(5px)}
.countdown-title{font-size:.9rem;font-weight:700;color:#ffadad;text-transform:uppercase;letter-spacing:1px}
.countdown-timer{font-family:'Courier New',Courier,monospace;font-size:1.8rem;font-weight:900;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.7)}
.news-ticker{background:rgba(30,41,59,.8);border-radius:8px;padding:8px 10px;font-size:.85rem;color:#94a3b8;border:1px solid #334155;overflow:hidden;backdrop-filter:blur(5px);position:relative}
.ticker-wrapper{display:inline-block;white-space:nowrap;padding-left:100%;animation:scrollTicker 20s linear infinite}
.ticker-item{margin-right:40px;display:inline-block}
.ticker-item span{color:#ff4d5e;font-weight:700;margin-left:3px}
@keyframes scrollTicker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.radar-monitor{position:relative;background:linear-gradient(180deg,#08111f 0%,#050a13 100%);border:1px solid rgba(86,213,255,.38);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 30px rgba(19,214,255,.08),0 14px 34px rgba(2,10,20,.44),0 0 22px rgba(12,176,255,.14)}
.radar-monitor::before{content:'';position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(120deg,rgba(75,224,255,.52),rgba(107,92,255,.32),rgba(51,235,160,.35));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.radar-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:linear-gradient(90deg,rgba(7,25,49,.96),rgba(9,46,76,.86));border-bottom:1px solid rgba(88,216,255,.26);color:#dff8ff;font-size:.92rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.radar-title{display:inline-flex;align-items:center;gap:12px;color:#8de7ff;text-shadow:0 0 14px rgba(41,194,255,.26)}
.radar-title i{font-size:1rem}
.radar-status-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:linear-gradient(180deg,rgba(6,88,52,.96),rgba(5,57,37,.96));border:1px solid rgba(58,243,160,.38);box-shadow:0 0 18px rgba(22,199,129,.14);color:#d9fff0;font-size:.76rem;letter-spacing:.12em;font-family:monospace}
.radar-status-dot{width:9px;height:9px;border-radius:50%;background:#2ef6a4;box-shadow:0 0 10px rgba(46,246,164,.8)}
.blink-text{animation:blinker 1.5s linear infinite}
@keyframes blinker{50%{opacity:0}}
.radar-screen{position:relative;height:180px;width:100%;overflow:hidden;cursor:crosshair;background:radial-gradient(circle at center,rgba(28,80,61,.16) 0%,rgba(3,11,18,.18) 46%,rgba(2,7,12,.96) 100%)}
.radar-grid{position:absolute;width:100%;height:100%;background-image:linear-gradient(rgba(73,218,173,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(73,218,173,.14) 1px,transparent 1px);background-size:30px 30px}
.radar-scanner{position:absolute;left:-2%;width:104%;height:12px;top:-12px;background:transparent;box-shadow:none;animation:scanWaveDown 3s linear infinite;z-index:5;pointer-events:none;opacity:.98}
.radar-scanner::before,.radar-scanner::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background-repeat:repeat-x;background-position:left center}
.radar-scanner::before{height:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 5 2.5, 10 2.5, 15 6 S 25 9.5, 30 6 S 40 2.5, 45 6 S 55 9.5, 60 6 S 70 2.5, 75 6 S 85 9.5, 90 6 S 100 2.5, 105 6 S 115 9.5, 120 6' fill='none' stroke='rgba(53,255,199,0.96)' stroke-width='1.55' stroke-linecap='round'/%3E%3C/svg%3E");background-size:120px 12px;filter:drop-shadow(0 0 10px rgba(53,255,199,.82));opacity:.98}
.radar-scanner::after{height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9 C 5 4.5, 10 4.5, 15 9 S 25 13.5, 30 9 S 40 4.5, 45 9 S 55 13.5, 60 9 S 70 4.5, 75 9 S 85 13.5, 90 9 S 100 4.5, 105 9 S 115 13.5, 120 9' fill='none' stroke='rgba(53,255,199,0.34)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");background-size:120px 18px;filter:blur(3px);opacity:.48}
@keyframes scanWaveDown{0%{top:-12px}100%{top:calc(100% - 2px)}}
.radar-ping{position:absolute;width:12px;height:12px;background:#ff605c;border-radius:50%;box-shadow:0 0 12px rgba(255,96,92,.95);transform:translate(-50%,-50%);z-index:10}
.radar-ping::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;background:transparent;border:2px solid rgba(255,96,92,.96);border-radius:50%;transform:translate(-50%,-50%);animation:radarWave 1.5s ease-out forwards}
.radar-ping-text{position:absolute;color:#ffd9d8;font-size:11px;font-weight:700;transform:translate(12px,-8px);white-space:nowrap;text-shadow:0 0 6px rgba(0,0,0,.84);font-family:monospace;z-index:11;animation:fadeText 2s ease-out forwards}
@keyframes radarWave{0%{width:10px;height:10px;opacity:1}100%{width:80px;height:80px;opacity:0}}
@keyframes fadeText{0%{opacity:1}80%{opacity:1}100%{opacity:0}}
.city-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.city-card{background:linear-gradient(145deg,rgba(30,41,59,.8) 0%,rgba(22,31,45,.9) 100%);border:1px solid #334155;border-radius:12px;padding:15px;position:relative;transition:all .3s ease;box-shadow:0 4px 6px -1px rgba(0,0,0,.3);height:100%;backdrop-filter:blur(5px)}
.city-card:hover{transform:translateY(-5px);border-color:#ef4444;box-shadow:0 10px 20px -5px rgba(239,68,68,.15)}
.my-city{border:1px solid #10b981!important;box-shadow:0 0 15px rgba(16,185,129,.2)}
.city-header{display:flex;align-items:center;margin-bottom:15px}
.city-icon-box{width:45px;height:45px;background-color:rgba(255,255,255,.05);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#64748b;border:1px solid rgba(255,255,255,.05)}
.city-info{margin-left:12px;overflow:hidden}.city-name{color:#f1f5f9;font-size:1.1rem;font-weight:700;text-transform:uppercase;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.city-id{font-size:.75rem;color:#94a3b8}
.health-labels{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;margin-bottom:5px;color:#94a3b8}.health-val{color:#f1f5f9;font-family:monospace}
.btn-attack{background:linear-gradient(90deg,#dc2626 0%,#991b1b 100%);color:white;border:1px solid #ef4444;width:100%;padding:10px;border-radius:6px;font-weight:800;font-size:.9rem;text-transform:uppercase;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-attack:hover:not(:disabled){background:linear-gradient(90deg,#ef4444 0%,#dc2626 100%);box-shadow:0 0 10px rgba(239,68,68,.4);letter-spacing:1px;color:white}
.btn-attack:disabled{background:#334155;border-color:#475569;cursor:not-allowed;opacity:.7}
.btn-transfer{background-color:transparent;border:1px dashed #94a3b8;color:#94a3b8;width:100%;padding:8px;border-radius:8px;text-align:center}
.btn-transfer:hover{border-color:#f1f5f9;color:#f1f5f9}
.stats-info{display:flex;justify-content:space-between;font-size:.7rem;margin-top:8px;padding:0 4px}.stat-cost{color:#fbbf24}.stat-dmg{color:#f87171}
.shield-badge{position:absolute;top:10px;right:10px}

.selection-page-ref .prize-pool-banner{background:linear-gradient(90deg,rgba(239,68,68,.1) 0%,rgba(251,191,36,.2) 50%,rgba(239,68,68,.1) 100%);border:1px solid #fbbf24;border-radius:12px;padding:15px;text-align:center;margin-bottom:25px;box-shadow:0 0 20px rgba(251,191,36,.2)}
.selection-page-ref .prize-pool-text{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.4rem;color:#fbbf24;letter-spacing:1px;margin:0}
.selection-page-ref .quota-panel{background:rgba(0,0,0,.4);border:1px solid #334155;border-radius:12px;padding:20px;height:100%;display:flex;align-items:center;justify-content:space-around}
.selection-page-ref .quota-box{text-align:center;width:100%}
.selection-page-ref .quota-title{font-size:.85rem;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}
.selection-page-ref .quota-number{font-family:"Barlow Condensed",Inter,sans-serif;font-size:2.8rem;font-weight:700;line-height:1}
.selection-page-ref .text-vali{color:#fbbf24}.selection-page-ref .text-baskan{color:#60a5fa}
.selection-page-ref .rules-box{background:rgba(15,23,42,.8);border-left:4px solid #ef4444;padding:20px;border-radius:8px;font-size:.95rem;line-height:1.5;height:100%}
.selection-page-ref .rules-title{color:#ef4444;font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.5rem;letter-spacing:1px;margin-bottom:10px}
.selection-page-ref .city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}
.selection-page-ref .city-box{background:rgba(0,0,0,.4);border:1px solid #334155;border-radius:12px;padding:15px;text-align:center;cursor:pointer;transition:all .3s}
.selection-page-ref .city-box:hover{transform:translateY(-5px);border-color:#fbbf24;box-shadow:0 5px 15px rgba(251,191,36,.2);background:rgba(0,0,0,.6)}
.selection-page-ref .city-name{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.5rem;letter-spacing:1px;color:#fff;margin-bottom:10px;border-bottom:1px dashed #334155;padding-bottom:5px}
.selection-page-ref .slot-indicator{font-size:.8rem;margin-bottom:5px;padding:5px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.05)}
.selection-page-ref .status-empty{color:#10b981}.selection-page-ref .status-full{color:#ef4444;font-weight:700;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;text-align:right}
.office-modal-shell{width:min(1120px,96vw)} .office-modal-grid{grid-template-columns:1fr 1fr}
.role-card{background:rgba(0,0,0,.3);border-radius:12px;overflow:hidden;height:100%;border:1px solid #334155;display:flex;flex-direction:column}
.card-vali{border-top:4px solid #fbbf24}.card-baskan{border-top:4px solid #3b82f6}
.role-header{padding:15px;text-align:center;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.05)}
.role-title{font-weight:900;font-size:1.5rem;letter-spacing:1px;margin-top:5px}.feature-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px dashed rgba(255,255,255,.05)}.feature-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.feature-icon{width:35px;height:35px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}.f-icon-vali{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.3)}.f-icon-baskan{background:rgba(59,130,246,.1);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}.feature-text h6{font-size:.95rem;font-weight:700;margin:0 0 3px 0;color:#e2e8f0}.feature-text p{font-size:.8rem;color:#94a3b8;margin:0;line-height:1.4}
.owner-box{background:rgba(0,0,0,.5);padding:15px;text-align:center;border-bottom:1px solid #334155}.baskan-slot-row{display:flex;justify-content:space-between;align-items:center;padding:10px;background:rgba(0,0,0,.3);margin-bottom:8px;border-radius:6px;border:1px solid rgba(255,255,255,.05)}.action-area{padding:20px;background:rgba(0,0,0,.2);border-top:1px solid #334155}
.btn-buy-ticket{background:linear-gradient(90deg,#d97706 0%,#fbbf24 100%);color:#000;font-weight:900;border:none;transition:.3s}.btn-buy-ticket:hover{background:#fbbf24;box-shadow:0 0 15px rgba(251,191,36,.5);transform:translateY(-2px)}
.btn-buy-primary{background:linear-gradient(90deg,#2563eb 0%,#3b82f6 100%);color:#fff;font-weight:900;border:none;transition:.3s}.btn-buy-primary:hover{box-shadow:0 0 15px rgba(59,130,246,.5);transform:translateY(-2px);color:#fff}

.intel-card{background:rgba(30,41,59,.8);border:1px solid #334155;border-radius:12px;padding:25px;margin-bottom:25px;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.intel-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%}
.card-vali::before{background-color:#fbbf24;box-shadow:0 0 15px #fbbf24}.card-baskan::before{background-color:#3b82f6;box-shadow:0 0 15px #3b82f6}.card-quota::before{background-color:#ef4444;box-shadow:0 0 15px #ef4444}.card-poll::before{background-color:#a855f7;box-shadow:0 0 15px #a855f7}
.intel-title{font-family:"Barlow Condensed",Inter,sans-serif;font-size:2.2rem;letter-spacing:1px;margin-bottom:15px;border-bottom:1px dashed rgba(255,255,255,.1);padding-bottom:10px}
.intel-icon{font-size:4rem;position:absolute;right:20px;top:20px;opacity:.05}
.list-feature{list-style:none;padding-left:0}.list-feature li{position:relative;padding-left:30px;margin-bottom:12px;color:#cbd5e1;line-height:1.5}.list-feature li i{position:absolute;left:0;top:4px;font-size:1.1rem}
.stamp-top-secret{position:absolute;top:20px;right:20px;border:3px solid #ef4444;color:#ef4444;font-family:"Courier New",Courier,monospace;font-weight:700;font-size:1.2rem;padding:5px 15px;transform:rotate(15deg);opacity:.8;letter-spacing:2px;border-radius:5px;pointer-events:none}
.cta-box{background:linear-gradient(135deg,rgba(220,38,38,.2) 0%,rgba(15,23,42,1) 100%);border:1px solid #ef4444;border-radius:12px;padding:30px;text-align:center;box-shadow:0 0 20px rgba(239,68,68,.2)}
@keyframes pulse-glow-red{0%{box-shadow:0 0 5px rgba(239,68,68,.5);transform:scale(1)}50%{box-shadow:0 0 20px rgba(239,68,68,.8);transform:scale(1.05)}100%{box-shadow:0 0 5px rgba(239,68,68,.5);transform:scale(1)}}
.btn-cta{animation:pulse-glow-red 2s infinite;font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.5rem;letter-spacing:1px}

@media (max-width:900px){.earn-main-grid,.dual-action-row,.grid-2,.store-bottom-grid{grid-template-columns:1fr!important}.dash-side-box{min-width:0;max-width:none}.countdown-wrapper{flex-direction:column;align-items:flex-start;gap:12px}.office-modal-grid{grid-template-columns:1fr!important}}
@media (max-width:760px){.store-header-grid{flex-direction:column}.city-card-grid,.store-top-grid,.cpx-grid{grid-template-columns:1fr}.selection-page-ref .city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.selection-page-ref .quota-panel{flex-direction:column;gap:16px}.selection-page-ref .quota-number{font-size:2.2rem}}


.season3-banner{background:linear-gradient(135deg,#1e1b4b 0%,#0f172a 100%);border:2px solid #6366f1;border-radius:12px;padding:20px;position:relative;overflow:hidden;margin-bottom:25px;margin-top:15px;box-shadow:0 10px 25px rgba(99,102,241,.2);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px}
.season3-banner::before{content:'\f024';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:-20px;bottom:-30px;font-size:8rem;color:rgba(99,102,241,.1);transform:rotate(-15deg)}
.s3-text-area{z-index:2;flex:1 1 300px}.s3-title{color:#818cf8;font-weight:900;font-size:1.5rem;margin-bottom:5px;letter-spacing:1px;text-transform:uppercase}.s3-desc{color:#cbd5e1;font-size:.95rem;margin:0;line-height:1.4}.s3-action{z-index:2;flex-shrink:0}
.btn-s3-intel{background:linear-gradient(45deg,#4f46e5,#3b82f6);color:#fff!important;font-weight:800;border:none;padding:12px 25px;border-radius:8px;transition:.3s;box-shadow:0 4px 15px rgba(59,130,246,.4);text-transform:uppercase;letter-spacing:1px;display:inline-block;text-decoration:none}.btn-s3-intel:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(59,130,246,.6)}
.city-card.cooldown{opacity:.6;border-style:dashed}.task-icon-box{width:50px;height:50px;background-color:rgba(255,255,255,.05);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:15px;border:1px solid rgba(255,255,255,.05)}.task-title{font-size:1.1rem;font-weight:700;text-transform:uppercase;margin-bottom:5px;color:#fff}.task-desc{font-size:.8rem;color:var(--text-muted);margin-bottom:15px;flex-grow:1}.reward-badge{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:#fbbf24;padding:4px 10px;border-radius:4px;font-size:.8rem;font-weight:bold;display:inline-block;margin-bottom:10px}.btn-task{width:100%;padding:10px;border-radius:6px;font-weight:800;font-size:.9rem;text-transform:uppercase;border:none;transition:all .2s}
.streak-board{overflow:hidden}.streak-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.streak-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.42);color:#bff7ff;font-weight:800;line-height:1;white-space:nowrap}.streak-badge strong{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:#22d3ee;color:#062535;font-size:1rem;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset}.streak-track{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:rgba(34,211,238,.4) rgba(15,23,42,.35)}.streak-track::-webkit-scrollbar{height:8px}.streak-track::-webkit-scrollbar-thumb{background:rgba(34,211,238,.4);border-radius:999px}.streak-track::-webkit-scrollbar-track{background:rgba(15,23,42,.4)}.streak-day{min-width:106px;flex:0 0 106px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 10px;border-radius:14px;border:2px solid #475569;background:rgba(2,6,23,.68)}.streak-day.is-current{border-color:#38bdf8;background:rgba(56,189,248,.14);box-shadow:0 0 0 1px rgba(56,189,248,.16) inset}.streak-day.is-done{border-color:#22c55e;background:rgba(34,197,94,.14);box-shadow:0 0 0 1px rgba(34,197,94,.16) inset}.streak-day.is-waiting{border-color:#475569;background:rgba(2,6,23,.72)}
@media (max-width: 640px){.streak-header{align-items:flex-start}.streak-badge{width:100%;justify-content:space-between}.streak-day{min-width:96px;flex-basis:96px}}
.task-scroll-area{max-height:380px;overflow-y:auto;padding-right:10px}.task-scroll-area::-webkit-scrollbar{width:6px}.task-scroll-area::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px}.task-scroll-area::-webkit-scrollbar-thumb{background:#ef4444;border-radius:4px}
@keyframes pulse-glow{0%{box-shadow:0 0 5px rgba(251,191,36,.5);transform:scale(1)}50%{box-shadow:0 0 20px rgba(251,191,36,.9);transform:scale(1.05)}100%{box-shadow:0 0 5px rgba(251,191,36,.5);transform:scale(1)}}
.btn-vip-store{background:linear-gradient(45deg,#d97706,#fbbf24);color:#000!important;font-weight:900;border:none;animation:pulse-glow 2s infinite}
.stat-bar{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;padding:10px 20px;margin-bottom:30px}
.alert-custom{background:rgba(59,130,246,.1);border:2px dashed #3b82f6;color:#f8fafc;border-radius:12px}
.highlight-email{background:#000;color:#fbbf24;padding:5px 15px;border-radius:6px;font-weight:bold;letter-spacing:1px;font-size:1.1rem;border:1px solid #fbbf24;display:inline-block}
.portrait-placeholder{width:220px;height:280px;border-radius:18px;background:linear-gradient(180deg,#1e293b,#0f172a);display:grid;place-items:center;font-size:5rem;color:#94a3b8;border:1px solid #334155}
#profileViewerModal .game-modal{max-width:560px}
#ytPlayerContainer{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:#000;border-radius:8px}#ytPlayerContainer iframe,#ytPlayerContainer #player{position:absolute;top:0;left:0;width:100%;height:100%}.timer-display{font-size:2rem;font-weight:bold;text-align:center;color:#fbbf24;margin:15px 0;font-family:monospace}
@media (max-width:760px){.season3-banner{padding:16px}.s3-title{font-size:1.2rem}.portrait-placeholder{width:100%;height:220px}.dual-action-row{grid-template-columns:1fr}}


/* profile viewer modal */
.profile-viewer-modal{width:min(560px,94vw);background:linear-gradient(180deg,#172335 0%,#10192c 100%);border:1px solid rgba(16,185,129,.28)}
.profile-viewer-modal .modal-head{background:linear-gradient(90deg,rgba(17,24,39,.96),rgba(15,23,42,.9));color:#f8fafc}
.garrison-viewer-modal{width:min(980px,96vw);background:linear-gradient(180deg,#172335 0%,#10192c 100%)}
.profile-modal-shell{display:grid;gap:14px}
.profile-hero{text-align:center}
.profile-avatar{width:84px;height:84px;background:#0f172a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;border:2px solid #10b981;font-size:2rem;box-shadow:0 0 15px rgba(16,185,129,.3)}
.profile-rank-badge{display:inline-flex;align-items:center;justify-content:center;background:#10b981;color:#04110d;font-weight:800;font-size:.85rem;letter-spacing:1px;border-radius:8px;padding:6px 14px;margin-top:8px;margin-bottom:10px}
.profile-score-wrap{padding:0 8px;margin-top:14px}
.profile-score-meta{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:rgba(255,255,255,.7);font-weight:700;margin-bottom:8px}
.profile-score-bar{height:12px;background:#0f172a;border:1px solid #334155;border-radius:999px;overflow:hidden}
.profile-score-bar span{display:block;height:100%;background:linear-gradient(90deg,#10b981,#14d0ff)}
.profile-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profile-stat-box{background:rgba(255,255,255,.05);border:1px solid #334155;border-radius:10px;padding:14px;text-align:center}
.profile-stat-wide{grid-column:1/-1}
.profile-stat-ref{background:rgba(16,185,129,.1);border:1px dashed #10b981}
.profile-stat-label{font-size:.82rem;color:#cbd5e1;font-weight:700}
.profile-stat-value{font-size:1.95rem;line-height:1.1;font-family:"Barlow Condensed",Inter,sans-serif;font-weight:800;margin-top:4px}
.profile-stat-subtle{font-size:1.2rem;line-height:1.2;font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;margin-top:6px;color:rgba(255,255,255,.72)}
.profile-action-block{padding:14px;border-radius:12px;text-align:left}
.profile-password-block{background:rgba(0,0,0,.2);border:1px solid #334155}
.profile-invite-block{background:linear-gradient(90deg,#1e293b 0%,#0f172a 100%);border:1px dashed #fbbf24}
.profile-block-title{margin:0 0 10px;font-weight:800}
.profile-password-form{display:grid;gap:10px}
.profile-password-form label{display:block;font-size:.82rem;color:rgba(255,255,255,.7);font-weight:700;margin-bottom:6px}
.profile-pass-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.profile-input{width:100%;background:#0f172a;border:1px solid #475569;color:#fff;border-radius:8px;padding:10px 12px;outline:none}
.profile-input:focus{border-color:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,.15)}
.profile-copy-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.profile-footer-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.garrison-shell{display:grid;gap:12px}
.garrison-topnote{padding:10px 12px;border-radius:10px;background:#0f172a;border:1px solid #334155;color:rgba(255,255,255,.72);font-size:.85rem;text-align:center}
.garrison-summary{display:flex;justify-content:space-between;gap:14px;align-items:center;background:rgba(255,255,255,.04);border:1px solid #334155;border-radius:12px;padding:14px}
.garrison-city-name{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.6rem;color:#22c55e}
.garrison-health{min-width:180px;display:grid;gap:6px;text-align:right}
.garrison-list{display:grid;gap:8px;max-height:360px;overflow:auto;padding-right:2px}
.garrison-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.025);border-radius:10px}
.garrison-item-left{display:flex;align-items:center;gap:8px;min-width:0}
.garrison-order{color:#94a3b8;font-weight:800}
.garrison-status-dot{font-size:.55rem;color:#64748b}
.garrison-score-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.35);color:#fecaca;font-weight:800}
.city-card.attack-feedback{border-color:#ef4444 !important;box-shadow:0 0 0 1px rgba(239,68,68,.65),0 12px 28px rgba(239,68,68,.16);animation:attackFeedback .33s ease}
@keyframes attackFeedback{0%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}100%{transform:translateX(0)}}
@media (max-width:760px){.profile-stat-grid,.profile-pass-grid,.profile-copy-row{grid-template-columns:1fr}.profile-footer-row,.garrison-summary{flex-direction:column;align-items:stretch}.garrison-health{text-align:left;min-width:0}}

/* v8 mobile dashboard top refresh */
.brand-text{display:inline-flex;align-items:center;gap:0;white-space:nowrap}
.mobile-menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;width:94px;height:94px;border-radius:20px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#8f98a5,#757f8c);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 30px rgba(0,0,0,.2);padding:0;cursor:pointer}
.mobile-menu-toggle span{display:block;width:42px;height:4px;border-radius:999px;background:#4a515a;transition:transform .2s ease, opacity .2s ease}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(12px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-12px) rotate(-45deg)}
.dashboard-page .dual-action-row .btn,
.dashboard-page .dashboard-invite-btn{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:800;letter-spacing:.02em}
.dashboard-page .dashboard-refer-card{position:relative}
.dashboard-page .dashboard-refer-layout{display:flex;justify-content:space-between;gap:20px;align-items:stretch}
.dashboard-page .dashboard-refer-copy{position:relative;z-index:2;flex:1 1 auto}
.dashboard-page .dashboard-refer-side{display:grid;gap:12px;align-self:end}
.dashboard-page .dashboard-refer-title{font-size:clamp(2.1rem,5.2vw,3.45rem);line-height:.95;margin-bottom:0;color:#17c964!important;text-shadow:0 0 26px rgba(12,166,95,.18)}
.dashboard-page .dashboard-refer-text{max-width:760px;font-size:1.08rem;line-height:1.45;color:rgba(241,245,249,.88)}
.dashboard-page .dashboard-refer-badge{font-size:1rem;padding:10px 18px;border-radius:14px;box-shadow:0 10px 24px rgba(251,191,36,.18)}
.dashboard-page .dashboard-passive-box{padding:18px 20px;border-radius:18px;background:rgba(7,16,30,.7);border:1px solid rgba(16,185,129,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.dashboard-page .dashboard-passive-title{font-size:1.08rem;color:#0fd68a;font-weight:900;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dashboard-page .dashboard-passive-value{font-family:"Barlow Condensed",Inter,sans-serif;font-size:2rem;color:#ffc928;display:flex;align-items:center;gap:10px;line-height:1.05}
.dashboard-page .dashboard-invite-btn{width:100%;min-height:74px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.8rem;box-shadow:0 14px 26px rgba(16,185,129,.16)}

@media (max-width: 760px){
  body{background:
    linear-gradient(rgba(24,51,89,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,51,89,.22) 1px, transparent 1px),
    radial-gradient(circle at top, #13243f 0%, #071225 28%, #030c18 100%);
    background-size:78px 78px,78px 78px,100% 100%;}
  .topbar{position:sticky;top:0;background:rgba(5,12,27,.97);border-bottom:1px solid rgba(126,163,214,.18);backdrop-filter:blur(12px)}
  .topbar-inner{position:relative;display:flex;align-items:center!important;justify-content:space-between!important;gap:16px;min-height:118px;padding:20px 0!important;flex-direction:row!important}
  .brand{gap:12px;font-size:2.65rem;letter-spacing:.04em;max-width:calc(100% - 112px)}
  .brand-mark{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;color:#fff;font-size:2.6rem;line-height:1}
  .brand-text{font-size:clamp(2.3rem,9vw,3.2rem);font-weight:900;line-height:1;color:#f8fafc}
  .brand-red{color:#ff575f}
  .mobile-menu-toggle{display:flex;flex:0 0 94px}
  .topnav{display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);padding:12px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(11,21,41,.98),rgba(8,16,31,.98));box-shadow:0 20px 55px rgba(0,0,0,.42)}
  .topnav.mobile-open{display:grid;gap:10px;z-index:60}
  .topnav.mobile-open .menu-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 4px}
  .topnav.mobile-open a,.topnav.mobile-open .menu-pill{min-height:48px;display:flex;align-items:center;justify-content:center;background:#101c33;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px}
  .topnav.mobile-open a{justify-content:flex-start;gap:10px;font-weight:800}
  .page{padding-top:22px}
  .dashboard-page{padding-top:6px}
  .dashboard-page .dual-action-row{gap:18px;margin-bottom:18px}
  .dashboard-page .dual-action-row .btn{min-height:88px;border-radius:18px;font-size:1.85rem;justify-content:center;box-shadow:0 16px 34px rgba(0,0,0,.16)}
  .dashboard-page .dual-action-row .btn i{font-size:1.45rem}
  .dashboard-page .dual-action-row .btn-secondary{background:linear-gradient(180deg,rgba(8,22,45,.94),rgba(7,17,35,.95));border:2px dashed rgba(28,208,255,.78);color:#1ed0ff;box-shadow:inset 0 0 34px rgba(31,115,255,.08),0 0 0 1px rgba(0,0,0,.15)}
  .dashboard-page .dual-action-row .btn-danger{background:linear-gradient(180deg,#f13f57,#de3148);border:1px solid rgba(255,255,255,.08);color:#fff;box-shadow:0 0 34px rgba(241,63,87,.2)}
  .dashboard-page .dashboard-refer-card{padding:22px!important;border-radius:24px;background:linear-gradient(135deg,rgba(6,25,46,.97) 0%,rgba(12,98,53,.92) 100%)!important;border:2px solid rgba(16,216,152,.74)!important;box-shadow:0 22px 50px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);overflow:hidden}
  .dashboard-page .dashboard-refer-card::after{content:'\f0d6';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:18px;top:30px;font-size:15rem;line-height:1;color:rgba(255,255,255,.06);transform:rotate(-10deg);pointer-events:none}
  .dashboard-page .dashboard-refer-layout{flex-direction:column;gap:18px}
  .dashboard-page .dashboard-refer-badge{font-size:1.2rem;padding:12px 20px;border-radius:16px}
  .dashboard-page .dashboard-refer-title{font-size:clamp(3.3rem,12vw,4.9rem);max-width:460px;line-height:.95}
  .dashboard-page .dashboard-refer-title i{display:inline-flex;margin-right:10px;font-size:.8em}
  .dashboard-page .dashboard-refer-text{font-size:1.2rem;line-height:1.42;color:rgba(255,255,255,.78);max-width:none}
  .dashboard-page .dashboard-refer-side{width:100%;max-width:none;min-width:0}
  .dashboard-page .dashboard-passive-box{padding:18px 18px 16px;border-radius:18px;background:rgba(18,24,40,.78)}
  .dashboard-page .dashboard-passive-title{font-size:1.08rem;justify-content:center;text-align:center}
  .dashboard-page .dashboard-passive-value{justify-content:center;text-align:center;font-size:2rem;flex-wrap:wrap}
  .dashboard-page .dashboard-invite-btn{min-height:94px;border-radius:20px;font-size:2rem;background:linear-gradient(180deg,#1da869,#159257)}
  .dashboard-page .countdown-wrapper{padding:14px 16px;border-radius:16px}
}

/* v10 header + battle card refresh */
.topbar{
  background:#040d20;
  border-bottom:1px solid rgba(140,168,214,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.topbar-inner{
  min-height:86px;
  gap:18px;
}
.brand{
  font-size:1.72rem;
  font-weight:900;
  letter-spacing:.02em;
  flex-shrink:0;
}
.brand-mark{
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#f5f9ff;
  font-size:2.35rem;
  line-height:1;
}
.brand-text{
  font-size:2.18rem;
  line-height:1;
  color:#f4f8ff;
}
.brand-red{
  color:#ff4a57;
}
.topnav{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}
.dashboard-menu-pills{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:0;
}
.topnav-divider{
  width:1px;
  height:42px;
  display:block;
  background:rgba(255,255,255,.12);
  margin:0 6px;
}
.menu-pill{
  min-height:48px;
  padding:11px 18px;
  border-radius:18px;
  background:linear-gradient(180deg,#11203a 0%,#0c172b 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  font-weight:900;
}
.menu-pill i{
  font-size:1rem;
}
.prize-pill{
  color:#ffd34d;
  border-color:rgba(255,189,45,.76);
}
.profile-pill{
  color:#27d992;
  border-color:rgba(20,213,144,.68);
  background:linear-gradient(180deg,#0f2137 0%,#0a1829 100%);
}
.menu-pill-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:rgba(255,255,255,.12);
  color:#eef5ff;
  border:1px solid rgba(255,255,255,.08);
}
.stat-pill{
  min-width:66px;
  justify-content:center;
  padding-left:14px;
  padding-right:14px;
}
.ticket-pill{
  color:#ff628f;
  border-color:rgba(255,79,132,.56);
}
.bullet-pill{
  color:#ffd148;
  border-color:rgba(255,200,38,.52);
}
.topnav a.action-link{
  min-height:48px;
  padding:11px 16px;
  border-radius:8px;
  border:none;
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.topnav a.action-link span{
  font-size:1rem;
}
.topnav a.action-link-blue{
  background:linear-gradient(180deg,#3083ff 0%,#1967e8 100%);
}
.topnav a.action-link-gold{
  background:linear-gradient(180deg,#2a2205 0%,#241d04 100%);
  border:1px solid rgba(255,192,35,.85);
  color:#ffd23d;
}
.topnav a.action-link-cyan{
  background:linear-gradient(180deg,#36b3ec 0%,#289ed2 100%);
}
.topnav a.action-link-purple{
  background:linear-gradient(180deg,#7c5cff 0%,#5b3df5 100%);
}
.topnav a.action-link-green{
  background:linear-gradient(180deg,#249e61 0%,#18834f 100%);
}
.topnav a.action-link-power{
  width:48px;
  justify-content:center;
  padding:0;
  background:linear-gradient(180deg,#122136 0%,#0d1627 100%);
  border:1px solid rgba(255,255,255,.1);
  color:#ff5563;
  box-shadow:none;
}
.topnav a.action-link-power span{
  display:none;
}
.topnav a.action-link:hover,
.topnav a.action-link:focus-visible,
.menu-pill:hover,
.menu-pill:focus-visible{
  transform:translateY(-1px);
}
.progress .progress-bar{
  display:block;
  height:100%;
}
@media (max-width: 1260px){
  .topbar-inner{
    flex-wrap:wrap;
    justify-content:center;
    padding-top:12px;
    padding-bottom:12px;
  }
  .topnav{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }
}
@media (max-width: 900px){
  .brand-text{
    font-size:1.9rem;
  }
  .menu-pill,
  .topnav a.action-link{
    min-height:44px;
    padding:10px 14px;
  }
}
@media (max-width: 760px){
  .topbar-inner{
    min-height:78px;
    justify-content:space-between;
    flex-wrap:nowrap;
    padding:14px 0;
  }
  .brand{
    font-size:1.4rem;
  }
  .brand-mark{
    font-size:2rem;
  }
  .brand-text{
    font-size:1.8rem;
  }
  .topnav{
    display:none;
  }
  .topnav-divider{
    display:none;
  }
}

/* v23 mobile header compact fix */
@media (max-width:760px){
  body:not(.landing-page-active){
    overflow-x:hidden;
  }
  body:not(.landing-page-active) .topbar{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    z-index:95;
    background:rgba(3,12,28,.96) !important;
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  body:not(.landing-page-active) .page{
    padding-top:92px !important;
  }
  body:not(.landing-page-active) .topbar-inner{
    position:relative;
    min-height:74px !important;
    padding:10px 0 !important;
    gap:12px !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  body:not(.landing-page-active) .brand{
    gap:10px !important;
    max-width:calc(100% - 76px);
    font-size:1.05rem !important;
    letter-spacing:.02em !important;
  }
  body:not(.landing-page-active) .brand-mark{
    width:auto !important;
    height:auto !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    font-size:1.85rem !important;
    line-height:1 !important;
    padding:0 !important;
  }
  body:not(.landing-page-active) .brand-text{
    font-size:clamp(1.55rem,6.8vw,2.15rem) !important;
    line-height:1 !important;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body:not(.landing-page-active) .mobile-menu-toggle{
    display:flex;
    width:62px !important;
    height:62px !important;
    flex:0 0 62px !important;
    gap:6px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    background:linear-gradient(180deg,#a7b0bc,#848d9a) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 20px rgba(0,0,0,.18) !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle span{
    width:28px !important;
    height:3px !important;
    background:#5a6470 !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg) !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle.active span:nth-child(2){
    opacity:0 !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg) !important;
  }
  body:not(.landing-page-active) .topnav{
    top:calc(100% + 8px) !important;
    border-radius:18px !important;
    padding:10px !important;
    max-height:calc(100vh - 90px);
    overflow:auto;
  }
  body:not(.landing-page-active) .topnav.mobile-open .menu-pills{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body:not(.landing-page-active) .topnav.mobile-open a,
  body:not(.landing-page-active) .topnav.mobile-open .menu-pill{
    min-height:44px !important;
    padding:10px 12px !important;
    font-size:.86rem !important;
    border-radius:12px !important;
  }
  body:not(.landing-page-active) .topnav.mobile-open a i,
  body:not(.landing-page-active) .topnav.mobile-open .menu-pill i{
    font-size:.95rem !important;
  }
}


/* v24 mobile header + commander modal fit fix */
@media (max-width:760px){
  body:not(.landing-page-active) .topbar{
    backdrop-filter:blur(12px) !important;
  }
  body:not(.landing-page-active) .page{
    padding-top:68px !important;
  }
  body:not(.landing-page-active) .topbar-inner{
    min-height:58px !important;
    padding:6px 0 !important;
    gap:10px !important;
  }
  body:not(.landing-page-active) .brand{
    gap:8px !important;
    max-width:calc(100% - 62px) !important;
  }
  body:not(.landing-page-active) .brand-mark{
    font-size:1.58rem !important;
  }
  body:not(.landing-page-active) .brand-text{
    font-size:clamp(1.34rem,6vw,1.9rem) !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle{
    width:50px !important;
    height:50px !important;
    flex:0 0 50px !important;
    gap:5px !important;
    border-radius:14px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 16px rgba(0,0,0,.16) !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle span{
    width:24px !important;
    height:3px !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg) !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg) !important;
  }
  body:not(.landing-page-active) .topnav{
    top:calc(100% + 6px) !important;
    max-height:calc(100dvh - 74px) !important;
  }

  #tacticModal,
  #airdropModal,
  #profileViewerModal,
  #watchModal,
  #videoModal{
    padding:8px !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #tacticModal .game-modal,
  #airdropModal .game-modal,
  #profileViewerModal .game-modal,
  #watchModal .game-modal,
  #videoModal .game-modal{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
    margin:0 !important;
    border-radius:16px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  #tacticModal .modal-head,
  #airdropModal .modal-head,
  #profileViewerModal .modal-head,
  #watchModal .modal-head,
  #videoModal .modal-head{
    padding:11px 14px !important;
    font-size:1rem !important;
    line-height:1.1 !important;
  }
  #tacticModal .modal-body-grid,
  #airdropModal .modal-body-grid{
    grid-template-columns:1fr !important;
    min-height:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
  }
  #tacticModal .modal-body-grid > div:first-child,
  #airdropModal .modal-body-grid > div:first-child{
    padding:12px 12px 0 !important;
  }
  #tacticModal .modal-body-grid > div:last-child,
  #airdropModal .modal-body-grid > div:last-child{
    padding:12px 14px 14px !important;
    max-height:none !important;
    overflow:auto !important;
  }
  #tacticModal .portrait-placeholder,
  #airdropModal .portrait-placeholder{
    width:108px !important;
    height:132px !important;
    margin:0 auto !important;
    border-radius:16px !important;
  }
  #tacticModal .modal-copy,
  #airdropModal .modal-copy,
  #profileViewerModal .modal-copy,
  #watchModal .modal-copy,
  #videoModal .modal-copy{
    flex:1 1 auto !important;
    padding:14px !important;
    max-height:none !important;
    overflow:auto !important;
  }
  #tacticModal .modal-footer,
  #airdropModal .modal-footer,
  #watchModal .modal-footer,
  #videoModal .modal-footer,
  #tacticModal .modal-actions,
  #airdropModal .modal-actions{
    padding:10px 12px !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    justify-content:stretch !important;
  }
  #tacticModal .modal-footer .btn,
  #airdropModal .modal-footer .btn,
  #watchModal .modal-footer .btn,
  #videoModal .modal-footer .btn,
  #tacticModal .modal-actions .btn,
  #airdropModal .modal-actions .btn{
    flex:1 1 100% !important;
    width:100% !important;
    min-height:44px !important;
    padding:10px 12px !important;
    font-size:.9rem !important;
  }
  #tacticModal .quote-box,
  #airdropModal .quote-box,
  #tacticModal .modal-copy .mb-3,
  #airdropModal .modal-copy .mb-3{
    margin-bottom:12px !important;
  }
}


/* v25 mobile compact header + modal footer/profile fix */
@media (max-width:760px){
  body:not(.landing-page-active) .topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:95 !important;
    background:rgba(3,12,28,.98) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
    height:auto !important;
    min-height:0 !important;
  }
  body:not(.landing-page-active) .topbar-inner{
    min-height:52px !important;
    height:52px !important;
    padding:4px 0 !important;
    gap:8px !important;
    align-items:center !important;
  }
  body:not(.landing-page-active) .brand{
    gap:8px !important;
    max-width:calc(100% - 54px) !important;
    min-height:0 !important;
    margin:0 !important;
    align-items:center !important;
  }
  body:not(.landing-page-active) .brand-mark{
    font-size:1.38rem !important;
    line-height:1 !important;
  }
  body:not(.landing-page-active) .brand-text{
    font-size:clamp(1.18rem,5.2vw,1.6rem) !important;
    line-height:1 !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    flex:0 0 44px !important;
    border-radius:12px !important;
    gap:4px !important;
    margin:0 !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle span{
    width:22px !important;
    height:3px !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
  }
  body:not(.landing-page-active) .mobile-menu-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
  }
  body:not(.landing-page-active) .page{
    padding-top:58px !important;
    margin-top:0 !important;
  }
  body:not(.landing-page-active) .dashboard-page,
  body:not(.landing-page-active) .earn-page,
  body:not(.landing-page-active) .wallet-page,
  body:not(.landing-page-active) .store-page{
    margin-top:0 !important;
    padding-top:0 !important;
  }
  body:not(.landing-page-active) .topnav{
    top:calc(100% + 4px) !important;
    max-height:calc(100dvh - 62px) !important;
  }

  #tacticModal,
  #airdropModal,
  #profileViewerModal,
  #garrisonViewerModal{
    padding:6px !important;
    align-items:center !important;
    justify-content:center !important;
  }
  #tacticModal .game-modal,
  #airdropModal .game-modal,
  #profileViewerModal .game-modal,
  #garrisonViewerModal .game-modal{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    min-height:0 !important;
    border-radius:16px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    margin:0 !important;
  }
  #tacticModal .modal-head,
  #airdropModal .modal-head,
  #profileViewerModal .modal-head,
  #garrisonViewerModal .modal-head{
    flex:0 0 auto !important;
    padding:12px 14px !important;
    font-size:1rem !important;
  }
  #tacticModal .modal-head .btn-reset,
  #airdropModal .modal-head .btn-reset,
  #profileViewerModal .modal-head .btn-reset,
  #garrisonViewerModal .modal-head .btn-reset{
    width:38px !important;
    height:38px !important;
    display:grid !important;
    place-items:center !important;
    font-size:1.4rem !important;
    line-height:1 !important;
  }
  #tacticModal .modal-body-grid,
  #airdropModal .modal-body-grid{
    grid-template-columns:1fr !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  #tacticModal .modal-body-grid > div:first-child,
  #airdropModal .modal-body-grid > div:first-child{
    flex:0 0 auto !important;
    padding:10px 12px 0 !important;
  }
  #tacticModal .modal-body-grid > div:last-child,
  #airdropModal .modal-body-grid > div:last-child,
  #profileViewerModal .modal-copy,
  #garrisonViewerModal .modal-copy{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:12px 14px 14px !important;
  }
  #tacticModal .portrait-placeholder,
  #airdropModal .portrait-placeholder{
    width:104px !important;
    height:124px !important;
    margin:0 auto !important;
  }
  #tacticModal .modal-footer,
  #airdropModal .modal-footer{
    position:sticky !important;
    bottom:0 !important;
    z-index:2 !important;
    flex:0 0 auto !important;
    margin-top:auto !important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)) !important;
    background:linear-gradient(180deg,#0d1730,#0a1328) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }
  #tacticModal .modal-footer .btn,
  #airdropModal .modal-footer .btn{
    width:100% !important;
    min-height:42px !important;
    font-size:.9rem !important;
    padding:10px 12px !important;
  }
  .profile-viewer-modal .profile-footer-row{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
}


.chat-headline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chat-role-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:.02em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.chat-name-governor{color:#ffd36b !important;text-shadow:0 0 12px rgba(255,211,107,.28)}
.chat-name-president{color:#72b8ff !important;text-shadow:0 0 12px rgba(114,184,255,.22)}
.chat-role-badge.chat-name-governor{background:rgba(255,211,107,.12);border-color:rgba(255,211,107,.24);color:#ffd36b}
.chat-role-badge.chat-name-president{background:rgba(114,184,255,.12);border-color:rgba(114,184,255,.24);color:#72b8ff}

/* admin v2 tactical redesign */
body.admin-mode{
  background:
    radial-gradient(circle at 12% 12%, rgba(0,255,191,.10), transparent 22%),
    radial-gradient(circle at 88% 10%, rgba(42,109,255,.10), transparent 20%),
    linear-gradient(180deg,#06111f 0%,#081629 100%);
  color:#ecf7ff;
}
body.admin-mode .topbar{
  background:rgba(4,13,24,.92);
  border-bottom:1px solid rgba(0,255,191,.16);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
body.admin-mode .brand,
body.admin-mode .brand-text,
body.admin-mode .topnav a{color:#ecf7ff}
body.admin-mode .brand-mark,
body.admin-mode .brand-red{color:#00f0b5}
body.admin-mode .topnav a{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}
body.admin-mode .topnav a:hover,
body.admin-mode .topnav a.active{border-color:rgba(0,255,191,.28);background:rgba(0,255,191,.08);color:#fff}
body.admin-mode .page{padding-top:22px}
body.admin-mode .admin-grid{grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start}
body.admin-mode .sidebar-card{
  position:sticky;top:92px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(7,20,37,.98),rgba(5,17,31,.98));
  border:1px solid rgba(0,255,191,.18);
  box-shadow:0 0 0 1px rgba(0,255,191,.06),0 24px 50px rgba(0,0,0,.32);
}
body.admin-mode .sidebar-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(0,255,191,.28);
  background:rgba(0,255,191,.08);color:#00f0b5;
  font-weight:900;font-size:.82rem;letter-spacing:.08em;
}
body.admin-mode .sidebar-title{
  margin-top:14px;
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:2rem;line-height:.95;color:#fff;
}
body.admin-mode .sidebar-copy{margin-top:8px;color:#93b3c6}
body.admin-mode .side-link{
  display:flex;align-items:center;gap:12px;
  width:100%;margin-top:10px;padding:13px 14px;
  border-radius:16px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);color:#d7ebf5;
  font-weight:800;line-height:1.25;word-break:break-word;
}
body.admin-mode .side-link i{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(0,255,191,.08);color:#00f0b5;
}
body.admin-mode .side-link.current{
  border-color:rgba(0,255,191,.4);
  background:linear-gradient(180deg,rgba(0,255,191,.10),rgba(0,255,191,.04));
  color:#fff;box-shadow:0 0 24px rgba(0,255,191,.12);
}
body.admin-mode .side-link.current i{background:linear-gradient(180deg,#00f0b5,#00c88c);color:#04121f}
body.admin-mode .card,
body.admin-mode .admin-shell .card,
body.admin-mode .admin-grid .card{
  background:linear-gradient(180deg,rgba(8,22,40,.98),rgba(6,16,30,.98)) !important;
  border:1px solid rgba(66,108,140,.26);
  box-shadow:0 0 0 1px rgba(255,255,255,.02),0 20px 44px rgba(0,0,0,.22);
}
body.admin-mode .section-title,
body.admin-mode h1.section-title,
body.admin-mode h2.section-title{
  font-family:"Barlow Condensed",Inter,sans-serif;
  font-size:clamp(1.55rem,2.1vw,2.3rem);
  line-height:1.05;
  color:#f8fcff;
  word-break:break-word;
}
body.admin-mode .sub,
body.admin-mode .small{color:#8fb0c5;line-height:1.55}
body.admin-mode .admin-hero{
  padding:28px;border-radius:24px;
  border:1px solid rgba(0,255,191,.22);
  background:
    linear-gradient(135deg, rgba(0,255,191,.12), rgba(8,22,40,.88) 46%),
    linear-gradient(180deg,#081628,#06121f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 0 28px rgba(0,255,191,.10);
}
body.admin-mode .admin-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
body.admin-mode .admin-kpi{
  min-height:124px;
  border-radius:20px;
  border:1px solid rgba(0,255,191,.16);
  background:linear-gradient(180deg,rgba(7,19,34,.98),rgba(5,14,26,.98));
}
body.admin-mode .admin-kpi-icon{background:rgba(0,255,191,.10);color:#00f0b5}
body.admin-mode .admin-kpi .value{font-size:2.2rem;color:#fff}
body.admin-mode .tone-sky,
body.admin-mode .tone-violet,
body.admin-mode .tone-amber,
body.admin-mode .tone-green,
body.admin-mode .tone-red,
body.admin-mode .tone-pink{background:linear-gradient(180deg,rgba(9,24,43,.98),rgba(5,15,28,.98))}
body.admin-mode .admin-link-card{
  min-height:170px;
  display:flex;flex-direction:column;justify-content:space-between;
  border-radius:20px;
  border:1px solid rgba(0,255,191,.14);
  background:linear-gradient(180deg,rgba(7,20,36,.98),rgba(5,16,29,.98));
}
body.admin-mode .admin-link-card:hover{
  transform:translateY(-2px);
  border-color:rgba(0,255,191,.36);
  box-shadow:0 0 24px rgba(0,255,191,.08);
}
body.admin-mode .grid-2,
body.admin-mode .grid-3,
body.admin-mode .grid-4{align-items:stretch}
body.admin-mode .table-wrap{
  border-radius:18px;
  border:1px solid rgba(66,108,140,.22);
  background:rgba(1,8,17,.22);
}
body.admin-mode .table th,
body.admin-mode .table td{
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#e6f1fa;
  white-space:normal;word-break:break-word;line-height:1.45;
}
body.admin-mode .table th{color:#86f7d5;font-size:.78rem;letter-spacing:.08em}
body.admin-mode .input,
body.admin-mode .select,
body.admin-mode textarea.input,
body.admin-mode .chat-form .input{
  background:#071523;
  border:1px solid rgba(66,108,140,.34);
  color:#f6fbff;
}
body.admin-mode .input:focus,
body.admin-mode .select:focus,
body.admin-mode textarea.input:focus{
  border-color:rgba(0,255,191,.42);
  box-shadow:0 0 0 3px rgba(0,255,191,.10);
}
body.admin-mode .btn{
  border-radius:14px;
  font-weight:900;
  letter-spacing:.02em;
}
body.admin-mode .btn-primary{background:linear-gradient(180deg,#00dca4,#00b987);color:#021016;border:1px solid rgba(0,255,191,.34)}
body.admin-mode .btn-secondary{background:linear-gradient(180deg,#10263c,#0a1828);color:#ecf7ff;border:1px solid rgba(122,151,181,.28)}
body.admin-mode .btn-danger{background:linear-gradient(180deg,#ff5864,#d92f45);border:1px solid rgba(255,91,97,.24)}
body.admin-mode .btn-success{background:linear-gradient(180deg,#1dd598,#0fb67d);border:1px solid rgba(29,213,152,.24)}
body.admin-mode .notice{border-radius:18px}
body.admin-mode .footer{background:transparent;color:#6f8ca4}
body.admin-mode .order-chip{padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
@media (max-width:1180px){
  body.admin-mode .admin-grid{grid-template-columns:1fr}
  body.admin-mode .sidebar-card{position:static}
}
@media (max-width:760px){
  body.admin-mode .page{padding-top:16px}
  body.admin-mode .sidebar-card{padding:16px}
  body.admin-mode .side-link{padding:12px}
  body.admin-mode .admin-kpi{min-height:auto}
}


/* admin v3 clean light redesign */
body.admin-mode{
  background:#f4f7fb !important;
  color:#1f2937 !important;
}
body.admin-mode .app-shell{background:transparent}
body.admin-mode .topbar{
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid #dbe4f0 !important;
  box-shadow:0 10px 30px rgba(15,23,42,.06) !important;
  backdrop-filter:blur(14px);
}
body.admin-mode .brand,
body.admin-mode .brand-text,
body.admin-mode .topnav a{color:#1e293b !important}
body.admin-mode .brand-mark,
body.admin-mode .brand-red{color:#5b4cf0 !important}
body.admin-mode .topnav{gap:10px;flex-wrap:wrap}
body.admin-mode .topnav a{
  border:1px solid #dbe4f0 !important;
  background:#fff !important;
  color:#334155 !important;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(15,23,42,.03);
}
body.admin-mode .topnav a:hover,
body.admin-mode .topnav a.active{
  border-color:#c7d2fe !important;
  background:#eef2ff !important;
  color:#4338ca !important;
}
body.admin-mode .page{padding-top:22px}
body.admin-mode .admin-grid{grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
body.admin-mode .sidebar-card{
  position:sticky;top:92px;
  padding:20px;
  border-radius:24px;
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 18px 35px rgba(15,23,42,.06) !important;
}
body.admin-mode .sidebar-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid #d6d3ff;
  background:#f3f1ff;color:#5948eb;
  font-weight:800;font-size:.8rem;letter-spacing:.03em;
}
body.admin-mode .sidebar-title{
  margin-top:14px;
  font-size:1.2rem;
  font-weight:800;
  color:#0f172a;
}
body.admin-mode .sidebar-copy{color:#64748b;line-height:1.6}
body.admin-mode .side-link{
  display:flex;align-items:center;gap:12px;
  width:100%;margin-top:10px;padding:12px 13px;
  border-radius:16px;border:1px solid transparent;
  background:#f8fafc !important;color:#334155 !important;
  font-weight:700;line-height:1.35;
}
body.admin-mode .side-link i{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;
  display:grid;place-items:center;
  background:#eef2ff;color:#5b4cf0;
}
body.admin-mode .side-link:hover{background:#f1f5f9 !important;border-color:#e2e8f0}
body.admin-mode .side-link.current{
  background:#eef2ff !important;
  border-color:#d6d3ff !important;
  color:#4338ca !important;
  box-shadow:none !important;
}
body.admin-mode .side-link.current i{background:#5b4cf0;color:#fff}
body.admin-mode .card,
body.admin-mode .admin-shell .card,
body.admin-mode .admin-grid .card{
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 18px 35px rgba(15,23,42,.05) !important;
}
body.admin-mode .section-title,
body.admin-mode h1.section-title,
body.admin-mode h2.section-title{
  color:#0f172a !important;
  font-size:clamp(1.55rem,2vw,2.15rem);
  line-height:1.1;
}
body.admin-mode .sub,
body.admin-mode .small{color:#64748b !important;line-height:1.6}
body.admin-mode .admin-page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
body.admin-mode .admin-page-actions{display:flex;gap:10px;flex-wrap:wrap}
body.admin-mode .eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-bottom:6px}
body.admin-mode .admin-content-shell{min-width:0}
body.admin-mode .admin-hero{
  padding:24px 24px 26px;border-radius:24px;
  border:1px solid transparent !important;
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%) !important;
  color:#fff !important;
}
body.admin-mode .admin-hero .section-title,
body.admin-mode .admin-hero .sub{color:#fff !important}
body.admin-mode .admin-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
body.admin-mode .admin-kpi{
  min-height:120px;
  border-radius:20px;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
}
body.admin-mode .admin-kpi-icon{background:#eef2ff !important;color:#5b4cf0 !important}
body.admin-mode .admin-kpi .value{font-size:2.1rem;color:#0f172a !important}
body.admin-mode .tone-sky, body.admin-mode .tone-violet, body.admin-mode .tone-amber,
body.admin-mode .tone-green, body.admin-mode .tone-red, body.admin-mode .tone-pink{background:#fff !important}
body.admin-mode .admin-link-card{
  min-height:156px;
  display:flex;flex-direction:column;justify-content:space-between;
  border-radius:20px;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
}
body.admin-mode .admin-link-card:hover{transform:translateY(-1px);border-color:#cbd5e1 !important;box-shadow:0 16px 32px rgba(15,23,42,.08) !important}
body.admin-mode .table-wrap{
  border-radius:18px;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
}
body.admin-mode .table th,
body.admin-mode .table td{
  border-bottom:1px solid #edf2f7 !important;
  color:#334155 !important;
  white-space:normal;word-break:break-word;line-height:1.45;
}
body.admin-mode .table th{color:#64748b !important;font-size:.78rem;letter-spacing:.08em}
body.admin-mode .field label{color:#334155;font-size:.9rem;font-weight:800;margin-bottom:8px}
body.admin-mode .input,
body.admin-mode .select,
body.admin-mode textarea.input,
body.admin-mode .chat-form .input,
body.admin-mode input[type=file]{
  background:#ffffff !important;
  border:1px solid #cbd5e1 !important;
  color:#0f172a !important;
  border-radius:14px;
  min-height:46px;
}
body.admin-mode textarea.input{min-height:110px;padding-top:12px}
body.admin-mode .input:focus,
body.admin-mode .select:focus,
body.admin-mode textarea.input:focus{
  border-color:#a5b4fc !important;
  box-shadow:0 0 0 4px rgba(99,102,241,.12) !important;
}
body.admin-mode .btn{
  border-radius:14px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:none !important;
}
body.admin-mode .btn-primary{background:#4f46e5 !important;color:#fff !important;border:1px solid #4f46e5 !important}
body.admin-mode .btn-secondary{background:#fff !important;color:#334155 !important;border:1px solid #cbd5e1 !important}
body.admin-mode .btn-danger{background:#ef4444 !important;color:#fff !important;border:1px solid #ef4444 !important}
body.admin-mode .btn-success{background:#10b981 !important;color:#fff !important;border:1px solid #10b981 !important}
body.admin-mode .notice{border-radius:18px}
body.admin-mode .footer{background:transparent;color:#94a3b8}
body.admin-mode .order-chip{padding:14px 16px;border-radius:16px;border:1px solid #e2e8f0;background:#fff;color:#334155}
body.admin-mode .grid-2,body.admin-mode .grid-3,body.admin-mode .grid-4{align-items:stretch}
@media (max-width:1180px){
  body.admin-mode .admin-grid{grid-template-columns:1fr}
  body.admin-mode .sidebar-card{position:static}
}
@media (max-width:760px){
  body.admin-mode .page{padding-top:16px}
  body.admin-mode .sidebar-card{padding:16px}
  body.admin-mode .side-link{padding:11px 12px}
  body.admin-mode .admin-kpi{min-height:auto}
}

body.admin-mode .admin-content-shell .grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
body.admin-mode .admin-content-shell .grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
body.admin-mode .table td .input,
body.admin-mode .table td .select,
body.admin-mode .table td textarea.input{min-width:120px}
body.admin-mode .table td textarea.input{min-height:84px}

/* final mobile dock + dashboard tweaks */
@keyframes mobileDockGoldPulse{
  0%,100%{opacity:.92;filter:drop-shadow(0 0 0 rgba(245,200,76,0))}
  50%{opacity:1;filter:drop-shadow(0 0 8px rgba(245,200,76,.28))}
}
.mobile-dock{
  grid-template-columns:repeat(5,1fr) !important;
}
.mobile-dock a{
  min-width:0;
}
.mobile-dock a i{
  color:#f5c84c !important;
  animation:mobileDockGoldPulse 2.3s ease-in-out infinite;
}
.mobile-dock a span{
  color:#eef4ff !important;
}
@media (max-width:760px){
  .mobile-dock{grid-template-columns:repeat(5,1fr) !important;padding:9px 8px !important;gap:6px !important}
  .mobile-dock a{padding:8px 2px !important;font-size:.66rem !important}
  .mobile-dock a i{font-size:1rem !important}
}

/* admin stacked list layout */
body.admin-mode .admin-stack-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
body.admin-mode .admin-item-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:20px;
  padding:18px;
  box-shadow:0 18px 35px rgba(15,23,42,.04);
}
body.admin-mode .admin-item-card.compact{padding:16px}
body.admin-mode .admin-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
body.admin-mode .admin-item-title{
  margin:0;
  color:#0f172a;
  font-size:1.2rem;
  line-height:1.2;
}
body.admin-mode .admin-inline-note{
  color:#64748b;
  line-height:1.55;
}
body.admin-mode .admin-item-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
body.admin-mode .admin-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
  border:1px solid #dbe4f0;
  background:#f8fafc;
  color:#334155;
}
body.admin-mode .admin-chip.primary{background:#eef2ff;border-color:#d6d3ff;color:#4338ca}
body.admin-mode .admin-chip.success{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
body.admin-mode .admin-chip.warn{background:#fffbeb;border-color:#fde68a;color:#b45309}
body.admin-mode .admin-chip.danger{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
body.admin-mode .admin-form-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}
body.admin-mode .admin-form-grid.compact-admin-grid .field{margin-bottom:0}
body.admin-mode .admin-form-grid .field{display:flex;flex-direction:column;min-width:0}
body.admin-mode .admin-form-grid .field.span-1{grid-column:span 1}
body.admin-mode .admin-form-grid .field.span-2{grid-column:span 2}
body.admin-mode .admin-form-grid .field.span-3{grid-column:span 3}
body.admin-mode .admin-form-grid .field.span-4{grid-column:span 4}
body.admin-mode .admin-form-grid .field.span-5{grid-column:span 5}
body.admin-mode .admin-form-grid .field.span-6{grid-column:span 6}
body.admin-mode .admin-actions-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
body.admin-mode .admin-field-end{display:flex;align-items:flex-end}
body.admin-mode .payment-proof-box{min-height:140px;white-space:pre-wrap}
body.admin-mode .w-100{width:100%}
@media (max-width:960px){
  body.admin-mode .admin-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.admin-mode .admin-form-grid .field.span-1,
  body.admin-mode .admin-form-grid .field.span-2,
  body.admin-mode .admin-form-grid .field.span-3,
  body.admin-mode .admin-form-grid .field.span-4,
  body.admin-mode .admin-form-grid .field.span-5,
  body.admin-mode .admin-form-grid .field.span-6{grid-column:span 2}
}
@media (max-width:640px){
  body.admin-mode .admin-form-grid{grid-template-columns:1fr}
  body.admin-mode .admin-form-grid .field.span-1,
  body.admin-mode .admin-form-grid .field.span-2,
  body.admin-mode .admin-form-grid .field.span-3,
  body.admin-mode .admin-form-grid .field.span-4,
  body.admin-mode .admin-form-grid .field.span-5,
  body.admin-mode .admin-form-grid .field.span-6{grid-column:span 1}
}


/* stage23 garrison capital modal */
.garrison-shell.modern{display:grid;gap:14px}
.garrison-capital{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:16px;padding:18px;border-radius:18px;border:1px solid rgba(255,214,102,.26);background:linear-gradient(135deg,rgba(11,21,39,.98),rgba(18,27,49,.98));overflow:hidden}
.garrison-capital::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(255,214,102,.14),transparent 42%);pointer-events:none}
.garrison-capital-copy{position:relative;z-index:1;display:grid;gap:8px}
.garrison-capital-text{color:#d5dfed;line-height:1.55}
.garrison-summary-inline{color:#9fb3cf;font-size:.92rem}
.garrison-capital-visual{position:relative;min-height:180px;border-radius:16px;border:1px solid rgba(255,214,102,.14);background:linear-gradient(180deg,rgba(37,78,129,.42),rgba(8,13,24,.98));overflow:hidden}
.capital-skyline{position:absolute;left:0;right:0;bottom:0;height:68%;background:
  linear-gradient(transparent 0 48%, rgba(0,0,0,.32) 48% 100%),
  radial-gradient(circle at 18% 62%,rgba(255,214,102,.16),transparent 20%),
  linear-gradient(90deg,rgba(16,25,46,.98) 0 7%,transparent 7% 9%,rgba(16,25,46,.98) 9% 17%,transparent 17% 19%,rgba(16,25,46,.98) 19% 29%,transparent 29% 32%,rgba(16,25,46,.98) 32% 40%,transparent 40% 43%,rgba(16,25,46,.98) 43% 50%,transparent 50% 54%,rgba(16,25,46,.98) 54% 64%,transparent 64% 67%,rgba(16,25,46,.98) 67% 76%,transparent 76% 79%,rgba(16,25,46,.98) 79% 90%,transparent 90% 100%);
  box-shadow:inset 0 12px 22px rgba(255,214,102,.05)}
.capital-fire{position:absolute;left:0;right:0;bottom:0;height:100%;opacity:0}
.capital-fortified .garrison-capital-visual{background:linear-gradient(180deg,rgba(77,144,218,.36),rgba(8,15,29,.98))}
.capital-warning .garrison-capital-visual{background:linear-gradient(180deg,rgba(171,111,26,.34),rgba(24,13,10,.98))}
.capital-critical .garrison-capital-visual{background:linear-gradient(180deg,rgba(139,33,33,.38),rgba(27,9,9,.98))}
.capital-warning .capital-fire,.capital-critical .capital-fire{opacity:1;background:
  radial-gradient(circle at 24% 78%,rgba(255,235,160,.9) 0%,rgba(255,146,56,.78) 20%,rgba(255,56,0,.0) 42%),
  radial-gradient(circle at 52% 74%,rgba(255,235,160,.85) 0%,rgba(255,116,38,.74) 20%,rgba(255,56,0,.0) 40%),
  radial-gradient(circle at 74% 70%,rgba(255,235,160,.88) 0%,rgba(255,126,36,.72) 18%,rgba(255,56,0,.0) 38%)}
.garrison-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.garrison-switch-card{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 12px;border-radius:14px;border:1px solid rgba(255,214,102,.18);background:linear-gradient(180deg,rgba(14,22,36,.98),rgba(8,13,24,.98));color:#dbe5f4;font-weight:900;text-align:center}
.garrison-switch-card i{color:#ffd46a}
.garrison-switch-card.active{border-color:rgba(255,214,102,.64);box-shadow:0 0 0 1px rgba(255,214,102,.16),0 16px 28px rgba(0,0,0,.18);background:linear-gradient(180deg,rgba(55,38,14,.98),rgba(18,12,7,.98));color:#fff}
.garrison-stage{border-radius:16px;border:1px solid rgba(255,214,102,.16);background:linear-gradient(180deg,rgba(9,16,29,.98),rgba(7,12,21,.98));padding:16px}
.garrison-stage-panel{display:none}
.garrison-stage-panel.active{display:block}
.garrison-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.garrison-section-title{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.55rem;color:#fff;line-height:1}
.garrison-section-sub{color:#97abc8;font-size:.94rem}
.garrison-rank-list{display:grid;gap:10px;max-height:330px;overflow:auto;padding-right:4px}
.garrison-rank-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,214,102,.08)}
.garrison-rank-left{display:flex;align-items:center;gap:10px;min-width:0}
.garrison-rank-meta{display:flex;align-items:center;gap:8px}
.garrison-rank-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.35);color:#ffd4d4;font-weight:900}
.garrison-depot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.garrison-depot-item{padding:16px 14px;border-radius:16px;border:1px solid rgba(255,214,102,.16);background:linear-gradient(180deg,rgba(14,22,36,.98),rgba(8,13,24,.98));display:grid;gap:6px;text-align:center}
.garrison-depot-item span{font-weight:900;color:#9fb0c9;text-transform:uppercase}
.garrison-depot-item strong{font-family:"Barlow Condensed",Inter,sans-serif;font-size:2rem;color:#fff;line-height:1}
.garrison-depot-item small{color:#ffd46a;font-size:.88rem}
.garrison-feature-panel{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:16px;border-radius:16px;border:1px solid rgba(255,214,102,.16);background:linear-gradient(180deg,rgba(17,25,40,.98),rgba(9,14,24,.98))}
.garrison-feature-panel.bonus{border-color:rgba(255,93,109,.28);background:linear-gradient(180deg,rgba(35,14,20,.98),rgba(17,10,13,.98))}
.garrison-feature-big{display:grid;place-items:center;width:120px;height:120px;border-radius:22px;border:1px solid rgba(255,214,102,.2);background:radial-gradient(circle,rgba(255,214,102,.16),rgba(255,214,102,0) 72%);font-family:"Barlow Condensed",Inter,sans-serif;font-size:2.6rem;color:#fff}
.garrison-feature-title{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.5rem;color:#fff}
.garrison-feature-sub{margin-top:4px;color:#b9c7da;line-height:1.5}
.garrison-note{margin-top:10px;color:#8da3c2;font-size:.9rem;line-height:1.5}
.garrison-action-group{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:760px){
  .garrison-capital{grid-template-columns:1fr;padding:14px}
  .garrison-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .garrison-switch-card{padding:12px 10px;font-size:.92rem}
  .garrison-depot-grid{grid-template-columns:1fr}
  .garrison-feature-panel{grid-template-columns:1fr;justify-items:center;text-align:center}
}
@media (max-width:520px){
  .garrison-card-grid{grid-template-columns:1fr}
  .garrison-section-head{flex-direction:column}
  .garrison-action-group{width:100%}
  .garrison-action-group .btn{width:100%}
}

/* stage24 capital scene + premium modal visuals */
.garrison-capital{border-color:rgba(255,223,132,.34);box-shadow:0 0 0 1px rgba(255,223,132,.08),0 24px 46px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05)}
.garrison-capital::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 26%,transparent 74%,rgba(255,208,98,.08));pointer-events:none}
.garrison-capital-copy{align-content:start}
.capital-defense-note{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,223,132,.24);background:rgba(255,223,132,.08);color:#fbe7ad;font-size:.88rem;font-weight:800;line-height:1.35;max-width:max-content}
.garrison-capital-visual{min-height:240px;background:linear-gradient(180deg,rgba(42,96,170,.48),rgba(9,16,30,.99));box-shadow:inset 0 -30px 40px rgba(0,0,0,.34),0 18px 30px rgba(0,0,0,.22)}
.capital-aurora{position:absolute;inset:-10% -10% auto -10%;height:75%;background:radial-gradient(circle at 30% 20%,rgba(89,182,255,.28),transparent 28%),radial-gradient(circle at 70% 12%,rgba(90,255,202,.18),transparent 26%),radial-gradient(circle at 50% 0%,rgba(255,223,132,.16),transparent 34%);filter:blur(6px);animation:capitalAuroraFloat 8s ease-in-out infinite alternate}
.capital-moon{position:absolute;right:18px;top:16px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8de 0, #ffe29b 42%, rgba(255,226,155,.18) 72%, rgba(255,226,155,0) 100%);box-shadow:0 0 24px rgba(255,228,168,.38)}
.capital-searchlight{position:absolute;bottom:78px;width:18px;height:120px;opacity:.55;filter:blur(.4px)}
.capital-searchlight::before{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:#c7e9ff;box-shadow:0 0 15px rgba(199,233,255,.72)}
.capital-searchlight::after{content:'';position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:120px;height:130px;background:linear-gradient(180deg,rgba(165,226,255,.46),rgba(165,226,255,0));clip-path:polygon(48% 100%,52% 100%,100% 0,0 0);opacity:.75;transform-origin:bottom center;animation:capitalBeamSweep 6s ease-in-out infinite}
.capital-searchlight.beam-left{left:34px}
.capital-searchlight.beam-right{right:42px}
.capital-searchlight.beam-right::after{animation-delay:-2.5s}
.capital-defense-ring{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:170px;height:48px;border-radius:50%;border:1px solid rgba(95,240,255,.46);box-shadow:0 0 20px rgba(95,240,255,.18),inset 0 0 18px rgba(95,240,255,.14);background:radial-gradient(circle,rgba(95,240,255,.16),rgba(95,240,255,0) 70%);animation:capitalPulse 3s ease-in-out infinite}
.capital-neon-wall{position:absolute;left:16px;right:16px;bottom:46px;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(74,223,255,.18),rgba(135,255,197,.82),rgba(74,223,255,.18));box-shadow:0 0 18px rgba(74,223,255,.42),0 0 32px rgba(135,255,197,.14)}
.capital-skyline{position:absolute;left:0;right:0;bottom:0;height:72%;box-shadow:inset 0 12px 22px rgba(255,214,102,.05)}
.capital-skyline .tower{position:absolute;bottom:22px;display:block;background:linear-gradient(180deg,rgba(17,28,49,.98),rgba(8,14,26,.98));border:1px solid rgba(255,223,132,.16);border-bottom:none;border-radius:14px 14px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.02),0 12px 22px rgba(0,0,0,.28)}
.capital-skyline .tower b{position:absolute;inset:18% 24% auto 24%;height:54%;background:repeating-linear-gradient(180deg,rgba(255,219,121,.82) 0 6px,rgba(255,219,121,0) 6px 16px);opacity:.72}
.capital-skyline .tower i{position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,rgba(107,248,255,.95) 0,rgba(107,248,255,.25) 58%,rgba(107,248,255,0) 72%);box-shadow:0 0 20px rgba(107,248,255,.4)}
.capital-skyline .tower-xl{left:12%;width:64px;height:142px}
.capital-skyline .tower-md{left:33%;width:54px;height:112px}
.capital-skyline .tower-lg{right:18%;width:72px;height:128px}
.capital-skyline .tower-sm{right:40%;width:42px;height:90px}
.capital-central-palace{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:122px;height:108px;border-radius:22px 22px 12px 12px;background:linear-gradient(180deg,rgba(25,34,56,.98),rgba(10,16,28,.98));border:1px solid rgba(255,223,132,.24);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 18px 24px rgba(0,0,0,.26);overflow:hidden}
.palace-core{position:absolute;inset:16px 18px 12px;border-radius:18px 18px 10px 10px;background:linear-gradient(180deg,rgba(47,85,154,.34),rgba(14,23,43,.06)),linear-gradient(180deg,rgba(255,225,152,.14),rgba(255,225,152,0));border:1px solid rgba(255,223,132,.14)}
.palace-window{position:absolute;top:34px;width:24px;height:32px;border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,rgba(255,232,166,.92),rgba(255,171,66,.54));box-shadow:0 0 16px rgba(255,195,90,.22)}
.palace-window.left{left:22px}
.palace-window.right{right:22px}
.palace-flag{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:3px;height:32px;background:linear-gradient(180deg,#dfe9ff,#7cc4ff)}
.palace-flag::after{content:'';position:absolute;left:3px;top:4px;width:24px;height:14px;border-radius:0 10px 10px 0;background:linear-gradient(180deg,#ffdb74,#f28d1b);box-shadow:0 0 16px rgba(255,177,64,.22);animation:capitalFlagWave 2.4s ease-in-out infinite}
.capital-fire{position:absolute;left:0;right:0;bottom:0;height:100%;opacity:0}
.capital-embers{position:absolute;inset:0;opacity:.46;pointer-events:none}
.capital-embers::before,.capital-embers::after{content:'';position:absolute;inset:auto 0 0 0;height:100%;background:radial-gradient(circle at 18% 84%,rgba(255,180,90,.95) 0 2px,transparent 3px),radial-gradient(circle at 36% 70%,rgba(255,115,56,.85) 0 2px,transparent 3px),radial-gradient(circle at 54% 80%,rgba(255,208,117,.9) 0 2px,transparent 3px),radial-gradient(circle at 72% 68%,rgba(255,120,52,.75) 0 2px,transparent 3px),radial-gradient(circle at 82% 86%,rgba(255,210,132,.9) 0 2px,transparent 3px);animation:capitalEmbersRise 5s linear infinite}
.capital-embers::after{animation-delay:-2.2s;opacity:.66}
.capital-status-panel{position:absolute;right:14px;bottom:12px;display:grid;gap:4px;justify-items:end;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,223,132,.18);background:linear-gradient(180deg,rgba(7,16,30,.9),rgba(9,15,27,.76));backdrop-filter:blur(8px);box-shadow:0 14px 24px rgba(0,0,0,.24)}
.capital-status-panel strong{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.8rem;line-height:1;color:#fff}
.capital-status-panel small{color:#a7bad4;font-size:.82rem}
.capital-status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,223,132,.1);border:1px solid rgba(255,223,132,.18);color:#ffe9b2;font-size:.76rem;font-weight:900;letter-spacing:.08em}
.capital-fortified .capital-neon-wall{background:linear-gradient(90deg,rgba(74,223,255,.18),rgba(110,255,188,.92),rgba(74,223,255,.18))}
.capital-fortified .capital-defense-ring{border-color:rgba(98,245,199,.56);box-shadow:0 0 20px rgba(98,245,199,.24),inset 0 0 18px rgba(98,245,199,.18)}
.capital-warning .garrison-capital-visual{background:linear-gradient(180deg,rgba(171,111,26,.34),rgba(20,12,14,.98))}
.capital-warning .capital-neon-wall{background:linear-gradient(90deg,rgba(255,187,65,.14),rgba(255,187,65,.9),rgba(255,187,65,.14));box-shadow:0 0 18px rgba(255,187,65,.38)}
.capital-warning .capital-defense-ring{border-color:rgba(255,187,65,.58);box-shadow:0 0 20px rgba(255,187,65,.24),inset 0 0 18px rgba(255,187,65,.14)}
.capital-warning .capital-fire,.capital-critical .capital-fire{opacity:1;background:radial-gradient(circle at 24% 78%,rgba(255,235,160,.95) 0%,rgba(255,146,56,.84) 20%,rgba(255,56,0,0) 42%),radial-gradient(circle at 52% 74%,rgba(255,235,160,.9) 0%,rgba(255,116,38,.78) 20%,rgba(255,56,0,0) 40%),radial-gradient(circle at 74% 70%,rgba(255,235,160,.9) 0%,rgba(255,126,36,.78) 18%,rgba(255,56,0,0) 38%);animation:capitalFireDance 1.9s ease-in-out infinite alternate}
.capital-critical .garrison-capital-visual{background:linear-gradient(180deg,rgba(139,33,33,.44),rgba(18,5,8,.99))}
.capital-critical .capital-neon-wall{background:linear-gradient(90deg,rgba(255,95,95,.14),rgba(255,95,95,.9),rgba(255,95,95,.14));box-shadow:0 0 18px rgba(255,95,95,.4)}
.capital-critical .capital-defense-ring{border-color:rgba(255,95,95,.58);box-shadow:0 0 20px rgba(255,95,95,.26),inset 0 0 18px rgba(255,95,95,.18)}
.capital-critical .capital-central-palace{box-shadow:0 0 18px rgba(255,95,95,.22),0 18px 24px rgba(0,0,0,.26)}
.garrison-switch-card{position:relative;overflow:hidden;border-color:rgba(255,223,132,.22);box-shadow:0 10px 18px rgba(0,0,0,.18)}
.garrison-switch-card::after{content:'';position:absolute;inset:1px;border-radius:13px;border:1px solid rgba(255,255,255,.04);pointer-events:none}
.garrison-switch-card:hover{transform:translateY(-1px);border-color:rgba(255,223,132,.42)}
.garrison-stage{box-shadow:0 18px 26px rgba(0,0,0,.18)}
.garrison-rank-row,.garrison-depot-item,.garrison-feature-panel{box-shadow:0 12px 22px rgba(0,0,0,.14)}
@keyframes capitalAuroraFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(10px) scale(1.04)}}
@keyframes capitalBeamSweep{0%,100%{transform:translateX(-50%) rotate(-18deg)}50%{transform:translateX(-50%) rotate(18deg)}}
@keyframes capitalPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.8}50%{transform:translateX(-50%) scale(1.06);opacity:1}}
@keyframes capitalFlagWave{0%,100%{transform:skewY(0deg) scaleX(1)}50%{transform:skewY(-8deg) scaleX(1.04)}}
@keyframes capitalEmbersRise{0%{transform:translateY(10px);opacity:0}20%{opacity:.65}100%{transform:translateY(-30px);opacity:0}}
@keyframes capitalFireDance{0%{transform:translateY(0) scale(1);filter:blur(.2px)}100%{transform:translateY(-8px) scale(1.08);filter:blur(.4px)}}
@media (max-width:760px){
  .garrison-capital-visual{min-height:220px}
  .capital-status-panel{left:12px;right:12px;justify-items:start}
  .capital-searchlight{opacity:.42}
  .capital-skyline .tower-xl{left:10%}
  .capital-skyline .tower-lg{right:14%}
  .capital-central-palace{width:108px;height:96px}
  .capital-defense-note{max-width:100%;border-radius:14px}
}


/* stage25 premium garrison summaries + mobile radar polish */
.garrison-summary-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.garrison-summary-tile{position:relative;overflow:hidden;padding:16px 14px;border-radius:18px;border:1px solid rgba(255,223,132,.18);background:linear-gradient(180deg,rgba(16,24,39,.98),rgba(8,13,23,.98));box-shadow:0 14px 24px rgba(0,0,0,.18)}
.garrison-summary-tile::after{content:'';position:absolute;inset:1px;border-radius:17px;border:1px solid rgba(255,255,255,.04);pointer-events:none}
.garrison-summary-tile span{display:block;font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#9fb4cf}
.garrison-summary-tile strong{display:block;margin-top:8px;font-family:"Barlow Condensed",Inter,sans-serif;font-size:2rem;line-height:1;color:#fff}
.garrison-summary-tile small{display:block;margin-top:6px;color:#c7d2e0;font-size:.88rem;line-height:1.4}
.garrison-rank-row{align-items:flex-start}
.garrison-rank-left{align-items:flex-start}
.garrison-rank-pill{white-space:nowrap}
.garrison-shell .profile-score-bar{height:12px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}
.garrison-shell .profile-score-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f1b944,#ffe28a,#63ffd1)}
@media (max-width:760px){
  .garrison-summary-stats{grid-template-columns:1fr;gap:10px}
  .garrison-summary-tile{padding:14px 13px;border-radius:16px}
  .garrison-summary-tile strong{font-size:1.7rem}
}

/* === Premium auth pages === */
.auth-shell{
  padding:18px 0 8px;
}
.auth-layout{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
  gap:22px;
  align-items:stretch;
}
.auth-hero-panel,
.auth-form-panel{
  position:relative;
  overflow:hidden;
}
.auth-hero-panel{
  padding:32px;
  background:
    radial-gradient(circle at top right, rgba(96,165,250,.18), transparent 26%),
    radial-gradient(circle at bottom left, rgba(255,110,134,.12), transparent 30%),
    linear-gradient(180deg, rgba(12,24,43,.98), rgba(8,18,34,.98));
  border-radius:26px;
  min-height:100%;
}
.auth-form-panel{
  padding:28px;
  border-radius:26px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.07), transparent 30%),
    linear-gradient(180deg, rgba(22,36,58,.98), rgba(11,21,37,.98));
}
.auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#d9e7ff;
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.auth-title{
  margin:18px 0 14px;
  font-family:"Barlow Condensed", Inter, sans-serif;
  font-size:clamp(2.7rem,5vw,4.4rem);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.auth-description{
  margin:0;
  max-width:640px;
  color:#bfd0ea;
  font-size:1rem;
  line-height:1.8;
}
.auth-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}
.auth-stat-card{
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.auth-stat-card strong{
  display:block;
  margin-top:8px;
  font-family:"Barlow Condensed", Inter, sans-serif;
  font-size:2.15rem;
  line-height:.95;
  color:#fff;
}
.auth-stat-label{
  display:block;
  color:#9eb5d3;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.auth-float-card{
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:20px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(90deg, rgba(12,35,68,.88), rgba(11,23,40,.88));
}
.auth-float-card-soft{
  background:linear-gradient(90deg, rgba(18,44,83,.76), rgba(14,25,43,.86));
}
.auth-float-icon{
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(75,141,255,.26), rgba(75,141,255,.08));
  border:1px solid rgba(113,168,255,.35);
  color:#8bc1ff;
  font-size:1.4rem;
}
.auth-float-title{
  color:#9bb4d6;
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.auth-float-value{
  margin-top:4px;
  font-family:"Barlow Condensed", Inter, sans-serif;
  font-size:2rem;
  line-height:.95;
  color:#fff;
}
.auth-float-copy{
  margin-top:6px;
  color:#dce7f8;
  line-height:1.65;
}
.auth-perk-list{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.auth-perk-list.compact{
  gap:10px;
}
.auth-perk-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:#e6eefc;
  line-height:1.65;
}
.auth-perk-item i{
  width:20px;
  margin-top:3px;
  color:#69b3ff;
}
.auth-side-footer{
  margin-top:22px;
  color:#aabedb;
  font-weight:600;
}
.auth-side-footer a,
.auth-form-meta a{
  color:#fff;
  font-weight:800;
}
.auth-form-header h2{
  margin:16px 0 8px;
  font-family:"Barlow Condensed", Inter, sans-serif;
  font-size:2.5rem;
  line-height:.94;
  text-transform:uppercase;
}
.auth-form-header p{
  margin:0;
  color:#a9bdd9;
  line-height:1.7;
}
.auth-inline-notice{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:18px 0 4px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.24);
  color:#ffd28c;
  font-weight:600;
}
.auth-form-grid{
  margin-top:22px;
}
.auth-double-grid{
  gap:14px;
}
.auth-input{
  min-height:56px;
  border-radius:16px;
  border-color:#294665;
  background:rgba(7,16,30,.9);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-input:focus,
.auth-password-wrap:focus-within .auth-input{
  border-color:#4b8dff;
  box-shadow:0 0 0 4px rgba(75,141,255,.12);
  background:#0a1b31;
}
.auth-password-wrap{
  position:relative;
}
.auth-password-wrap .auth-input{
  padding-right:56px;
}
.auth-toggle-password{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  color:#dce9fb;
  cursor:pointer;
}
.auth-toggle-password:hover{
  background:rgba(255,255,255,.12);
}
.auth-field-hint{
  margin-top:8px;
  color:#8ea6c8;
  font-size:.86rem;
  line-height:1.5;
}
.auth-submit{
  min-height:58px;
  margin-top:4px;
  border-radius:18px;
  font-size:1rem;
}
.auth-form-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  color:#8ea6c8;
  font-size:.94rem;
}
@media (max-width: 1180px){
  .auth-layout{
    grid-template-columns:1fr;
  }
  .auth-hero-panel,
  .auth-form-panel{
    padding:24px;
  }
}
@media (max-width: 760px){
  .auth-shell{
    padding-top:6px;
  }
  .auth-title{
    font-size:clamp(2.2rem,10vw,3rem);
  }
  .auth-form-header h2{
    font-size:2rem;
  }
  .auth-stat-grid,
  .auth-double-grid{
    grid-template-columns:1fr;
  }
  .auth-stat-card strong{
    font-size:1.7rem;
  }
  .auth-form-panel,
  .auth-hero-panel{
    padding:20px 18px;
    border-radius:22px;
  }
  .auth-form-meta{
    justify-content:flex-start;
  }
}


.brand-mark.brand-mark-image{padding:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.brand-logo-image{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.menu-pill-avatar{overflow:hidden}
.menu-pill-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.chat-panel{background:linear-gradient(180deg,#0f1c32,#091223);border:1px solid rgba(126,212,255,.18);box-shadow:0 28px 56px rgba(0,0,0,.46)}
.chat-head{padding:16px 16px 14px;background:linear-gradient(90deg,rgba(18,31,52,.98),rgba(10,18,31,.96))}
.chat-tabs{padding:10px 12px;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.05)}
.chat-tab{background:rgba(19,34,58,.92);border:1px solid rgba(255,255,255,.08)}
.chat-tab.active{background:linear-gradient(180deg,#2d63ff,#1d53f1);box-shadow:0 10px 24px rgba(45,99,255,.22)}
.chat-messages{padding:14px;background:radial-gradient(circle at top,rgba(18,116,255,.06),transparent 30%)}
.chat-message{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:12px 12px 10px;border-radius:16px;background:linear-gradient(180deg,rgba(16,28,47,.98),rgba(10,18,31,.98));border:1px solid rgba(126,212,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.chat-avatar{width:44px;height:44px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#13213a;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.chat-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.chat-body{display:grid;gap:6px;min-width:0}
.chat-headline{justify-content:space-between;gap:10px}
.chat-user-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.chat-user-line strong{font-size:.96rem}
.chat-message-text{color:#e7eefb;line-height:1.55;word-break:break-word}
.chat-time{display:inline-flex;align-items:center;gap:6px;color:#89a0c5;font-size:.78rem;font-weight:700}
.chat-form{padding:12px;background:linear-gradient(180deg,rgba(10,18,31,.98),rgba(7,14,25,.98))}
.chat-form .input{border-radius:14px}
.profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.garrison-rank-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.garrison-rank-left{display:flex;align-items:center;gap:10px;min-width:0}
.garrison-user-avatar{width:38px;height:38px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 18px rgba(0,0,0,.18);flex:0 0 38px}
.garrison-user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.garrison-user-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-player-list{display:grid;gap:10px;margin-top:8px}
.lb-player-card{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.lb-player-avatar{width:52px;height:52px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#13213a}
.lb-player-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lb-player-name{font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.45rem;line-height:1;color:#fff;text-transform:uppercase}
.lb-player-sub{margin-top:4px;color:#98add0;font-size:.86rem}
.lb-player-score{text-align:right}
.lb-player-score strong{display:block;font-family:"Barlow Condensed",Inter,sans-serif;font-size:1.7rem;color:#fff;line-height:1}
.lb-player-score span{display:block;margin-top:4px;color:#98add0;font-size:.8rem}
@media (max-width:620px){.chat-message{grid-template-columns:40px 1fr;gap:10px}.chat-avatar{width:40px;height:40px;border-radius:12px}.lb-player-card{grid-template-columns:44px 1fr;gap:10px}.lb-player-score{grid-column:2/-1;text-align:left}.lb-player-avatar{width:44px;height:44px;border-radius:14px}}

.weapon-panel-trigger{
  cursor:pointer;
  font:inherit;
}
.weapon-panel-trigger:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,208,74,.3),0 0 0 5px rgba(255,208,74,.12);
}
.weapon-stock-modal{
  max-width:620px;
}
.weapon-stock-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.weapon-stock-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(14,24,45,.96),rgba(8,15,31,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.26);
}
.weapon-stock-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:1.3rem;
  color:#f8fafc;
  flex:0 0 54px;
  box-shadow:0 12px 24px rgba(0,0,0,.24);
}
.weapon-stock-bullet .weapon-stock-icon{
  background:linear-gradient(135deg,rgba(84,191,255,.28),rgba(53,113,255,.18));
  border:1px solid rgba(84,191,255,.35);
  color:#8fe0ff;
}
.weapon-stock-rocket .weapon-stock-icon{
  background:linear-gradient(135deg,rgba(255,170,95,.28),rgba(255,110,66,.18));
  border:1px solid rgba(255,156,92,.35);
  color:#ffb573;
}
.weapon-stock-missile .weapon-stock-icon{
  background:linear-gradient(135deg,rgba(135,246,255,.22),rgba(98,144,255,.18));
  border:1px solid rgba(126,230,255,.35);
  color:#8fe9ff;
}
.weapon-stock-copy{
  display:grid;
  gap:4px;
}
.weapon-stock-copy span{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#9db7d6;
  font-weight:800;
}
.weapon-stock-copy strong{
  font-family:"Barlow Condensed", Inter, sans-serif;
  font-size:2rem;
  line-height:1;
  color:#f8fafc;
}
.weapon-stock-copy small{
  color:#89a3c2;
  font-size:.82rem;
}
.weapon-stock-audio-bar{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(113,186,255,.18);
  background:linear-gradient(180deg,rgba(12,24,44,.96),rgba(8,17,31,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 28px rgba(0,0,0,.22);
}
.weapon-stock-audio-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.weapon-stock-audio-copy span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#eff7ff;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.02em;
}
.weapon-stock-audio-copy span i{
  color:#7cd8ff;
}
.weapon-stock-audio-copy small{
  color:rgba(196,207,225,.72);
  font-size:.82rem;
  line-height:1.35;
}
.weapon-stock-audio-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:112px;
  min-height:48px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(120,210,255,.28);
  background:linear-gradient(180deg,#173967,#10284b);
  color:#eaf6ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px rgba(4,9,18,.22);
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.weapon-stock-audio-toggle:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 26px rgba(4,9,18,.26);
  filter:brightness(1.04);
}
.weapon-stock-audio-toggle.is-off{
  border-color:rgba(255,127,127,.28);
  background:linear-gradient(180deg,#4e1824,#321018);
  color:#ffd6da;
}
.weapon-stock-audio-note{
  margin-top:10px;
  color:rgba(196,207,225,.7);
  font-size:.8rem;
  line-height:1.45;
}
@media (min-width: 640px){
  .weapon-stock-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .weapon-stock-card{
    flex-direction:column;
    align-items:flex-start;
    min-height:178px;
  }
}