/*
 * Vampir Köylü · temalı sürüm (deneme)
 * Arka planda yaşayan bir köy: gökyüzü aşamaya göre değişir.
 *   gece   → lacivert gök, yıldızlar, ay; pencerelerde fener ışığı
 *   gündüz → sabah göğü, güneş, bulutlar
 *   oylama → kızıl akşam, yükselen közler
 *   bitti  → altın ışık
 * Aynı sahne dili orta panelin aşama başlığında ve bildirim ekranlarında kullanılır.
 * Bu dosya yalnız /app-tema/ sürümünde yüklenir; asıl sürüm (/) etkilenmez.
 */

/* ---------- aşamaya göre arayüz renkleri ---------- */
:root {
  --pt: 1.4s;
  --surface-a: 80%;
}
html[data-phase='gece'], html[data-phase='menu'], html[data-phase='lobby'] {
  --bg: #060a16;
  --surface: #10172a;
  --surface-2: #161f37;
  --surface-3: #1f2944;
  --border: #222d49;
  --border-2: #2e3a5c;
}
html[data-phase='gun'] {
  --bg: #0d1520;
  --surface: #181c25;
  --surface-2: #21252f;
  --surface-3: #2b303b;
  --border: #31363f;
  --border-2: #40454f;
  --accent: #f6b94a;
}
html[data-phase='oylama'] {
  --bg: #12070b;
  --surface: #1c1317;
  --surface-2: #26191f;
  --surface-3: #322128;
  --border: #3d262e;
  --border-2: #51323c;
  --accent: #ff8a57;
  --accent-soft: rgba(255, 138, 87, .15);
}
html[data-phase='bitti'] {
  --surface: #1b1820;
  --surface-2: #24202a;
  --surface-3: #2e2935;
  --border: #393240;
  --border-2: #4a4152;
  --accent: #f0c26a;
}

body { background: var(--bg); transition: background-color var(--pt); }
.view { position: relative; z-index: 1; }
.v-auth { background: transparent; }

/* paneller cam gibi: gökyüzü arkadan hissedilir */
.panel, .topbar, .card, .auth-card {
  background: color-mix(in srgb, var(--surface) var(--surface-a), transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  transition: background-color var(--pt), border-color var(--pt);
}
.topbar { background: color-mix(in srgb, var(--surface) 62%, transparent); border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); }
.panel { border-color: color-mix(in srgb, var(--border-2) 75%, transparent); }
.ac, .tcard, .events, .feed li, .flow li, .stage-note { transition: background-color var(--pt), border-color var(--pt); }

