/* =====================================================================
   BBL — BÖLÜM KİMLİĞİ (2026-10-11 MOD-1)
   İki bölüm, iki renk:  BBL Lig = "arena gecesi" (lacivert + oyun mavisi)
                          3×3 Sokak = "asfalt gün batımı" (koyu kahve + turuncu)
   Tek kaynak: html üzerindeki --m-* değişkenleri. Sokak modunda html.street-mode
   (bbl-street-basketball.js activate/deactivateStreetMode) değişkenleri değiştirir;
   tüm çerçeve aynı anda, yumuşak bir geçişle renk değiştirir.
   Mobilde mod anahtarı üst çubuğun hemen altındadır (#pg-mode, index.html).
   ===================================================================== */
html {
  --m-bg: #050f24;        /* zemin */
  --m-surface: #0a1c40;   /* çubuklar, kartlar */
  --m-raised: #10285a;    /* düğmeler, iç kutular */
  --m-line: rgba(96, 140, 230, .24);
  --m-accent: #3b82f6;
  --m-soft: #93b4f5;      /* sönük vurgu metni */
  --m-court: #071733;     /* BBL saha zemini */
  /* [2026-10-27] SOL PANEL (PC: hisse listesi) bölüm kimliğine bağlandı — eskiden ayrı, gri-lacivert paletteydi */
  --lp-liste: var(--m-bg);
  --lp-kart: color-mix(in srgb, var(--m-surface) 72%, var(--m-bg));
  --lp-kart-h: var(--m-raised);
  --lp-sekme: var(--m-surface);
}
/* TEMA: "Gece Laciverti" — sol panelin eski rengi (Slate 900 #0F172A; liste #0C1222). İleride tema seçeneği:
   <html class="tema-gece"> ile açılır. */
html.tema-gece {
  --lp-liste: #0c1222;
  --lp-kart: #0f172a;
  --lp-kart-h: #131d30;
  --lp-sekme: #111827;
}
html.street-mode {
  --m-bg: #140a04;
  --m-surface: #24130a;
  --m-raised: #33190b;
  --m-line: rgba(251, 146, 60, .26);
  --m-accent: #f97316;
  --m-soft: #fdba74;
}

/* ───────────────────────── MOD ANAHTARI (mobil) ───────────────────────── */
#pg-mode { display: none; }
html.guest-mode #pg-mode { display: none !important; }   /* misafir modunda sekmeler zaten gizli (style.css) */
html.mobile-device #portrait-game.pg-visible #pg-mode {
  display: block; flex-shrink: 0; position: relative; z-index: 60;
  padding: 6px 8px; background: var(--m-surface); border-bottom: 1px solid var(--m-line);
  transition: background-color .3s ease, border-color .3s ease;
}
#pg-mode .rp-tabs { display: flex !important; gap: 6px; align-items: stretch; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
#pg-mode .rp-tab {
  flex: 1 1 0; min-width: 0; height: 46px; padding: 0 10px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255, 255, 255, .035); border: 1px solid transparent; color: #a3afc1;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; cursor: pointer;
  position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#pg-mode .rp-tab::before {                         /* seçili bölümün üst kenar çizgisi */
  content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: transparent; transition: background-color .25s ease;
}
#pg-mode .rp-tab:active { transform: scale(.985); }
#pg-mode .rp-tab:focus-visible { outline: 2px solid var(--m-soft); outline-offset: 2px; }
#pg-mode .pgm-ic { font-size: 18px; line-height: 1; flex-shrink: 0; transition: opacity .25s, filter .25s; }
#pg-mode .pgm-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
#pg-mode .pgm-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.1; letter-spacing: .1px; white-space: nowrap; }
#pg-mode .pgm-sub { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; margin-top: 3px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#pg-mode .rp-tab:not(.active) .pgm-ic { opacity: .5; filter: grayscale(.7); }
#pg-mode .rp-tab[data-tab="bbl"] .pgm-ic { color: #f5b82e; }
#pg-mode .rp-tab[data-tab="social"] .pgm-ic { color: #fb923c; }
#pg-mode .rp-tab[data-tab="bbl"].active {
  background: linear-gradient(180deg, #14306b, #0d2250); color: #fff; border-color: rgba(96, 140, 230, .45);
  box-shadow: 0 6px 18px rgba(29, 78, 216, .28);
}
#pg-mode .rp-tab[data-tab="bbl"].active::before { background: #60a5fa; }
#pg-mode .rp-tab[data-tab="social"].active {
  background: linear-gradient(180deg, #5a260b, #3a1807); color: #fff; border-color: rgba(251, 146, 60, .5);
  box-shadow: 0 6px 18px rgba(194, 65, 12, .3);
}
#pg-mode .rp-tab[data-tab="social"].active::before { background: #fb923c; }
/* kısa ekran (iPhone SE, 360×640): anahtar 46→38 px, alt satır gizli */
@media (max-height: 700px) {
  html.mobile-device #portrait-game.pg-visible #pg-mode { padding: 3px 8px; }
  #pg-mode .rp-tab { height: 36px; }
  #pg-mode .pgm-sub { display: none; }
  #pg-mode #bc-mobile-btn { flex-basis: 36px; height: 36px; }
}
/* yayın düğmesi (bbl-broadcaster.js ilk .rp-tabs'a ekler) — anahtarın sağında küçük kare */
#pg-mode #bc-mobile-btn { flex: 0 0 46px; height: 46px; margin: 0 !important; padding: 0 !important; border-radius: 12px !important; font-size: 0 !important; }
#pg-mode #bc-mobile-btn i { font-size: 15px; margin: 0 !important; }

