:root{

  --hudClear:112px;

/* =========================
   KAISSAVA BRAND PALETTE
========================= */

  --bg:#070912;

  --colorPrimary:#6D7CFF;
  --colorAccent:#8CF5B3;
  --colorDanger:#FF7B7B;
  --colorGold:#FFD86B;

  --glass:rgba(20,25,45,.65);

  --text:#E9ECFF;
  --muted:rgba(233,236,255,.65);

  --stroke:rgba(255,255,255,.12);

  --panel:rgba(20,25,45,.65);
  --panelSoft:rgba(255,255,255,.06);

}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background: radial-gradient(1000px 600px at 50% 0%, rgba(110,140,255,.20), transparent 60%),
              radial-gradient(700px 500px at 20% 35%, rgba(255,120,120,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}

.phone{
  width:360px; height:640px;
  border:1px solid var(--stroke);
  border-radius:24px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  position:relative;
}

.stage{ position:absolute; inset:0; padding-right:86px; }

.map{
  position:absolute; inset:0;
  background:
    radial-gradient(200px 160px at 30% 60%, rgba(80,255,170,.10), transparent 70%),
    radial-gradient(240px 180px at 70% 40%, rgba(110,140,255,.14), transparent 70%),
    radial-gradient(220px 170px at 60% 20%, rgba(255,210,110,.10), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.35));
}
.mapVisual{
  position:absolute;
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  z-index:0;
}

.hud{
  position:absolute; left:0; right:0;
  display:flex; gap:10px;
  padding:10px 12px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  z-index: 5;
}
.hud.top{ top:0; border-bottom:1px solid var(--stroke); align-items:center; justify-content:space-between; }
.hud.bottom{ bottom:0; border-top:1px solid var(--stroke); flex-direction:column; }

.brand .logo{ font-weight:900; letter-spacing:.6px; }
.brand .sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.topRight{ display:flex; align-items:center; gap:8px; }

.miniStat{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  white-space:nowrap;
}
.miniStat b{ font-weight:900; }
.miniStat span{ color:rgba(233,236,255,.78); margin-left:2px; }

.pill{
  font-size:12px; padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}

.hudRow{ display:flex; gap:10px; }

.stat{
  flex:1;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  border-radius:14px;
  padding:8px 10px;
}
.stat .k{ font-size:11px; color:var(--muted); }
.stat .v{ font-size:14px; font-weight:900; margin-top:2px; }
.stat .s{ font-size:11px; color:rgba(233,236,255,.78); margin-top:2px; }

.menuBtn{
  flex:1;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  transition:.15s;
}

.menuBtn:hover{
  background:var(--colorPrimary);
}
.menuBtn.ghost{
  background: transparent;
}

