/* ═══════════════════════════════════════════════════════
   BBL DİK MOD — portrait-mode class ile aktif olur
   Yatay mod hiç etkilenmez.
   ═══════════════════════════════════════════════════════ */

/* ── Dik mod aktifleştir: portrait-screen gizle, game-wrapper göster ── */
html.portrait-active #portrait-screen { display: none !important; }
html.portrait-active #game-wrapper    { display: flex !important; flex-direction: column; height: 100dvh; overflow: hidden; }

/* ── Ana wrapper ── */
html.portrait-active #game-wrapper {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background: #020617;
}

/* ═══════════════════════════════════════
   ÜSTTEN BAR (2 satır)
   ═══════════════════════════════════════ */
html.portrait-active #prt-topbar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
  flex-shrink: 0;
  z-index: 100;
  height: 46px;
}

/* Sol: Logo (2 satır yüksekliğinde) */
html.portrait-active #prt-logo {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #1e293b;
  padding: 8px;
}
html.portrait-active #prt-logo img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
}

/* Orta: 2 satırlık içerik */
html.portrait-active #prt-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  gap: 3px;
  min-width: 0;
}

/* Satır 1: Hafta okları + chip'ler */
html.portrait-active #prt-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Hafta navigasyon okları */
html.portrait-active .prt-nav-btn {
  width: 26px;
  height: 26px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
html.portrait-active .prt-nav-btn:active { background: #334155; color: #fff; }

/* Info chip'ler (Takas, Kadro) */
html.portrait-active .prt-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 2px 7px;
  flex-shrink: 0;
  min-width: 44px;
}
html.portrait-active .prt-chip-label {
  font-size: 8px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}
html.portrait-active .prt-chip-val {
  font-size: 12px;
  font-weight: 900;
  color: #e2e8f0;
  line-height: 1.2;
  font-family: monospace;
}
html.portrait-active .prt-chip.chip-ok  { border-color: #22c55e44; }
html.portrait-active .prt-chip.chip-ok .prt-chip-val  { color: #4ade80; }
html.portrait-active .prt-chip.chip-warn { border-color: #f59e0b44; }
html.portrait-active .prt-chip.chip-warn .prt-chip-val { color: #fbbf24; }

/* Satır 2: Bütçe bar + sihirbaz */
html.portrait-active #prt-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
html.portrait-active #prt-budget-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html.portrait-active #prt-budget-text {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  font-family: monospace;
  line-height: 1;
}
html.portrait-active #prt-budget-track {
  width: 100%;
  height: 5px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #334155;
}
html.portrait-active #prt-budget-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 3px;
  transition: width 0.5s ease;
  box-shadow: 0 0 6px rgba(251,191,36,0.4);
}
html.portrait-active #prt-budget-fill.budget-low {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  box-shadow: 0 0 6px rgba(239,68,68,0.4);
}

/* Sihirbaz butonu */
html.portrait-active #prt-wizard-btn {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border: 1px solid #8b5cf680;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
html.portrait-active #prt-wizard-btn:active { transform: scale(0.92); }

/* Sağ: Hamburger (2 satır) */
html.portrait-active #prt-menu-btn {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #1e293b;
  cursor: pointer;
  transition: background 0.15s;
}
html.portrait-active #prt-menu-btn:active { background: #1e293b; }
html.portrait-active #prt-menu-btn i { font-size: 18px; color: #94a3b8; }

/* ═══════════════════════════════════════
   SAHA
   ═══════════════════════════════════════ */
html.portrait-active #prt-court-wrap {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  background: #020617;
  /* Sahayı mevcut court-surface ile kullanıyoruz */
}

/* ═══════════════════════════════════════
   YEDEKLER (5 kart yan yana)
   ═══════════════════════════════════════ */
html.portrait-active #prt-bench-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px 0;
  flex-shrink: 0;
  background: #020617;
  width: 100%;
}

/* ═══════════════════════════════════════
   6 BUTON SATIRI
   ═══════════════════════════════════════ */
