/* Ortak arka plan: siyah zemin + kırmızı duman (#ff4655). Tüm sayfalar bu dosyayı yükler.
   Katmanlar html'in pseudo-elemanları: z-index:-1 ile kök zeminin üstünde, içeriğin altında kalır.
   Sayfaların body'si ve tam ekran kapsayıcıları şeffaf olmalı ki duman görünsün. */
html { background-color: #000000; }

html::before,
html::after {
    content: '';
    position: fixed;
    inset: -15%;
    z-index: -1;
    pointer-events: none;
    filter: blur(60px);
    will-change: transform;
}

html::before {
    background:
        radial-gradient(40% 35% at 10% 12%, rgba(255, 70, 85, 0.35), transparent 70%),
        radial-gradient(35% 40% at 92% 88%, rgba(255, 70, 85, 0.30), transparent 70%);
    animation: smoke-drift-a 40s ease-in-out infinite;
}

html::after {
    background:
        radial-gradient(30% 30% at 88% 15%, rgba(255, 70, 85, 0.28), transparent 70%),
        radial-gradient(35% 30% at 12% 85%, rgba(255, 70, 85, 0.25), transparent 70%);
    animation: smoke-drift-b 55s ease-in-out infinite;
}

/* Kapalı yörünge: lekeler tüm viewport'u (üst-sağ-alt-sol) dolaşıp başa döner. */
@keyframes smoke-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    25%  { transform: translate3d(55vw, 15vh, 0) scale(1.1); }
    50%  { transform: translate3d(35vw, 60vh, 0) scale(0.95); }
    75%  { transform: translate3d(-10vw, 40vh, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes smoke-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    25%  { transform: translate3d(-50vw, 20vh, 0) scale(0.95); }
    50%  { transform: translate3d(-30vw, -55vh, 0) scale(1.1); }
    75%  { transform: translate3d(15vw, -35vh, 0) scale(1); }
    100% { transform: translate3d(0, 0, 0) scale(1.05); }
}

/* Hareketi azalt: durağan değil, aynı yörüngenin kısa mesafeli ve iki kat yavaş hali.
   Sitenin genel reduced-motion kuralı (*::before animation-duration 0.01ms !important) bunu ezmesin diye !important. */
@media (prefers-reduced-motion: reduce) {
    html::before { animation: smoke-calm-a 80s ease-in-out infinite !important; }
    html::after  { animation: smoke-calm-b 110s ease-in-out infinite !important; }
}

@keyframes smoke-calm-a {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(10vw, 3vh, 0); }
    50%  { transform: translate3d(7vw, 10vh, 0); }
    75%  { transform: translate3d(-2vw, 7vh, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes smoke-calm-b {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-9vw, 4vh, 0); }
    50%  { transform: translate3d(-6vw, -10vh, 0); }
    75%  { transform: translate3d(3vw, -6vh, 0); }
    100% { transform: translate3d(0, 0, 0); }
}


/* Açık tema kendi zeminini korur; duman sadece koyu temada. */
html:has(body.light-theme)::before,
html:has(body.light-theme)::after { display: none; }

/* Uygulamada tam ekran açılan opak ekranlar alttaki dumanı örter; aynı dumanı sabit olarak taşırlar. */
body:not(.light-theme) .league-screen,
body:not(.light-theme) .game-mode-screen {
    background-image:
        radial-gradient(60% 40% at 0% 0%, rgba(255, 70, 85, 0.28), transparent 70%),
        radial-gradient(60% 40% at 100% 100%, rgba(255, 70, 85, 0.25), transparent 70%);
}

/* Yüzeyler (kart/modal/header/reklam) duman temasına uyumlu: hafif yükseltilmiş koyu gri + ince kenarlık. */
body:not(.light-theme) {
    --bg-surface:   #151515;
    --bg-surface2:  #1c1c1c;
    --border-color: #2a2a2a;
}
body:not(.light-theme) .top-bar,
body:not(.light-theme) .header {
    background: rgba(12, 12, 12, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom-color: rgba(255, 70, 85, 0.18);
}
body:not(.light-theme) .modal-box {
    border-color: #333;
    box-shadow: 0 0 0 1px rgba(255, 70, 85, 0.08), 0 12px 40px rgba(0, 0, 0, 0.7);
}
body:not(.light-theme) .friend-card { background: var(--bg-surface); border-color: var(--border-color); }
body:not(.light-theme) .friend-card:hover { background: var(--bg-surface2); border-color: #333; }
body:not(.light-theme) .ad-banner-skyscraper {
    background-color: rgba(21, 21, 21, 0.7);
    border-color: rgba(255, 70, 85, 0.22);
}

/* S2G moru (#710193 = 113,1,147): yalnızca S2Gdle oyun ekranında (dle.js openDle → html.s2g-smoke) */
html.s2g-smoke::before {
    background:
        radial-gradient(40% 35% at 10% 12%, rgba(113, 1, 147, 0.45), transparent 70%),
        radial-gradient(35% 40% at 92% 88%, rgba(113, 1, 147, 0.40), transparent 70%);
}
html.s2g-smoke::after {
    background:
        radial-gradient(30% 30% at 88% 15%, rgba(113, 1, 147, 0.38), transparent 70%),
        radial-gradient(35% 30% at 12% 85%, rgba(113, 1, 147, 0.35), transparent 70%);
}