.menuBtn:active{
  transform: translateY(1px);
}
.hotspot{
  position:absolute;
  transform: translate(-50%, -50%);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.hotspot:active{ transform: translate(-50%, -50%) translateY(1px); }

/* Right Dock (Efsane Başkan style)
   Order locked: Inbox, Announcements, Daily, Tasks, Leaderboard */
.rightDock{
  position:absolute;
  top:var(--hudClear);
  right:10px;
  bottom:92px; /* above bottom HUD */
  width:82px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index: 6;
  pointer-events:none;
}
/* Allow clicks only on actual dock buttons so the dock panel doesn't block gameplay taps */
.rightDock .dockToggle,
.rightDock .dockBtn{
  pointer-events:auto;
}


.dockBtn{
  position:relative;
  width:100%;
  border:1px solid var(--stroke);
  background:var(--glass);
  backdrop-filter: blur(10px);
  color:var(--text);
  border-radius:18px;
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  box-shadow: 0 12px 22px rgba(0,0,0,.25);
}
.dockBtn:active{ transform: translateY(1px); }

.dockIcon{ font-size:20px; line-height:1; }
.dockLabel{ font-size:11px; font-weight:900; opacity:.92; }

.dockBadge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:var(--colorDanger);
  color:#111;
  font-weight:1000;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

/* Modal */
.modal{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  background: rgba(0,0,0,.55);
  z-index: 20;
}
.modal.hidden{ display:none; }

.modalCard{
  width:100%;
  border:1px solid var(--stroke);
  border-radius:18px;
  background:var(--panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
  max-height: calc(100% - 8px);
  display:flex;
  flex-direction:column;
}
.modalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid var(--stroke);
}
.modalTitle{ font-weight:900; font-size:14px; }
.x{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  width:36px; height:32px;
  cursor:pointer;
}
.modalBody{
  padding:12px;
  font-size:13px;
  color:rgba(233,236,255,.85);
  line-height:1.35;
  /* Scroll inside modal body (PvP list, leaderboard, etc.) */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modalActions{
  display:flex; gap:10px;
  padding:12px;
  border-top:1px solid var(--stroke);
}
.actionBtn{
  flex:1;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.10);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}
.actionBtn.ghost{ background: transparent; }

.input{
  width:100%;
  margin-top:10px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.20);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.small{ font-size:12px; color: var(--muted); margin-top:8px; }
.kv{ display:flex; justify-content:space-between; gap:10px; margin-top:8px; }
.kv b{ color:rgba(233,236,255,.92); }
hr{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:10px 0; }

.badge{
  display:inline-block;
  padding:6px 10px;
  border:1px solid rgba(255,216,107,.35);
  border-radius:999px;
  background: rgba(255,216,107,.18);
  color:#fff;
  font-weight:900;
  font-size:12px;
}
.inboxItem:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Paket 11: Footer 4-button tweak */
.navbar{ gap:8px; }
.navBtn{ font-size:12px; padding:10px 10px; }


/* =========================
   PvP UX polish (v8)
========================= */
.pvpCard{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
}
.pvpRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pvpMain{ display:flex; flex-direction:column; gap:4px; }
.pvpName{ font-weight:1000; font-size:16px; letter-spacing:.2px; }
.pvpCost{ margin-top:6px; }
.pvpBadges{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.pvpHint{ margin-top:10px; font-size:12px; }

.badge.pvpTag{ font-weight:1000; }
.badge.pvpTag.weak{ background: rgba(120,200,255,.12); border-color: rgba(120,200,255,.25); }
.badge.pvpTag.even{ background: rgba(116,255,169,.10); border-color: rgba(116,255,169,.22); }
.badge.pvpTag.strong{ background: rgba(255,160,120,.12); border-color: rgba(255,160,120,.25); }
.badge.pvpMode{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

.pvpResult{
  display:flex;
  flex-direction:column;
  gap:8px;
  transform: scale(.98);
  opacity: 0;
  animation: pvpPop .18s ease-out forwards;
}
@keyframes pvpPop{
  to { transform: scale(1); opacity: 1; }
}
.pvpResult.win .pvpResultTitle{ text-shadow: 0 0 18px rgba(116,255,169,.18); }
.pvpResult.lose{ animation: pvpPop .18s ease-out forwards, pvpShake .22s ease-in-out .05s 1; }
@keyframes pvpShake{
  0%{ transform: translateX(0) scale(1); }
  25%{ transform: translateX(-3px) scale(1); }
  50%{ transform: translateX(3px) scale(1); }
  75%{ transform: translateX(-2px) scale(1); }
  100%{ transform: translateX(0) scale(1); }
}
.pvpResultHead{ display:flex; flex-direction:column; gap:2px; }
.pvpResultTitle{ font-weight:1100; font-size:20px; letter-spacing:.6px; }
.pvpResultSub{ font-size:13px; }
.pvpResultCard{ padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); }
.pvpResultRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.pvpMeta{ display:flex; gap:8px; flex-wrap:wrap; }
.badge.warn{ background: rgba(255,160,120,.12); border-color: rgba(255,160,120,.25); }

/* Make scroll clearly usable inside modal content */
.modalBody::-webkit-scrollbar{ width: 10px; }
.modalBody::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
  border-radius: 999px;
}


/* Top announcement banner */
.topBanner{
  position:absolute;
  left:12px;
  right:98px; /* leave space for right dock */
  top:var(--hudClear);
  z-index:7;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  cursor:pointer;
}
.topBanner__text{
  flex:1;
  font-weight:900;
  font-size:12px;
  line-height:1.2;
  opacity:.95;
}
.topBanner__close{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: var(--text);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}


/* Tasks panel */
.taskList{ display:flex; flex-direction:column; gap:10px; }
.taskRow{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px;
}
.taskTop{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.taskTitle{ font-weight:800; }
.taskDesc{ margin-top:2px; }
.taskMeta{ text-align:right; min-width:120px; }
.taskBar{
  margin-top:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.taskFill{
  height:100%;
  background: rgba(255,255,255,.42);
  border-radius:999px;
}
.taskBottom{ margin-top:8px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.taskBtns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.miniBtn{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: var(--text);
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.miniBtn:hover{ background: rgba(255,255,255,.14); }


/* Season & Phase */
.pill.season{ max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill.season.phase-dev{ background: rgba(120,180,255,.14); border-color: rgba(120,180,255,.28); }
.pill.season.phase-half{ background: rgba(255,220,120,.14); border-color: rgba(255,220,120,.28); }
.pill.season.phase-open{ background: rgba(255,120,120,.14); border-color: rgba(255,120,120,.28); }
.pill.season.phase-ended{ background: rgba(180,180,180,.14); border-color: rgba(180,180,180,.28); }



/* v11.5.2 HOTFIX: show season pill on narrow HUD */
.hud.top{ flex-direction:column; align-items:flex-start; gap:8px; }
.hud.top .brand{ width:100%; }
.hudRow{ width:100%; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.pill{ font-size:11px; padding:5px 9px; }
.pill.season{ max-width:100%; white-space:nowrap; }

/* v11.5.4 season pill in top-left row (right of name) */
.hud.top .brand{display:flex;flex-direction:column;gap:6px;min-width:0;}
.hud.top .hudTitleRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.hud.top .hudTitleLeft{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.hud.top .hudTitleRight{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex:1 1 auto;
  min-width:0;
  justify-content:flex-end;
}
.hud.top .hudConnPill{
  padding:4px 8px;
  font-size:11px;
  opacity:.95;
  flex:0 0 auto;
}
.hud.top .seasonPill{
  flex:1 1 auto;
  min-width:0;
  max-width:260px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  align-self:center;
  text-align:center;
}
@media (max-width: 420px){
  .hud.top .seasonPill{max-width:210px;font-size:12px;padding:4px 8px;}
}


/* Season end overlay */

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.55);
  z-index:50;
  padding:16px;
}
.overlay.hidden{ display:none; }
.overlayCard{
  width:100%;
  max-width:360px;
  border-radius:18px;
  padding:16px;
  background:rgba(25,25,30,0.78);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  color:#fff;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.overlayTitle{ font-weight:800; font-size:18px; margin-bottom:6px; }
.overlaySub{ opacity:0.9; font-size:13px; margin-bottom:12px; }
.overlayBox{
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:10px;
}
.overlayBox .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.overlayBox .row:last-child{ border-bottom:none; }
.overlayHint{ font-size:12px; opacity:0.85; margin:8px 0 12px; line-height:1.3; }
.overlayActions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }


.miniStat.clickable{ cursor:pointer; }
.miniStat.disabled{ opacity:.45; pointer-events:none; }

.sectionTitle{ margin:8px 0 6px; font-weight:700; color:var(--text); opacity:.95; }


/* v12.4: storage full warning */
.s.warn{ font-weight:700; opacity:0.95; }


/* v12.6: modal storage-full hint */
.warnBox{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  border-radius:12px;
}
.warnBox b{ font-weight:800; }
.linkBtn{
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 6px;
  color: var(--colorAccent);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

/* =========================
   BUILDING PNG PREVIEW (B)
   ========================= */
.bimgGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin:10px 0 8px;
}
.bimgCard{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  border-radius:14px;
  padding:10px;
}
.bimgLbl{
  font-size:12px;
  opacity:.9;
  margin-bottom:8px;
  font-weight:800;
}
.bimg{
  width:100%;
  height:140px;
  object-fit:contain;
  border-radius:12px;
  background: rgba(0,0,0,.25);
}
@media (max-width:420px){
  .bimg{ height:120px; }
}

.btn{background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); color:#fff; padding:8px 10px; border-radius:10px; cursor:pointer;}
.btn:disabled{opacity:0.6; cursor:default;}

.cardTitle{font-weight:700; margin-bottom:6px;}
.cardBody{font-size:14px;}
.muted{opacity:0.8; font-size:12px;}

.profileGrid{display:block; padding:2px 0;}
.profileGrid .row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.06);}
.profileGrid .val{opacity:0.95;}
.profileShell{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.profileHero{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(0,0,0,.22);
}

.profileAvatarBig{
  width:68px;
  height:68px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:20px;
  color:#fff;
  background:linear-gradient(180deg, rgba(109,124,255,.38), rgba(109,124,255,.18));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  flex:0 0 auto;
}

.profileHeroInfo{
  min-width:0;
  flex:1;
}

.profileHeroName{
  font-size:18px;
  font-weight:1000;
  line-height:1.1;
}

.profileHeroMeta{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.profileHeroTags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.profileActionRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.profileCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(0,0,0,.20);
  padding:10px 12px;
}

.profileStatsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.profileStatCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.05);
  padding:12px 10px;
}

.profileStatK{
  font-size:11px;
  color:var(--muted);
}

.profileStatV{
  margin-top:6px;
  font-size:18px;
  font-weight:1000;
}

@media (max-width:420px){
  .profileStatsGrid{
    grid-template-columns:1fr 1fr;
  }
}
.sectionTitle{margin-top:10px; font-weight:800; opacity:0.95;}

/* Inbox & Announcements */
.msgTabs{display:flex; gap:8px; margin:8px 0 10px 0;}
.msgTab{flex:1; text-align:center; padding:10px 8px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10);}
.msgTab.active{background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.18); font-weight:800;}
.msgList{max-height:52vh; overflow:auto; padding-right:4px;}
.msgItem{padding:10px 10px; border-radius:14px; background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.08); margin-bottom:8px; cursor:pointer;}
.msgItem.unread{border-color:rgba(120,200,255,0.35); box-shadow:0 0 0 1px rgba(120,200,255,0.10) inset;}
.msgHead{display:flex; justify-content:space-between; gap:8px; align-items:center;}
.msgTitle{font-weight:800;}
.msgTime{opacity:0.7; font-size:12px;}
.msgBody{opacity:0.9; font-size:13px; margin-top:6px; white-space:pre-wrap;}
.msgActions{display:flex; gap:8px; margin-top:10px;}
.msgActions .btn{flex:1;}