html.portrait-active #prt-action-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  flex-shrink: 0;
  background: #0f172a;
  border-top: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
}
html.portrait-active .prt-action-btn {
  flex: 1;
  height: 36px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 7px;
  color: #94a3b8;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  min-width: 0;
}
html.portrait-active .prt-action-btn:active { background: #334155; }
html.portrait-active .prt-action-btn.active-atk { background: #450a0a; border-color: #ef444480; color: #fca5a5; }
html.portrait-active .prt-action-btn.active-def { background: #052e16; border-color: #22c55e80; color: #86efac; }
html.portrait-active .prt-action-btn.active-bal { background: #1e3a8a; border-color: #3b82f680; color: #60a5fa; }
/* Kaptan badge'i buton içinde */
html.portrait-active .prt-cap-inner {
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
html.portrait-active .prt-cap-inner .cap-icon { font-size: 13px; }
html.portrait-active .prt-cap-inner .cap-label { font-size: 7px; color: #64748b; letter-spacing: 0.3px; }
/* Separator */
html.portrait-active .prt-sep {
  width: 1px;
  height: 24px;
  background: #334155;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   SCROLL BÖLÜMÜ (fikstur + lig + kupa)
   ═══════════════════════════════════════ */
html.portrait-active #prt-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #020617;
}

/* Kart tasarımı */
html.portrait-active .prt-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
html.portrait-active .prt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #1e293b;
  background: #1e293b40;
}
html.portrait-active .prt-card-title {
  font-size: 10px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}
html.portrait-active .prt-card-body {
  padding: 10px 12px;
}

/* Fikstür kartı */
html.portrait-active .prt-fixture-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
html.portrait-active .prt-fix-team {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #e2e8f0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.portrait-active .prt-fix-score {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
html.portrait-active .prt-fix-num {
  font-size: 18px;
  font-weight: 900;
  font-family: monospace;
  color: #facc15;
  min-width: 36px;
  text-align: center;
}
html.portrait-active .prt-fix-vs {
  font-size: 9px;
  color: #475569;
  font-weight: 700;
}
html.portrait-active .prt-fix-result {
  font-size: 10px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 4px;
  text-align: center;
  margin-top: 6px;
}
html.portrait-active .prt-fix-result.win  { background: #052e16; color: #4ade80; border: 1px solid #22c55e40; }
html.portrait-active .prt-fix-result.lose { background: #450a0a; color: #fca5a5; border: 1px solid #ef444440; }
html.portrait-active .prt-fix-result.draw { background: #1e3a8a; color: #60a5fa; border: 1px solid #3b82f640; }
html.portrait-active .prt-fix-result.live { background: #14532d; color: #4ade80; border: 1px solid #22c55e80; animation: pulse 2s infinite; }

/* Lig mini tablosu */
html.portrait-active .prt-league-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #1e293b20;
}
html.portrait-active .prt-league-row:last-child { border-bottom: none; }
html.portrait-active .prt-league-row.me {
  background: rgba(59,130,246,0.08);
  margin: 0 -12px;
  padding: 5px 12px;
  border-left: 3px solid #3b82f6;
}
html.portrait-active .prt-lg-rank { font-size: 11px; font-weight: 900; color: #475569; width: 18px; text-align: center; flex-shrink: 0; }
html.portrait-active .prt-lg-name { flex: 1; font-size: 11px; font-weight: 700; color: #cbd5e1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.portrait-active .prt-lg-pts  { font-size: 12px; font-weight: 900; color: #4ade80; font-family: monospace; flex-shrink: 0; }

/* ═══════════════════════════════════════
   SAĞ DRAWER
   ═══════════════════════════════════════ */
html.portrait-active #prt-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 88vw);
  height: 100dvh;
  background: #0f172a;
  border-left: 1px solid #1e293b;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
html.portrait-active #prt-drawer.open { right: 0; }
html.portrait-active #prt-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: none;
  backdrop-filter: blur(2px);
}
html.portrait-active #prt-drawer-overlay.open { display: block; }

/* Drawer header */
html.portrait-active #prt-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #1e293b;
  flex-shrink: 0;
}
html.portrait-active #prt-drawer-close {
  width: 32px; height: 32px;
  background: #1e293b; border: 1px solid #334155;
  border-radius: 8px; color: #94a3b8;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* Drawer menü öğeleri */
html.portrait-active #prt-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html.portrait-active .prt-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
html.portrait-active .prt-drawer-item:active { background: #1e293b; }
html.portrait-active .prt-drawer-item:hover  { background: #1e293b; border-color: #334155; }
html.portrait-active .prt-drawer-item .d-icon { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; }
html.portrait-active .prt-drawer-item .d-text { flex: 1; font-size: 13px; font-weight: 700; color: #e2e8f0; }
html.portrait-active .prt-drawer-item .d-arrow { font-size: 10px; color: #475569; }
html.portrait-active .prt-drawer-sep {
  height: 1px; background: #1e293b;
  margin: 4px 0;
}
html.portrait-active .prt-drawer-section {
  font-size: 9px; font-weight: 900; color: #475569;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 8px 14px 4px;
}

/* Auth butonları drawerda */
html.portrait-active .prt-drawer-auth-row {
  display: flex; gap: 8px; padding: 8px;
}
html.portrait-active .prt-auth-login {
  flex: 1; padding: 12px;
  background: #1e293b; border: 1px solid #334155;
  border-radius: 10px; color: #e2e8f0;
  font-size: 12px; font-weight: 700; cursor: pointer;
  text-align: center;
}
html.portrait-active .prt-auth-signup {
  flex: 1; padding: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none; border-radius: 10px; color: #000;
  font-size: 12px; font-weight: 800; cursor: pointer;
  text-align: center;
}

/* ═══════════════════════════════════════
   YATAY MODDA DİK MOD ELEMENTLERİNİ GİZLE
   ═══════════════════════════════════════ */
#prt-topbar,
#prt-bench-row,
#prt-action-row,
#prt-scroll-area,
#prt-drawer,
#prt-drawer-overlay {
  display: none;
}

/* ═══════════════════════════════════════
   DİK MODDA YATAY ELEMANLARI GİZLE
   ═══════════════════════════════════════ */
html.portrait-active nav               { display: none !important; }
html.portrait-active #layout-grid      { display: none !important; }
html.portrait-active .top-billboard-wrapper { display: none !important; }

/* ═══════════════════════════════════════
   DİK MOD SAHA BOYUTLARI
   ═══════════════════════════════════════ */
html.portrait-active #prt-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
html.portrait-active #prt-court-host {
  flex-shrink: 0;
  width: 100%;
  /* Yükseklik hesabı: toplam - topbar(46) - budget-strip(18) - bench(~95) - actions(44) */
  height: calc(100dvh - 46px - 18px - 95px - 44px - 120px);
  min-height: 160px;
  position: relative;
  background: #020617;
  overflow: hidden;
}

/* Portrait'ta slot boyutları küçülsün */
html.portrait-active .slot-container {
  width: 100px !important;
  height: 140px !important;
}
html.portrait-active .slot-container .player-card {
  width: 80px !important;
  height: 130px !important;
  transform: scale(1) !important;
}
html.portrait-active .empty-slot-circle {
  width: 62px !important;
  height: 80px !important;
  font-size: 1.4rem !important;
}
html.portrait-active .slot-container .player-head-wrapper {
  width: 38px !important;
  height: 38px !important;
  top: -12px !important;
}
html.portrait-active .slot-container .score-badge-left {
  width: 20px !important;
  height: 20px !important;
  font-size: 8px !important;
}
html.portrait-active .slot-container .cost-badge {
  width: 20px !important;
  height: 20px !important;
  font-size: 7px !important;
}

/* Portrait bench */
html.portrait-active .prt-bench-slot {
  width: calc(20% - 4px);
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 2px dashed #334155;
  border-radius: 6px;
  background: rgba(15,23,42,0.5);
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: all 0.2s;
}
html.portrait-active .prt-bench-slot:has(.player-card) { border-color: transparent; background: transparent; }
html.portrait-active .prt-bench-slot .player-card {
  width: 70px !important;
  height: 110px !important;
  transform: translateY(20px) scale(0.9) !important;
  transform-origin: bottom center !important;
}
html.portrait-active .prt-bench-slot:hover .player-card {
  transform: translateY(-4px) scale(0.95) !important;
}

/* ═══════════════════════════════════════
   HAYALEt SCROLLBAR — dik mod overlay'leri
   ═══════════════════════════════════════ */

/* fg-grid tam genişlik — overlay içinde padding çakışmasın */
#prt-ov-grid .fg-grid,
#pfo-grid .fg-grid {
  width: 100%;
  box-sizing: border-box;
}

/* Tüm overlay scroll alanları: başlangıçta tamamen gizli */
#prt-ov-grid,
#pfo-grid {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#prt-ov-grid::-webkit-scrollbar,
#pfo-grid::-webkit-scrollbar {
  width: 4px;
}
#prt-ov-grid::-webkit-scrollbar-track,
#pfo-grid::-webkit-scrollbar-track {
  background: transparent;
}
#prt-ov-grid::-webkit-scrollbar-thumb,
#pfo-grid::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.4s;
}
/* JS scroll eventi .sb-visible class ekleyince belirsin, 1.5sn sonra kaybolsun */
#prt-ov-grid.sb-visible,
#pfo-grid.sb-visible {
  scrollbar-color: rgba(71, 85, 105, 0.5) transparent;
}
#prt-ov-grid.sb-visible::-webkit-scrollbar-thumb,
#pfo-grid.sb-visible::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.5);
}

/* ═══════════════════════════════════════
   ALT NAV v7 — 7 ITEM TEK SATIR
   ═══════════════════════════════════════ */

#pg-bottom-nav {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: 60px;
  flex-shrink: 0;
  position: relative;
  z-index: 9990;
  overflow: visible;
  background: #0b1120;
}

#pg-bottom-nav::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 0; right: 0;
  height: 15px;
  background: #0b1120;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 1.5px solid rgba(255,255,255,0.08);
  z-index: -1;
}

/* 7 item — eşit, sığmayı garantile */
.pg-nav-item {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 0 8px 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: visible;
  transition: opacity 0.15s;
  z-index: 2;
}

.pg-nav-item:active { opacity: 0.6; }

.pg-nav-item::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%) scale(0);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #3b82f6;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.pg-nav-item.pgn-active::after { transform: translateX(-50%) scale(1); }

/* ARC — 0 / 3 / 6 / 9 */
#pgn-match   { transform: translateY(0px);  }
#pgn-share   { transform: translateY(0px);  }
#pgn-filter  { transform: translateY(-3px); }
#pgn-scout   { transform: translateY(-3px); }
#pgn-rewards { transform: translateY(-6px); }
#pgn-radar   { transform: translateY(-6px); }
#pgn-fav     { transform: translateY(-9px); z-index: 5; }

/* İkon boyutları */
#pgn-match  .pgn-icon svg, #pgn-share   .pgn-icon svg { width: 17px; height: 17px; }
#pgn-filter .pgn-icon svg, #pgn-scout   .pgn-icon svg { width: 18px; height: 18px; }
#pgn-rewards .pgn-icon svg, #pgn-radar  .pgn-icon svg { width: 19px; height: 19px; }
#pgn-fav    .pgn-icon svg                             { width: 21px; height: 21px; }

.pgn-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pgn-icon svg {
  color: #4b5875;
  display: block;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.18s cubic-bezier(.34,1.56,.64,1), filter 0.15s;
}

/* Etiket — tek satır, taşarsa kes */
.pgn-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #4b5875;
  text-transform: uppercase;
  line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  transition: color 0.15s;
}

/* Favoriler etiketi biraz büyük */
#pgn-fav .pgn-label { font-size: 8px; font-weight: 800; }

/* Aktif */
.pg-nav-item.pgn-active .pgn-icon svg { transform: scale(1.08); }

#pgn-match.pgn-active   .pgn-icon svg { color:#f87171; filter:drop-shadow(0 0 4px rgba(248,113,113,.6)); }
#pgn-match.pgn-active   .pgn-label    { color:#f87171; }
#pgn-match.pgn-active::after          { background:#f87171; }

#pgn-filter.pgn-active  .pgn-icon svg { color:#60a5fa; filter:drop-shadow(0 0 4px rgba(96,165,250,.6)); }
#pgn-filter.pgn-active  .pgn-label    { color:#60a5fa; }
#pgn-filter.pgn-active::after         { background:#60a5fa; }

#pgn-rewards.pgn-active .pgn-icon svg { color:#fb923c; filter:drop-shadow(0 0 4px rgba(251,146,60,.6)); }
#pgn-rewards.pgn-active .pgn-label    { color:#fb923c; }
#pgn-rewards.pgn-active::after        { background:#fb923c; }

#pgn-fav.pgn-active     .pgn-icon svg { color:#fbbf24; fill:#fbbf24; stroke:#fbbf24; filter:drop-shadow(0 0 7px rgba(251,191,36,.8)); }
#pgn-fav.pgn-active     .pgn-label    { color:#fbbf24; }
#pgn-fav.pgn-active::after            { background:#fbbf24; }

#pgn-radar.pgn-active   .pgn-icon svg { color:#34d399; filter:drop-shadow(0 0 4px rgba(52,211,153,.6)); }
#pgn-radar.pgn-active   .pgn-label    { color:#34d399; }
#pgn-radar.pgn-active::after          { background:#34d399; }

#pgn-scout.pgn-active   .pgn-icon svg { color:#a78bfa; filter:drop-shadow(0 0 4px rgba(167,139,250,.6)); }
#pgn-scout.pgn-active   .pgn-label    { color:#a78bfa; }
#pgn-scout.pgn-active::after          { background:#a78bfa; }

#pgn-share.pgn-active   .pgn-icon svg { color:#94a3b8; filter:drop-shadow(0 0 3px rgba(148,163,184,.5)); }
#pgn-share.pgn-active   .pgn-label    { color:#94a3b8; }
#pgn-share.pgn-active::after          { background:#94a3b8; }

.pgn-badge-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 5px; height: 5px;
  background: #ef4444;
  border-radius: 50%;
  border: 1px solid #0b1120;
  z-index: 4;
}

