/* ============================================================
   ENGLISH TONIC - DUOLINGO ULTRA MEJORADO
   Styles: 3 Master Tiers (Beginner, Middle, Advance) & Quiz Layouts
   ============================================================ */

:root {
  --chanak-purple: #6C5CE7;
  --chanak-gold: #FDCB6E;
  --chanak-blue: #0984E3;
  --chanak-teal: #00CEC9;
  --chanak-green: #00B894;
  --chanak-coral: #FF7675;
  --bg-gradient: linear-gradient(135deg, #F0F4FF 0%, #E2E8F0 100%);
  --card-bg: rgba(255, 255, 255, 0.95);
  --card-border: rgba(108, 92, 231, 0.15);
  --text-main: #1E293B;
  --text-muted: #64748B;
  --shadow-sm: 0 4px 14px rgba(108, 92, 231, 0.08);
  --shadow-md: 0 10px 30px rgba(108, 92, 231, 0.15);
  --radius-lg: 24px;
  --radius-md: 16px;
  --font-heading: 'Outfit', -apple-system, sans-serif;
  --font-body: 'Nunito', -apple-system, sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-gradient: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%);
  --card-bg: rgba(30, 41, 59, 0.94);
  --card-border: rgba(255, 255, 255, 0.1);
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-body); }
body { background: var(--bg-gradient); color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; }

.chanak-portal-banner {
  background: linear-gradient(90deg, #4834D4, #6C5CE7, #00CEC9);
  color: white; padding: 0.4rem 1.5rem; font-size: 0.85rem; font-weight: 800;
  display: flex; align-items: center; justify-content: space-between;
}

.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem; background: var(--card-bg); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}

.logo-container {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-heading); font-weight: 900; font-size: 1.5rem; color: var(--chanak-purple);
  cursor: pointer;
}

.logo-icon { font-size: 2.2rem; animation: floatBounce 2.5s infinite ease-in-out; }
@keyframes floatBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.nav-stats { display: flex; align-items: center; gap: 1rem; }

.coin-chip {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1.1rem;
  background: linear-gradient(135deg, #FFEAA7, #FDCB6E); color: #B27B00;
  border-radius: 50px; font-weight: 900; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(253, 203, 110, 0.4); border: 2px solid #E17055;
  animation: pulseGold 2s infinite ease-in-out;
}
@keyframes pulseGold { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

.stat-chip { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 50px; font-weight: 800; font-size: 0.95rem; color: var(--text-main); }
.btn-icon { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; color: var(--text-main); transition: var(--transition); }
.btn-icon:hover { transform: scale(1.1); background: var(--chanak-purple); color: white; }

.container { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1.5rem; width: 100%; flex: 1; }

/* 3 MASTER TIERS GRID */
.tier-selector-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem; margin-bottom: 1.75rem;
}

.tier-card {
  background: var(--card-bg); border: 2px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 1.25rem; cursor: pointer; transition: var(--transition);
  box-shadow: var(--shadow-sm); position: relative;
}

.tier-card:hover { transform: translateY(-4px); border-color: var(--tier-color, var(--chanak-purple)); box-shadow: var(--shadow-md); }
.tier-card.active { border-color: var(--tier-color, var(--chanak-purple)); background: color-mix(in srgb, var(--tier-color, var(--chanak-purple)) 12%, var(--card-bg)); }
.tier-card:focus-visible, .unit-node:focus-visible, .char-selector-chip:focus-visible, .word-chip:focus-visible, .tab-btn:focus-visible, .btn-icon:focus-visible { outline: 3px solid var(--chanak-purple); outline-offset: 2px; }

/* UNITS TIMELINE */
.units-container {
  display: flex; gap: 1rem; overflow-x: auto; padding: 0.5rem 0.2rem 1.25rem 0.2rem; margin-bottom: 1.5rem;
}

.unit-node {
  min-width: 200px; background: var(--card-bg); border: 2px solid var(--card-border);
  border-radius: var(--radius-md); padding: 1rem; cursor: pointer; transition: var(--transition);
}

.unit-node:hover { transform: translateY(-3px); border-color: var(--chanak-purple); }
.unit-node.active { border-color: var(--chanak-purple); background: rgba(108, 92, 231, 0.08); border-left: 5px solid var(--chanak-purple); }

/* STUDIO MAIN LAYOUT */
.studio-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; }
@media (max-width: 900px) { .studio-layout { grid-template-columns: 1fr; } }