/* ───────────────────────── MOBİL ÇERÇEVE ───────────────────────── */
html.mobile-device #portrait-game,
html.mobile-device #pg-scroll-wrapper,
html.mobile-device #pg-scroll { background: var(--m-bg) !important; transition: background-color .3s ease; }
html.mobile-device #pg-topbar { background: var(--m-surface) !important; border-bottom: 1px solid var(--m-line) !important; transition: background-color .3s ease; }
html.mobile-device #pg-topbar .info-pill { background: var(--m-raised) !important; border-color: var(--m-line) !important; }
html.mobile-device #pg-topbar #pg-undo, html.mobile-device #pg-topbar #pg-redo,
html.mobile-device #pg-topbar #pg-notif-btn, html.mobile-device #pg-topbar #pg-stock-search-btn { background: var(--m-raised) !important; border-color: var(--m-line) !important; }
html.mobile-device #pg-budget-strip { background: var(--m-bg) !important; }
/* sokak bütçe kullanmıyor → şerit gizli (saha biraz yer kazanır) */
html.mobile-device.street-mode #pg-budget-strip { display: none !important; }

/* aksiyon çubuğu (BBL: taktik/kaptan/yardımcı/kiralık — Sokak: 6 malzeme) */
html.mobile-device #pg-action-bar { background: var(--m-surface) !important; border-top: 1px solid var(--m-line) !important; border-bottom: 1px solid var(--m-line) !important; transition: background-color .3s ease; }
html.mobile-device:not(.street-mode) #pg-action-bar #pg-atk,
html.mobile-device:not(.street-mode) #pg-action-bar #pg-def,
html.mobile-device:not(.street-mode) #pg-action-bar #pg-den,
html.mobile-device:not(.street-mode) #pg-action-bar #pg-vc,
html.mobile-device:not(.street-mode) #pg-action-bar #pg-loan { border-color: var(--m-line) !important; }
html.mobile-device.street-mode #pg-action-bar > div { background-color: var(--m-raised) !important; border-color: rgba(251, 146, 60, .42) !important; box-shadow: none !important; }
html.mobile-device.street-mode #pg-action-bar > div span { color: #fed7aa !important; }

/* bölüm kartları (BBL: lig/kupa/görev — Sokak: eşleşme/lig yuvaları) */
html.mobile-device #pg-scroll .rp-card,
html.mobile-device #pg-scroll .social-slot-card { background: var(--m-surface) !important; border: 1px solid var(--m-line) !important; border-radius: 16px !important; box-shadow: none !important; }
html.mobile-device #pg-scroll .rp-weekly-nav { background: var(--m-raised) !important; border-color: var(--m-line) !important; }
html.mobile-device.street-mode #pg-scroll .rp-week-display { background: rgba(0, 0, 0, .28) !important; border-color: var(--m-line) !important; }


/* BBL sahası lacivert (sokak sahası kendi asfalt resmini kullanır) */
html:not(.street-mode) #court-drop-zone.court-surface { background-color: var(--m-court) !important; }
html:not(.street-mode) #court-bg-rect { fill: var(--m-court) !important; }