a.pill{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.hudAdminPill{ opacity:.9; }
.hudAdminPill:hover{ opacity:1; }

/* v13.13 Upgrade modal polish */
.resOk{color:#b7ffcf;}
.resBad{color:#ff8a8a;}
.levelUpBadge{display:inline-block;margin:10px 0;padding:6px 10px;border-radius:12px;background:rgba(116,255,169,.15);border:1px solid rgba(116,255,169,.35);font-weight:700;letter-spacing:.5px;}
.levelUpBadge.hide{opacity:0;transform:translateY(-4px);transition:opacity .25s ease, transform .25s ease;}
.fadeIn{animation:fadeInZoom .45s ease;}
@keyframes fadeInZoom{from{opacity:.35;transform:scale(.98);}to{opacity:1;transform:scale(1);}}

/* =========================
   FIRST LOAD BOOT LOADER (FAZ 16.6)
   ========================= */
.bootLoader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,10,18,.88);
  z-index:9999;
}
.bootLoader.hidden{ display:none; }
.bootCard{
  width:min(360px, 92vw);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,24,38,.92);
  border-radius:14px;
  padding:18px 16px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  text-align:center;
}
.bootSpinner{
  width:46px;
  height:46px;
  margin:2px auto 12px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.72);
  animation:bootspin 1s linear infinite;
}
@keyframes bootspin{ to{ transform:rotate(360deg);} }
.bootTitle{ font-weight:700; letter-spacing:.3px; margin-bottom:6px; }
.bootSub{ opacity:.94; font-size:13px; margin-bottom:12px; }
.bootRetry{ width:100%; }
.bootRetry.hidden{ display:none; }


