/* === Word Challenge - Legacy CSS (Chrome 48 ve altı) === */
/* 1) CSS değişkeni ve modern efektlere sade fallback */

/* Arkaplan, metin rengi gibi kritik renkleri sabitle */
html, body {
  color: #ecf2ff; /* var(--text) */
  background: radial-gradient(1200px 800px at 50% -10%, #183779, #0b1a3a) no-repeat,
              radial-gradient(800px 500px at 50% 120%, #091638, #061027);
}

/* header: gap yoksa margin-gap eşleniği */
header {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin: -6px;                 /* ebeveyn negatif margin */
}
header > * { margin: 6px; }     /* çocuklara pozitif margin */


/* min() yok → klasik genişlik kullanımı */
.stage {
  max-width: 980px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.06);
}

/* conic-gradient yok → sade halka fallback */
.ring {
  background: radial-gradient(circle at 50% 50%, rgba(245,200,75,.15) 0 40%, transparent 42%) no-repeat;
}
.ring::before {
  box-shadow: inset 0 0 0 3px #0f2a66, inset 0 0 50px rgba(0,0,0,.4);
}

/* Başlık ve rozete sabit renkler */
.logo-like { color: #ffde7a; }
.logo-like::before, .logo-like::after {
  background: radial-gradient(circle at 30% 30%, #fff, #f5c84b 40%, #be8e16 70%);
  box-shadow: 0 0 12px rgba(245,200,75,.9);
}
.score {
  color: #f5c84b;
  border: 2px solid #f5c84b;
  background: rgba(245,200,75,.08);
}
.player { color: #ffffff; }

/* Soru ve seçenek kutuları */
.question {
  background: linear-gradient(180deg, rgba(15,42,102,.65), rgba(7,23,57,.65));
  border: 1px solid rgba(245,200,75,.25);
}
.opt {
  border: 2px solid #f5c84b;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.opt.correct {
  border-color: #16c172; /* var(--good) */
  background: linear-gradient(180deg, rgba(22,193,114,.18), rgba(22,193,114,.05));
}
.opt.wrong {
  border-color: #ff5a5a; /* var(--bad) */
  background: linear-gradient(180deg, rgba(255,90,90,.18), rgba(255,90,90,.05));
}
.opt-tag { color: #ffde7a; }
.opt-text { color: gold; font-weight: bold; font-size: 1.1rem; }

/* 2) Grid yok → flex-wrap ile 2 sütun çözümü */
.options {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin: -7px; /* gap yerine negatif dış boşluk tekniği */
}
.options > .opt {
  -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%;
  margin: 7px;
}
@media (min-width: 720px) {
  .options > .opt { -ms-flex-preferred-size: calc(50% - 14px); flex-basis: calc(50% - 14px); }
}

/* 3) gap yok → margin tabanlı “flex-gap” eşleniği */
.header, header, .controls, .intro .row {
  /* varsa grid/gap etkisini sıfırla */
}
.controls,
.intro .row {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin: -5px;
}
.controls > *, .intro .row > * { margin: 5px; }

/* 4) :focus-visible yok → :focus fallback */
.opt:focus { outline: 3px solid #9ec9ff; }

/* Leaderboard paneli sabit renkler */
.board {
  border: 1px solid rgba(245,200,75,.25);
  background: linear-gradient(180deg, rgba(15,42,102,.35), rgba(7,23,57,.35));
}
.board h3 { color: #ffde7a; }
.board ul { /* grid-gap yerine margin fallback zaten üstte var */ }
.board li {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.nick { font-weight: 700; }
.pts  { font-weight: 800; color: #ffde7a; }

/* Butonlar */
.btn { color: #ecf2ff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); }
.btn-primary {
  color: #2b1e00;
  background: linear-gradient(180deg, #ffde7a, #f5c84b);
  border: 2px solid #c79a1b;
  box-shadow: 0 10px 22px rgba(245,200,75,.25);
}

/* 50:50 sonrası görünüm (legacy için görünür kalsın) */
.opt.eliminated {
  opacity: .35; filter: grayscale(1); pointer-events: none;
  transition: opacity .2s ease;
}

/* Footer link rengi */
.footer { color: #9fb3ff; }
.footer a { color: gold; }


/* Modern CSS’te var() ile gelen bazı renkler için doğrudan fallback */
.status { color: #9fb3ff; }
.intro h1 { color: #ffde7a; }
.input { border-color: #f5c84b; }