/* ═══════════════════════════════════════
   TAM GENİŞLİK BÜTÇE STRIP
   ═══════════════════════════════════════ */
#pg-budget-strip {
  position: relative;
  width: 100%;
  height: 59px;
  background: #0f172a;
  overflow: hidden;
  flex-shrink: 0;
  order: -1;
  z-index: 9996;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  box-shadow:
    0 3px 16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}

/* ── Renk dolgular ── */
.pg-bfill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(
    90deg,
    #1e3a8a 0%,
    #1d4ed8 35%,
    #2563eb 65%,
    #3b82f6 85%,
    #60a5fa 100%
  );
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 2px 2px 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}

.pg-bfill.budget-warning {
  background: linear-gradient(
    90deg,
    #78350f 0%,
    #b45309 35%,
    #d97706 65%,
    #f59e0b 85%,
    #fbbf24 100%
  );
  box-shadow:
    0 0 18px rgba(245,158,11,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.3);
}
.pg-bfill.budget-critical {
  background: linear-gradient(
    90deg,
    #7f1d1d 0%,
    #991b1b 35%,
    #dc2626 65%,
    #ef4444 85%,
    #f87171 100%
  );
  box-shadow:
    0 0 22px rgba(239,68,68,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  animation: pg-crit-pulse 1.1s ease-in-out infinite;
}
@keyframes pg-crit-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* ── Parlama süpürgesi ── */
.pg-bshine {
  position: absolute;
  top: 0; bottom: 0;
  width: 55%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.08) 60%,
    transparent 100%
  );
  animation: pg-shine 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes pg-shine {
  0%     { left: -60%; }
  55%,100% { left: 130%; }
}

