/* ==========================================================================
   Hikaye Sahnesi — Tasarım Sistemi
   Kaynak: design_handoff_hikaye_sahnesi/README.md (hi-fi, tokenlar nihai)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Renkler ---------- */
  --hs-red: #FF4757;          /* Primary CTA başı, level sayısı, hata */
  --hs-orange: #FFA502;       /* Primary CTA sonu, XP etiketi, devam eden */
  --hs-blue: #4A7DFF;         /* Header, aktif nav, secondary */
  --hs-blue-deep: #3B67DE;    /* Header gradient sonu */
  --hs-green: #2ED573;        /* Başarı, tamamlanmış görev */
  --hs-green-deep: #26B863;   /* Success gradient sonu */
  --hs-yellow: #FFD93D;       /* XP bar sonu, glow, vurgu */
  --hs-purple: #A85FFF;       /* Grafik gradienti, mythic */

  --hs-surface: #FFFFFF;
  --hs-background: #F8F9FA;
  --hs-navy: #1B2440;
  --hs-navy-deep: #0F1730;
  --hs-ink: #2F3542;
  --hs-muted: #8892A6;
  --hs-muted-strong: #6B7690;

  --hs-divider: #EDF0F6;
  --hs-divider-2: #E2E7F0;
  --hs-divider-3: #F0F2F7;
  --hs-bar-track: #E8ECF3;
  --hs-chip-idle: #C9D1E0;
  --hs-disabled: #B3B9C6;
  --hs-row-hover: #F6F9FF;
  --hs-reward-strip: #FFF7E0;
  --hs-stat-red-bg: #FFF1F2;
  --hs-stat-green-bg: #EFFBF3;

  /* ---------- Rarity ---------- */
  --hs-rarity-base: #8892A6;
  --hs-rarity-rare: #2ED573;
  --hs-rarity-super: #4A7DFF;
  --hs-rarity-legendary: #FFA502;
  --hs-rarity-mythic: #A85FFF;

  /* ---------- Gradientler ---------- */
  --hs-gradient-primary: linear-gradient(135deg, #FF4757, #FFA502);
  --hs-gradient-success: linear-gradient(135deg, #2ED573, #26B863);
  --hs-gradient-xp: linear-gradient(90deg, #2ED573, #FFD93D);
  --hs-gradient-task: linear-gradient(90deg, #4A7DFF, #2ED573);
  --hs-gradient-badge: linear-gradient(135deg, #4A7DFF, #A85FFF);
  --hs-gradient-chart: linear-gradient(180deg, #4A7DFF, #A85FFF);
  --hs-gradient-header: linear-gradient(180deg, #4A7DFF 0%, #3B67DE 100%);
  --hs-gradient-stage-veil: linear-gradient(0deg, rgba(15, 23, 48, .86), transparent);

  /* ---------- Tipografi ---------- */
  --hs-font: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --hs-text-product: 17px;
  --hs-text-screen-title: 20px;
  --hs-text-level: 30px;
  --hs-text-stat: 26px;
  --hs-text-button: 16px;
  --hs-text-body: 15px;
  --hs-text-body-sm: 14px;
  --hs-text-meta: 13px;
  --hs-text-caption: 12px;
  --hs-text-rarity: 11px;

  /* ---------- Spacing (temel birim 2px) ---------- */
  --hs-space-1: 4px;
  --hs-space-2: 6px;
  --hs-space-3: 8px;
  --hs-space-4: 10px;
  --hs-space-5: 12px;
  --hs-space-6: 14px;
  --hs-space-7: 16px;
  --hs-space-8: 18px;
  --hs-space-9: 20px;
  --hs-space-10: 22px;

  /* ---------- Radius ---------- */
  --hs-radius-chip: 8px;
  --hs-radius-icon-sm: 12px;
  --hs-radius-button: 12px;
  --hs-radius-nav: 14px;
  --hs-radius-badge: 14px;
  --hs-radius-card: 16px;
  --hs-radius-reward-img: 18px;
  --hs-radius-modal: 20px;
  --hs-radius-character: 26px;
  --hs-radius-pill: 50%;

  /* ---------- Gölgeler ---------- */
  --hs-shadow-1: 0 2px 4px rgba(0, 0, 0, .1);
  --hs-shadow-2: 0 4px 8px rgba(0, 0, 0, .12);
  --hs-shadow-3: 0 6px 12px rgba(0, 0, 0, .3);
  --hs-shadow-4: 0 8px 16px rgba(0, 0, 0, .3);
  --hs-shadow-cta: 0 6px 12px rgba(255, 71, 87, .4);
  --hs-shadow-cta-success: 0 6px 12px rgba(46, 213, 115, .4);
  --hs-shadow-stage: 0 12px 24px rgba(0, 0, 0, .3);

  /* ---------- Dokunma hedefi ---------- */
  --hs-touch-min: 44px;      /* 8-10 yaş için ihlal edilmemeli */
  --hs-button-height: 52px;
}

/* ==========================================================================
   Temel sıfırlama
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--hs-font);
  font-size: var(--hs-text-body);
  line-height: 1.5;
  color: var(--hs-ink);
  background: var(--hs-navy);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* display:flex tanımlı bileşenlerin [hidden] özniteliğini geçersiz kılmasını engeller */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

a {
  color: var(--hs-yellow);
  text-decoration: none;
}

/* ==========================================================================
   Tipografi yardımcıları
   ========================================================================== */

.hs-text-product {
  font-size: var(--hs-text-product);
  font-weight: 600;
  letter-spacing: 1px;
}

.hs-text-title {
  font-size: var(--hs-text-screen-title);
  font-weight: 600;
}

.hs-text-level {
  font-size: var(--hs-text-level);
  font-weight: 700;
  color: var(--hs-red);
  line-height: 1;
}

.hs-text-stat {
  font-size: var(--hs-text-stat);
  font-weight: 700;
  line-height: 1;
}

.hs-text-body {
  font-size: var(--hs-text-body);
  font-weight: 400;
  line-height: 1.5;
}

.hs-text-meta {
  font-size: var(--hs-text-meta);
  color: var(--hs-muted);
}

.hs-text-caption {
  font-size: var(--hs-text-caption);
  font-weight: 500;
  color: var(--hs-muted);
}

.hs-text-rarity {
  font-size: var(--hs-text-rarity);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Emoji ile metin arasında tutarlı boşluk (platformlar arası genişlik farkı için) */
.hs-emoji {
  display: inline-block;
  margin-inline-end: 6px;
}

.hs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}