.studio-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; background: var(--card-bg); padding: 0.4rem; border-radius: 50px; border: 1px solid var(--card-border); overflow-x: auto; }
.tab-btn { flex: 1; padding: 0.65rem 1rem; border: none; background: transparent; border-radius: 50px; font-weight: 800; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; transition: var(--transition); white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.tab-btn.active { background: var(--chanak-purple); color: white; box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35); }

/* CONVERSATION BOX */
.conversation-box { background: var(--card-bg); border-radius: var(--radius-lg); border: 1px solid var(--card-border); padding: 1.75rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 1.5rem; min-height: 500px; }
.avatar-header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
.avatar-img-wrap { width: 65px; height: 65px; background: linear-gradient(135deg, #FFEAA7, #FDCB6E); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; box-shadow: 0 4px 12px rgba(253, 203, 110, 0.4); }
.avatar-details h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; }
.speed-control { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.speed-select { padding: 0.3rem 0.6rem; border-radius: 8px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-main); font-weight: 700; }

.chat-stream { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; overflow-y: auto; max-height: 340px; padding-right: 0.5rem; }
.chat-bubble { display: flex; flex-direction: column; max-width: 85%; animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chat-bubble.buddy { align-self: flex-start; }
.chat-bubble.user { align-self: flex-end; }

.bubble-content { padding: 1rem 1.25rem; border-radius: 20px; font-size: 1.05rem; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.chat-bubble.buddy .bubble-content { background: linear-gradient(135deg, #E0E7FF, #EEF2FF); color: #1E1B4B; border-bottom-left-radius: 4px; }
.chat-bubble.user .bubble-content { background: linear-gradient(135deg, var(--chanak-purple), #4834D4); color: white; border-bottom-right-radius: 4px; }
.bubble-hint { font-size: 0.85rem; margin-top: 0.4rem; font-style: italic; opacity: 0.85; }

.voice-controls { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.06); }
.mic-btn-main { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--chanak-purple), #4834D4); color: white; border: none; font-size: 2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(108, 92, 231, 0.45); transition: var(--transition); }
.mic-btn-main:hover { transform: scale(1.08); }
.mic-btn-main.recording { background: linear-gradient(135deg, #FF7675, #D63031); box-shadow: 0 0 0 12px rgba(255, 118, 117, 0.25); animation: pulseMic 1.2s infinite; }
@keyframes pulseMic { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 118, 117, 0.5); } 70% { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(255, 118, 117, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 118, 117, 0); } }

.voice-status { font-weight: 800; font-size: 0.95rem; color: var(--text-muted); }
.target-phrase-card { background: rgba(108, 92, 231, 0.06); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); width: 100%; text-align: center; font-weight: 800; color: var(--chanak-purple); border: 1px dashed var(--chanak-purple); }

.sentence-builder-box { background: var(--card-bg); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--card-border); }
.sentence-target-area { min-height: 70px; background: rgba(0,0,0,0.03); border: 2px dashed var(--chanak-purple); border-radius: var(--radius-md); padding: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1.5rem; }
.word-chip { background: var(--card-bg); border: 2px solid var(--chanak-purple); padding: 0.5rem 1rem; border-radius: 12px; font-weight: 800; font-size: 1rem; cursor: pointer; user-select: none; transition: var(--transition); }
.word-chip:hover { transform: translateY(-2px); background: var(--chanak-purple); color: white; }
.word-chips-pool { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }

.btn-action { padding: 0.75rem 1.75rem; border-radius: 50px; background: var(--chanak-purple); color: white; border: none; font-weight: 800; font-size: 1rem; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35); }
.btn-action:hover { transform: translateY(-2px); background: #4834D4; }
.btn-secondary { background: var(--card-bg); color: var(--text-main); border: 1px solid var(--card-border); box-shadow: none; }

.story-visualizer-canvas { background: linear-gradient(135deg, #1E1B4B, #312E81); color: white; border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
[data-theme="dark"] .story-visualizer-canvas { box-shadow: 0 0 0 2px var(--chanak-purple), var(--shadow-md); }
.motion-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 24px 24px; animation: floatBg 20s linear infinite; pointer-events: none; }
@keyframes floatBg { from { background-position: 0 0; } to { background-position: 100px 100px; } }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.vocab-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 1.25rem; text-align: center; transition: var(--transition); }
.vocab-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* PRONUNCIATION SHOWS - Animated Character Player */
.char-selector-row { display: flex; gap: 0.75rem; overflow-x: auto; margin-bottom: 1.5rem; padding-bottom: 0.25rem; }
.char-selector-chip { display: flex; align-items: center; gap: 0.6rem; min-width: 160px; background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius-md); padding: 0.6rem 0.9rem; cursor: pointer; transition: var(--transition); }
.char-selector-chip:hover { transform: translateY(-2px); border-color: var(--char-color, var(--chanak-purple)); }
.char-selector-chip.active { border-color: var(--char-color, var(--chanak-purple)); background: color-mix(in srgb, var(--char-color, var(--chanak-purple)) 10%, var(--card-bg)); }

.char-player-box { background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.char-player-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 1.05rem; }
.char-progress-text { font-size: 0.85rem; font-weight: 800; color: var(--text-muted); }

.char-avatar-stage { display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--char-color, var(--chanak-purple)) 25%, transparent), transparent 70%); }
.char-avatar-emoji { font-size: 5rem; transition: transform 0.15s ease-in-out; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.15)); }
.char-avatar-stage.speaking .char-avatar-emoji { animation: charTalkBounce 0.5s infinite ease-in-out; }
@keyframes charTalkBounce { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.12) rotate(2deg); } }