/* ───────────────────────── PC ───────────────────────── */
html:not(.mobile-device) #game-wrapper { background: var(--m-bg) !important; transition: background-color .3s ease; }
html:not(.mobile-device) #game-wrapper > nav { background: var(--m-surface) !important; border-bottom: 1px solid var(--m-line) !important; transition: background-color .3s ease; }
html:not(.mobile-device) .left-panel,
html:not(.mobile-device) .right-panel { background: var(--m-bg) !important; border-color: var(--m-line) !important; transition: background-color .3s ease; }
html:not(.mobile-device) .center-stage,
html:not(.mobile-device) .arena-container { background: var(--m-bg) !important; }
/* sağ reklam sütunu sağ panelin çizgisine bitişik: orta sahnenin sağ boşluğu (10 px) sağ panele verildi */
@media (min-width: 900px) {
  html:not(.mobile-device) .center-stage { padding-right: 0 !important; }
  html:not(.mobile-device) #layout-grid { grid-template-columns: 22% minmax(0, 1fr) calc(20% + 10px) !important; }
}
html:not(.mobile-device) .right-panel > .rp-tabs { background: var(--m-surface) !important; border-bottom: 1px solid var(--m-line) !important; padding: 8px !important; gap: 6px !important; }
html:not(.mobile-device) .right-panel > .rp-tabs .rp-tab {
  height: 42px !important; border-radius: 10px !important; border: 1px solid transparent !important; background: rgba(255, 255, 255, .035) !important;
  color: #a3afc1 !important; position: relative; overflow: hidden; transition: background-color .25s, color .25s, border-color .25s;
}
html:not(.mobile-device) .right-panel > .rp-tabs .rp-tab span { font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .2px !important; }
html:not(.mobile-device) .right-panel > .rp-tabs .rp-tab[data-tab="bbl"].active { background: linear-gradient(180deg, #14306b, #0d2250) !important; color: #fff !important; border-color: rgba(96, 140, 230, .45) !important; box-shadow: inset 0 3px 0 #60a5fa !important; }
html:not(.mobile-device) .right-panel > .rp-tabs .rp-tab[data-tab="social"].active { background: linear-gradient(180deg, #5a260b, #3a1807) !important; color: #fff !important; border-color: rgba(251, 146, 60, .5) !important; box-shadow: inset 0 3px 0 #fb923c !important; }
html:not(.mobile-device) .right-panel > .rp-tabs .rp-tab:focus-visible { outline: 2px solid var(--m-soft); outline-offset: 2px; }
html:not(.mobile-device) .right-panel .rp-card { background: var(--m-surface) !important; border: 1px solid var(--m-line) !important; box-shadow: none !important; }
html:not(.mobile-device) .right-panel .rp-weekly-nav { background: var(--m-raised) !important; border-color: var(--m-line) !important; }

/* ───────────────────────── SOKAK: kalan lacivert parçalar (mobil + PC) ───────────────────────── */
html.street-mode .st-card.st-card-empty, html.street-mode .st-reserve.st-card-empty { background: rgba(36, 19, 10, .55) !important; border-color: rgba(251, 146, 60, .32) !important; }
html.street-mode .st-pos-badge { background: linear-gradient(180deg, #f97316, #c2410c) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(194, 65, 12, .45) !important; }
html.street-mode .st-equip-drop { background: rgba(20, 10, 4, .85) !important; border-color: rgba(251, 146, 60, .4) !important; }
html.street-mode .st-reserve-label { background: var(--m-raised) !important; color: #fed7aa !important; }
html.street-mode .street-rules-btn { background: rgba(36, 19, 10, .7) !important; border-color: var(--m-line) !important; }
html.street-mode #smc-match-prev, html.street-mode #smc-match-next, html.street-mode #smc-match-display { border-color: var(--m-line) !important; background-color: rgba(0, 0, 0, .25) !important; }
/* [2026-10-21] sokak skorbordu lig skorboarduyla aynı retro tabela — tabela renkleri bbl-scoreboard.css'te (sokakta turuncu levha) */
html.street-mode #smc-match-result { border-color: var(--m-line) !important; }
html.street-mode #smc-bar-marker { border-color: #fb923c !important; }
html.street-mode #smc-billboard .period-name { color: #fdba74 !important; }
html.street-mode #smc-billboard .duel-result-box.neutral { background: rgba(0, 0, 0, .25) !important; border-color: var(--m-line) !important; color: #fed7aa !important; }
html.street-mode #social-tab-content .social-slot-card, html.street-mode #pg-tab-social .social-slot-card { border-color: var(--m-line) !important; }
html.street-mode .social-slot-card .s3-empty { background: linear-gradient(180deg, var(--m-surface), var(--m-bg)) !important; border-color: var(--m-line) !important; }

/* ───────────────────────── ortak parçalar (iki modda da temaya bağlı) ───────────────────────── */
html.mobile-device #portrait-screen { background: var(--m-bg) !important; }
#bblpano-root #bp-handle { background: var(--m-surface) !important; border-color: var(--m-line) !important; }
html:not(.mobile-device) .nav-right-group #undo-prev-btn, html:not(.mobile-device) .nav-right-group #redo-next-btn,
html:not(.mobile-device) .nav-right-group #undo-monday-btn, html:not(.mobile-device) .nav-right-group #fullscreen-btn { background: var(--m-raised) !important; border-color: var(--m-line) !important; }
html:not(.mobile-device) .center-stage .top-billboard-wrapper { background: var(--m-surface) !important; border-color: var(--m-line) !important; }
html:not(.mobile-device) .center-stage #ticker-team-wrap, html:not(.mobile-device) .center-stage #ticker-bist100 { background: var(--m-raised) !important; }
html:not(.mobile-device) .arena-container > #court-drop-zone { border-color: var(--m-line) !important; }
html.street-mode .social-slot-card { background: linear-gradient(180deg, var(--m-surface), var(--m-bg)) !important; }
html:not(.mobile-device).street-mode .center-stage .bottom-panel { background: linear-gradient(180deg, var(--m-surface), var(--m-bg)) !important; border-color: var(--m-line) !important; }
html.street-mode .st-equip-card.st-eq-cons { background: var(--m-surface) !important; border-color: var(--m-line) !important; }
html.street-mode .st-equip-card .st-eq-img-wrap { background: rgba(0, 0, 0, .2) !important; }
html.street-mode .st-equip-card .st-eq-info { background: var(--m-raised) !important; }
html:not(.mobile-device) .right-panel #pc-footer-bar { border-color: var(--m-line) !important; }
html:not(.mobile-device) .arena-container .side-billboard, html:not(.mobile-device) .arena-container .side-billboard .billboard-digital { background-color: var(--m-surface) !important; border-color: var(--m-line) !important; }

@media (prefers-reduced-motion: reduce) {
  #pg-mode, #pg-mode .rp-tab, html.mobile-device #pg-topbar,
  html:not(.mobile-device) #game-wrapper, html:not(.mobile-device) #game-wrapper > nav,
  html:not(.mobile-device) .left-panel, html:not(.mobile-device) .right-panel, html:not(.mobile-device) .right-panel > .rp-tabs .rp-tab,
  html.mobile-device #portrait-game, html.mobile-device #pg-scroll-wrapper, html.mobile-device #pg-scroll, html.mobile-device #pg-action-bar { transition: none !important; }
}

/* ───────── [MOD-2 16.10] alt satırda skor: benim puanım renkli, rakibinki soluk (ışık yok) ───────── */
#pg-mode .pgm-sub .pgm-sc, .rp-tabs .pcm-sub .pgm-sc { font-weight: 800; font-variant-numeric: tabular-nums; }
.pgm-sc.pgm-win { color: #4ade80; }
.pgm-sc.pgm-lose { color: #f87171; }
.pgm-dot { opacity: .5; margin: 0 5px; }
.pgm-op { opacity: .75; font-variant-numeric: tabular-nums; }
/* PC sekmeleri: ad + küçük ikinci satır */
.rp-tabs .rp-tab .pcm-txt { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.rp-tabs .rp-tab .pcm-sub { display: block; font-family: inherit; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.1; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-transform: none; }
.rp-tabs .rp-tab .pcm-sub:empty { display: none; }
#pg-mode .pcm-sub { display: none !important; }

/* [SOKAK-B] Sokakta BBL'ye özgü "İlk haftan" şeridi gizli; kurallar tuşu yazılı */
html.street-mode #bbl-ncs-desk, html.street-mode #bbl-ncs-pg { display: none !important; }
html.street-mode .street-rules-btn { width: auto !important; border-radius: 14px !important; padding: 0 10px !important; font-size: 11px !important; font-weight: 700; color: #fed7aa; gap: 4px; }

/* ───────────────────────── SOL PANEL (PC) — bölüm kimliği ───────────────────────── */
html:not(.mobile-device) .left-panel #market-list { background-color: var(--lp-liste) !important; transition: background-color .3s ease; }
html:not(.mobile-device) .left-panel .lp-tabs4 { background-color: var(--lp-sekme) !important; transition: background-color .3s ease; }
html:not(.mobile-device) .left-panel .fg-card { background-color: var(--lp-kart); }
html:not(.mobile-device) .left-panel .fg-card:hover { background-color: var(--lp-kart-h); }