/* Görev: /daily sayfasının stili — mobil-öncelikli, tek ekranda oynanabilir.
   Token kaynağı: DOMAIN/styles.css (o da src/shared/config/ColorTokens.js aynası).
   ⚠️ DRIFT: token bloğu styles.css'ten KOPYA. Marka rengi değişirse İKİ dosyada değişir.
      Bilerek kopya: landing'in 605 satırlık CSS'ini bu sayfaya yüklemek LCP'yi bedavaya şişirirdi. */

@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('/assets/fonts/baloo2-var.woff2') format('woff2'); }
@font-face { font-family: 'Nunito';  font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/nunito-var.woff2') format('woff2'); }

:root {
  --brand-primary: #7B6DB5;
  --brand-primary-dark: #5A4D8D;
  --accent-gold: #F2C94C;
  --cta-primary: #8BBF4A;
  --cta-primary-dark: #6FA033;
  --danger: #C0553F;
  --surface-cream: #F0E4D8;
  --surface-card: #FFF5EC;
  --slot-cream: #FBF1DC;
  --slot-gold: #C99A2E;
  --text-primary: #4A3426;
  --text-secondary: #6E5847;
  --shadow-3d-purple: 0 4px 0 #5A4D8D, 0 8px 16px rgba(74, 52, 38, 0.18);
  --shadow-3d-green: 0 4px 0 #6FA033, 0 8px 16px rgba(74, 52, 38, 0.18);
  --shadow-soft: 0 6px 18px rgba(74, 52, 38, 0.10);
  --radius-card: 20px;
  --radius-btn: 999px;
  --font-display: 'Baloo 2', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--surface-cream); color: var(--text-primary);
  font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-primary-dark); }

/* ── Header ─────────────────────────────────────────── */
.dhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--surface-card); box-shadow: var(--shadow-soft);
}
.dhead__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; text-decoration: none; color: var(--text-primary); }
.dhead__streak { font-weight: 700; color: var(--text-secondary); background: var(--slot-cream); border-radius: var(--radius-btn); padding: 4px 12px; }

/* ── Layout ─────────────────────────────────────────── */
.dwrap { max-width: 520px; margin: 0 auto; padding: 20px 16px 40px; }
.dtitle { font-family: var(--font-display); font-size: 1.6rem; text-align: center; margin: 0 0 2px; }
.dtitle__no { color: var(--brand-primary); }
.dsub { text-align: center; color: var(--text-secondary); margin: 0 0 16px; font-size: .95rem; }

.dcard {
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); padding: 14px; text-align: center;
}
.dloading { color: var(--text-secondary); margin: 40px 0; }

/* Görsel: boyutlar manifest'ten <img width/height> olarak geliyor → CLS 0, sabit oran gerekmiyor.
   Kırpma sonrası her bulmacanın oranı farklı; max-height ekranı yutmasını engeller. */
.dpic { border-radius: 14px; background: var(--slot-cream); padding: 8px; display: grid; place-items: center; }
.dpic img { width: auto; max-width: 100%; max-height: 42vh; height: auto; }

/* ── Slotlar ────────────────────────────────────────── */
/* Kelime arası (18px) hücre arasından (4px) belirgin biçimde büyük olmalı — eşitken
   "IN A JAM" tek kelime gibi okunuyordu (ölçüldü, ekran görüntüsüyle). */
.dslots { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 16px 0 4px; }
.dword { display: flex; gap: 4px; }
.dcell {
  width: 30px; height: 38px; border-radius: 7px; background: var(--slot-cream);
  border: 2px solid rgba(201, 154, 46, .35); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--text-primary);
  transition: border-color .15s, transform .15s;
}
.dcell--given { background: #EFE0BF; border-color: var(--slot-gold); }
.dcell--cursor { border-color: var(--brand-primary); transform: translateY(-2px); }
.dcell--wrong { animation: cellShake .32s; border-color: var(--danger); }
.dcell--win { border-color: var(--cta-primary); background: #E6F0D6; }
@keyframes cellShake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}
@media (max-width: 380px) { .dcell { width: 26px; height: 34px; font-size: 1.05rem; } .dslots { gap: 7px; } }

/* Ekran-dışı gerçek input: mobilde native klavyeyi açan tek güvenilir yol */
.dghost { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

/* ── Kontroller ─────────────────────────────────────── */
/* Emoji kare (🟪) neyi anlattığı belirsizdi → sayı + nokta. */
.dtries {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 12px 0 2px; font-size: .9rem; color: var(--text-secondary);
}
.dtries b { color: var(--text-primary); }
.dtries .pip { width: 11px; height: 11px; border-radius: 50%; background: rgba(74,52,38,.16); display: inline-block; }
.dtries .pip.is-left { background: var(--brand-primary); }
.dhintline { color: var(--text-secondary); font-size: .92rem; min-height: 1.4em; margin: 6px 0 0; }
.dctrls { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

.btn {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; border: 0; cursor: pointer;
  border-radius: var(--radius-btn); padding: 12px 22px; color: #fff; text-decoration: none;
  display: inline-block; transition: transform .12s;
}
.btn:active { transform: translateY(2px); }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.btn--hint { background: var(--accent-gold); color: var(--text-primary); box-shadow: 0 4px 0 #D9A93A; }
.btn--submit { background: var(--cta-primary); box-shadow: var(--shadow-3d-green); }
.btn--share { background: var(--brand-primary); box-shadow: var(--shadow-3d-purple); margin-top: 6px; }
.btn--store { background: var(--brand-primary); box-shadow: var(--shadow-3d-purple); flex: 1; text-align: center; }

/* ── Sonuç ──────────────────────────────────────────── */
.dresult {
  margin-top: 18px; background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft); padding: 20px 16px; text-align: center;
}
.dresult__verdict { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 6px; }
.dresult__answer { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .04em; margin: 0 0 4px; }
.dresult__meaning { color: var(--text-secondary); font-size: .95rem; margin: 0 0 10px; }
.dresult__squares { font-size: 1.3rem; letter-spacing: .12em; margin-bottom: 6px; }
.dresult__copied { color: var(--cta-primary-dark); font-weight: 700; font-size: .9rem; margin: 8px 0 0; }
.dresult__next { color: var(--text-secondary); font-size: .9rem; margin: 10px 0 0; }

.dcta { margin-top: 18px; padding-top: 16px; border-top: 2px dashed rgba(201, 154, 46, .4); }
.dcta__line { font-size: .98rem; margin: 0 0 12px; color: var(--text-primary); }
.dcta__row { display: flex; gap: 10px; }
.dcta__fine { font-size: .82rem; color: var(--text-secondary); margin: 10px 0 0; }

.dnote { text-align: center; color: var(--text-secondary); font-size: .84rem; margin: 18px 0 0; }
.dfoot { text-align: center; color: var(--text-secondary); font-size: .84rem; padding: 20px 16px 32px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Kazanma kutlaması — konfeti yok, tek nefeslik puls (düşük cihazda da bedava) */
@keyframes winPulse { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.dcard.is-win { animation: winPulse .5s var(--ease-spring, ease-out); }

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