.btnSmall{ padding:6px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#eaf2ff; cursor:pointer; }
.btnSmall:hover{ background:rgba(255,255,255,.10); }


/* =========================
   WELCOME SCREEN (Neon)
   ========================= */
.hidden { display:none !important; }
.welcome{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  color: #e9f0ff;
  overflow:hidden;
  background: #070912;
}
.welcome__bg{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(800px 500px at 20% 20%, rgba(0,255,255,.18), transparent 55%),
    radial-gradient(700px 520px at 80% 30%, rgba(255,0,255,.16), transparent 60%),
    radial-gradient(900px 700px at 50% 80%, rgba(120,255,0,.10), transparent 65%),
    linear-gradient(180deg, rgba(10,12,22,1), rgba(6,7,14,1));
  animation: neonFloat 10s ease-in-out infinite alternate;
}
@keyframes neonFloat{
  0%{ transform: translate3d(-1%, -1%, 0) scale(1.02); }
  100%{ transform: translate3d(1%, 1%, 0) scale(1.06); }
}
.welcome__card{
  position: relative;
  width: min(560px, 100%);
  border-radius: 22px;
  padding: 18px;
  background: rgba(12, 14, 26, 0.72);
  border: 1px solid rgba(120, 200, 255, 0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter: blur(10px);
}
.welcome__brand{ display:flex; gap: 12px; align-items:center; margin-bottom: 14px; }
.welcome__logo{
  width: 48px; height: 48px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900; letter-spacing: .5px;
  background: radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.25), transparent 70%),
              linear-gradient(135deg, rgba(0,255,255,.22), rgba(255,0,255,.18));
  border: 1px solid rgba(0,255,255,.20);
  box-shadow: 0 0 24px rgba(0,255,255,.15);
}
.welcome__title{ font-size: 22px; font-weight: 900; line-height: 1.05; }
.welcome__sub{ margin-top: 2px; font-size: 13px; opacity: .82; }
.welcome__actions{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.welcome__msg{ margin-top: 12px; font-size: 13px; opacity: .9; min-height: 18px; }

.btnNeon, .btnNeonGhost, .btnNeonSoft{
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.btnNeon:active, .btnNeonGhost:active, .btnNeonSoft:active{ transform: scale(.99); }
.btnNeon{
  background: linear-gradient(135deg, rgba(0,255,255,.22), rgba(255,0,255,.20));
  box-shadow: 0 0 28px rgba(0,255,255,.10), 0 0 28px rgba(255,0,255,.08);
  color: #f4f7ff;
}
.btnNeonGhost{
  background: rgba(255,255,255,.04);
  color: rgba(240,245,255,.85);
  border: 1px dashed rgba(255,255,255,.16);
}
.btnNeonSoft{
  background: rgba(0,255,255,.06);
  color: rgba(240,255,255,.92);
  border: 1px solid rgba(0,255,255,.18);
}
.btnNeon[disabled], .btnNeonGhost[disabled], .btnNeonSoft[disabled]{
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.4);
}



/* AuthGate - Login only */
#welcomeGuest { display:inline-flex !important; }

.welcome__note{
  margin-top: 10px;
  font-size: 13px;
  opacity: .85;
}

/* Hidden review trigger corner */
.welcome__corner{
  position: fixed;
  right: 0;
  bottom: 0;
  width: 64px;
  height: 64px;
  z-index: 100000;
  opacity: 0.001;
}

/* Review mode UI reductions */
.review-mode .adSlot,
.review-mode .btnAd,
.review-mode [data-ad],
.review-mode #adPanel,
.review-mode #adsPanel{
  display:none !important;
}


/* Hide legacy morale ad button (use stat popup instead) */
#moraleBoostBtn{ display:none !important; }


/* Fullscreen on mobile/tablet */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body{
    padding:0;
    display:block;
  }
  .phone{
    width:100vw;
    height:100vh;
    border-radius:0;
    border:0;
    box-shadow:none;
  }
}

/* Safe-area padding for notch devices */
.hud.top{
  padding-top: calc(10px + env(safe-area-inset-top));
}
.hud.bottom{
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}


