/* ChatPlay — paylaşılan tema: StreamJarvis "kırmızı↔mavi" stüdyo kimliği (görsel şölen).
   Sağlamlık için kritik arka planlar LİTERAL renklerle yazılır (custom property'e bağlı değil)
   ve her zaman bir solid `background-color` yedeği vardır — böylece değişken çözümlenmese bile
   sayfa koyu ve okunur kalır. .cp-* sınıfları ve eski değişken adları korunur (HTML/JS bağımlılığı). */

:root{
  --sp-red:#E23636; --sp-red-bright:#FF4444; --sp-red-deep:#B71C1C;
  --sp-blue:#1565C0; --sp-blue-bright:#42A5F5; --sp-blue-deep:#0D47A1;
  --sp-bg:#0a0c15; --sp-surface:#111428; --sp-surface2:#181d35; --sp-surface3:#1f2545;
  --sp-text:#f0f0f0; --sp-text-sec:#aab6c8; --sp-muted:#7d8aa0;
  --sp-grad:linear-gradient(135deg,#E23636,#1565C0);
  --sp-grad-bright:linear-gradient(120deg,#FF4444,#42A5F5);
  --sp-glow-red:rgba(226,54,54,.55); --sp-glow-blue:rgba(66,165,245,.5);
  /* Eski adların köprülenmesi (sayfa içi stiller bunları kullanabilir) */
  --cream:#f0f0f0; --muted:#aab6c8; --red:#FF4444; --green:#2fd47a; --accent:#E23636;
  --gold:#42A5F5; --gold-soft:#8fd0ff; --gold-deep:#1565C0;
  --wood-edge:rgba(120,150,210,.18); --wood-light:#1f2545; --wood:#181d35; --wood-dark:#111428;
  --panel:#181d35; --panel-line:rgba(255,255,255,.07);
  --radius:18px; --shadow:0 18px 48px rgba(0,0,0,.6); --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Outfit',system-ui,'Segoe UI',sans-serif;
  color:#f0f0f0;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  min-height:100vh;
  background-color:#0a0c15;
  background:
    radial-gradient(110% 80% at 12% -10%, rgba(226,54,54,.5), transparent 45%),
    radial-gradient(110% 80% at 88% -6%, rgba(66,165,245,.45), transparent 46%),
    radial-gradient(120% 130% at 50% 50%, transparent 48%, rgba(0,0,0,.6) 100%),
    linear-gradient(180deg,#0c0f1d 0%,#0a0c15 60%,#05060d 100%);
  background-color:#0a0c15;
  background-attachment:fixed;
}
/* Süzülen kırmızı/mavi ışık havuzları */
body::before{
  content:'';position:fixed;inset:-20% -10% auto -10%;height:70%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 60% at 22% 20%, rgba(226,54,54,.5), transparent 70%),
    radial-gradient(40% 60% at 78% 18%, rgba(66,165,245,.45), transparent 70%);
  filter:blur(30px);opacity:.5;animation:cp-float 12s ease-in-out infinite alternate;
}
@keyframes cp-float{from{transform:translateX(-3%)}to{transform:translateX(3%)}}

/* ── Panel: koyu cam + kırmızı→mavi degrade kenar (solid yedekli) ── */
.cp-panel{
  position:relative;color:#f0f0f0;
  background-color:#141a30;
  background:
    linear-gradient(180deg, rgba(26,32,60,.96), rgba(15,19,40,.97)) padding-box,
    linear-gradient(135deg,#E23636,#1565C0) border-box;
  background-color:#141a30;
  border:1.5px solid rgba(96,150,255,.35);
  border-radius:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  padding:18px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.cp-panel::after{
  content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,.4);
}

/* ── Başlıklar: kırmızı→mavi degrade yazı (solid renk yedekli) ── */
.cp-h{font-weight:800;color:#f0f0f0;letter-spacing:.01em;margin:0}
.cp-h-xl,.cp-h-lg{
  color:#ff6b6b;
  background:linear-gradient(120deg,#FF5a5a,#5cb6ff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;letter-spacing:.01em;
  filter:drop-shadow(0 0 14px rgba(226,54,54,.3));
}
.cp-h-xl{font-size:28px}
.cp-h-lg{font-size:20px}
.cp-title-rule{border:0;height:2px;border-radius:2px;background:linear-gradient(135deg,#E23636,#1565C0);opacity:.7;margin:10px 0 14px}
.cp-muted{color:#aab6c8}

/* ── Butonlar ── */
.cp-btn{
  font-family:inherit;font-weight:700;font-size:15px;color:#f0f0f0;
  cursor:pointer;border-radius:13px;padding:14px 18px;position:relative;overflow:hidden;
  background-color:#1b2240;
  background:linear-gradient(180deg,#1f2545,#111428);
  border:1.5px solid rgba(96,150,255,.45);
  box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),filter .14s var(--ease);
  touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.cp-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .5s var(--ease)}
.cp-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 22px rgba(66,165,245,.28)}
.cp-btn:hover::before{transform:translateX(120%)}
.cp-btn:active{transform:translateY(1px)}
.cp-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.cp-btn:disabled::before{display:none}
.cp-btn-primary{color:#fff;font-weight:800;background-color:#e23636;background:linear-gradient(120deg,#FF4444,#42A5F5);border-color:rgba(255,255,255,.35);box-shadow:0 10px 26px rgba(226,54,54,.4),0 0 22px rgba(66,165,245,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.cp-btn-primary:hover{box-shadow:0 14px 34px rgba(226,54,54,.5),0 0 30px rgba(66,165,245,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.cp-btn-danger{color:#fff;background-color:#c62828;background:linear-gradient(180deg,#FF5555,#B71C1C);border-color:#7a1414}
.cp-btn-sm{padding:9px 13px;font-size:13px;border-radius:10px}
.cp-btn:focus-visible{outline:2px solid #42A5F5;outline-offset:3px}

/* ── Liderlik / satır ── */
.cp-lb{display:flex;flex-direction:column;gap:3px}
.cp-lb-row{display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border-radius:9px;font-size:15px;border:1px solid transparent;transition:background .15s var(--ease),border-color .15s var(--ease)}
.cp-lb-row:hover{background:rgba(66,165,245,.07);border-color:rgba(66,165,245,.18)}
.cp-lb-row .nm{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-lb-row .sc{font-variant-numeric:tabular-nums;font-weight:800;color:#5cb6ff}
.cp-rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;font-size:12px;font-weight:800;background:rgba(255,255,255,.08);color:#aab6c8;flex:none}
.cp-rank.r1{background:linear-gradient(120deg,#FF4444,#42A5F5);color:#fff;box-shadow:0 0 14px rgba(226,54,54,.5)}
.cp-rank.r2{background:linear-gradient(180deg,#e6eaef,#9aa3b2);color:#1a1f2e}
.cp-rank.r3{background:linear-gradient(180deg,#f0894f,#b5482a);color:#1a0f08}

/* ── Sayaç ── */
.cp-stats{display:flex;justify-content:space-between;gap:8px;color:#aab6c8;font-size:13px;font-weight:600}
.cp-stats b{color:#f0f0f0;font-variant-numeric:tabular-nums}

/* ── Zamanlayıcı ── */
.cp-timer{
  display:inline-flex;align-items:center;justify-content:center;min-width:60px;padding:7px 13px;border-radius:12px;
  font-weight:800;font-variant-numeric:tabular-nums;font-size:20px;color:#fff;
  background-color:#0d1020;background:linear-gradient(180deg,#16203f,#0b1020);
  border:1.5px solid rgba(96,150,255,.5);box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 16px rgba(66,165,245,.25);
}
.cp-timer.low{color:#fff;border-color:#FF4444;background:linear-gradient(180deg,#5a1414,#0b1020);animation:cp-pulse 1s infinite;box-shadow:0 0 22px rgba(226,54,54,.55)}
@keyframes cp-pulse{50%{opacity:.5}}

/* ── Yayıncı alanı ── */
.cp-streamer-area{position:relative;min-height:120px;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(66,165,245,.2)}
.cp-streamer-tag{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);color:#aab6c8;font-size:13px;letter-spacing:.05em}
/* Yalnız yayıncıya görünür "doğru cevap" rozeti (izleyici overlay'inde YOKTUR) */
.cp-streamer-answer{display:inline-flex;align-items:center;gap:7px;align-self:center;
  background:rgba(47,212,122,.12);border:1px solid rgba(47,212,122,.45);color:#2fd47a;
  font-weight:800;font-size:15px;letter-spacing:.01em;padding:7px 14px;border-radius:11px;
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.cp-streamer-answer .lbl{color:#aab6c8;font-weight:700;font-size:12.5px;letter-spacing:.03em}
/* Kamera/yayıncı alanının içine yerleştirilince ortala */
.cp-streamer-area .cp-streamer-answer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:17px;padding:9px 16px}

/* ── Canlı sohbet kutusu (overlay'lerde ortak) ── */
.cp-chatbox{display:flex;flex-direction:column;gap:5px;overflow:auto;flex:1;min-height:0;padding-right:4px}
.cp-chat-row{font-size:14px;line-height:1.4;word-break:break-word}
.cp-chat-row .cu{font-weight:700;color:var(--gold-soft)}
.cp-chat-row .ct{color:#d6deea}

/* ── Durum rozeti ── */
.cp-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.12);background:rgba(13,16,32,.7)}
.cp-badge.live{color:#2fd47a;border-color:rgba(47,212,122,.5);box-shadow:0 0 16px rgba(47,212,122,.3)}
.cp-badge.off{color:#FF4444;border-color:rgba(255,68,68,.5)}

a{color:#42A5F5}
a:hover{color:#fff}
.hidden{display:none!important}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .cp-btn::before{display:none}
}