/* ── Segment çizgileri (tick) ── */
.pg-bticks {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  pointer-events: none;
  z-index: 2;
}
.pg-btick {
  flex: 1;
  border-right: 1px solid rgba(0,0,0,0.28);
}
.pg-btick:last-child { border-right: none; }

/* ── Sol metin: etiket + değer ── */
.pg-btext-left {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pg-blabel {
  font-size: 6px;
  font-weight: 900;
  color: rgba(255,255,255,0.38);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pg-bvalue {
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.7);
  letter-spacing: 0.5px;
}

/* ── Sağ metin: % ── */
.pg-btext-right {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  height: 100%;
}
.pg-bpct {
  font-size: 8.5px;
  font-weight: 900;
  color: rgba(255,255,255,0.65);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ── Eşik renkleri: text ── */
#pg-budget-strip.strip-warning .pg-bvalue,
#pg-budget-strip.strip-warning .pg-bpct {
  color: #fde68a;
  text-shadow: 0 0 10px rgba(251,191,36,0.6), 0 1px 3px rgba(0,0,0,0.7);
}
#pg-budget-strip.strip-critical .pg-bvalue,
#pg-budget-strip.strip-critical .pg-bpct {
  color: #fecaca;
  text-shadow: 0 0 10px rgba(239,68,68,0.7), 0 1px 3px rgba(0,0,0,0.7);
}

/* Strip portrait-game'in flex column düzeninde topbar ile saha arasında görünür (üstteki #pg-budget-strip kuralıyla zaten ayarlı) */