.char-phrase-card { background: color-mix(in srgb, var(--char-color, var(--chanak-purple)) 8%, transparent); border: 1px dashed var(--char-color, var(--chanak-purple)); border-radius: var(--radius-md); padding: 1.1rem 1.4rem; text-align: center; margin-bottom: 1rem; }
.char-phrase-en { font-family: var(--font-heading); font-weight: 900; font-size: 1.3rem; color: var(--char-color, var(--chanak-purple)); }
.char-phrase-phonetics { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.3rem; }
.char-phrase-es { font-size: 0.95rem; font-style: italic; margin-top: 0.4rem; }

.char-progress-dots { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 1.25rem; }
.char-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-border); }
.char-dot.active { background: var(--char-color, var(--chanak-purple)); }

.char-controls-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.char-controls-row .mic-btn-main { width: 64px; height: 64px; font-size: 1.6rem; background: linear-gradient(135deg, var(--char-color, var(--chanak-purple)), var(--chanak-purple)); }

.sidebar-panel { display: flex; flex-direction: column; gap: 1.5rem; }
.panel-card { background: var(--card-bg); border-radius: var(--radius-lg); padding: 1.5rem; border: 1px solid var(--card-border); box-shadow: var(--shadow-sm); }
.panel-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }

.progress-bar-fill-wrap { background: rgba(0,0,0,0.08); border-radius: 50px; height: 12px; overflow: hidden; margin-bottom: 0.5rem; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--chanak-teal), var(--chanak-purple)); border-radius: 50px; transition: width 0.5s ease; }

.section-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; color: var(--text-main); }

