/*
 * TheChess.Art — Unified sticky header pattern (Sprint 117ab)
 *
 * Tüm sayfa header'larını (play-top referans) standartlaştırır:
 *  - position: sticky → sayfa scroll'unda yapışık kalır
 *  - backdrop blur + yarı-şeffaf bg → arkadaki içerik geçer ama kaybolmaz
 *  - safe-area-inset-top → iPhone notch/Dynamic Island arkası
 *  - z-index: 50 → modal'lardan (z 1000) altta, içerikten üstte
 *
 * Plus: onboarding back butonu (play-back pattern) + room-bg cover fix.
 */

.play-top,
.daily-top,
.rooms-top,
.r-top,
.rd-top,
.sx-top,
.ach-top,
.onb-top,
.home2-top,
.feedback-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 14, 13, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgba(237, 227, 206, 0.04);
}

/* Onboarding back button — play-back ile aynı görsel pattern */
.onb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 10px;
}
.onb-back {
  width: 30px; height: 30px;
  border: 1px solid var(--line-2, rgba(237,227,206,0.18));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2, #B8AE99);
  background: rgba(237, 227, 206, 0.03);
  cursor: pointer;
  text-decoration: none;
  flex: 0 0 30px;
}
.onb-back svg { display: block; }
/* Dots ortada, skip sağda */
.onb-top .onb-dots { flex: 1 1 auto; display: flex; justify-content: center; gap: 6px; }
.onb-top .onb-skip { flex: 0 0 auto; }

/* Onboarding stage — görseller yazılara değmesin: üst padding artır + min-height */
.onb-stage {
  padding-top: 24px;
  padding-bottom: 24px;
}
.onb-track > * {
  padding: 28px 24px 32px;
}
.onb-track img,
.onb-track .onb-visual,
.onb-track svg {
  margin-bottom: 24px;
  max-height: 38vh;
  object-fit: contain;
}

/* Room detay — arka plan görseli tüm ekranı kaplasın (mevcut height:60% kesik bırakıyor) */
.rd-bg img {
  height: 100% !important;
  width: 100%;
  object-fit: cover;
  opacity: 0.18;
}
.rd-bg .vignette {
  background: linear-gradient(180deg,
    rgba(15,14,13,0.45) 0%,
    rgba(15,14,13,0.7) 55%,
    var(--bg) 100%) !important;
}