/* =========================
   Nebula UI accents (Chest + Daily 2x + Buildings)
   ========================= */
.chestCard{
  border: 1px solid rgba(122,92,255,0.35);
  box-shadow: 0 0 0 1px rgba(53,240,255,0.10), 0 12px 40px rgba(122,92,255,0.12);
  position: relative;
  overflow: hidden;
}
.chestCard:before{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 20% 30%, rgba(255,107,214,0.18), transparent 55%),
              radial-gradient(circle at 80% 70%, rgba(53,240,255,0.14), transparent 55%),
              radial-gradient(circle at 50% 50%, rgba(122,92,255,0.12), transparent 60%);
  pointer-events:none;
}
.chestCard > *{ position: relative; }

.glowBtn{
  background: linear-gradient(90deg, rgba(122,92,255,0.95), rgba(77,163,255,0.95)) !important;
  border: 1px solid rgba(53,240,255,0.35) !important;
  box-shadow: 0 0 0 1px rgba(53,240,255,0.18), 0 10px 30px rgba(122,92,255,0.25);
  color: #fff !important;
}
.glowBtn:disabled, .glowBtn.disabled{
  opacity: 0.45 !important;
  box-shadow: none !important;
}

.buildingsList{ display:flex; flex-direction:column; gap:10px; }
.buildingCard{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  cursor:pointer;
  transition: transform .08s ease, border-color .08s ease;
}
.buildingCard:hover{
  transform: translateY(-1px);
  border-color: rgba(53,240,255,0.25);
}
.bcLeft{ display:flex; align-items:center; gap:12px; }
.bcIcon{ font-size: 22px; width: 34px; height: 34px; display:grid; place-items:center; border-radius: 10px; background: rgba(122,92,255,0.18); border: 1px solid rgba(122,92,255,0.25); }
.bcName{ font-weight: 800; letter-spacing: .2px; }
.bcSub{ font-size: 12px; opacity: .9; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding: 4px 8px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.18); }
.pill.ok{ border-color: rgba(53,240,255,0.28); }
.pill.warn{ border-color: rgba(255,107,214,0.30); }
.progress{ width:100%; height:6px; border-radius:999px; background: rgba(255,255,255,0.08); overflow:hidden; margin-top:10px; }
.progress .bar{ height:100%; background: linear-gradient(90deg, rgba(53,240,255,0.9), rgba(122,92,255,0.9)); }


/* KAISSAVA_HIDE_HOTSPOTS_V2: hide old hotspot labels (hitmap handles clicks) */
.hotspot{ opacity:0 !important; pointer-events:none !important; }


/* KAISSAVA_DOCK_COLLAPSE_V5 */
.rightDock.isCollapsed{ width:0 !important; padding:0 !important; margin:0 !important; gap:0 !important; pointer-events:none !important; }
.rightDock.isCollapsed .dockBtn{ display:none !important; }
.dockToggle{ position:absolute; right:12px; top: calc(var(--hudClear, 112px) + 14px) !important; z-index:9999; width:62px; height:62px; border-radius:20px; border:1px solid rgba(255,255,255,.18); background: rgba(20,24,40,.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255,255,255,.95); display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 16px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,255,200,.06), 0 0 24px rgba(0,255,200,.18); animation: dockTogglePulse 1.6s ease-in-out infinite; }
.dockToggleIcon{ font-size:24px; line-height:1; }
@keyframes dockTogglePulse{ 0%{ box-shadow: 0 16px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,255,200,.06), 0 0 18px rgba(0,255,200,.10);} 50%{ box-shadow: 0 16px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,255,200,.10), 0 0 34px rgba(0,255,200,.24);} 100%{ box-shadow: 0 16px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,255,200,.06), 0 0 18px rgba(0,255,200,.10);} }


/* map drag */
#map{ touch-action: none; }


/* KAISSAVA_GLOW_HINT_CSS_V2: more visible glow + multi-building hint */
.bldGlow{
  position:absolute;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  transform: translate(-50%,-50%);
  pointer-events:none;
  z-index: 4;
  opacity: 0.0;
  transition: opacity 200ms ease;
}
.bldGlow.on{ opacity: 1.0; }

.bldGlow::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 999px;
  background: radial-gradient(circle,
    rgba(255, 210, 90, .52) 0%,
    rgba(0, 255, 200, .22) 42%,
    rgba(0,0,0,0) 72%);
  filter: blur(1px);
  animation: bldBreath2 1.35s ease-in-out infinite;
}

.bldGlow::after{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: 999px;
  border: 2px solid rgba(255, 210, 90, .32);
  box-shadow:
    0 0 22px rgba(255, 210, 90, .28),
    0 0 38px rgba(0, 255, 200, .20);
  animation: bldPulse2 1.9s ease-in-out infinite;
}

@keyframes bldBreath2{
  0%   { transform: scale(0.92); opacity: .70; }
  50%  { transform: scale(1.12); opacity: 1.00; }
  100% { transform: scale(0.92); opacity: .70; }
}
@keyframes bldPulse2{
  0%   { transform: scale(0.90); opacity: .26; }
  50%  { transform: scale(1.18); opacity: .52; }
  100% { transform: scale(0.90); opacity: .26; }
}

