/* =============================================
   JAM ENGLISH — Premium Stylesheet v2
   Aesthetic: Dark editorial, coral accent, glass
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============ DESIGN TOKENS ============ */
:root {
  /* Core palette */
  --ink:         #1a1a24;
  --ink-2:       #2a2a35;
  --ink-3:       #3a3a46;
  --coral:       #ff4d6d;
  --coral-2:     #ff6b35;
  --coral-hover: #e8365a;
  --gold:        #f5a623;
  --gold-2:      #fbbf24;

  /* Surfaces */
  --surface:     #f8f9fb;
  --surface-2:   #f0f2f5;
  --white:       #ffffff;

  /* Borders & Muted */
  --border:      #e5e7eb;
  --border-2:    #d1d5db;
  --muted:       #6b7280;
  --muted-2:     #9ca3af;

  /* Difficulty colours */
  --easy:   #10b981;
  --medium: #f59e0b;
  --hard:   #ef4444;

  /* Gradients */
  --grad-hero:   linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
  --grad-coral:  linear-gradient(135deg, #ff4d6d, #ff6b35);
  --grad-glass:  linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));

  /* Radius */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow:    0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.16);
  --shadow-coral: 0 8px 32px rgba(255,77,109,0.30);

  /* Typography — font families */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* Typography — fluid size scale (clamp: min, preferred, max) */
  --text-xs:   clamp(0.65rem,  1.2vw, 0.72rem);   /* 10–11.5px  — captions, badges        */
  --text-sm:   clamp(0.75rem,  1.4vw, 0.82rem);   /* 12–13px    — labels, meta, helper     */
  --text-base: clamp(0.875rem, 1.6vw, 0.95rem);   /* 14–15px    — body copy default        */
  --text-md:   clamp(0.95rem,  1.8vw, 1.05rem);   /* 15–17px    — slightly larger body     */
  --text-lg:   clamp(1.05rem,  2vw,   1.2rem);    /* 17–19px    — sub-headings, intros     */
  --text-xl:   clamp(1.2rem,   2.4vw, 1.4rem);    /* 19–22px    — card headings h3         */
  --text-2xl:  clamp(1.4rem,   3vw,   1.7rem);    /* 22–27px    — section headings h2      */
  --text-3xl:  clamp(1.7rem,   3.5vw, 2.1rem);    /* 27–34px    — page headings h1         */
  --text-4xl:  clamp(2rem,     4.5vw, 2.8rem);    /* 32–45px    — hero h1, topic title     */
  --text-5xl:  clamp(2.8rem,   6vw,   4rem);      /* 45–64px    — display / art big text  */

  /* Typography — line-heights */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-relaxed:1.75;

  /* Typography — letter-spacing */
  --ls-tight:  -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.09em;
  --ls-widest:  0.14em;

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-normal: 0.25s ease;
  --t-slow:   0.4s ease;
}

/* ============ TYPOGRAPHY SCALE ============ */
.jam-content h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.jam-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.jam-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.jam-content h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
}

/* ============ BUTTONS ============ */
.btn-jam {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px; font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: all var(--t-normal); white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn-jam-primary {
  background: var(--grad-coral); color: white;
  box-shadow: 0 4px 16px rgba(255,77,109,0.25);
}
.btn-jam-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-coral); }

/* ============ JAM SPECIFIC COMPONENTS ============ */

/* Timer */
.timer-ring-wrap { position: relative; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.timer-ring { transform: rotate(-90deg); filter: drop-shadow(0 4px 12px rgba(245,158,11,0.1)); }
.ring-bg       { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.ring-progress {
  fill: none; stroke: var(--coral); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset 0.5s linear, stroke 0.4s ease;
}
.timer-display {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--ink);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal {
  background: #ffffff !important;
  border-radius: 24px;
  padding: 32px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 10000;
  display: block !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #1e293b;
}

/* Rules */
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.rule-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--surface); border-radius: 10px;
  font-size: 0.8rem; font-weight: 500; border: 1px solid var(--border);
}

/* Feedback */
.feedback-highlight {
    display: block;
    width: 100%;
    background: rgba(255, 111, 97, 0.12);
    color: #e65b4e;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 800;
    margin: 16px 0 12px 0;
    border-left: 5px solid var(--coral);
    font-size: 1rem;
    box-sizing: border-box;
    text-align: left;
}

/* Difficulty badges */
.badge-jam {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.badge-jam-easy   { background: #d1fae5; color: #065f46; }
.badge-jam-medium { background: #fef3c7; color: #92400e; }
.badge-jam-hard   { background: #fee2e2; color: #991b1b; }

/* Stats cards */
.stat-card-jam {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 22px 26px; border: 2px solid var(--border);
  transition: all 0.25s ease; position: relative; overflow: hidden;
  text-align: center;
}
.stat-card-jam:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-num-jam {
  font-family: var(--font-display); font-size: 2.1rem;
  font-weight: 800; letter-spacing: -1px;
}

/* Topic preview */
.topic-preview {
  background: var(--white); border-radius: 14px; padding: 22px 24px; margin-bottom: 26px;
  position: relative; overflow: hidden; border: 2px solid var(--border);
}

/* Audio Player */
.audio-player-jam { width: 100%; border-radius: 8px; margin-top: 10px; }

/* Scores */
.score-display-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px; background: var(--surface); border-radius: 14px;
  border: 1.5px solid var(--border);
  flex: 1; min-width: 0;
}