/*
 * multi-result-v299.css — Harf Avı çok oyunculu kelime geçişi ve karne.
 *
 * NEDEN
 *   Tek oyunculuda doğru tahmin satırı yemyeşil boyanır ve ardından sonuç
 *   kutusu gelir. Çok oyunculuda geçişler görünmüyordu: oyuncu kelimeyi
 *   bilip bilmediğini, kaç puan aldığını ve bilemediği kelimenin cevabını
 *   göremeden sıradaki tahtaya atlıyordu. Bu dosya iki parçayı biçimler:
 *     · #multiResultBackdrop  → her kelimeden sonra çıkan geçiş kutusu
 *     · #multiWordSummary     → yarış bitince çıkan kelime karnesi
 */

/* ---------------------------------------------------- geçiş kutusu */
#multiResultBackdrop .modal.multi-result-modal{
  max-width:min(460px,calc(100vw - 28px));
  text-align:center;
}
#multiResultBackdrop .multi-result-modal h2{
  margin:0 0 12px;
  font-size:26px;
  letter-spacing:-.03em;
}
.multi-result-tiles{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin:4px 0 14px;
}
.multi-result-tiles .mr-tile{
  display:grid;
  place-items:center;
  min-width:42px;
  height:46px;
  padding:0 6px;
  border-radius:12px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:.02em;
  color:#04140b;
  background:#22c55e;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 16px rgba(34,197,94,.28);
  animation:mrTilePop .32s ease both;
}
.multi-result-tiles.failed .mr-tile{
  color:#ffe4e6;
  background:#7f1d2e;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 6px 16px rgba(190,40,70,.24);
}
.multi-result-tiles .mr-tile:nth-child(2){animation-delay:.05s}
.multi-result-tiles .mr-tile:nth-child(3){animation-delay:.1s}
.multi-result-tiles .mr-tile:nth-child(4){animation-delay:.15s}
.multi-result-tiles .mr-tile:nth-child(5){animation-delay:.2s}
.multi-result-tiles .mr-tile:nth-child(6){animation-delay:.25s}
.multi-result-tiles .mr-tile:nth-child(7){animation-delay:.3s}
@keyframes mrTilePop{from{transform:translateY(9px) scale(.86);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
  .multi-result-tiles .mr-tile{animation:none}
}
#multiResultText{
  margin:0 0 14px;
  color:#cbd5e1;
  font-size:14px;
  line-height:1.5;
}
#multiResultText b{color:#a7f3d0}
#multiResultNextBtn{min-width:210px;min-height:46px;font-size:15px}

/* ---------------------------------------------------- kelime karnesi */
.multi-word-summary{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(255,255,255,.04);
}
.multi-word-summary[hidden]{display:none}
.multi-word-summary .mws-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
}
.multi-word-summary .mws-bar h3{margin:0;font-size:17px;letter-spacing:-.02em}
.multi-word-summary .mws-pill{
  padding:5px 11px;
  border-radius:999px;
  background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.3);
  color:#bbf7d0;
  font-size:12px;
  font-weight:800;
}
.multi-word-summary .mws-list{
  list-style:none;
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
}
.multi-word-summary .mws-row{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}
.multi-word-summary .mws-row.solved{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.09)}
.multi-word-summary .mws-row.failed{border-color:rgba(244,63,94,.35);background:rgba(244,63,94,.08)}
.multi-word-summary .mws-row.skipped{border-color:rgba(250,204,21,.32);background:rgba(250,204,21,.07)}
.multi-word-summary .mws-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.multi-word-summary .mws-no{color:var(--muted,#94a3b8);font-size:12px;font-weight:800}
.multi-word-summary .mws-badge{font-size:12px;font-weight:800}
.multi-word-summary .mws-badge.ok{color:#86efac}
.multi-word-summary .mws-badge.bad{color:#fda4af}
.multi-word-summary .mws-badge.skip{color:#fde68a}
.multi-word-summary .mws-badge.idle{color:#94a3b8}
.multi-word-summary .mws-word{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:7px;
}
.multi-word-summary .mws-tile{
  display:grid;
  place-items:center;
  min-width:30px;
  height:32px;
  padding:0 5px;
  border-radius:9px;
  font-size:15px;
  font-weight:1000;
  color:#e2e8f0;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
.multi-word-summary .mws-row.solved .mws-tile{
  color:#04140b;
  background:#22c55e;
  border-color:rgba(255,255,255,.2);
}
.multi-word-summary .mws-row.failed .mws-tile,
.multi-word-summary .mws-row.skipped .mws-tile{
  color:#f8fafc;
  background:rgba(148,163,184,.22);
}
.multi-word-summary .mws-detail{color:var(--muted,#94a3b8);font-size:12px}
.multi-word-summary .mws-note{
  margin:12px 0 0;
  color:var(--muted,#94a3b8);
  font-size:11.5px;
  line-height:1.5;
}
@media(max-width:520px){
  .multi-result-tiles .mr-tile{min-width:36px;height:40px;font-size:19px}
  #multiResultNextBtn{width:100%;min-width:0}
  .multi-word-summary{padding:12px}
  .multi-word-summary .mws-tile{min-width:27px;height:29px;font-size:14px}
}