/* Tap hint overlay */
.tapHint{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 6;
  display:none;
}
.tapHint.on{ display:block; }

.tapHint .hand{
  position:absolute;
  transform: translate(-50%,-50%);
  font-size: 34px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.40));
  opacity: 0;
}
.tapHint .ring{
  position:absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.9);
  transform: translate(-50%,-50%) scale(0.6);
  opacity: 0;
}

.tapHint.play .hand{ animation: tapHand2 1.15s ease-in-out 1; }
.tapHint.play .ring{ animation: tapRing2 1.15s ease-in-out 1; }

@keyframes tapHand2{
  0%   { opacity:0; transform: translate(-50%,-50%) translateY(-10px) scale(0.96); }
  18%  { opacity:1; }
  55%  { transform: translate(-50%,-50%) translateY(8px) scale(1.02); }
  70%  { transform: translate(-50%,-50%) translateY(4px) scale(0.99); }
  100% { opacity:0; transform: translate(-50%,-50%) translateY(-8px) scale(0.96); }
}
@keyframes tapRing2{
  0%   { opacity:0; transform: translate(-50%,-50%) scale(0.6); }
  30%  { opacity:1; }
  75%  { opacity:.12; transform: translate(-50%,-50%) scale(2.5); }
  100% { opacity:0; transform: translate(-50%,-50%) scale(2.9); }
}


/* KAISSAVA_HIDE_HOTSPOTS_STRONG_V2 */
.hotspot, .hotspot *{ opacity:0 !important; pointer-events:none !important; }



.mapIndicators{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 7;
  overflow:hidden;
}

.mapIndicators .regionCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.mapIndicatorsInner{ display:none !important; }
.mapIndicators .regionGlow{ display:none !important; }

.mapIndicatorsInner{
  position:absolute;
  inset:auto;
  transform-origin:0 0;
  will-change:left, top, width, height;
  overflow:visible;
}

.mapIndicators .regionGlow{
  position:absolute;
  inset:0;
  opacity:.68;
  pointer-events:none;
  mix-blend-mode:screen;
  filter: drop-shadow(0 0 8px rgba(255,216,107,.18)) drop-shadow(0 0 20px rgba(255,216,107,.16));
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

.mapIndicators .regionGlow img{
  width:100%;
  height:100%;
  display:block;
}

.mapIndicators .regionGlow.isHintTarget{
  opacity:.94;
  filter: drop-shadow(0 0 12px rgba(255,216,107,.28)) drop-shadow(0 0 30px rgba(255,216,107,.24));
}

.mapIndicators .regionGlow.isTap{
  animation: kRegionPulse .55s ease-out 1;
}

.mapIndicators .regionLabel{
  position:absolute;
  transform: translate(-50%, -100%);
  white-space:nowrap;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,26,.72);
  backdrop-filter: blur(8px);
  color: #F5F7FF;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  opacity: .96;
  pointer-events:none;
}

.mapIndicators .regionLabel.isHintTarget{
  border-color: rgba(255,216,107,.38);
  box-shadow: 0 10px 20px rgba(0,0,0,.22), 0 0 0 1px rgba(255,216,107,.14) inset;
}

.mapIndicators .regionLabel.isTap{
  animation: kRegionLabelTap .45s ease-out 1;
}

@keyframes kRegionPulse{
  0%   { opacity:.62; transform: scale(1); }
  60%  { opacity:1; transform: scale(1.015); }
  100% { opacity:.56; transform: scale(1); }
}

@keyframes kRegionLabelTap{
  0%   { transform: translate(-50%, -100%) scale(.96); }
  50%  { transform: translate(-50%, -100%) scale(1.08); }
  100% { transform: translate(-50%, -100%) scale(1); }
}

/* tutorial hand + ring */
.mapIndicators .hintHand{
  position:absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%,-50%);
  opacity: 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.mapIndicators .hintHand svg{ width:100%; height:100%; display:block; }
.mapIndicators .hintRing{
  position:absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.95);
  transform: translate(-50%,-50%) scale(0.6);
  opacity: 0;
}
.mapIndicators.hinting .hintHand{ animation: kTapHand 1.25s ease-in-out 1; }
.mapIndicators.hinting .hintRing{ animation: kTapRing 1.25s ease-in-out 1; }

@keyframes kTapHand{
  0%   { opacity:0; transform: translate(-50%,-50%) translateY(-8px) scale(.96); }
  20%  { opacity:1; }
  55%  { transform: translate(-50%,-50%) translateY(6px) scale(1.0); }
  100% { opacity:0; transform: translate(-50%,-50%) translateY(-6px) scale(.96); }
}
@keyframes kTapRing{
  0%   { opacity:0; transform: translate(-50%,-50%) scale(0.6); }
  35%  { opacity:1; }
  80%  { opacity:.10; transform: translate(-50%,-50%) scale(2.25); }
  100% { opacity:0; transform: translate(-50%,-50%) scale(2.6); }
}

body.modal-open .dockToggle{
  visibility: hidden !important;
  pointer-events: none !important;
}

