/* =====================================================================
   DAVRA — kino uslubi «Sharqona tun»
   ===================================================================== */
#bg.cine { background: #07040f; overflow: hidden; --far: #1a1236; --near: #0c0718; --win: #ffcf6e; --arch: #2a1e52; }
#bg.cine > * { position: absolute; }
.cs-sky { inset: 0; opacity: 0; transition: opacity 2.4s ease; }
.s-night { background: radial-gradient(120% 70% at 75% 0%, #2d1f66 0%, #150c33 45%, #07040f 100%); opacity: 1; }
.s-dawn { background: linear-gradient(180deg, #2b1a55 0%, #7b2f63 38%, #e0694e 66%, #ffc276 88%); }
.s-day { background: linear-gradient(180deg, #3a2a78 0%, #8a5ab8 30%, #e8a26a 72%, #ffd59a 100%); }
.s-dusk { background: linear-gradient(180deg, #12061d 0%, #4a0f2b 40%, #a3243a 75%, #e2603f 100%); }
body[data-sky='dawn'] .s-dawn { opacity: 1; }
body[data-sky='day'] .s-day { opacity: 1; }
body[data-sky='dusk'] .s-dusk { opacity: 1; }

.cs-stars { inset: 0; transition: opacity 2s; }
.cs-stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff6dd; box-shadow: 0 0 6px #fff6dd; animation: twinkle var(--t) ease-in-out var(--dl) infinite; }
@keyframes twinkle { 50% { opacity: 0.25; transform: scale(0.7); } }
body[data-sky='day'] .cs-stars, body[data-sky='dawn'] .cs-stars { opacity: 0; }
body[data-sky='dusk'] .cs-stars { opacity: 0.35; }

.cs-moon { right: 8%; bottom: calc(42vh - 24px); width: min(22vw, 96px); aspect-ratio: 1; filter: drop-shadow(0 0 24px rgba(255, 236, 190, 0.65)) drop-shadow(0 0 70px rgba(180, 160, 255, 0.35)); transition: transform 3s ease, opacity 2s; animation: moonFloat 9s ease-in-out infinite; }
@keyframes moonFloat { 50% { translate: 0 6px; } }
.cs-moon svg { width: 100%; height: 100%; }
body[data-sky='day'] .cs-moon, body[data-sky='dawn'] .cs-moon { opacity: 0; transform: translateY(-40px); }
body[data-sky='dusk'] .cs-moon { opacity: 0.55; filter: drop-shadow(0 0 20px rgba(255, 120, 120, 0.6)); }

.cs-sun { left: 50%; top: 60%; width: 46vmin; height: 46vmin; margin-left: -23vmin; border-radius: 50%; background: radial-gradient(circle, #fff1c9 0%, #ffd27a 22%, rgba(255, 170, 90, 0.45) 40%, transparent 68%); opacity: 0; transform: translateY(30vh); transition: transform 3.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 2.4s; }
body[data-sky='dawn'] .cs-sun { opacity: 0.95; transform: translateY(4vh); }
body[data-sky='day'] .cs-sun { opacity: 0.85; transform: translateY(-38vh); }
body[data-sky='dusk'] .cs-sun { opacity: 0.8; transform: translateY(14vh); filter: hue-rotate(-25deg) saturate(1.4); }

.cs-fog { left: -20%; right: -20%; bottom: 8%; height: 26%; background: radial-gradient(50% 50% at 30% 60%, rgba(150, 130, 220, 0.18), transparent 70%), radial-gradient(40% 50% at 75% 50%, rgba(150, 130, 220, 0.14), transparent 70%); animation: fog 26s ease-in-out infinite alternate; transition: opacity 2s; }
@keyframes fog { to { transform: translateX(10%); } }
body[data-sky='day'] .cs-fog { opacity: 0; }

.cs-city { left: 0; right: 0; bottom: 0; width: 100%; height: 42vh; }
.cs-city .far { fill: var(--far); transition: fill 2.4s; }
.cs-city .far .arch { fill: var(--arch); transition: fill 2.4s; }
.cs-city .far .dome { fill: var(--far); }
.cs-city .near { fill: var(--near); transition: fill 2.4s; }
.cs-city .win { fill: var(--win); animation: winOff 1.2s ease var(--d) forwards; transition: opacity 1.5s; }
.cs-city .far-l .win { opacity: 0.75; }
@keyframes winFlick { 50% { fill-opacity: 0.7; } }
@keyframes winOff { to { opacity: 0.08; } }
body[data-phase='reveal'] .cs-city .win { animation: none; }
body[data-sky='day'] .cs-city .win, body[data-sky='dawn'] .cs-city .win { opacity: 0 !important; animation: none; }
body[data-sky='dusk'] .cs-city .win { animation: none; opacity: 0.85; }
body[data-sky='day'] #bg.cine, body[data-sky='dawn'] #bg.cine { --far: #6b3f6e; --near: #2c1530; --arch: #8e5a7c; }
body[data-sky='dusk'] #bg.cine { --far: #3a0f22; --near: #14040b; --arch: #5a1a32; --win: #ff9b6a; }

.cs-flies { inset: 0; transition: opacity 2s; }
.cs-flies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f8f19a; box-shadow: 0 0 8px 2px rgba(248, 241, 154, 0.7); animation: fly var(--t) ease-in-out var(--dl) infinite; opacity: 0; }
@keyframes fly { 0%, 100% { opacity: 0; transform: none; } 30%, 70% { opacity: 0.9; } 50% { transform: translate(var(--dx), var(--dy)); } }
body[data-sky='day'] .cs-flies, body[data-sky='dawn'] .cs-flies, body[data-sky='dusk'] .cs-flies { opacity: 0; }
.cs-vign { inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.6) 100%); }
/* kino donachalari (grain) */
#bg.cine::after { content: ''; position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ---------- o‘yin ekrani mafiya kino rejimida ---------- */
body.cine-on .phase h2 { font-size: 24px; letter-spacing: 0.02em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
body.cine-on .bar { background: linear-gradient(to bottom, rgba(7, 4, 15, 0.85), transparent); }
body.cine-on .table-ros { opacity: 0.35; filter: saturate(0.6); }
body.cine-on .table-c { background: radial-gradient(circle at 50% 35%, rgba(42, 26, 80, 0.92), rgba(7, 4, 15, 0.95)); border: 1.5px solid rgba(242, 181, 68, 0.6); box-shadow: 0 0 0 5px rgba(7, 4, 15, 0.5), 0 0 50px -6px rgba(255, 220, 150, 0.45), inset 0 0 30px rgba(0, 0, 0, 0.6); }
body.cine-on .tc-art { width: 62%; margin: 0 auto; display: block; }
body.cine-on .tc-art.moon { filter: drop-shadow(0 0 10px rgba(255, 236, 190, 0.7)); animation: moonFloat 6s ease-in-out infinite; }
body.cine-on .tc-art.sun { animation: spinSlow 30s linear infinite; filter: drop-shadow(0 0 12px rgba(255, 200, 100, 0.8)); }
@keyframes spinSlow { to { transform: rotate(360deg); } }
body.cine-on .tc-t { font-size: 10.5px; margin-top: 2px; }
body.cine-on .tc-t b { color: var(--milk); }
body.cine-on .tc-t .red { color: #ff6b7e; }
body.cine-on .seat .nm { background: rgba(7, 4, 15, 0.78); border: 1px solid rgba(242, 181, 68, 0.18); }
body.cine-on .seat .av { box-shadow: 0 0 0 2px rgba(242, 181, 68, 0.35), 0 6px 18px rgba(0, 0, 0, 0.6); }
body.cine-mafia[data-phase='night'] .seat:not(.me):not(.can) .av { filter: brightness(0.7) saturate(0.7); }
body.cine-on .seat.can .av { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(242, 181, 68, 0.5); animation: canPulseG 1.8s ease-in-out infinite; }
body.cine-mafia[data-phase='night'] .seat.can .av { box-shadow: 0 0 0 2px #ff6b7e, 0 0 18px rgba(226, 54, 79, 0.55); animation: canPulse 1.8s ease-in-out infinite; }
@keyframes canPulseG { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 28px rgba(242, 181, 68, 0.8); } }
@keyframes canPulse { 50% { box-shadow: 0 0 0 3px #ff6b7e, 0 0 28px rgba(226, 54, 79, 0.85); } }
body.cine-on .seat.pick .av { box-shadow: 0 0 0 3px #fff3d6, 0 0 0 6px var(--acc), 0 0 34px var(--acc); transform: scale(1.1); animation: none; }
body.cine-on .seat.dead { animation: ghost 5s ease-in-out infinite; }
body.cine-on .seat.dead .av { filter: grayscale(1) brightness(0.4) contrast(1.2); opacity: 0.7; }
body.cine-on .seat.dead .av::after { content: ''; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 40%, rgba(120, 140, 255, 0.35)); }
body.cine-on .seat.dead .nm { text-decoration: line-through; opacity: 0.6; }
@keyframes ghost { 50% { translate: 0 -3px; } }
body.cine-on .panel.acc { background: linear-gradient(160deg, rgba(42, 20, 60, 0.88), rgba(14, 6, 24, 0.92)); border: 1px solid rgba(242, 181, 68, 0.35); backdrop-filter: blur(6px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
body.cine-on .panel.acc .hint { font-size: 15px; }
body.cine-on .prog span { background: rgba(7, 4, 15, 0.6); border: 1px solid rgba(242, 181, 68, 0.2); }
body.cine-on .prog span.done { background: rgba(61, 190, 110, 0.25); border-color: rgba(61, 190, 110, 0.6); }

/* ---------- rol kartasi (mehrob) ---------- */
.flip.rcard .face, .peek-pop .face.rcard { padding: 0; border: 0; background: none; overflow: hidden; border-radius: 22px; box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(242, 181, 68, 0.25); }
.rc-in { position: absolute; inset: 0; }
.rc-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 15% 14% 10%; text-align: center; }
.rc-emb { position: relative; display: grid; place-items: center; width: 54%; aspect-ratio: 1; margin-top: 4%; }
.rc-emb::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 150, 0.35), transparent 65%); animation: glow 3s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 0.45; transform: scale(0.92); } }
.rc-emb .emb { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); }
.flip.on .rc-emb .emb { animation: embIn 0.9s 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes embIn { from { transform: scale(0.4) rotate(-20deg); opacity: 0; } }
.rc-kick { margin-top: 6%; font-family: var(--display); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: #f2b544; opacity: 0.85; }
.rc-body h2 { font-size: clamp(24px, 8vw, 32px); margin-top: 4px; background: linear-gradient(180deg, #fff6dd 30%, #f2b544); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); }
.rc-body p { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 244, 230, 0.86); }
.rc-body .sub { font-family: var(--display); font-size: 13px; color: #f2b544; }
.rc-back { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 16%; }
.rc-back b { font-family: var(--display); font-size: 13px; letter-spacing: 0.06em; padding: 9px 16px; border-radius: 999px; background: rgba(13, 6, 32, 0.85); border: 1px solid rgba(242, 181, 68, 0.5); color: #ffe7a3; animation: tapHint 2s ease-in-out infinite; }
@keyframes tapHint { 50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(242, 181, 68, 0.4); } }
.flip.rcard { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)); }
.flip.rcard:not(.on) .flip-in { animation: cardFloat 4s ease-in-out infinite; }
@keyframes cardFloat { 50% { transform: translateY(-6px) rotateY(-4deg); } }
.flip.rcard.on .flip-in::after { content: ''; position: absolute; inset: 0; border-radius: 22px; transform: rotateY(180deg); background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.35) 45%, transparent 60%); background-size: 250% 100%; animation: shine 1.4s 0.5s ease both; pointer-events: none; }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* ---------- kino titrlari ---------- */
#announce.cine { background: rgba(4, 2, 10, 0.86); backdrop-filter: blur(3px); padding: 0; }
.cine-card { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.cine-card .lb { position: absolute; left: 0; right: 0; height: 11vh; background: #000; z-index: 2; transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1); }
.cine-card .lb.t { top: 0; transform: translateY(-100%); }
.cine-card .lb.b { bottom: 0; transform: translateY(100%); }
#announce.show .cine-card .lb { transform: none; }
.cc { position: relative; z-index: 3; text-align: center; padding: 0 26px; max-width: 460px; display: flex; flex-direction: column; align-items: center; }
.cc-kick { font-family: var(--display); font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: #f2b544; opacity: 0; animation: ccIn 0.8s 0.35s ease forwards; }
.cc-title { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 10.5vw, 52px); line-height: 1.05; margin-top: 10px; letter-spacing: 0.01em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff8e6 20%, #f2b544 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(242, 181, 68, 0.35)); opacity: 0; animation: ccTitle 1.1s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes ccTitle { from { opacity: 0; letter-spacing: 0.35em; filter: blur(8px); } to { opacity: 1; } }
@keyframes ccIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cc-div { width: 200px; margin-top: 14px; opacity: 0; animation: ccIn 0.8s 0.9s ease forwards; }
.cc-text { margin-top: 14px; font-size: 16px; line-height: 1.5; color: rgba(255, 244, 230, 0.85); font-style: italic; opacity: 0; animation: ccIn 0.9s 1.2s ease forwards; }
.cc-emb, .cc-moon { margin-top: 16px; opacity: 0; animation: ccEmb 1.2s 0.8s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
.cc-moon .tc-art { width: 96px; filter: drop-shadow(0 0 22px rgba(255, 236, 190, 0.8)); }
@keyframes ccEmb { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.cc-skip { position: absolute; bottom: calc(11vh + 12px); left: 0; right: 0; z-index: 3; text-align: center; font-size: 11px; color: rgba(255, 244, 230, 0.35); }
.k-night .cc-title { background: linear-gradient(180deg, #f0eaff 20%, #a98bff 100%); -webkit-background-clip: text; background-clip: text; }
.k-morning .cc-title, .k-verdict .cc-title { background: linear-gradient(180deg, #fff 10%, #ff8a9b 100%); -webkit-background-clip: text; background-clip: text; }
.k-vote .cc-title { animation: ccTitle 1.1s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, beat 0.9s 1.6s ease-in-out infinite; }
@keyframes beat { 15% { transform: scale(1.06); } 30% { transform: none; } 45% { transform: scale(1.04); } 60% { transform: none; } }
.k-win.mafia .cc-title, .k-open .cc-title { background: linear-gradient(180deg, #fff 0%, #ff5a6e 60%, #8a0f24 100%); -webkit-background-clip: text; background-clip: text; }
.k-open .cc-title { font-size: min(var(--fv, 16vw), var(--fs, 76px)); letter-spacing: 0.06em; }
.o-spy .cc-title { background: linear-gradient(180deg, #fff 0%, #7ff5e6 60%, #12857a 100%); -webkit-background-clip: text; background-clip: text; }
.o-bunker .cc-title { background: linear-gradient(180deg, #fff 0%, #e6ef6a 55%, #7a5a10 100%); -webkit-background-clip: text; background-clip: text; }
.o-tergov .cc-title { background: linear-gradient(180deg, #fff 0%, #b8c6ff 60%, #3a4a8a 100%); -webkit-background-clip: text; background-clip: text; }
.o-orol .cc-title { background: linear-gradient(180deg, #fff 0%, #ffd27a 55%, #2ec4b6 100%); -webkit-background-clip: text; background-clip: text; }
.o-quiz .cc-title { background: linear-gradient(180deg, #fff 0%, #c9b6ff 55%, #6a3bd6 100%); -webkit-background-clip: text; background-clip: text; }
.k-win.town .cine-card, .k-win.town { background: radial-gradient(70% 50% at 50% 60%, rgba(255, 190, 90, 0.25), transparent 70%); }
.k-win.mafia { background: radial-gradient(70% 50% at 50% 60%, rgba(226, 54, 79, 0.28), transparent 70%); }

.cc-dead { display: flex; gap: 18px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.cc-victim { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; animation: ccEmb 1s 0.9s ease forwards; }
.cc-victim b { font-family: var(--display); font-size: 15px; }
.cc-por { position: relative; padding: 5px; border-radius: 50% 50% 18px 18px / 40% 40% 18px 18px; background: linear-gradient(160deg, #ffe7a3, #8a5a12); }
.cc-por .av { --s: 92px; border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px; }
.cc-por .av img, .cc-por .av { border-radius: inherit; }
.cc-por.dead .av { animation: drain 2.4s 1.2s ease forwards; }
@keyframes drain { to { filter: grayscale(1) brightness(0.55) contrast(1.15); } }
.cc-smoke { position: absolute; top: -18px; left: 50%; width: 6px; height: 30px; margin-left: -3px; border-radius: 50%; background: linear-gradient(to top, rgba(220, 220, 255, 0.5), transparent); filter: blur(3px); animation: smoke 3s 1.4s ease-out infinite; opacity: 0; }
@keyframes smoke { 0% { opacity: 0; transform: translateY(10px) scaleX(1); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-30px) scaleX(3) rotate(8deg); } }
.cc-role { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(242, 181, 68, 0.35); }
.cc-role .emb { width: 24px; height: 24px; }
.cc-victim.big .cc-por .av { --s: 124px; }
.cc-stamp { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg) scale(2.4); padding: 6px 14px; border: 3px solid #ff3b55; border-radius: 8px; color: #ff3b55; font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: 0.1em; background: rgba(20, 0, 6, 0.45); opacity: 0; animation: stamp 0.45s 1.5s cubic-bezier(0.5, 0, 0.6, 1.6) forwards; }
@keyframes stamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
.cc-was { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; padding: 6px 14px 6px 8px; border-radius: 999px; opacity: 0; animation: ccIn 0.8s 2.1s ease forwards; }
.cc-was .emb { width: 30px; height: 30px; }
.cc-was.m { background: rgba(226, 54, 79, 0.2); border: 1px solid rgba(226, 54, 79, 0.6); }
.cc-was.t { background: rgba(61, 190, 110, 0.16); border: 1px solid rgba(61, 190, 110, 0.5); }
.cc-was b { font-family: var(--display); }

/* ovoz tugmasi */
.ib.snd-off { opacity: 0.55; }

/* ================= sahna turlari ================= */
/* josus: feruza-noir shahar */
#bg.t-spy { --far: #0b2a33; --near: #03121a; --arch: #0f3c47; --win: #7ff5e6; }
#bg.t-spy .s-night { background: radial-gradient(120% 70% at 75% 0%, #0f4a55 0%, #06222b 45%, #02090d 100%); }
#bg.t-spy .s-dusk { background: linear-gradient(180deg, #050b14 0%, #0d2a3a 40%, #1e6f72 78%, #8fe3da 100%); }
/* tergov: yomg‘irli noir */
#bg.t-rain { --far: #161a2a; --near: #070912; --arch: #22283e; --win: #ffd79a; filter: saturate(0.6); }
.cs-rain { inset: 0; }
.cs-rain i { position: absolute; top: -10%; width: 1.5px; height: 70px; background: linear-gradient(to bottom, transparent, rgba(190, 210, 255, var(--o))); transform: rotate(12deg); animation: rain var(--t) linear var(--dl) infinite; }
@keyframes rain { to { transform: translate(-60px, 120vh) rotate(12deg); } }
#bg.t-rain::before { content: ''; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; animation: flash 11s 3s infinite; pointer-events: none; }
@keyframes flash { 0%, 92%, 100% { opacity: 0; } 93% { opacity: 0.22; } 94% { opacity: 0; } 95.5% { opacity: 0.12; } }
/* bunker: kulrang-qizil osmon, kul yog‘adi */
#bg.t-ash { --far: #2a1410; --near: #0e0605; --arch: #3a1a12; --win: #ff7a3a; }
#bg.t-ash .s-dusk { background: linear-gradient(180deg, #120a0a 0%, #3a1712 35%, #8a2d16 70%, #e2603f 92%, #ffb36b 100%); }
#bg.t-ash .cs-moon { display: none; }
.cs-ash { inset: 0; }
.cs-ash i { position: absolute; top: -5%; width: 4px; height: 4px; border-radius: 50%; background: rgba(220, 210, 200, var(--o)); filter: blur(0.5px); animation: ash var(--t) linear var(--dl) infinite; }
@keyframes ash { to { transform: translate(var(--dx), 110vh) rotate(360deg); } }
/* orol */
.cs-isle { left: 0; right: 0; bottom: 14vh; width: 100%; height: 34vh; }
.cs-isle .isle { fill: #1c1430; transition: fill 2s; }
.cs-isle .palms { fill: #120c22; transition: fill 2s; }
.cs-isle .fire path { fill: #ffb347; filter: drop-shadow(0 0 8px #ff7a2a); transform-origin: 274px 170px; animation: fire 0.6s ease-in-out infinite alternate; opacity: 0; transition: opacity 1s; }
@keyframes fire { to { transform: scaleY(1.25) scaleX(0.9); } }
body[data-sky='night'] .cs-isle .fire path, body[data-sky='dusk'] .cs-isle .fire path { opacity: 1; }
body[data-sky='day'] .cs-isle .isle { fill: #3a2a3a; } body[data-sky='day'] .cs-isle .palms { fill: #22183a; }
.cs-sea { left: 0; right: 0; bottom: 0; height: 15vh; background: linear-gradient(180deg, #1d2a5a, #0a0e24); overflow: hidden; transition: background 2s; }
body[data-sky='day'] .cs-sea { background: linear-gradient(180deg, #2f80ed, #12306e); }
body[data-sky='dawn'] .cs-sea { background: linear-gradient(180deg, #c45a6a, #2a1640); }
body[data-sky='dusk'] .cs-sea { background: linear-gradient(180deg, #8a2a3a, #1a0a1a); }
.cs-sea i { position: absolute; left: -50%; right: -50%; height: 3px; border-radius: 3px; background: rgba(255, 244, 230, 0.18); animation: wave 7s ease-in-out infinite alternate; }
.cs-sea i:nth-child(1) { top: 18%; } .cs-sea i:nth-child(2) { top: 45%; animation-delay: -2s; opacity: 0.7; } .cs-sea i:nth-child(3) { top: 72%; animation-delay: -4s; opacity: 0.5; }
@keyframes wave { to { transform: translateX(14%); } }
#bg.sc-isle .cs-moon { bottom: auto; top: 8%; }
/* viktorina: sahna */
.st-back { inset: 0; background: radial-gradient(80% 60% at 50% 100%, #3a1a6e 0%, #150a2e 60%, #07040f 100%); }
.st-beam { top: -10%; width: 34vw; height: 120vh; transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(255, 240, 200, 0.28), transparent 85%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); mix-blend-mode: screen; animation: beam 7s ease-in-out infinite alternate; }
.st-beam.b1 { left: 4%; --a: -22deg; --b: 8deg; }
.st-beam.b2 { left: 33%; --a: -10deg; --b: 12deg; background: linear-gradient(to bottom, rgba(169, 139, 255, 0.32), transparent 85%); animation-duration: 9s; }
.st-beam.b3 { right: 4%; --a: 22deg; --b: -8deg; background: linear-gradient(to bottom, rgba(46, 196, 182, 0.28), transparent 85%); animation-duration: 8s; }
@keyframes beam { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
.st-lights { left: 0; right: 0; top: 0; height: 18px; display: flex; justify-content: space-around; }
.st-lights i { width: 8px; height: 8px; border-radius: 50%; background: #ffe7a3; box-shadow: 0 0 12px #ffcf6e; animation: bulb 1.2s ease-in-out calc(var(--i) * 0.1s) infinite alternate; }
@keyframes bulb { to { opacity: 0.3; } }
.st-crowd { left: 0; right: 0; bottom: 0; width: 100%; height: 22vh; fill: #07040f; }
/* choyxona */
#bg.sc-choy { background: #1a0e08; }
.ch-wall { inset: 0; background: radial-gradient(70% 45% at 50% 12%, rgba(255, 190, 110, 0.32), transparent 70%), linear-gradient(180deg, #3a1d10 0%, #24120a 60%, #160a05 100%); }
.ch-suzani { inset: 0; opacity: 0.07; background-size: 72px 72px; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 85%); mask-image: linear-gradient(to bottom, #000 40%, transparent 85%); }
.ch-lamp { top: -4px; width: 46px; transform-origin: 50% 0; animation: sway 5s ease-in-out var(--d) infinite alternate; }
.ch-lamp svg { width: 100%; display: block; filter: drop-shadow(0 0 14px rgba(255, 180, 90, 0.7)); }
.ch-lamp i { position: absolute; left: 50%; top: 60%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 110, 0.22), transparent 65%); animation: lampGlow 3s ease-in-out infinite alternate; }
@keyframes sway { from { transform: translateX(-50%) rotate(-3deg); } to { transform: translateX(-50%) rotate(3deg); } }
@keyframes lampGlow { to { opacity: 0.7; } }
.ch-floor { left: 0; right: 0; bottom: 0; height: 22vh; background: repeating-linear-gradient(90deg, #2a160b 0 64px, #24130a 64px 66px, #2e180c 66px 130px, #20100a 130px 132px), linear-gradient(#2a160b, #1a0d06); box-shadow: inset 0 18px 30px rgba(0, 0, 0, 0.6); }
.ch-steam { left: 50%; bottom: 18vh; width: 40px; height: 80px; margin-left: -20px; }
.ch-steam i { position: absolute; bottom: 0; left: 50%; width: 8px; height: 50px; border-radius: 50%; background: linear-gradient(to top, rgba(255, 240, 220, 0.25), transparent); filter: blur(4px); animation: smoke 4s ease-out infinite; }
.ch-steam i:nth-child(2) { animation-delay: -1.3s; left: 30%; } .ch-steam i:nth-child(3) { animation-delay: -2.6s; left: 70%; }
/* yakka o‘yinlar */
.au-back { inset: 0; background: radial-gradient(90% 60% at 50% 0%, #2d1a63 0%, #12082a 55%, #07040f 100%); }
.au-glow { width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: 0.35; animation: auro 18s ease-in-out infinite alternate; }
.au-glow.g1 { left: -30vmax; top: -20vmax; background: #a98bff; }
.au-glow.g2 { right: -30vmax; bottom: -30vmax; background: #2ec4b6; animation-duration: 23s; }
@keyframes auro { to { transform: translate(12vmax, 10vmax) scale(1.15); } }
.au-stars { inset: 0; }
.au-stars svg { position: absolute; width: var(--s); height: var(--s); fill: none; stroke-width: 2.5; animation: drift var(--t) linear var(--dl) infinite; opacity: 0.22; }
.au-stars svg:nth-child(4n) { stroke: #f2b544; } .au-stars svg:nth-child(4n+1) { stroke: #a98bff; } .au-stars svg:nth-child(4n+2) { stroke: #2ec4b6; } .au-stars svg:nth-child(4n+3) { stroke: #e2364f; }
@keyframes drift { from { transform: translateY(20vh) rotate(0); } to { transform: translateY(-30vh) rotate(180deg); } }

/* umumiy kino titri: medal va rang turlari */
.cc-medal { position: relative; width: 112px; height: 112px; margin-top: 18px; display: grid; place-items: center; opacity: 0; animation: ccEmb 1.2s 0.8s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
.cc-medal svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(242, 181, 68, 0.12); stroke: #f2b544; stroke-width: 1.5; animation: spinSlow 24s linear infinite; }
.cc-medal::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 150, 0.35), rgba(13, 6, 32, 0.9) 70%); border: 1.5px solid rgba(242, 181, 68, 0.7); }
.cc-medal span { position: relative; font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
.k-spy .cc-title { background: linear-gradient(180deg, #f0fffd 20%, #2ec4b6 100%); -webkit-background-clip: text; background-clip: text; }
.k-bunker .cc-title { background: linear-gradient(180deg, #fbffd6 20%, #c9d43c 100%); -webkit-background-clip: text; background-clip: text; }
.k-gold .cc-title, .k-cards .cc-title { font-size: clamp(26px, 8.5vw, 42px); }
.cc-text br + br { display: none; }

/* choyxona o‘yinlari: iliq yog‘och kayfiyat */
body.cine-choy .bar { background: linear-gradient(to bottom, rgba(26, 14, 8, 0.85), transparent); }
body.cine-choy .panel { background: rgba(42, 22, 12, 0.82); border: 1px solid rgba(242, 181, 68, 0.22); backdrop-filter: blur(4px); }
body.cine-solo .solo .so-top { background: rgba(13, 6, 32, 0.55); border-radius: 16px; padding: 6px; backdrop-filter: blur(6px); }

@media (prefers-reduced-motion: reduce) {
  .cs-stars i, .cs-flies i, .cs-fog, #bg.cine::after, .cs-moon, .flip.rcard .flip-in { animation: none !important; }
}
.cc-por .av-bot { display: none; }
.cc-por .av b { font-size: 40px; }
/* boshqa o‘yinlar kartasi (josus, tergov, orol) — mehrob ramkada */
.rc-body.gen { justify-content: center; padding: 16% 13% 12%; }
.rc-body.gen .ri { position: relative; display: grid; place-items: center; width: 46%; aspect-ratio: 1; font-size: clamp(48px, 15vw, 64px); line-height: 1; }
.rc-body.gen .ri::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 150, 0.32), transparent 66%); border: 1.5px solid rgba(242, 181, 68, 0.45); animation: glow 3s ease-in-out infinite; }
.flip.on .rc-body.gen .ri { animation: embIn 0.9s 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.rc-body.gen h2 { margin-top: 12px; }
.rc-body.gen p { font-size: 12.5px; }

/* ================= o‘yin hissi (juice) ================= */
canvas.juice { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 75; pointer-events: none; }
.juice-t { position: fixed; z-index: 76; pointer-events: none; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 800; font-size: 22px; color: #ffe7a3; text-shadow: 0 2px 0 #8a5a12, 0 4px 14px rgba(0, 0, 0, 0.6); animation: jt 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; white-space: nowrap; }
.juice-t.big { font-size: 34px; color: #fff; text-shadow: 0 3px 0 #e2364f, 0 6px 22px rgba(226, 54, 79, 0.6); }
.juice-t.teal { color: #c8fff8; text-shadow: 0 2px 0 #12857a, 0 4px 14px rgba(0, 0, 0, 0.6); }
.juice-t.sm { font-size: 16px; }
@keyframes jt { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); } 18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 30% { transform: translate(-50%, -70%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -180%) scale(0.95); } }
.juice-shake { animation: jshake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes jshake { 10%, 90% { translate: calc(var(--sk) * -0.4) 0; } 20%, 80% { translate: var(--sk) 0; } 30%, 50%, 70% { translate: calc(var(--sk) * -1) calc(var(--sk) * 0.3); } 40%, 60% { translate: var(--sk) calc(var(--sk) * -0.3); } }
.juice-flash { position: relative; }
.juice-flash::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--fl); animation: jflash 0.5s ease-out forwards; pointer-events: none; }
@keyframes jflash { from { opacity: 1; } to { opacity: 0; } }