.badge-item { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; background: var(--card-border); filter: grayscale(1) opacity(0.6); }
.badge-item.unlocked { background: linear-gradient(135deg, #FFEAA7, #FDCB6E); filter: none; }

.keyboard-fallback-box { width: 100%; max-width: 480px; }
.keyboard-fallback-box .fallback-input-row { display: flex; gap: 0.5rem; width: 100%; }
.fallback-text-input { flex: 1; padding: 0.7rem 1rem; border-radius: 14px; border: 2px solid var(--chanak-purple); font-size: 1rem; background: var(--card-bg); color: var(--text-main); }

.warn-note { background: color-mix(in srgb, var(--chanak-gold) 20%, transparent); color: color-mix(in srgb, var(--chanak-gold) 55%, var(--text-main)); padding: 0.6rem 1rem; border-radius: 12px; font-weight: 800; font-size: 0.85rem; margin-bottom: 0.75rem; text-align: center; }

.diploma-box { background: var(--card-bg); border: 2px dashed var(--card-border); padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem; text-align: center; color: var(--text-main); }

@media (max-width: 480px) {
  .navbar { flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; }
  .nav-stats { flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
  .dashboard-stats-grid { grid-template-columns: 1fr !important; }
}

/* ALPHABET PRONUNCIATION GUIDE (26 letters; vowels + C/G/S/X/Y show two sounds each) */
.vowel-guide-box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.vowel-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.85rem; margin-top: 1rem; align-items: start; }
.vowel-card { background: transparent; border: 2px solid var(--card-border); border-radius: var(--radius-md); padding: 0.75rem 0.6rem; text-align: center; transition: var(--transition); }
.vowel-card.is-vowel { border-color: var(--chanak-gold); background: color-mix(in srgb, var(--chanak-gold) 8%, transparent); }
.vowel-card-letter { font-family: var(--font-heading); font-weight: 900; font-size: 1.3rem; color: var(--chanak-purple); margin-bottom: 0.4rem; }

.vowel-sound-row { position: relative; cursor: pointer; border-radius: 10px; padding: 0.5rem 0.3rem 0.6rem; transition: var(--transition); }
.vowel-sound-row:hover, .vowel-sound-row:focus-visible { transform: translateY(-2px); background: color-mix(in srgb, var(--chanak-purple) 8%, transparent); outline: none; }
.vowel-sound-row + .vowel-sound-row { margin-top: 0.4rem; border-top: 1px dashed var(--card-border); }
.sound-label { display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--chanak-purple); background: color-mix(in srgb, var(--chanak-purple) 12%, transparent); padding: 0.1rem 0.5rem; border-radius: 20px; margin-bottom: 0.35rem; }

.mouth-face { width: 52px; height: 52px; margin: 0 auto 0.4rem auto; border-radius: 50%; background: linear-gradient(135deg, #FFEAA7, #FDCB6E); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.08); }
.mouth-emoji { font-size: 1.9rem; line-height: 1; transition: transform 0.2s ease; }
.vowel-sound-row.speaking .mouth-emoji { animation: mouthPulse 0.4s infinite ease-in-out; }
@keyframes mouthPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

.vowel-card-sound { font-weight: 800; color: var(--text-main); font-size: 0.85rem; }
.vowel-card-example { font-size: 0.75rem; color: var(--text-muted); text-transform: capitalize; }
.vowel-card-instruction { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.3; }
.vowel-card-listen { width: 30px; height: 30px; font-size: 0.8rem; margin-top: 0.4rem; pointer-events: none; }
.vowel-sound-row.speaking .vowel-card-listen { color: white; background: var(--chanak-purple); }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box { background: var(--card-bg); border-radius: var(--radius-lg); width: 90%; max-width: 650px; max-height: 90vh; overflow-y: auto; padding: 2rem; position: relative; }
.modal-close { position: absolute; top: 1.25rem; right: 1.25rem; background: transparent; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); }