.rightDock.dockForceHidden{
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Shield HUD */
.stat.shieldOn{
  border-color: rgba(116,255,169,.38);
  box-shadow: 0 0 0 1px rgba(116,255,169,.10) inset, 0 0 18px rgba(116,255,169,.12);
}
.stat.shieldOn .v{
  color: #74ffa9;
}

.stat.shieldOff{
  border-color: rgba(255,120,120,.34);
  box-shadow: 0 0 0 1px rgba(255,120,120,.08) inset;
}
.stat.shieldOff .v{
  color: #ff9a9a;
}

#toastContainer{
  position:fixed;
  bottom:110px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.toastMsg{
  background:rgba(0,0,0,0.85);
  color:white;
  padding:10px 16px;
  border-radius:12px;
  font-size:13px;
  opacity:0;
  transform:translateY(10px);
  transition:all .25s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}

.toastMsg.show{
  opacity:1;
  transform:translateY(0);
}


.btnNeon{
  box-shadow: 0 0 12px rgba(110,140,255,.50);
}

.btnNeonGhost{
  box-shadow: 0 0 10px rgba(255,255,255,.10);
}

.btnNeonSoft{
  box-shadow: 0 0 12px rgba(116,255,169,.18);
}

/* Inbox readability fix */
.inboxItem{
  color: var(--text) !important;
}

.inboxItem > div > div:first-child > div:first-child{
  color: #f8fafc !important;
}

.inboxItem .muted{
  color: rgba(233,236,255,.72) !important;
}

.inboxItem .small{
  color: rgba(233,236,255,.88) !important;
}

.inboxItem .badge{
  color: #fff !important;
}

/* =========================
   Welcome Popup
========================= */

.welcomePopup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.welcomePopupCard{
  width:320px;
  padding:22px;
  border-radius:18px;
  background:var(--panel);
  border:1px solid var(--stroke);
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.welcomePopupTitle{
  font-size:18px;
  font-weight:900;
  margin-bottom:12px;
}

.welcomePopupMsg{
  font-size:14px;
  line-height:1.4;
  margin-bottom:16px;
  opacity:.9;
}

.welcomePopupBtn{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:0;
  background:var(--colorPrimary);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.welcomePopupMsg p{
  margin:0 0 10px;
}

.welcomePopupMsg ul{
  margin:0 0 12px 18px;
  padding:0;
  text-align:left;
}

.welcomePopupMsg li{
  margin:0 0 6px;
}

.welcomePopupMsg strong{
  color:var(--colorGold);
  font-weight:900;
}

.welcomePopupGap{
  height:8px;
}

.welcomePopupCheck{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  margin:4px 0 14px;
  font-size:13px;
  color:var(--muted);
}

/* =========================
   PvP Combat Upgrade
========================= */

.pvpIntro{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pvpIntroHead{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.pvpIntroEyebrow{
  font-size:11px;
  font-weight:900;
  color:var(--colorGold);
  letter-spacing:.8px;
}

.pvpIntroName{
  font-size:20px;
  font-weight:1000;
}

.pvpIntroSub{
  font-size:13px;
  color:var(--muted);
}

.pvpIntroBox{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  border-radius:14px;
  padding:12px;
}

.pvpIntroTip{
  font-size:12px;
  color:var(--muted);
}

.pvpCountdownWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 4px;
  text-align:center;
}

.pvpCountdownLabel{
  font-size:12px;
  font-weight:900;
  color:var(--colorGold);
  letter-spacing:.6px;
}

.pvpCountdownName{
  font-size:16px;
  font-weight:900;
}

.pvpCountdownNum{
  font-size:54px;
  font-weight:1000;
  line-height:1;
  text-shadow:0 0 18px rgba(109,124,255,.28);
}

.pvpSequence{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pvpSequenceTop{
  font-size:12px;
  font-weight:900;
  color:var(--colorDanger);
  letter-spacing:.8px;
  text-align:center;
}

.pvpSequenceName{
  font-size:18px;
  font-weight:1000;
  text-align:center;
}

.pvpSequenceArena{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  border-radius:16px;
  padding:16px 12px;
  text-align:center;
}

.pvpSequenceIcon{
  font-size:40px;
  margin-bottom:10px;
  animation:pvpPulse .7s ease-in-out infinite alternate;
}

@keyframes pvpPulse{
  from{ transform:scale(1); opacity:.85; }
  to{ transform:scale(1.08); opacity:1; }
}

.pvpStep{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.pvpStepIcon{
  font-size:26px;
}

.pvpStepText{
  font-size:14px;
  font-weight:800;
}

.pvpLootTitle{
  font-weight:1000;
  margin-bottom:10px;
}

.pvpLootWrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pvpLootBadge{
  background:rgba(255,216,107,.14);
  border-color:rgba(255,216,107,.26);
}

/* =========================
   Upgrade Countdown
========================= */

.liveCountdownBox b,
.buildingCountdown [data-role="countdown-text"]{
  font-variant-numeric: tabular-nums;
  letter-spacing:.2px;
}

.buildingCountdown{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.countdownDone [data-role="countdown-text"]{
  color:var(--colorAccent);
  font-weight:900;
}

/* During inertial glide, hide overlay ghosts */
.map.isMomentum .mapIndicators .regionCanvas{
  opacity: .06;
  transition: opacity .08s linear;
}
.map.isMomentum .mapIndicators .regionLabel{
  opacity: 0 !important;
  transition: opacity .08s linear;
}
.map.isMomentum .mapIndicators .hintHand,
.map.isMomentum .mapIndicators .hintRing{
  opacity: 0 !important;
}

/* =========================
   KAISSAVA PREMIUM BUILDING CARD
========================= */

.buildingPremiumCard{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.bcHero{
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(160px 90px at 85% 20%, rgba(255,216,107,.12), transparent 70%),
    radial-gradient(180px 100px at 10% 10%, rgba(109,124,255,.14), transparent 70%),
    rgba(0,0,0,.22);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.bcHeroTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.bcName{
  font-size:20px;
  font-weight:1000;
  line-height:1.1;
}

.bcLevel{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

.bcPowerChip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,216,107,.30);
  background: rgba(255,216,107,.14);
  color:#fff;
  font-weight:1000;
  font-size:12px;
  white-space:nowrap;
}

.bcDesc{
  margin-top:10px;
  font-size:13px;
  line-height:1.45;
  color:rgba(233,236,255,.90);
}

.bcPreview{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:10px;
  align-items:stretch;
}

.bcPreviewCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius:16px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:210px;
}

.bcPreviewLabel{
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}

.bcPreviewImg{
  width:100%;
  height:140px;
  object-fit:contain;
  border-radius:12px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.06);
}

.bcPreviewLevel{
  text-align:center;
  font-weight:900;
  font-size:13px;
}

.bcArrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:1000;
  color:rgba(255,216,107,.95);
}

.bcMaxBox{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:12px;
  background: rgba(0,0,0,.18);
  border:1px dashed rgba(255,255,255,.14);
  min-height:140px;
  padding:12px;
  font-weight:800;
  color:rgba(233,236,255,.88);
}

.bcSection{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
}

.bcSectionTitle{
  font-size:12px;
  color:var(--muted);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:8px;
}

.bcStats{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.bcStatRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.bcStatRow:last-child{
  border-bottom:none;
}

.bcStatRow span{
  color:rgba(233,236,255,.75);
}

.bcStatRow b{
  text-align:right;
  color:#fff;
}

.bcCostGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.bcCostItem{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius:14px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.bcCostItemWide{
  grid-column: 1 / -1;
}

.bcCostItem span{
  font-size:12px;
  color:var(--muted);
}

.bcCostItem b{
  font-size:16px;
  font-weight:1000;
  color:#fff;
}

.bcBuildBox{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.bcBuildTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.bcBuildSub{
  font-size:12px;
  color:var(--muted);
}

.bcProgress{
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.bcProgressBar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,216,107,.95), rgba(109,124,255,.95));
  box-shadow: 0 0 18px rgba(255,216,107,.28);
}

.bcWarn{
  border:1px solid rgba(255,123,123,.18);
  background: rgba(255,123,123,.08);
  color:#fff;
  border-radius:14px;
  padding:10px 12px;
  line-height:1.4;
}

.bcGood{
  color:#8CF5B3 !important;
}

.bcBad{
  color:#FF8B8B !important;
}

@media (max-width:420px){
  .bcPreview{
    grid-template-columns: 1fr;
  }
  .bcArrow{
    display:none;
  }
  .bcPreviewCard{
    min-height:auto;
  }
}

/* =========================
   HIZLANDIRMA KARTI
========================= */

.speedCardBox{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,216,107,.18);
  background:
    radial-gradient(160px 90px at 100% 0%, rgba(255,216,107,.12), transparent 70%),
    rgba(255,216,107,.06);
}

.speedCardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.speedCardTitle{
  font-size:14px;
  font-weight:1000;
  color:#fff;
}

.speedCardText{
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:rgba(233,236,255,.78);
}

.speedCardCount{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,216,107,.30);
  background: rgba(255,216,107,.14);
  color:#fff;
  font-weight:1000;
  white-space:nowrap;
  font-size:12px;
}

.speedCardHint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(140,245,179,.18);
  background: rgba(140,245,179,.08);
  color:#fff;
  font-size:12px;
}

.speedCardWarn{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,123,123,.18);
  background: rgba(255,123,123,.08);
  color:#fff;
  font-size:12px;
}

.speedCardActions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.speedCardBtn{
  flex:1;
}

.speedCardBtnPrimary{
  border:1px solid rgba(255,216,107,.28);
  background: linear-gradient(180deg, rgba(255,216,107,.22), rgba(255,216,107,.12));
  color:#fff;
  font-weight:1000;
}

.speedCardBtnPrimary:hover{
  background: linear-gradient(180deg, rgba(255,216,107,.28), rgba(255,216,107,.16));
}

body.season-end-open #dockToggle,
body.season-end-open .rightDock{
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================
   Live text countdowns
========================= */
#dailyChestCountdown,
#shieldCountdown,
.buildingCountdown [data-role="countdown-text"]{
  font-variant-numeric: tabular-nums;
  letter-spacing:.2px;
}