/* ---------- sahne ---------- */
.scene {
  --sun-y: 420%;
  --moon-y: 0%;
  --stars: 1;
  --cloud: .18;
  --win: 1;
  --town: #03050b;
  --hill: #0a1022;
  --embers: 0;
  --sun-o: 0;
  --moon-o: 1;
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.sky { position: fixed; inset: 0; z-index: 0; }
.sl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.l-night { background: radial-gradient(ellipse 55% 45% at 78% 12%, rgba(128, 150, 230, .2), transparent 62%), linear-gradient(#050914, #0d1430 52%, #1b2149); }
.l-day { background: radial-gradient(ellipse 45% 55% at 22% 26%, rgba(255, 220, 150, .55), transparent 62%), linear-gradient(#24527f, #5f93bf 52%, #efbf8a); }
.l-vote { background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(255, 112, 56, .5), transparent 62%), linear-gradient(#14070f, #42131e 52%, #a8402a); }
.l-end { background: radial-gradient(ellipse 60% 55% at 50% 30%, rgba(255, 214, 140, .45), transparent 62%), linear-gradient(#251d3c, #7d5236 55%, #edc070); }

.stars { position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; opacity: var(--stars); transition: opacity 1.6s ease; }
.sky .stars { animation: twinkle 7s ease-in-out infinite; }
.sky .stars.far { animation-duration: 11s; animation-delay: -4s; }

.scene .sun { position: absolute; left: 18%; top: 14%; width: 96px; height: 96px; transform: translateY(var(--sun-y)); opacity: var(--sun-o); transition: transform 2.6s cubic-bezier(.2, .7, .2, 1), opacity 1.6s; }
.scene .sun::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #fffbe6, #ffe08a 45%, #f6a64b); box-shadow: 0 0 60px 18px rgba(255, 196, 102, .45), 0 0 140px 50px rgba(255, 170, 80, .22); }
.scene .sun i { position: absolute; inset: -60%; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 226, 150, .18) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.sky .sun i { animation: spin 90s linear infinite; }
.scene .moon { position: absolute; right: 14%; top: 10%; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f8faff, #d4dcf3 55%, #a9b5d8); box-shadow: 0 0 50px 10px rgba(200, 214, 255, .28), 0 0 120px 40px rgba(150, 170, 240, .12); transform: translateY(var(--moon-y)); opacity: var(--moon-o); transition: transform 2.6s cubic-bezier(.2, .7, .2, 1), opacity 1.6s; }
.scene .moon::after { content: ''; position: absolute; width: 22%; height: 22%; left: 52%; top: 46%; border-radius: 50%; background: rgba(150, 162, 200, .35); box-shadow: -26px -14px 0 -3px rgba(150, 162, 200, .3), -8px 14px 0 -5px rgba(150, 162, 200, .25); }

.cloud { position: absolute; width: 300px; height: 90px; opacity: var(--cloud); transition: opacity 1.8s ease;
  background: radial-gradient(closest-side at 30% 62%, #fff 70%, transparent 72%), radial-gradient(closest-side at 52% 45%, #fff 70%, transparent 72%), radial-gradient(closest-side at 72% 62%, #fff 70%, transparent 72%), radial-gradient(closest-side at 50% 78%, #fff 72%, transparent 74%);
  filter: blur(1.5px); }
.c1 { top: 12%; left: 8%; transform: scale(.9); }
.c2 { top: 22%; left: 52%; transform: scale(1.15); }
.c3 { top: 6%; left: 76%; transform: scale(.7); }
.sky .cloud { animation: drift 140s linear infinite; }
.sky .c2 { animation-duration: 190s; animation-delay: -60s; }
.sky .c3 { animation-duration: 160s; animation-delay: -110s; }

.embers { position: absolute; inset: 0; opacity: var(--embers); transition: opacity 1.4s ease; }
.embers i { position: absolute; left: var(--x); bottom: 18%; width: 4px; height: 4px; border-radius: 50%; background: #ffb066; box-shadow: 0 0 8px 2px rgba(255, 140, 70, .7); animation: ember var(--s) var(--d) linear infinite; }

.village { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; }
.sky .village { height: 30vh; min-height: 160px; }
.village .town { fill: var(--town); transition: fill 1.8s ease; }
.village .hill { fill: var(--hill); transition: fill 1.8s ease; }
.village .win { fill: #ffcf73; opacity: var(--win); filter: drop-shadow(0 0 4px rgba(255, 190, 90, .9)); transition: opacity 1.2s ease var(--d); }

/* ---------- durumlar ---------- */
/* gece (varsayılan değişkenler) */
html[data-phase='gece'] #sky .l-night, html[data-phase='menu'] #sky .l-night, html[data-phase='lobby'] #sky .l-night,
.s-gece .l-night, .s-results .l-night, .s-night .l-night { opacity: 1; }
html[data-phase='lobby'] #sky .l-vote { opacity: .28; }
html[data-phase='lobby'] #sky { --win: .75; --stars: .8; }

/* gündüz */
html[data-phase='gun'] #sky, .s-gun, .s-event, .s-morning {
  --sun-y: 0%; --moon-y: 520%; --sun-o: 1; --moon-o: 0; --stars: 0; --cloud: .82; --win: 0; --town: #182231; --hill: #3a5571;
}
html[data-phase='gun'] #sky .l-day, .s-gun .l-day, .s-event .l-day, .s-morning .l-day { opacity: 1; }

/* oylama */
html[data-phase='oylama'] #sky, .s-oylama, .s-vote, .s-tally {
  --sun-y: 230%; --moon-y: 520%; --sun-o: 1; --moon-o: 0; --stars: .25; --cloud: .3; --win: .55; --town: #10060a; --hill: #3a131a; --embers: 1;
}
html[data-phase='oylama'] #sky .l-vote, .s-oylama .l-vote, .s-vote .l-vote, .s-tally .l-vote { opacity: 1; }
.scene .sun { filter: none; transition: transform 2.6s cubic-bezier(.2, .7, .2, 1), opacity 1.6s, filter 1.6s; }
html[data-phase='oylama'] #sky .sun, .s-oylama .sun, .s-vote .sun, .s-tally .sun { filter: hue-rotate(-18deg) saturate(1.4); }

/* oyun sonu */
html[data-phase='bitti'] #sky, .s-bitti, .s-end {
  --sun-y: 60%; --moon-y: 520%; --sun-o: 1; --moon-o: 0; --stars: .35; --cloud: .55; --win: .45; --town: #170f18; --hill: #57373a;
}
html[data-phase='bitti'] #sky .l-end, .s-bitti .l-end, .s-end .l-end { opacity: 1; }

/* ---------- orta panel: aşama başlığı sahnenin içinde ---------- */
.phase-head { position: relative; overflow: hidden; background: none !important; min-height: 92px; border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent); }
.phase-head > :not(.ph-sky) { position: relative; z-index: 1; }
.ph-sky { opacity: .95; }
.ph-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 16, .78) 0%, rgba(5, 8, 16, .35) 45%, rgba(5, 8, 16, .2) 70%, rgba(5, 8, 16, .55) 100%); }
.ph-sky .sun { width: 46px; height: 46px; left: auto; right: 34%; top: 14%; }
.ph-sky .moon { width: 34px; height: 34px; right: 30%; top: 16%; }
.ph-sky .cloud { width: 150px; height: 46px; }
.ph-sky .village { height: 100%; }
.ph-sky .sun i { display: none; }
.phase-head .ph-ic { background: rgba(255, 255, 255, .08) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.phase-head .ph-title { font-size: 30px; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.phase-head .ph-sub { color: rgba(236, 240, 248, .82); }
.ph-clock span { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }

/* ---------- bildirim ekranları: büyük, sahneli ---------- */
.popup { background: rgba(3, 5, 10, .58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.pop-card { width: min(880px, 100%); border-radius: 22px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.pop-card .pop-scene { display: block; position: relative; inset: auto; height: 230px; flex: none; }
.pop-card .pop-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--surface) 94%, transparent)); }
.pop-scene .sun { width: 84px; height: 84px; left: 44%; top: 22%; }
.pop-scene .moon { width: 64px; height: 64px; right: 24%; top: 16%; }
.pop-scene .village { height: 44%; }
.pop-head { border-bottom: 0; padding: 0 28px 4px !important; margin-top: -52px; position: relative; z-index: 1; }
.pop-head .ph-ic { display: none; }
.pop-head h2 { font-size: 40px !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.pop-ttl p { font-size: 15px; }
.pop-body { padding: 14px 28px 18px; }
.pop-foot { border-top: 0; padding: 4px 28px 24px; }
.pop-results .pop-scene, .pop-event .pop-scene, .pop-tally .pop-scene { height: 170px; }

/* sabah: bulutlar dağılır, güneş doğar */
.s-morning .l-night { opacity: 1; animation: fadeOut 2.4s .35s ease forwards; }
.s-morning .l-day { opacity: 0; animation: fadeIn 2.4s .35s ease forwards; }
.s-morning .sun { opacity: 1; animation: rise 2.8s .25s cubic-bezier(.16, .8, .25, 1) both; }
.s-morning .sun i { animation: spin 40s linear infinite, fadeIn 2s 1.6s both; }
.s-morning .moon { opacity: 1; animation: sink 1.8s ease-in both; }
.s-morning .stars { animation: fadeOut 1.6s ease both; }
.s-morning .c1 { left: 30%; top: 18%; animation: partLeft 3.2s .4s cubic-bezier(.3, .6, .2, 1) both; }
.s-morning .c2 { left: 46%; top: 24%; animation: partRight 3.2s .4s cubic-bezier(.3, .6, .2, 1) both; }
.s-morning .c3 { animation: fadeIn 2s 1s both; }
.s-morning .win { opacity: 1; animation: fadeOut .8s calc(.6s + var(--d)) ease forwards; }
.s-morning .town { animation: townDay 2.6s .3s ease both; }
.s-morning .hill { animation: hillDay 2.6s .3s ease both; }

/* gece: güneş batar, ay doğar, pencereler tek tek yanar */
.s-night { --cloud: .14; }
.s-night .l-day { opacity: 1; animation: fadeOut 2.4s .3s ease forwards; }
.s-night .l-night { opacity: 0; animation: fadeIn 2.4s .3s ease forwards; }
.s-night .sun { opacity: 1; animation: sink 2.4s .1s ease-in both; }
.s-night .moon { opacity: 1; animation: rise 2.8s .9s cubic-bezier(.16, .8, .25, 1) both; }
.s-night .stars { animation: fadeIn 2.4s 1.1s ease both, twinkle 6s 3.5s ease-in-out infinite; }
.s-night .win { opacity: 0; animation: fadeIn .6s calc(1.4s + var(--d) * 2) ease forwards; }
.s-night .town { animation: townNight 2.6s .3s ease both; }
.s-night .hill { animation: hillNight 2.6s .3s ease both; }

/* oylama: kızıl ufuk, közler */
.s-vote .l-vote { animation: glow 3.2s ease-in-out infinite; }
.s-vote .embers, .s-oylama .embers, .s-tally .embers { opacity: 1; }
/* oyun sonu: ışık */
.s-end .stars { animation: twinkle 2.4s ease-in-out infinite; }
.s-end .sun { opacity: 1; animation: rise 2.6s .2s cubic-bezier(.16, .8, .25, 1) both; }

@keyframes twinkle { 0%, 100% { opacity: var(--stars); } 50% { opacity: calc(var(--stars) * .55); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { translate: -40vw 0; } to { translate: 120vw 0; } }
@keyframes ember { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-220px) translateX(20px) scale(.4); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise { from { transform: translateY(420%); } to { transform: translateY(0); } }
@keyframes sink { from { transform: translateY(0); } to { transform: translateY(520%); } }
@keyframes partLeft { 0% { transform: translateX(0) scale(1.1); opacity: .9; filter: blur(1.5px) brightness(.38); } 100% { transform: translateX(-190%) scale(.9); opacity: .8; filter: blur(1.5px) brightness(1); } }
@keyframes partRight { 0% { transform: translateX(0) scale(1.2); opacity: .9; filter: blur(1.5px) brightness(.38); } 100% { transform: translateX(190%) scale(1); opacity: .8; filter: blur(1.5px) brightness(1); } }
@keyframes townDay { from { fill: #03050b; } to { fill: #182231; } }
@keyframes hillDay { from { fill: #0a1022; } to { fill: #3a5571; } }
@keyframes townNight { from { fill: #182231; } to { fill: #03050b; } }
@keyframes hillNight { from { fill: #3a5571; } to { fill: #0a1022; } }
@keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18) saturate(1.1); } }

@media (max-width: 900px) {
  .pop-card .pop-scene { height: 160px; }
  .pop-head { margin-top: -40px; }
  .pop-head h2 { font-size: 30px !important; }
  .ph-sky .sun, .ph-sky .moon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene { animation: none !important; transition: none !important; }
  .s-morning .l-night, .s-night .l-day { opacity: 0; }
  .s-morning .l-day, .s-night .l-night, .s-morning .sun, .s-night .moon { opacity: 1; }
}

/* sayfa göğü: ay ve güneş üst çubuğun altında kalsın; üst çubuk daha az saydam */
.sky .moon { top: 18vh; right: 26%; }
.sky .sun { top: 16vh; left: 22%; }
.sky .c1 { top: 22vh; }
.sky .c2 { top: 30vh; }
.sky .c3 { top: 14vh; }
.topbar { background: color-mix(in srgb, var(--surface) 86%, transparent); }

/* köy: katmanlar, çit, değirmen */
.village .far { fill: var(--hill); transition: fill 1.8s ease; }
.village .mid { fill: var(--town); }
.village .rail { stroke: var(--town); fill: none; transition: stroke 1.8s ease; }
.village .win.lamp { filter: drop-shadow(0 0 6px rgba(255, 190, 90, 1)); }
.scene .blades { animation: spin 40s linear infinite; }
.sky .village { height: 34vh; min-height: 180px; }
.pop-scene .village { height: 52%; }
.s-morning .rail { animation: railDay 2.6s .3s ease both; }
.s-night .rail { animation: railNight 2.6s .3s ease both; }
@keyframes railDay { from { stroke: #03050b; } to { stroke: #182231; } }
@keyframes railNight { from { stroke: #182231; } to { stroke: #03050b; } }
@media (prefers-reduced-motion: reduce) { .scene .blades { animation: none; } }