/* ════════════════════════════════════════════════════
   MiniMümin — 10X Dalgası Ek Stilleri (boost-10x.css)
   İçerik: (1) Yıldız & Seri pill, (2) klavye odak görünürlüğü,
   (3) prefers-reduced-motion sağlamlaştırması.
   Mevcut css/*.css dosyaları AÇILMADI — bu dosya onların ÜZERİNE
   biner; tasarım sistemi değişkenleri (:root) yeniden kullanılır.
   ════════════════════════════════════════════════════ */

/* ── 1) Yıldız & Seri Vitrini (js/star-pill.js inject eder) ──
   Üst barda logo ile ayarlar dişlisi arasında durur; dişlinin
   margin-left:auto hakkı korunur (pill solda, dişli sağda kalır). */
.star-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 14px;
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
  font: 900 17px/1 var(--font);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.star-pill:active { transform: scale(.94); }
.star-pill .sp-star { font-size: 18px; }
.star-pill .sp-count { min-width: 1.2em; text-align: center; }
.star-pill .sp-streak {
  margin-left: 3px;
  padding-left: 10px;
  border-left: 2px solid #FFE1B8;
}
/* Küçük telefon: topbar sarar (main.css ORTA-003 kuralına uyumlu) */
@media (max-width: 640px) {
  .star-pill { margin-left: 8px; padding: 7px 12px; font-size: 15px; }
}
/* Dokunma hedefi alt sınırı — main.css ORTA-003 deseni (≥44px) */
@media (pointer: coarse) {
  .star-pill { min-height: 44px; }
}

/* ── 2) Klavye odak görünürlüğü (WCAG 2.4.7) ──
   Yalnız klavye odağında (focus-visible) görünür; fare/dokunma
   odağında hiçbir görsel değişiklik olmaz. Sarı çerçeve, mevcut
   --yellow vurgu rengiyle tutarlı. */
.star-pill:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* ── 3) prefers-reduced-motion: sonsuz döngülü dekoratif animasyonlar dursun ──
   FX katmanı ve geçişler zaten reduce'da no-op (fx.js); burada CSS
   tarafındaki sonsuz dekor animasyonları da susturulur. Kısa geri
   bildirim animasyonları (zıplama/sallanma) bilgilendirici olduğu
   için korunur. */
@media (prefers-reduced-motion: reduce) {
  /* Ekran geçişleri anında olsun (transitionend dinleyicisi yok) */
  .screen { transition: none !important; }

  /* main.css — sonsuz dekor döngüleri */
  .mascot-idle .nur-body,
  .mascot-idle .nur-eye,
  .mascot-think .nur-glasses,
  .splash-blob,
  .btn-devam,
  .hint-pointer,
  .lm-stop.lm-current,
  .lm-stop.lm-party {
    animation: none !important;
  }

  /* games.css — sahne dekorları (float / svg-float / wave) */
  .speech-balloon,
  .cupcake-svg,
  .voxel-slot-placeholder .q-mark,
  .monkey-float,
  .btn-logic-speaker.speaking,
  .btn-logic-speaker.speaking .wave-1,
  .btn-logic-speaker.speaking .wave-2,
  .su-row.flows .su-pipe {
    animation: none !important;
  }

  /* scenes-match.css — fener, yıldız, boşluk blink */
  .du-lantern,
  .du-lantern-2,
  .mm-stars-a circle,
  .mm-stars-b circle,
  .mm-stars-b path,
  .dua-blank {
    animation: none !important;
  }

  /* Hafıza kartı çevrilmesi ani olsun (işlevsel ama zorunlu değil) */
  .mm-card-inner { transition: none !important; }
}