/* Final UX refinements: subtle badges, in-game turret previews, readable research stats. */
.home-tab-badge {
  top: 6px !important;
  right: 7px !important;
  min-width: 15px !important;
  height: 15px !important;
  padding: 0 4px !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  background: #d93d62 !important;
  color: rgba(255,255,255,.94) !important;
  font-size: 8px !important;
  line-height: 13px !important;
  box-shadow: 0 2px 7px rgba(217,61,98,.28) !important;
}

.turret-portrait {
  isolation: isolate;
  border-color: color-mix(in srgb,var(--accent) 42%,rgba(111,196,255,.25)) !important;
  background: #061329 !important;
  box-shadow: inset 0 0 24px rgba(33,159,224,.08),0 8px 18px rgba(0,0,0,.25) !important;
}
.turret-portrait canvas { display:block;width:100%;height:100%;object-fit:cover;cursor:default;touch-action:auto;filter:none!important;transform:none }
.turret-portrait>i { position:absolute;inset:auto 12% 6px;height:2px;border-radius:99px;background:var(--accent);filter:blur(1px);opacity:.55;box-shadow:0 0 12px var(--accent);z-index:2 }
.formation-core .turret-portrait { width:92px;height:92px;flex-basis:92px;margin:0 auto 7px }

.turret-stat-block { display:grid;gap:8px;margin:11px 0;padding:11px;border:1px solid rgba(116,214,255,.18);border-radius:11px;background:rgba(3,14,33,.68) }
.turret-stat-block>b { color:#d8f7ff;font-size:11px;letter-spacing:.05em }
.turret-stat-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px }
.turret-stat-grid>div { display:grid;grid-template-rows:auto auto 5px;gap:4px;min-width:0;padding:8px;border:1px solid rgba(121,208,255,.12);border-radius:8px;background:rgba(6,24,49,.72) }
.turret-stat-grid span { color:rgba(210,236,255,.6);font-size:9px }
.turret-stat-grid strong { min-height:26px;color:#f1fbff;font-size:11px;line-height:1.25;overflow-wrap:anywhere }
.turret-stat-grid i { display:block;height:5px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08) }
.turret-stat-grid i>b { display:block;width:var(--value,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#52ddff,var(--accent,#9b7cff));box-shadow:0 0 8px var(--accent,#70eaff);transform-origin:left;animation:stat-bar-in .55s cubic-bezier(.2,.8,.2,1) both }
@keyframes stat-bar-in { from { transform:scaleX(0);opacity:.25 } to { transform:scaleX(1);opacity:1 } }

.turret-compare-panel { gap:12px !important;padding:13px !important;background:linear-gradient(145deg,rgba(14,24,55,.9),rgba(8,16,39,.94)) !important }
.compare-column { position:relative;gap:9px !important;padding:13px !important;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);overflow:hidden }
.compare-column::after { content:"";position:absolute;inset:-30% auto -30% -25%;width:48%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.05),transparent);transform:skewX(-14deg);animation:compare-scan 3.8s ease-in-out infinite;pointer-events:none }
.compare-column:nth-child(2)::after { animation-delay:1.15s }
.compare-column>header { display:flex;align-items:center;gap:11px }
.compare-column>header .turret-portrait { width:74px;height:74px;flex-basis:74px }
.compare-column>header>div { display:grid;gap:4px;min-width:0 }
.compare-column>header b { font-size:15px }
.compare-column>p { margin:0;color:rgba(220,239,255,.68);font-size:11px;line-height:1.48 }
.compare-column .turret-portrait canvas { animation:turret-float 2.8s ease-in-out infinite }
.compare-column:nth-child(2) .turret-portrait canvas { animation-delay:-1.2s }
@keyframes turret-float { 0%,100% { transform:translateY(0) scale(1) } 50% { transform:translateY(-3px) scale(1.025) } }
@keyframes compare-scan { 0%,70% { transform:translateX(-160%) skewX(-14deg) } 100% { transform:translateX(430%) skewX(-14deg) } }

.consumable-dock {
  left:50% !important;
  right:auto !important;
  width:min(520px,calc(100vw - 24px)) !important;
  padding:7px !important;
  transform:translateX(-50%) !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
.consumable-dock::-webkit-scrollbar { display:none;width:0;height:0 }
.consumable-dock>* { flex-basis:86px !important;min-width:86px !important;min-height:48px !important;padding:6px 7px !important;font-size:10px !important }
body:not(.in-game) .consumable-dock { display:none !important }

.battle-priority-strip { top:max(94px,calc(env(safe-area-inset-top) + 86px)) !important }
.priority-alert { padding:6px 9px !important;box-shadow:0 5px 14px rgba(0,0,0,.22) !important }
.priority-alert span { font-size:8px !important }.priority-alert b { font-size:10px !important }

@media (max-width:760px) {
  .home-tab-badge { top:5px !important;right:6px !important }
  .battle-priority-strip { top:max(105px,calc(env(safe-area-inset-top) + 98px)) !important;left:8px !important;right:8px !important }
  .first-deployment:not(.completed) { top:max(146px,calc(env(safe-area-inset-top) + 138px)) !important }
  .consumable-dock { bottom:max(78px,calc(env(safe-area-inset-bottom) + 70px)) !important;width:calc(100vw - 24px) !important }
  .consumable-dock>* { flex-basis:80px !important;min-width:80px !important }
  .turret-stat-grid { grid-template-columns:1fr }
  .turret-stat-grid>div { grid-template-columns:minmax(88px,.7fr) 1fr;grid-template-rows:auto 5px;align-items:center }
  .turret-stat-grid>div>i { grid-column:1/-1 }
  .turret-compare-panel { grid-template-columns:1fr !important }
}

@media (prefers-reduced-motion:reduce) {
  .compare-column::after,.compare-column .turret-portrait canvas,.turret-stat-grid i>b { animation:none !important }
}