/* ChatPlay — Milyon Basamağı stüdyosu, StreamJarvis "kırmızı↔mavi" kimliğiyle (görsel şölen).
   chatplay.css'ten SONRA yüklenir; yarışma yapısı (altıgen plakalar, ödül merdiveni, jokerler)
   korunur ama renk kimliği site temasına çekilir. Sağlamlık için LİTERAL renkler kullanılır
   (custom property'e bağlı değil). JS ve eleman ID'leri değişmez. Tüm görünüm saf CSS. */

:root{ --mq-hex:polygon(2.2% 0, 97.8% 0, 100% 50%, 97.8% 100%, 2.2% 100%, 0 50%); --mq-ease:cubic-bezier(.4,0,.2,1); }

/* ── Stüdyo zemini ── */
body{
  background-color:#070b18;
  background:
    radial-gradient(95% 60% at 50% -8%, rgba(66,165,245,.42), transparent 55%),
    radial-gradient(55% 50% at 14% 6%, rgba(226,54,54,.4), transparent 62%),
    radial-gradient(55% 50% at 86% 6%, rgba(66,165,245,.36), transparent 62%),
    radial-gradient(130% 130% at 50% 50%, transparent 50%, rgba(0,0,0,.7) 100%),
    linear-gradient(180deg,#0b1124 0%,#070b18 60%,#03050e 100%) !important;
  background-color:#070b18 !important;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;height:auto;filter:none;animation:none;
  background:repeating-conic-gradient(from 0deg at 50% -6%, rgba(120,180,255,.13) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image:radial-gradient(72% 72% at 50% 0%, #000, transparent 72%);
          mask-image:radial-gradient(72% 72% at 50% 0%, #000, transparent 72%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 108%, rgba(90,150,255,.08) 0 2px, transparent 2px 46px);
  -webkit-mask-image:linear-gradient(180deg, transparent 38%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 38%, #000 100%);
}

/* ── Sahne (merkez kolon): açık stüdyo ── */
.col-center .cp-panel{background:transparent !important;background-color:transparent !important;border:0 !important;box-shadow:none !important}
.cp-streamer-area{box-shadow:0 18px 48px rgba(0,0,0,.6), inset 0 0 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(96,150,255,.18) !important}

.status{text-shadow:0 2px 12px rgba(0,0,0,.65);letter-spacing:.01em}

/* ── Soru plakası — altıgen, kırmızı→mavi çerçeve, koyu parlak iç ── */
.q{
  position:relative;z-index:0;color:#fff !important;font-weight:800 !important;
  background:linear-gradient(135deg,#E23636,#1565C0);clip-path:var(--mq-hex);
  padding:24px 54px !important;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(66,165,245,.25));
  display:flex;align-items:center;justify-content:center;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.q::before{
  content:'';position:absolute;inset:3px;z-index:-1;clip-path:var(--mq-hex);
  background:radial-gradient(120% 80% at 50% -12%, rgba(120,175,255,.35), transparent 62%), linear-gradient(180deg,#1a2a58 0%,#0e1838 50%,#070b1c 100%);
}

/* ── Şıklar ── */
.opt{
  position:relative;z-index:0;
  background:linear-gradient(135deg,#E23636,#1565C0) !important;
  border:0 !important;clip-path:var(--mq-hex);padding:16px 28px !important;
  color:#fff !important;font-weight:700 !important;
  filter:drop-shadow(0 5px 16px rgba(8,20,60,.6));transition:filter .2s var(--mq-ease);
}
.opt::before{
  content:'';position:absolute;inset:2.5px;z-index:-1;clip-path:var(--mq-hex);
  background:radial-gradient(120% 80% at 50% -16%, rgba(120,175,255,.26), transparent 60%), linear-gradient(180deg,#16224a 0%,#0c1430 55%,#070b1c 100%);
}
.opt .lt{
  width:auto !important;height:auto !important;border-radius:0 !important;clip-path:none !important;background:none !important;
  color:#5cb6ff !important;font-weight:800 !important;font-size:1.05em;text-shadow:0 1px 4px rgba(0,0,0,.6);margin-right:2px;
}
.opt .lt::after{content:':'}
.opt.picked{filter:drop-shadow(0 0 20px #42A5F5);animation:mq-pick 1.1s var(--mq-ease) infinite}
.opt.picked::before{background:linear-gradient(180deg,#2f7fe0,#0d3a8a)}
.opt.correct{filter:drop-shadow(0 0 24px rgba(47,212,122,.9))}
.opt.correct::before{background:linear-gradient(180deg,#2fd47a,#11894e)}
.opt.wrong{filter:drop-shadow(0 0 18px rgba(226,54,54,.7))}
.opt.wrong::before{background:linear-gradient(180deg,#ff5b5b,#9d1f1f)}
.opt.elim{opacity:.2;filter:none}
.opt.elim .lt{visibility:hidden}
@keyframes mq-pick{0%,100%{filter:drop-shadow(0 0 12px #42A5F5)}50%{filter:drop-shadow(0 0 26px #42A5F5)}}

/* ── Ödül merdiveni ── */
.ladder{padding-left:2px}
.ladder .rung{
  border:1px solid rgba(96,150,255,.16) !important;color:#aab6c8 !important;border-radius:9px !important;
  background:linear-gradient(180deg, rgba(26,32,60,.6), rgba(13,16,32,.25)) !important;font-weight:600;transition:all .2s var(--mq-ease);
}
.ladder .rung span:last-child{font-variant-numeric:tabular-nums;font-weight:800;color:#5cb6ff}
.ladder .rung.safe{
  color:#fff !important;border-color:rgba(66,165,245,.5) !important;border-left:3px solid #42A5F5 !important;
  background:linear-gradient(180deg, rgba(66,165,245,.12), rgba(13,16,32,.25)) !important;
}
.ladder .rung.safe span:last-child{color:#fff}
.ladder .rung.done{color:#7fe3a6 !important;opacity:.72}
.ladder .rung.done span:last-child{color:#7fe3a6}
.ladder .rung.cur{
  background:linear-gradient(120deg,#FF4444,#42A5F5) !important;color:#fff !important;font-weight:800;border-color:transparent !important;
  box-shadow:0 0 22px rgba(226,54,54,.45), 0 0 22px rgba(66,165,245,.4);transform:scale(1.03);
}
.ladder .rung.cur span:last-child{color:#fff}

/* ── Jokerler ── */
.jok{gap:12px !important}
.jok .j, .jok .cp-btn{
  position:relative;width:86px;height:86px;flex:none !important;border-radius:50% !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:10.5px !important;line-height:1.05;text-align:center;padding:6px !important;font-weight:700;color:#eaf2ff !important;
  background-color:#0e1838;
  background:radial-gradient(circle at 50% 32%, #1a2a58, #0a1230 80%) padding-box,linear-gradient(135deg,#E23636,#1565C0) border-box !important;
  border:2.5px solid transparent !important;
  box-shadow:0 0 20px rgba(66,165,245,.4), inset 0 0 14px rgba(0,0,0,.5), inset 0 2px 0 rgba(160,200,255,.28) !important;
  transition:transform .15s var(--mq-ease),box-shadow .15s var(--mq-ease);
}
.jok .j:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 0 26px rgba(66,165,245,.6), inset 0 0 14px rgba(0,0,0,.5) !important}
.jok .j .ji, .jok .cp-btn .ji{font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.jok .j .ji svg, .jok .cp-btn .ji svg{width:26px;height:26px;stroke:#5cb6ff;stroke-width:2.1;fill:none}
.jok .j.used, .jok .cp-btn:disabled{opacity:.5 !important;filter:grayscale(.55) brightness(.85)}
.jok .j.used::after{
  content:'';position:absolute;left:6%;right:6%;top:50%;height:4px;border-radius:3px;
  background:linear-gradient(90deg,#ff6a6a,#B71C1C);transform:rotate(-22deg);box-shadow:0 0 10px rgba(226,54,54,.7);
}

/* ── Seyirciye Sor — bar grafiği ── */
.aud .col-bar{background:linear-gradient(120deg,#FF4444,#42A5F5) !important;box-shadow:0 0 12px rgba(66,165,245,.45), inset 0 1px 0 rgba(255,255,255,.4)}

/* ── Davet input ── */
.invite input{background:rgba(8,12,28,.7) !important;border:1px solid rgba(96,150,255,.5) !important;color:#f0f0f0 !important;border-radius:10px !important}

a{color:#42A5F5}
a:hover{color:#fff}

@media (prefers-reduced-motion: reduce){
  .opt.picked{animation:none}
  *{transition-duration:.001ms !important}
}