/* =========================================================================
   📚 Homework Portal — async assignments, school-paper vibe
   Cream + gold + teal palette. Distinct from the live-game color world
   so students know they're in "study mode."
   ========================================================================= */
body.hw-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(91, 232, 209, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(255, 213, 122, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, #1a1a26 0%, #14121e 60%, #0c0a14 100%);
  color: #f3e6c2;
  font-family: 'Nunito', sans-serif;
}
.hidden { display: none !important; }

/* ── Entry screen ────────────────────────────────────────────────── */
.hw-entry {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 14px;
}
.hw-entry-card {
  width: 100%; max-width: 460px;
  background: linear-gradient(160deg, rgba(40, 50, 80, 0.95), rgba(20, 25, 45, 0.97));
  border: 3px solid rgba(91, 232, 209, 0.55);
  border-radius: 22px;
  padding: 28px 28px 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(91, 232, 209, 0.18);
  text-align: center;
}
.hw-entry-icon { font-size: 4rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.hw-entry-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.8rem;
  color: #5be8d1;
  margin: 8px 0 4px;
  letter-spacing: 0.04em;
}
.hw-entry-sub { color: rgba(243, 230, 194, 0.7); font-size: 0.95rem; margin-bottom: 18px; }
.hw-entry-label {
  display: block; text-align: left;
  font-size: 0.88rem; color: rgba(243, 230, 194, 0.85);
  font-weight: 700;
  margin: 12px 0 6px;
}
.hw-entry-label em { font-style: italic; color: rgba(243, 230, 194, 0.55); font-weight: 600; font-size: 0.82em; }
.hw-entry-input { width: 100%; margin-top: 4px; }
.hw-entry-hint {
  font-size: 0.78rem;
  color: rgba(243, 230, 194, 0.55);
  font-style: italic;
  margin-top: 16px;
  line-height: 1.4;
  text-align: left;
}

/* ── Assignment list ─────────────────────────────────────────────── */
.hw-list {
  max-width: 980px;
  margin: 0 auto;
  /* 📱 Top padding now respects the notch / status bar so the avatar +
     title never get cut off on iPhones with a dynamic island. The
     +18px base keeps the layout breathing on devices without a notch. */
  padding:
    calc(18px + env(safe-area-inset-top, 0px)) 16px
    calc(40px + env(safe-area-inset-bottom, 0px));
}
/* 🛟 Tap feedback: card briefly dims while the fetch is in flight.
   Removed the rotating ⏳ icon + the teal outline because the user
   explicitly correlated "the loading icon arrival" with platform
   slowness. The dim-down still confirms the tap registered, without
   any running animation. */
.hw-card-loading {
  opacity: 0.7;
  transition: opacity 0.1s;
}
/* 📢 Non-blocking network toast — replaces alert() so the kid never gets
   locked behind an OK button when the connection is flaky. Auto-hides
   after ~2.4s. Sits above the safe-area on iOS. */
.hw-net-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 24, 40, 0.96);
  border: 2px solid rgba(255, 213, 122, 0.6);
  color: #ffd57a;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.hw-net-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 🌙 Daily card — TOMORROW preview chip (build anticipation: kid sees
   what's coming and is more likely to come back). */
.hw-dc-tomorrow {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(91, 232, 209, 0.10);
  border: 1px dashed rgba(91, 232, 209, 0.4);
  border-radius: 999px;
  color: rgba(91, 232, 209, 0.9);
  font-size: 0.84rem;
  text-align: center;
  font-weight: 700;
}
.hw-dc-tomorrow strong { color: #5be8d1; }
/* 🌟 Daily card — DÍA DORADO bonus banner. Gold gradient + pulse. */
.hw-dc-bonus {
  background: linear-gradient(90deg, #ffd24a, #ffb547, #ffd24a);
  background-size: 200% 100%;
  color: #1a1a26;
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 12px;
  margin: 10px 0 6px;
  text-align: center;
  font-size: 0.95rem;
  box-shadow: 0 4px 18px rgba(255, 210, 74, 0.4);
  animation: hwDcBonusPulse 1.8s ease-in-out infinite, hwDcBonusShine 3s linear infinite;
}
@keyframes hwDcBonusPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes hwDcBonusShine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ⚡ REACT MODE — arcade-style 3-sec pinyin-to-emoji quiz */
.hw-game-arena.hw-react-mode {
  background: radial-gradient(ellipse at 50% 30%, rgba(91,232,209,0.18), rgba(15,15,30,0.99) 70%);
  align-items: stretch;
}
.hw-react-shell {
  display: flex; flex-direction: column;
  width: 100%; max-width: 520px; margin: 0 auto;
  padding: 16px 14px calc(20px + env(safe-area-inset-bottom, 0));
  gap: 14px; align-items: center;
}
.hw-react-progress {
  width: 100%; height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.hw-react-progress-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #5be8d1, #b6f8ec);
  transition: width 0.4s ease-out;
}
.hw-react-combo {
  font-weight: 900; color: #ffd24a; font-size: 0.95rem;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.hw-react-py {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 6px 24px rgba(91,232,209,0.5);
  text-align: center;
  margin: 8px 0;
}
.hw-react-timer-wrap {
  position: relative;
  width: 76px; height: 76px;
}
.hw-react-timer { width: 100%; height: 100%; transform: rotate(-90deg); }
.hw-react-timer-bg {
  fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 6;
}
.hw-react-timer-ring {
  fill: none; stroke: #5be8d1; stroke-width: 6; stroke-linecap: round;
}
.hw-react-timer-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.5rem; color: #fff;
}
.hw-react-choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
}
.hw-react-choice {
  background: rgba(38, 40, 60, 0.95);
  border: 2px solid rgba(91, 232, 209, 0.35);
  border-radius: 16px;
  padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: #f3e6c2; font-weight: 800; font-size: 0.95rem;
  cursor: pointer; touch-action: manipulation;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.hw-react-choice:active { transform: scale(0.96); background: rgba(91,232,209,0.18); }
.hw-react-choice-icon { font-size: 2.2rem; line-height: 1; }
.hw-react-choice-es { font-size: 0.88rem; opacity: 0.9; }
.hw-react-choice.is-right {
  background: rgba(91,232,138,0.35);
  border-color: #5be88a;
  transform: scale(1.05);
  box-shadow: 0 8px 28px rgba(91,232,138,0.4);
}
.hw-react-choice.is-wrong {
  background: rgba(255,80,80,0.35);
  border-color: #ff5a5a;
  animation: hwReactWrongShake 0.32s ease-out;
}
@keyframes hwReactWrongShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.hw-game-arena.hw-react-shake { animation: hwReactArenaShake 0.32s ease-out; }
@keyframes hwReactArenaShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* ⏳ Daily-screen loading skeleton — replaces blank screen during the
   network round-trip so the kid sees the page IS responding. */
.hw-daily-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
  font-size: 1.1rem; font-weight: 800;
  color: rgba(255, 213, 122, 0.85);
  animation: hwDailyLoadingPulse 1.2s ease-in-out infinite;
}
@keyframes hwDailyLoadingPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.hw-list-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 18px;
  background: rgba(38, 40, 60, 0.85);
  border: 2px solid rgba(91, 232, 209, 0.45);
  border-radius: 14px;
  margin-bottom: 18px;
}
.hw-list-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: #5be8d1;
  margin: 0 0 4px;
  font-size: 1.5rem;
}
.hw-list-sub {
  color: rgba(243, 230, 194, 0.8);
  margin: 0;
  font-size: 0.92rem;
}
.hw-list-sub strong {
  color: #ffe082;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
}

.hw-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.hw-card {
  background: linear-gradient(160deg, rgba(50, 55, 90, 0.85), rgba(28, 30, 50, 0.92));
  border: 3px solid rgba(255, 213, 122, 0.5);
  border-radius: 16px;
  padding: 16px 18px 18px;
  text-align: left;
  color: #f3e6c2;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.hw-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 213, 122, 0.35); border-color: #ffe082; }
.hw-card-done { border-color: rgba(91, 232, 209, 0.7); }
.hw-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.hw-card-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}
.hw-card-badge.new {
  background: rgba(255, 213, 122, 0.22);
  border: 1px solid #ffd57a;
  color: #ffe082;
}
.hw-card-badge.done {
  background: rgba(91, 232, 209, 0.22);
  border: 1px solid #5be8d1;
  color: #5be8d1;
}
.hw-card-points {
  font-size: 0.82rem;
  font-weight: 800;
  color: rgba(243, 230, 194, 0.55);
}
.hw-card-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff5d8;
  margin-bottom: 4px;
}
.hw-card-sub { color: rgba(243, 230, 194, 0.75); font-size: 0.9rem; margin-bottom: 8px; }
.hw-card-meta { color: rgba(243, 230, 194, 0.55); font-size: 0.8rem; font-style: italic; }
.hw-empty {
  padding: 40px;
  text-align: center;
  color: rgba(243, 230, 194, 0.6);
  font-style: italic;
  background: rgba(40, 45, 70, 0.5);
  border-radius: 14px;
}

/* ── Assignment screen ───────────────────────────────────────────── */
.hw-assignment {
  max-width: 980px;
  margin: 0 auto;
  padding:
    calc(16px + env(safe-area-inset-top, 0px)) 14px
    calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hw-assignment-header {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(38, 40, 60, 0.85);
  border: 2px solid rgba(91, 232, 209, 0.4);
  border-radius: 14px;
  padding: 12px 16px;
}
.hw-asg-titles { flex: 1; }
.hw-asg-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #ffe082; margin: 0;
  font-size: clamp(1.1rem, 4vmin, 1.5rem);
}
.hw-asg-sub { color: rgba(243, 230, 194, 0.75); margin: 4px 0 0; font-size: 0.92rem; }
.hw-asg-instructions {
  background: rgba(91, 232, 209, 0.12);
  border-left: 3px solid #5be8d1;
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(243, 230, 194, 0.95);
  font-size: 0.95rem;
  margin: 0;
}

.hw-asg-items {
  display: flex; flex-direction: column; gap: 12px;
}
.hw-item {
  background: rgba(38, 40, 60, 0.7);
  border: 2px solid rgba(255, 213, 122, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
}
.hw-item-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.hw-item-num {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #ffe082;
  font-size: 1.05rem;
}
.hw-item-es {
  color: #fff5d8;
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vmin, 1.1rem);
}
.hw-item-stage {
  min-height: 56px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px dashed rgba(255, 213, 122, 0.3);
  border-radius: 10px;
  cursor: pointer;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.hw-item-stage.active {
  border-color: #5be8d1;
  background: rgba(91, 232, 209, 0.08);
  box-shadow: inset 0 0 12px rgba(91, 232, 209, 0.18);
}
.hw-stage-empty {
  color: rgba(243, 230, 194, 0.5);
  font-style: italic;
  font-size: 0.9rem;
}
.hw-stage-word {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px;
  background: rgba(60, 50, 30, 0.65);
  border-left: 3px solid var(--cat-color, #ffe082);
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.95rem;
}
.hw-stage-word:hover { background: rgba(80, 65, 38, 0.75); }
.hw-stage-pinyin { color: var(--cat-color, #ffe082); }
.hw-stage-x { color: rgba(255, 90, 102, 0.7); font-size: 0.85em; }
.hw-item-actions {
  display: flex;
  flex-wrap: wrap;            /* let the buttons wrap on narrow phones */
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  /* Don't let action buttons overflow the parent — was cutting off the
     leftmost button on iPhone SE / smaller Androids (user feedback
     2026-05-27 with screenshot). */
  max-width: 100%;
}
.hw-item-actions .btn {
  /* Shrink to content on small screens; never stretch past 100% */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
/* On narrow phones, swap to icon-only labels for the action buttons
   so all three fit on one row inside the parent. */
@media (max-width: 480px) {
  .hw-item-actions .btn {
    padding: 6px 10px !important;
    font-size: 0.82rem;
  }
  .hw-item-speak .label-full,
  .hw-item-undo .label-full,
  .hw-item-clear .label-full { display: none; }
  .hw-item-speak::after  { content: ' Audio'; }
  .hw-item-undo::after   { content: ''; }
  .hw-item-clear::after  { content: ''; }
}

.hw-asg-library-section {
  margin-top: 6px;
}
/* 📌 When the catalog is anchored inside an active sentence item, give it a
   distinct nested look so the kid sees it as "this slot's word picker"
   rather than "the whole-page catalog." */
.hw-item.is-active-item { background: rgba(50, 60, 100, 0.18); border-radius: 14px; padding-bottom: 6px; }
.hw-item.is-active-item .hw-asg-library-section { margin-top: 10px; padding: 8px 6px 6px; background: rgba(20, 22, 36, 0.55); border: 1px dashed rgba(255, 213, 122, 0.35); border-radius: 12px; }
.hw-item.is-active-item .hw-asg-library { max-height: 36dvh; }
.hw-item.is-active-item .hw-asg-library-title { font-size: 0.85rem; }
/* Anchored prev/next nav row */
.hw-anchor-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 8px; }
.hw-anchor-pos { font-weight: 800; color: #ffd24a; font-size: 0.9rem; }
.hw-anchor-btn { border: 2px solid rgba(91,232,209,0.45); background: rgba(91,232,209,0.12); color: #aff3e7; font-weight: 900; font-size: 0.9rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; touch-action: manipulation; }
.hw-anchor-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.hw-anchor-btn:active:not(:disabled) { transform: scale(0.95); }
.hw-anchor-btn.hw-anchor-next { background: linear-gradient(135deg, #5be8d1, #36b9c7); color: #07232a; border-color: #5be8d1; }

/* ── 🎯 Tareas especiales (custom assignments) ────────────────────── */
.hw-sec-custom { color: #ffd24a; }
.hw-list-custom { margin-bottom: 14px; }
.hw-custom-card { background: linear-gradient(160deg, rgba(80,60,30,0.65), rgba(40,30,20,0.85)) !important; border-color: #ffd24a !important; box-shadow: 0 0 20px rgba(255,210,74,0.25); }
.hw-custom-card.is-passed { opacity: 0.85; }
.hw-custom-card.is-pending .hw-folder-progress { color: #ffb46b; font-weight: 900; }
.hw-custom-card .hw-folder-progress { color: #5be8d1; }
.hw-custom-card:not(.is-passed):not(.is-pending) { animation: hwCustomPulse 2.2s ease-in-out infinite; }
@keyframes hwCustomPulse { 0%,100% { box-shadow: 0 0 20px rgba(255,210,74,0.25); } 50% { box-shadow: 0 0 30px rgba(255,210,74,0.55); } }

/* ── 🎯 Custom assignments — two separate sections ────────────────── */
.hw-custom-done-wrap { margin: 14px 0 0; }
.hw-custom-done-wrap > summary { cursor: pointer; list-style: none; user-select: none; padding: 6px 0; touch-action: manipulation; }
.hw-custom-done-wrap > summary::-webkit-details-marker { display: none; }
.hw-custom-done-wrap > summary::after { content: '▾'; margin-left: 8px; color: #5be8d1; transition: transform 0.2s; display: inline-block; }
.hw-custom-done-wrap[open] > summary::after { transform: rotate(180deg); }
.hw-done-count { color: rgba(243,230,194,0.6); font-weight: 700; font-size: 0.85rem; margin-left: 6px; }

/* Make EVERY folder card have an explicit fast-tap target so iOS doesn't
   swallow first-touches on the home grid. (Bug report: iPhone + Galaxy S23
   sometimes ignored taps on assignment cards.) */
.hw-folder-card { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0); min-height: 88px; }

/* ⬅️ Volver button on the assignment screen — bigger touch target so it's
   never lost off-screen on small phones. */
.hw-assignment-header .btn { min-height: 44px; min-width: 84px; font-size: 0.95rem; padding: 10px 16px; }

/* ── 📖 "Lo que aprendí hoy" panel on the daily home (after completion) ─ */
.hw-dc-learned { margin: 10px 0 4px; padding: 12px; background: rgba(20,24,40,0.55); border: 1px solid rgba(91,232,209,0.35); border-radius: 14px; }
.hw-dc-learned-head { font-weight: 900; color: #5be8d1; margin-bottom: 8px; font-size: 0.92rem; }
.hw-dc-learned-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hw-dc-learned-chip { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--cat-color, #ffe082); color: #1a1a2a; border: none; border-radius: 12px; font-weight: 900; cursor: pointer; touch-action: manipulation; font-family: inherit; box-shadow: 0 3px 8px rgba(0,0,0,0.3); }
.hw-dc-learned-chip:active { transform: scale(0.94); }
.hw-dc-lc-icon { font-size: 1rem; line-height: 1; }
.hw-dc-lc-py { font-size: 0.85rem; }
.hw-dc-lc-es { font-size: 0.7rem; font-style: italic; opacity: 0.78; }
.hw-dc-lc-speak { font-size: 0.85rem; opacity: 0.8; }
/* ✍️ Practice a sentence from today's discovered words */
.hw-dc-learned-build { display: block; width: 100%; margin: 10px 0 0; border: none; border-radius: 999px; font-weight: 900; font-size: 0.95rem; padding: 12px 18px; cursor: pointer; touch-action: manipulation; background: linear-gradient(135deg, #5be8d1, #36b9c7); color: #07232a; font-family: inherit; }
.hw-dc-learned-build:active { transform: scale(0.97); }

/* ===================================================================
   🎬 ANIME CUTSCENE — manga-style intro/outro for daily challenges
   =================================================================== */
.hw-cutscene { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #1a0008; opacity: 0; transition: opacity 0.25s; pointer-events: none; cursor: pointer; }
.hw-cutscene.show { opacity: 1; pointer-events: auto; }
/* Halftone dot pattern background — the manga signature */
.hw-cs-halftone { position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, transparent 0, transparent 4px, currentColor 4px, currentColor 5px, transparent 5px);
  background-size: 14px 14px; color: rgba(0,0,0,0.9);
  mix-blend-mode: multiply; opacity: 0.4;
  animation: hwCsHalftonePulse 0.6s ease-in-out infinite alternate;
}
@keyframes hwCsHalftonePulse { from { transform: scale(1); } to { transform: scale(1.06); } }
/* Comic impact lines — radial spokes from the center */
.hw-cs-lines { position: absolute; left: 50%; top: 50%; width: 200vmax; height: 200vmax; transform: translate(-50%,-50%);
  background:
    conic-gradient(from 0deg,
      currentColor 0deg 1.5deg, transparent 1.5deg 12deg,
      currentColor 12deg 13deg, transparent 13deg 24deg,
      currentColor 24deg 25.5deg, transparent 25.5deg 36deg,
      currentColor 36deg 37deg, transparent 37deg 48deg,
      currentColor 48deg 49.5deg, transparent 49.5deg 60deg,
      currentColor 60deg 61deg, transparent 61deg 72deg,
      currentColor 72deg 73.5deg, transparent 73.5deg 84deg,
      currentColor 84deg 85deg, transparent 85deg 96deg);
  color: rgba(255,255,255,0.06);
  -webkit-mask: radial-gradient(circle, transparent 80px, black 200px);
          mask: radial-gradient(circle, transparent 80px, black 200px);
  animation: hwCsLinesSpin 8s linear infinite;
}
@keyframes hwCsLinesSpin { to { transform: translate(-50%,-50%) rotate(45deg); } }
/* Tint per character mood */
.hw-cutscene.tint-crimson { background: linear-gradient(160deg, #380008, #1a0008); }
.hw-cutscene.tint-crimson .hw-cs-lines { color: rgba(255,40,40,0.18); }
.hw-cutscene.tint-crimson .hw-cs-halftone { color: rgba(60,0,0,0.95); }
.hw-cutscene.tint-indigo  { background: linear-gradient(160deg, #0a0838, #1a1a3a); }
.hw-cutscene.tint-indigo .hw-cs-lines { color: rgba(120,140,255,0.16); }
.hw-cutscene.tint-violet  { background: linear-gradient(160deg, #2a0a3a, #160a26); }
.hw-cutscene.tint-violet .hw-cs-lines { color: rgba(200,120,255,0.14); }
.hw-cutscene.tint-amber   { background: linear-gradient(160deg, #3a2400, #1a1200); }
.hw-cutscene.tint-amber .hw-cs-lines { color: rgba(255,210,74,0.18); }

/* The character — slides in from one side with rotation, big drop shadow */
.hw-cs-char { position: relative; z-index: 3; max-width: 70vmin; max-height: 70vmin; width: auto; height: auto; filter: drop-shadow(0 14px 28px rgba(0,0,0,0.85)) drop-shadow(0 0 20px rgba(255,80,80,0.4)); transform: translateX(-40vw) rotate(-12deg) scale(0.6); opacity: 0; transition: transform 0.55s cubic-bezier(0.2,1.4,0.3,1), opacity 0.35s; }
.hw-cutscene.show .hw-cs-char { transform: translateX(0) rotate(-3deg) scale(1); opacity: 1; }
.hw-cutscene-outro .hw-cs-char { transform: translateX(40vw) rotate(8deg) scale(0.6); }
.hw-cutscene-outro.show .hw-cs-char { transform: translateX(0) rotate(2deg) scale(1); }

/* Big BOOM impact word */
.hw-cs-impact { position: absolute; top: 8%; left: 50%; z-index: 5; transform: translateX(-50%) scale(0); font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(2.4rem, 9vmin, 4rem); color: #fff; text-shadow: 0 0 14px rgba(255,80,80,0.8), 0 4px 0 #000, 4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000; letter-spacing: 0.06em; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.hw-cutscene.show .hw-cs-impact { transform: translateX(-50%) scale(1) rotate(-4deg); }

/* Manga speech bubble — white background with a tail, bold text */
.hw-cs-bubble { position: absolute; bottom: 14%; right: 6%; max-width: 60%; z-index: 4; background: #fff8e8; color: #14101a; padding: 14px 18px; border-radius: 18px; border: 4px solid #1a1a1a; transform: scale(0); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.2s; box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.hw-cs-bubble::before { content: ''; position: absolute; left: -22px; bottom: 32px; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-right: 24px solid #1a1a1a; }
.hw-cs-bubble::after  { content: ''; position: absolute; left: -14px; bottom: 36px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 16px solid #fff8e8; }
.hw-cutscene.show .hw-cs-bubble { transform: scale(1) rotate(-2deg); }
.hw-cs-bubble-text { font-weight: 900; font-size: clamp(1rem, 3.6vmin, 1.4rem); line-height: 1.25; }
/* Tap-to-continue hint at the bottom */
.hw-cs-tap { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); z-index: 5; color: rgba(255,255,255,0.6); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; animation: hwCsTapBlink 1.2s ease-in-out infinite; }
@keyframes hwCsTapBlink { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ===================================================================
   📖 STORY MODE — replaces slash with cutscene-driven word reveals
   (Pokémon-style: big character + dialogue bar at the bottom).
   =================================================================== */
.hw-game-arena.hw-story-mode { padding: 0; }
.hw-story-panel { position: absolute; inset: 0; background: radial-gradient(circle at 50% 25%, rgba(60,40,90,0.95), rgba(15,12,28,0.98)); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity 0.25s; touch-action: manipulation; }
.hw-story-panel.show { opacity: 1; }
.hw-sp-halftone { position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, transparent 0, transparent 3px, currentColor 3px, currentColor 4px, transparent 4px);
  background-size: 12px 12px; color: rgba(0,0,0,0.6); mix-blend-mode: multiply; opacity: 0.35;
  pointer-events: none;
}
.hw-sp-char { position: absolute; top: calc(env(safe-area-inset-top,0) + 50px); left: 50%; transform: translateX(-50%); max-width: 80vmin; max-height: 56vh; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 14px 28px rgba(0,0,0,0.85)) drop-shadow(0 0 20px var(--cat-color, rgba(255,210,74,0.5))); animation: hwSpCharEnter 0.6s cubic-bezier(.2,1.6,.3,1) both; pointer-events: none; z-index: 2; }
@keyframes hwSpCharEnter { 0% { transform: translateX(-50%) scale(0.6) rotate(-10deg); opacity: 0; } 100% { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: 1; } }
/* Word card floats over the character, lower-third */
.hw-sp-word { position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(18px, 4vmin, 28px) clamp(26px, 6vmin, 44px); background: var(--cat-color, #ffe082); color: #1a1a2a; border-radius: 24px; border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 12px 32px rgba(0,0,0,0.65), 0 0 0 6px rgba(255,224,130,0.18), 0 0 28px var(--cat-color, #ffe082); animation: hwSpWordPop 0.55s cubic-bezier(.3,1.6,.5,1) 0.3s both; max-width: 86vw; text-align: center; }
@keyframes hwSpWordPop { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
.hw-sp-word-icon { font-size: clamp(2.2rem, 8vmin, 3.4rem); line-height: 1; }
.hw-sp-word-py { font-weight: 900; font-size: clamp(2rem, 9vmin, 3.6rem); letter-spacing: -0.01em; line-height: 1.05; text-shadow: 0 2px 0 rgba(0,0,0,0.18); }
.hw-sp-word-es { font-style: italic; font-weight: 900; font-size: clamp(1.05rem, 4.5vmin, 1.5rem); opacity: 0.86; }
.hw-sp-word-icon { font-size: clamp(2rem, 7vmin, 2.8rem); line-height: 1; }
/* Score popup that floats up when a word is revealed — Mario-style. */
.hw-sp-score-burst { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(1.6rem, 6vmin, 2.4rem); color: #ffe082; text-shadow: 0 0 12px #ff7e5f, 0 3px 0 rgba(0,0,0,0.45); pointer-events: none; z-index: 8; animation: hwScoreFloat 1.1s ease-out forwards; }
@keyframes hwScoreFloat { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -64px) scale(1); } }
/* Confetti specks that fly out from the gift box on reveal. */
.hw-sp-particle { position: absolute; left: 50%; top: 40%; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; z-index: 7; animation: hwParticleFly 0.9s ease-out forwards; }
@keyframes hwParticleFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.2); }
}
/* Tiny combo counter at the top of the story panel — counts up each word. */
.hw-sp-combo {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  background: rgba(0,0,0,0.55); color: #ffe082;
  border: 1.5px solid #ffe082; border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Cinzel', serif; font-weight: 900; font-size: 0.92rem;
  letter-spacing: 0.04em;
  box-shadow: 0 0 14px rgba(255,224,130,0.5);
}
.hw-sp-combo-num { font-size: 1.18rem; }
.hw-sp-combo.pulse { animation: hwComboPulse 0.36s; }
@keyframes hwComboPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }

/* Pokémon-style dialogue bar — fixed bottom, white card, thick black border,
   character name plate above the body, action buttons inside the box. */
.hw-sp-dialog { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom,0) + 14px); z-index: 4; background: #fff8e8; color: #14101a; border: 5px solid #1a1a1a; border-radius: 18px; padding: 18px 18px 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.6); animation: hwSpDialogIn 0.35s cubic-bezier(.3,1.4,.5,1) 0.45s both; }
@keyframes hwSpDialogIn { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.hw-sp-dialog-name { position: absolute; top: -16px; left: 16px; background: #1a1a1a; color: #ffd24a; font-weight: 900; font-size: 0.85rem; padding: 4px 12px; border-radius: 999px; letter-spacing: 0.04em; }
.hw-sp-dialog-text { font-weight: 800; font-size: clamp(1rem, 4vmin, 1.2rem); line-height: 1.4; margin-bottom: 12px; min-height: 2.6em; }
.hw-sp-dialog-text strong { color: #c91432; font-weight: 900; }
.hw-sp-dialog-text em { font-style: italic; color: #3a2400; font-weight: 700; }
.hw-sp-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.hw-sp-listen, .hw-sp-next { border: none; border-radius: 999px; font-weight: 900; padding: 10px 18px; cursor: pointer; touch-action: manipulation; font-family: inherit; }
.hw-sp-listen { background: linear-gradient(135deg, #ffb46b, #ff7e5f); color: #2a1500; font-size: 0.95rem; }
.hw-sp-next { background: linear-gradient(135deg, #5be8d1, #36b9c7); color: #07232a; font-size: 1.05rem; }
.hw-sp-listen:active, .hw-sp-next:active { transform: scale(0.95); }
.hw-asg-library-title {
  font-weight: 800;
  color: #ffe082;
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.hw-asg-library {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 40dvh;
  overflow-y: auto;
  padding: 10px;
  background: rgba(20, 22, 36, 0.8);
  border: 2px solid rgba(255, 213, 122, 0.3);
  border-radius: 12px;
}
.hw-lib-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  background: rgba(50, 55, 90, 0.85);
  border: 2px solid var(--cat-color, rgba(255, 213, 122, 0.45));
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-family: inherit;
  color: #fff5d8;
  min-width: 64px;
  transition: transform 0.08s, box-shadow 0.12s;
}
.hw-lib-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 213, 122, 0.3); }
.hw-lib-chip:active { transform: scale(0.96); }
.hw-lib-icon { font-size: 1.2rem; line-height: 1; }
.hw-lib-pinyin {
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--cat-color, #ffe082);
  margin-top: 2px;
}
.hw-lib-es {
  font-size: 0.7rem;
  color: rgba(243, 230, 194, 0.7);
  font-style: italic;
  margin-top: 1px;
}

.hw-asg-actions {
  display: flex; justify-content: center;
  padding: 4px 0;
}
/* Sticky top submit — duplicate of the bottom Entregar button so kids on
   tablets can submit without scrolling. User feedback 2026-05-27: bottom
   button was sometimes hidden behind the on-screen keyboard. */
.hw-asg-actions-top {
  position: sticky;
  top: max(8px, env(safe-area-inset-top, 0px));
  z-index: 10;
  padding: 8px;
  background: rgba(20, 22, 36, 0.85);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  border: 2px solid rgba(91, 232, 209, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  margin-top: 4px;
}
.hw-asg-actions-top .btn {
  width: 100%;
}

/* EXP chip — shown on each homework card so kids know what level the
   tarea targets (user feedback 2026-05-27: "always include experience 1,
   experience whatever — that's the way we teach"). */
.hw-card-exp {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(135deg, rgba(91, 232, 209, 0.3), rgba(255, 224, 130, 0.18));
  border: 1px solid #5be8d1;
  color: #5be8d1;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* === HSK levels dropdown (parent view) === */
/* User feedback 2026-05-27: collapsed by default, two-tier (Nivel HSK →
   HSK1 / HSK2 …). Doesn't dump 150 words on the parent at once. */
.hw-parents-levels-wrap {
  background: linear-gradient(160deg, rgba(50, 55, 90, 0.75), rgba(28, 30, 50, 0.9));
  border: 2px solid rgba(180, 100, 255, 0.45);
  border-radius: 14px;
  margin: 14px 0;
  overflow: hidden;
}
.hw-parents-levels-summary {
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;          /* tablet fix — long text wraps instead of overflowing */
  font-size: 0.95rem;
  color: rgba(243, 230, 194, 0.95);
  /* Generous tap target so tablets register reliably */
  min-height: 56px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(180, 100, 255, 0.3);
}
.hw-parents-levels-summary::-webkit-details-marker { display: none; }
.hw-parents-levels-summary strong { color: #c5a3ff; font-family: 'Cinzel', serif; }
.hw-parents-levels-arrow {
  margin-left: auto;
  color: rgba(243, 230, 194, 0.5);
  transition: transform 0.2s;
}
.hw-parents-levels-wrap[open] .hw-parents-levels-arrow { transform: rotate(180deg); }
.hw-parents-levels-inner {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(180, 100, 255, 0.18);
}
.hw-parents-hsk-section {
  margin-top: 10px;
}
.hw-parents-hsk-summary {
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: 0.92rem;
  color: #ffe082;
  background: rgba(20, 22, 36, 0.55);
  border: 1px solid rgba(255, 224, 130, 0.3);
  border-radius: 10px;
  min-height: 48px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 224, 130, 0.3);
}
.hw-parents-hsk-summary::-webkit-details-marker { display: none; }
.hw-parents-hsk-summary.hw-parents-hsk-locked {
  color: rgba(243, 230, 194, 0.5);
  cursor: default;
  font-style: italic;
}
.hw-parents-hsk-section[open] .hw-parents-hsk-summary {
  background: rgba(91, 232, 209, 0.12);
  border-color: #5be8d1;
  color: #5be8d1;
}

.hw-parents-levels-intro {
  font-size: 0.88rem;
  color: rgba(243, 230, 194, 0.8);
  line-height: 1.5;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(91, 232, 209, 0.1);
  border-left: 3px solid #5be8d1;
  border-radius: 8px;
}
.hw-parents-levels {
  display: flex; flex-direction: column; gap: 8px;
}
.hw-level-card {
  background: linear-gradient(160deg, rgba(50, 55, 90, 0.75), rgba(28, 30, 50, 0.9));
  border: 2px solid rgba(255, 213, 122, 0.4);
  border-radius: 12px;
  overflow: hidden;
}
.hw-level-card[open] {
  border-color: #5be8d1;
  box-shadow: 0 0 16px rgba(91, 232, 209, 0.18);
}
.hw-level-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.hw-level-summary::-webkit-details-marker { display: none; }
.hw-level-num {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: #ffe082;
  font-size: 0.92rem;
  background: rgba(255, 224, 130, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.hw-level-label {
  flex: 1;
  color: #fff5d8;
  font-size: 0.92rem;
}
.hw-level-count {
  color: #5be8d1;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}
.hw-level-toggle {
  color: rgba(243, 230, 194, 0.45);
  transition: transform 0.2s;
  flex: 0 0 auto;
}
.hw-level-card[open] .hw-level-toggle {
  transform: rotate(180deg);
}
.hw-level-body {
  padding: 0 14px 14px;
}
.hw-level-tip {
  margin: 4px 0 12px;
  padding: 8px 12px;
  background: rgba(180, 100, 255, 0.12);
  border-left: 3px solid #c5a3ff;
  border-radius: 8px;
  font-size: 0.82rem;
  color: rgba(243, 230, 194, 0.9);
  line-height: 1.45;
  font-style: italic;
}
.hw-level-words {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.hw-level-word {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px;
  background: rgba(20, 22, 36, 0.55);
  border: 1px solid rgba(255, 224, 130, 0.18);
  border-radius: 8px;
  text-align: center;
}
.hw-level-icon { font-size: 1.4rem; line-height: 1; margin-bottom: 2px; }
/* 2026-10-12 — YCT 1 / New HSK 1 word cards show the word's question picture */
.hw-level-pic { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; margin-bottom: 4px; }
.hw-level-word-hanzi {
  font-family: 'ZCOOL XiaoWei', serif;
  font-size: 1.3rem;
  color: #fff5d8;
  line-height: 1.1;
}
.hw-level-word-pinyin {
  color: #ffe082;
  font-weight: 800;
  font-size: 0.85rem;
}
.hw-level-word-es {
  color: rgba(243, 230, 194, 0.7);
  font-style: italic;
  font-size: 0.75rem;
}
/* 🔊 Per-word audio (papás list) — play→cache→replay via speakChinese.
   Big tap target so a parent/kid can hear every word they practice. */
.hw-level-speak {
  margin-top: 6px;
  min-width: 40px;
  padding: 5px 10px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: #0a1320;
  background: #ffe082;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.hw-level-speak:hover { filter: brightness(1.08); }
.hw-level-speak:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.hw-level-speak.speaking { filter: brightness(0.9); animation: hw-speak-pulse 0.7s ease-in-out infinite; }
@keyframes hw-speak-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ── Results screen ──────────────────────────────────────────────── */
.hw-results {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 14px;
}
.hw-results-card {
  width: 100%; max-width: 620px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 230, 106, 0.18), transparent 65%),
    linear-gradient(160deg, rgba(40, 50, 80, 0.97), rgba(20, 25, 45, 0.98));
  border: 3px solid #ffe66a;
  border-radius: 22px;
  padding: 28px 28px 24px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 32px rgba(255, 230, 106, 0.3);
}
.hw-results-emoji {
  font-size: 5rem; line-height: 1;
  animation: hw-bounce 1.2s ease-in-out infinite;
}
@keyframes hw-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.hw-results-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #ffe082;
  margin: 8px 0 12px;
  font-size: 1.4rem;
}
.hw-results-score {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 18px 28px;
  background: linear-gradient(135deg, rgba(255, 230, 106, 0.25), rgba(255, 180, 60, 0.18));
  border: 3px solid #ffe66a;
  border-radius: 16px;
  margin: 6px 0 12px;
  box-shadow: 0 0 28px rgba(255, 230, 106, 0.5);
}
.hw-results-num {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #ffe082;
  font-size: 3.5rem;
  text-shadow: 0 0 20px rgba(255, 224, 130, 0.6);
}
.hw-results-of { color: rgba(243, 230, 194, 0.7); font-size: 1.1rem; font-weight: 800; }
.hw-results-cert {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(91, 232, 209, 0.18);
  border: 2px solid #5be8d1;
  border-radius: 999px;
  color: #5be8d1;
  font-weight: 900;
  margin-bottom: 18px;
}
.hw-results-breakdown {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  margin: 10px 0 20px;
  max-height: 40dvh;
  overflow-y: auto;
  padding: 4px;
}
.hw-results-bk-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  align-items: start;
}
.hw-results-bk-row.ok { background: rgba(91, 232, 209, 0.15); border-left: 3px solid #5be8d1; }
.hw-results-bk-row.no { background: rgba(255, 90, 102, 0.15); border-left: 3px solid #ff5a66; }
.hw-bk-verdict { font-size: 1.3rem; text-align: center; line-height: 1; }
.hw-results-bk-row.ok .hw-bk-verdict { color: #5be8d1; }
.hw-results-bk-row.no .hw-bk-verdict { color: #ff5a66; }
.hw-bk-content { min-width: 0; }
.hw-bk-es { font-weight: 800; color: #fff5d8; margin-bottom: 4px; }
.hw-bk-line { font-size: 0.85rem; line-height: 1.4; }
.hw-bk-label { color: rgba(243, 230, 194, 0.55); }
.hw-bk-student { color: #ffe082; font-weight: 700; }
.hw-bk-expected { color: #5be8d1; font-weight: 700; }
.hw-bk-points {
  font-weight: 900;
  font-family: 'Cinzel', serif;
  color: #ffe082;
  align-self: center;
}
.hw-results-bk-row.no .hw-bk-points { color: rgba(255, 245, 216, 0.4); }

.hw-results-actions {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
}

/* === Avatar picker (first-time entry) === */
.hw-avatar-pick {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 14px;
}
.hw-avatar-pick-card {
  width: 100%; max-width: 560px;
  background: linear-gradient(160deg, rgba(40, 50, 80, 0.95), rgba(20, 25, 45, 0.97));
  border: 3px solid rgba(180, 100, 255, 0.6);
  border-radius: 22px;
  padding: 24px 22px 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(180, 100, 255, 0.25);
  text-align: center;
}
.hw-avatar-pick-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #c5a3ff;
  font-size: clamp(1.3rem, 5vmin, 1.6rem);
  margin: 0 0 6px;
}
.hw-avatar-pick-title span { color: #ffe082; }
.hw-avatar-pick-sub {
  color: rgba(243, 230, 194, 0.75);
  margin-bottom: 14px;
  font-size: 0.95rem;
}
/* Avatar grid — 3-up on phone, 4-up tablet+. Each tile shows the full SVG
   kid (about 100x100 on phone). Generous tap targets matter for 7-yr-olds. */
.hw-avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 6px;
}
@media (min-width: 520px) {
  .hw-avatar-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
.hw-avatar-option {
  background: linear-gradient(135deg, rgba(91, 232, 209, 0.18), rgba(180, 100, 255, 0.18));
  border: 3px solid rgba(91, 232, 209, 0.5);
  border-radius: 16px;
  padding: 8px 6px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
}
.hw-avatar-option:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: #c5a3ff;
  box-shadow: 0 6px 20px rgba(180, 100, 255, 0.5), 0 0 16px rgba(91, 232, 209, 0.3);
}
.hw-avatar-option:active { transform: scale(0.95); }
.hw-avatar-option.selected {
  border-color: #ffe082;
  background: linear-gradient(135deg, rgba(255, 224, 130, 0.28), rgba(180, 100, 255, 0.25));
  box-shadow: 0 0 22px rgba(255, 224, 130, 0.55);
  animation: hwAvatarChosen 0.45s cubic-bezier(.2,.9,.3,1.4), hwAvatarGlow 2s ease-in-out 0.45s infinite;
}
/* Gamified selection: a pop on pick, then a gentle pulsing gold glow + a
   ⭐ corner badge so the chosen avatar feels like a "selected hero". */
@keyframes hwAvatarChosen {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes hwAvatarGlow {
  0%,100% { box-shadow: 0 0 18px rgba(255,224,130,0.45); }
  50%     { box-shadow: 0 0 30px 4px rgba(255,224,130,0.75), 0 0 14px rgba(180,100,255,0.5); }
}
.hw-avatar-option.selected::after {
  content: '⭐'; position: absolute; top: -8px; right: -6px;
  font-size: 1.1rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: hwStarSpin 3s linear infinite;
}
@keyframes hwStarSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.hw-avatar-option { position: relative; }
/* NOTE: the previous infinite idle-float on EVERY avatar image caused
   constant compositing on phones and made taps feel laggy/unresponsive.
   Removed — only the selected avatar animates now (one element). */
@media (prefers-reduced-motion: reduce) {
  .hw-avatar-option.selected, .hw-avatar-option.selected::after { animation: none; }
}

/* === TOUCH RESPONSIVENESS (2026-05-28) === kill the 300ms tap delay and
   ghost/double taps on mobile; every tappable control responds instantly. */
button, a, .hw-card, .hw-folder-card, .hw-lib-chip, .hw-stage-word,
.hw-avatar-option, .hw-item-stage, [role="button"], input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.hw-avatar-option-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 100%, rgba(91, 232, 209, 0.25), transparent 70%),
    rgba(255, 255, 255, 0.04);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.hw-avatar-option-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.hw-avatar-option-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff5d8;
  letter-spacing: 0.02em;
}

/* === Generic avatar slot (renders an SVG kid full-body) === */
/* Used in: list header (.hw-list-avatar-wrap), settings (.hw-settings-avatar),
   parents view (.hw-parents-avatar). The element has class is-svg or is-emoji
   set by JS depending on what the student picked. */
.hw-list-avatar-wrap,
.hw-settings-avatar,
.hw-parents-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(91, 232, 209, 0.3), transparent 70%),
    linear-gradient(135deg, rgba(91, 232, 209, 0.25), rgba(180, 100, 255, 0.25));
  border-radius: 16px;
}
.hw-list-avatar-wrap img,
.hw-settings-avatar img,
.hw-parents-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.hw-avatar-emoji-fallback { font-size: 2.4em; line-height: 1; }

/* === Avatar shown in the list header === */
.hw-list-header-id {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.hw-list-header-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.hw-list-avatar-wrap {
  width: 72px; height: 72px;
  border: 3px solid rgba(91, 232, 209, 0.6);
  box-shadow: 0 0 18px rgba(91, 232, 209, 0.3);
  flex: 0 0 auto;
}
@media (min-width: 520px) {
  .hw-list-avatar-wrap { width: 92px; height: 92px; }
}

/* === Parent view === */
/* Wider on tablets so the HSK dropdown + scrollable cards have room.
   User feedback 2026-05-27: "doesn't scale properly on my tablets,
   the last thing that says niveles de HSK." */
.hw-parents {
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 14px calc(28px + env(safe-area-inset-bottom, 0px));
}
.hw-parents-card {
  background: linear-gradient(160deg, rgba(40, 50, 80, 0.95), rgba(20, 25, 45, 0.97));
  border: 3px solid #c5a3ff;
  border-radius: 22px;
  padding: 22px 24px 26px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(180, 100, 255, 0.2);
}
.hw-parents-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.hw-parents-titlebar { flex: 1; }
.hw-parents-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #c5a3ff; margin: 0;
  font-size: 1.4rem;
}
.hw-parents-sub {
  color: rgba(243, 230, 194, 0.7); margin: 2px 0 0;
  font-size: 0.92rem;
}
.hw-parents-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 16px;
  background: rgba(30, 35, 60, 0.55);
  border-radius: 18px;
  margin-bottom: 14px;
}
.hw-parents-avatar-frame {
  position: relative;
  flex: 0 0 auto;
  width: 130px; height: 130px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 25%, rgba(91, 232, 209, 0.3), transparent 60%),
    linear-gradient(135deg, rgba(180, 100, 255, 0.35), rgba(91, 232, 209, 0.35));
  border: 4px solid #5be8d1;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 32px rgba(91, 232, 209, 0.5),
    0 0 60px rgba(180, 100, 255, 0.3),
    inset 0 0 28px rgba(180, 100, 255, 0.3);
}
.hw-parents-avatar-frame::before {
  /* Cyber-frame accent — corner notches */
  content: '';
  position: absolute; inset: -6px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, #c5a3ff, transparent 30%) border-box,
    linear-gradient(315deg, #5be8d1, transparent 30%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}
.hw-parents-avatar {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 22px;
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.3));
}
.hw-parents-avatar .hw-avatar-emoji-fallback { font-size: 5rem; }
.hw-parents-hero-info { flex: 1; min-width: 0; }
.hw-parents-hero-name {
  font-size: 1.5rem; font-weight: 900;
  color: #fff5d8;
  text-shadow: 0 0 12px rgba(91, 232, 209, 0.4);
}
.hw-parents-hero-code {
  color: rgba(243, 230, 194, 0.75);
  font-size: 0.92rem;
  margin: 2px 0 8px;
}
.hw-parents-hero-code strong {
  font-family: 'Cinzel', serif;
  color: #ffe082;
  letter-spacing: 0.1em;
}
.hw-parents-stats {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px;
}
.hw-parents-stat {
  font-size: 0.9rem;
  color: rgba(243, 230, 194, 0.85);
}
.hw-parents-stat strong {
  color: #5be8d1;
  font-size: 1.1em;
}
.hw-parents-stat-pill {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(91, 232, 209, 0.12);
  border-radius: 999px;
  font-size: 0.85rem;
  margin-top: 4px;
  border: 1px solid rgba(91, 232, 209, 0.3);
}
.hw-parents-stat-pill small {
  color: rgba(243, 230, 194, 0.55);
  font-style: italic;
}
.hw-parents-encouragement {
  background: linear-gradient(135deg, rgba(91, 232, 209, 0.12), rgba(180, 100, 255, 0.12));
  border-left: 4px solid #c5a3ff;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  color: rgba(243, 230, 194, 0.95);
  line-height: 1.5;
}
.hw-parents-section-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: #ffe082;
  font-size: 1.1rem;
  margin: 18px 0 10px;
  letter-spacing: 0.04em;
}
.hw-parents-empty {
  padding: 20px;
  text-align: center;
  background: rgba(30, 35, 60, 0.4);
  border: 1px dashed rgba(255, 213, 122, 0.3);
  border-radius: 12px;
  color: rgba(243, 230, 194, 0.6);
  font-style: italic;
}
/* Horizontal-scroll layout — user feedback 2026-05-27: "Lo que tu hijo
   ya sabe hacer should scroll to the right." Saves vertical space when
   the kid has multiple insights, and gives a tactile swipe feel on phones. */
.hw-parents-insights {
  display: flex; flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;       /* room for the scrollbar */
  margin: 0 -4px;            /* bleed a tiny bit so cards touch edges */
  padding-left: 4px; padding-right: 4px;
}
.hw-parents-insights::-webkit-scrollbar { height: 6px; }
.hw-parents-insights::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 999px; }
.hw-parents-insights::-webkit-scrollbar-thumb { background: rgba(91, 232, 209, 0.5); border-radius: 999px; }
.hw-parents-insight-card {
  flex: 0 0 88%;           /* one card visible at a time on phones */
  max-width: 360px;
  scroll-snap-align: start;
  background: linear-gradient(160deg, rgba(50, 55, 90, 0.7), rgba(28, 30, 50, 0.85));
  border: 2px solid rgba(91, 232, 209, 0.55);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
@media (min-width: 720px) {
  .hw-parents-insight-card { flex: 0 0 52%; }
}
/* Subtle visual hint that there's more to the right */
.hw-parents-insights[data-has-more="true"]::after {
  content: '→';
  flex: 0 0 30px;
  color: rgba(91, 232, 209, 0.6);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.hw-parents-insight-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.hw-parents-insight-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #5be8d1;
}
.hw-parents-insight-score {
  font-weight: 900;
  color: #ffe082;
  white-space: nowrap;
}
.hw-parents-insight-score small {
  color: rgba(255, 245, 216, 0.55);
  font-weight: 700;
  font-size: 0.78em;
  margin-left: 4px;
}
.hw-parents-insight-bullets {
  margin: 6px 0 0;
  padding-left: 22px;
  color: rgba(243, 230, 194, 0.92);
  line-height: 1.6;
}
.hw-parents-insight-bullets li { margin-bottom: 3px; }
.hw-parents-insight-tip {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 213, 122, 0.12);
  border-left: 3px solid #ffd57a;
  border-radius: 8px;
  font-size: 0.88rem;
  color: rgba(255, 245, 216, 0.85);
  font-style: italic;
}
.hw-parents-tests {
  display: flex; flex-direction: column; gap: 6px;
}
.hw-parents-test-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  background: rgba(30, 35, 60, 0.55);
  border-left: 3px solid #ffe082;
  border-radius: 10px;
  font-weight: 700;
}
.hw-parents-test-title { color: #fff5d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-parents-test-score { color: #ffe082; }
.hw-parents-test-date  { color: rgba(243, 230, 194, 0.55); font-size: 0.85rem; }

/* 📝 EXÁMENES REALES — HSK simulation attempts (Fernando 2026-06-04).
   Same visual language as the test rows above so the parent reads
   them as siblings, but with a jade accent so they're distinguishable
   from reading-test rows at a glance. */
.hw-parents-hsk { display: flex; flex-direction: column; gap: 8px; }
.hw-parents-hsk-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(30, 35, 60, 0.55);
  border-left: 3px solid #5be88a;
  border-radius: 10px;
  font-weight: 700;
}
.hw-parents-hsk-main {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.hw-parents-hsk-title { color: #fff5d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-parents-hsk-score.is-passed { color: #5be88a; }
.hw-parents-hsk-score.is-low    { color: #ff9a6b; }
.hw-parents-hsk-score small     { font-weight: 600; opacity: 0.8; }
.hw-parents-hsk-date  { color: rgba(243, 230, 194, 0.55); font-size: 0.85rem; font-weight: 600; }
.hw-parents-hsk-note  { color: rgba(243, 230, 194, 0.8); font-size: 0.85rem; font-weight: 500; }
/* Parent-view: SPEAK-OUT-LOUD callout (prominent, near the top) */
.hw-parents-speak-banner {
  display: block;
  margin: 8px 0 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 90, 102, 0.16), rgba(255, 200, 110, 0.22));
  border: 2px solid rgba(255, 200, 110, 0.7);
  border-radius: 12px;
  color: #fff5d8;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 0 16px rgba(255, 200, 110, 0.2);
}
.hw-parents-speak-banner strong { color: #ffe082; }

/* Parent-view: conversations the parent can have with their kid today.
   Horizontally scrollable on phones — same scroll-snap pattern as
   insights so the parent swipes through specific prompts. */
.hw-parents-section-intro {
  font-size: 0.85rem;
  color: rgba(243, 230, 194, 0.7);
  font-style: italic;
  margin: 0 0 8px;
}
.hw-parents-conversations {
  display: flex; flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 8px;
  margin: 0 -4px;
}
.hw-parents-conversations::-webkit-scrollbar { height: 6px; }
.hw-parents-conversations::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 999px; }
.hw-parents-conversations::-webkit-scrollbar-thumb { background: rgba(180, 100, 255, 0.5); border-radius: 999px; }
.hw-parents-conv-row {
  flex: 0 0 85%;
  max-width: 340px;
  scroll-snap-align: start;
  padding: 12px 14px;
  background: linear-gradient(160deg, rgba(180, 100, 255, 0.14), rgba(91, 232, 209, 0.12));
  border-left: 3px solid #c5a3ff;
  border-radius: 10px;
}
@media (min-width: 720px) {
  .hw-parents-conv-row { flex: 0 0 48%; }
}
.hw-parents-conv-title {
  font-weight: 900;
  color: #c5a3ff;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.hw-parents-conv-prompt {
  color: rgba(243, 230, 194, 0.95);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* Parent-view: remaining (not-yet-tried) tareas with direct CTA */
.hw-parents-remaining {
  display: flex; flex-direction: column; gap: 8px;
}
.hw-parents-remaining-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(30, 35, 60, 0.55);
  border: 2px dashed rgba(255, 224, 130, 0.4);
  border-radius: 10px;
}
.hw-parents-remaining-info { flex: 1; min-width: 0; }
.hw-parents-remaining-title {
  font-weight: 900;
  color: #fff5d8;
  font-size: 0.95rem;
}
.hw-parents-remaining-sub {
  color: rgba(243, 230, 194, 0.65);
  font-size: 0.82rem;
  margin-top: 2px;
}

/* Parent-view: re-stack test row so the conversation prompt fits below */
.hw-parents-test-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.hw-parents-test-main {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.hw-parents-test-question {
  font-size: 0.85rem;
  color: rgba(255, 245, 216, 0.78);
  font-style: italic;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 224, 130, 0.18);
  margin-top: 2px;
}

/* Results screen: speak-out-loud prompt sitting at the top of the
   per-item breakdown */
.hw-results-speak-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 90, 102, 0.18), rgba(255, 200, 110, 0.22));
  border: 2px solid rgba(255, 200, 110, 0.7);
  border-radius: 12px;
  color: #fff5d8;
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: 6px;
  text-align: left;
  box-shadow: 0 0 16px rgba(255, 200, 110, 0.18);
}
.hw-results-speak-icon {
  font-size: 1.8rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.hw-results-speak-row strong { color: #ffe082; }

/* === List section titles + reading-test card variant === */
.hw-list-section-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: #ffe082;
  font-size: 1.05rem;
  margin: 18px 4px 8px;
  letter-spacing: 0.04em;
}
.hw-list-section-title:first-of-type { margin-top: 8px; }

.hw-card-reading {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 12px;
  border-color: rgba(180, 100, 255, 0.45);
}
.hw-card-reading:hover { border-color: #c5a3ff; box-shadow: 0 6px 20px rgba(180, 100, 255, 0.35); }
.hw-card-reading.hw-card-locked {
  opacity: 0.55;
  border-style: dashed;
  cursor: not-allowed;
}
.hw-card-reading.hw-card-locked:hover { transform: none; box-shadow: none; }
.hw-card-reading-img {
  width: 96px; height: 96px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border: 2px solid rgba(255, 224, 130, 0.4);
}
.hw-card-reading-body { min-width: 0; }
.hw-card-badge.locked {
  background: rgba(255, 90, 102, 0.18);
  border: 1px solid #ff5a66;
  color: #ff8a96;
  font-size: 0.7rem;
}

/* === Reading-test screen (self-serve) === */
.hw-reading {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  gap: 12px;
}
.hw-reading-header {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(38, 40, 60, 0.85);
  border: 2px solid rgba(180, 100, 255, 0.4);
  border-radius: 14px;
  padding: 12px 16px;
}
.hw-reading-titles { flex: 1; min-width: 0; }
.hw-reading-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #c5a3ff; margin: 0;
  font-size: clamp(1.1rem, 4vmin, 1.5rem);
}
.hw-reading-sub { color: rgba(243, 230, 194, 0.75); margin: 4px 0 0; font-size: 0.92rem; }
.hw-reading-instructions {
  background: rgba(180, 100, 255, 0.12);
  border-left: 3px solid #c5a3ff;
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(243, 230, 194, 0.95);
  font-size: 0.92rem;
}
.hw-reading-lang-toggle {
  display: flex; gap: 6px;
  padding: 6px;
  background: rgba(20, 22, 36, 0.55);
  border-radius: 12px;
}
.hw-reading-lang-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: inherit;
  background: rgba(50, 55, 90, 0.55);
  border: 2px solid rgba(180, 100, 255, 0.25);
  border-radius: 999px;
  color: rgba(243, 230, 194, 0.85);
  cursor: pointer;
}
.hw-reading-lang-btn.active {
  background: linear-gradient(135deg, rgba(180, 100, 255, 0.35), rgba(91, 232, 209, 0.25));
  border-color: #c5a3ff;
  color: #fff5d8;
}

.hw-reading-pages {
  display: flex; flex-direction: column; gap: 16px;
}
.hw-reading-page {
  background: rgba(38, 40, 60, 0.7);
  border: 2px solid rgba(255, 213, 122, 0.35);
  border-radius: 12px;
  padding: 12px;
}
.hw-reading-page-num {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #ffe082;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.hw-reading-page-img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}
.hw-reading-page-caption {
  color: rgba(243, 230, 194, 0.8);
  font-size: 0.88rem;
  font-style: italic;
  margin-bottom: 8px;
}
.hw-reading-page-audio {
  width: 100%;
  margin-bottom: 10px;
}
.hw-reading-page-text {
  display: flex; flex-direction: column; gap: 8px;
}
.hw-reading-line {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border-left: 3px solid #5be8d1;
}
.hw-reading-line-pinyin {
  flex: 1;
  font-weight: 800;
  color: #fff5d8;
  font-size: 0.95rem;
}
.hw-reading-line-es {
  flex: 1;
  font-style: italic;
  color: rgba(91, 232, 209, 0.9);
  font-size: 0.85rem;
  display: none;
}
.hw-reading-line.show-pinyin .hw-reading-line-pinyin { display: block; }
.hw-reading-line.show-pinyin .hw-reading-line-es { display: none; }
.hw-reading-line.show-es .hw-reading-line-pinyin { display: none; }
.hw-reading-line.show-es .hw-reading-line-es { display: block; }
.hw-reading-line.show-both .hw-reading-line-pinyin,
.hw-reading-line.show-both .hw-reading-line-es { display: block; }
/* Modo Curioso — tappable pinyin words in the reading mode story.
   Each token is wrapped in .hw-curious-word; tapping opens an overlay
   with the word's full info from warmup-vocab.js. */
.hw-curious-word {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 1px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.hw-curious-word:hover {
  background: rgba(91, 232, 209, 0.22);
  transform: translateY(-1px);
}
.hw-curious-word:active {
  background: rgba(91, 232, 209, 0.4);
  transform: scale(0.96);
}

/* Curioso overlay (created lazily by JS) */
.hw-curious-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(10, 12, 22, 0.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;           /* don't eat taps when invisible */
  transition: opacity 0.25s;
}
.hw-curious-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.hw-curious-overlay.hidden { display: none; }
.hw-curious-close {
  position: absolute; top: 16px; right: 18px;
  background: rgba(40, 45, 70, 0.95);
  border: 2px solid rgba(91, 232, 209, 0.6);
  color: #fff5d8;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  font-family: inherit;
}
.hw-curious-card {
  width: 100%; max-width: 360px;
  background: linear-gradient(160deg, rgba(40, 50, 80, 0.97), rgba(20, 25, 45, 0.98));
  border: 3px solid var(--cat-color, #5be8d1);
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 32px var(--cat-color, rgba(91, 232, 209, 0.4));
  transform: scale(0.92);
  transition: transform 0.25s;
}
.hw-curious-overlay.show .hw-curious-card { transform: scale(1); }
.hw-curious-icon {
  font-size: 3.6rem;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.hw-curious-pinyin {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: var(--cat-color, #5be8d1);
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.hw-curious-hanzi {
  font-family: 'ZCOOL XiaoWei', 'Cinzel', serif;
  color: #fff5d8;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.hw-curious-es {
  color: #ffe082;
  font-size: 1.1rem;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 14px;
}
.hw-curious-meta {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hw-curious-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  background: rgba(255, 224, 130, 0.18);
  color: #ffe082;
  border: 1px solid rgba(255, 224, 130, 0.4);
}
.hw-curious-speak {
  width: 100%;
  margin: 14px 0 10px;
  font-size: 0.95rem;
}
.hw-curious-speak.speaking {
  background: rgba(91, 232, 209, 0.4) !important;
  box-shadow: 0 0 18px rgba(91, 232, 209, 0.6);
}
.hw-curious-hint {
  font-size: 0.78rem;
  color: rgba(243, 230, 194, 0.55);
  font-style: italic;
}

.hw-reading-cta {
  display: flex; justify-content: center;
  padding: 8px 0;
}

.hw-reading-test {
  background: linear-gradient(160deg, rgba(50, 55, 90, 0.85), rgba(28, 30, 50, 0.92));
  border: 3px solid #ffd57a;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.hw-reading-test-banner {
  text-align: center;
  font-weight: 900;
  color: #ffe082;
  font-size: 1.05rem;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 213, 122, 0.12);
  border-radius: 10px;
}
.hw-reading-qs {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 14px;
}
.hw-reading-q {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px;
}
.hw-reading-q-head {
  display: flex; gap: 10px;
  font-weight: 800;
  color: #fff5d8;
  margin-bottom: 10px;
  font-size: 0.95rem;
}
.hw-reading-q-num {
  color: #ffe082;
  font-family: 'Cinzel', serif;
  font-weight: 900;
}
.hw-reading-q-choices {
  display: flex; flex-direction: column; gap: 6px;
}
.hw-reading-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  font-family: inherit;
  background: rgba(50, 55, 90, 0.85);
  border: 2px solid rgba(255, 213, 122, 0.3);
  border-radius: 10px;
  color: #fff5d8;
  cursor: pointer;
  text-align: left;
  font-size: 0.92rem;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.hw-reading-choice:hover {
  background: rgba(70, 75, 120, 0.95);
  border-color: rgba(255, 224, 130, 0.6);
}
.hw-reading-choice:active { transform: scale(0.98); }
.hw-reading-choice.selected {
  background: linear-gradient(135deg, rgba(91, 232, 209, 0.3), rgba(255, 224, 130, 0.18));
  border-color: #5be8d1;
  box-shadow: 0 0 14px rgba(91, 232, 209, 0.45);
}
.hw-reading-choice-letter {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 224, 130, 0.18);
  color: #ffe082;
  font-weight: 900;
  font-family: 'Cinzel', serif;
  flex: 0 0 auto;
}
.hw-reading-choice.selected .hw-reading-choice-letter {
  background: #5be8d1;
  color: #14121e;
}

/* Parent-view tab switcher — progreso | tips */
.hw-parents-tabs {
  display: flex; gap: 6px;
  margin: 8px 0 14px;
  padding: 6px;
  background: rgba(20, 22, 36, 0.55);
  border-radius: 12px;
}
.hw-parents-tab {
  flex: 1;
  padding: 10px 12px;
  font-size: 0.92rem;
  font-weight: 800;
  font-family: inherit;
  background: rgba(50, 55, 90, 0.55);
  border: 2px solid rgba(180, 100, 255, 0.25);
  border-radius: 999px;
  color: rgba(243, 230, 194, 0.85);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hw-parents-tab:hover { background: rgba(70, 75, 120, 0.85); }
.hw-parents-tab.active {
  background: linear-gradient(135deg, rgba(180, 100, 255, 0.35), rgba(91, 232, 209, 0.25));
  border-color: #c5a3ff;
  color: #fff5d8;
  box-shadow: 0 0 14px rgba(180, 100, 255, 0.4);
}

/* Tips tab — card list */
.hw-tip-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: linear-gradient(160deg, rgba(50, 55, 90, 0.7), rgba(28, 30, 50, 0.85));
  border: 2px solid rgba(180, 100, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hw-tip-icon {
  font-size: 2.2rem;
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
}
.hw-tip-body { flex: 1; min-width: 0; }
.hw-tip-title {
  font-weight: 900;
  color: #c5a3ff;
  font-size: 1rem;
  margin-bottom: 4px;
}
.hw-tip-body p {
  margin: 0;
  color: rgba(243, 230, 194, 0.9);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* 🔊 Speak button — listen to the kid's chinese sentence via Web Speech */
.hw-item-speak,
.hw-bk-speak {
  background: rgba(91, 232, 209, 0.12) !important;
  border: 1px solid rgba(91, 232, 209, 0.45) !important;
  color: #5be8d1 !important;
}
.hw-item-speak:hover,
.hw-bk-speak:hover {
  background: rgba(91, 232, 209, 0.22) !important;
}
.hw-item-speak.speaking,
.hw-bk-speak.speaking {
  background: rgba(91, 232, 209, 0.45) !important;
  border-color: #5be8d1 !important;
  color: #fff5d8 !important;
  box-shadow: 0 0 14px rgba(91, 232, 209, 0.6);
  animation: hw-speak-pulse 1s ease-in-out infinite;
}
@keyframes hw-speak-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.hw-bk-speak {
  margin-top: 6px;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
}

.hw-parents-tips {
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(180, 100, 255, 0.12);
  border-left: 4px solid #c5a3ff;
  border-radius: 10px;
  font-size: 0.92rem;
  color: rgba(243, 230, 194, 0.92);
  line-height: 1.5;
}

/* === Speak-out-loud banner — pushes SPEAKING the language, not just
   typing it. Appears above the items list in the assignment view and as
   a parent-view callout. User feedback 2026-05-27: "speak out loud every
   single thing — this is very important." */
.hw-speak-banner {
  margin: 4px 0 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255, 90, 102, 0.18), rgba(255, 200, 110, 0.22));
  border: 2px solid rgba(255, 200, 110, 0.7);
  border-radius: 12px;
  color: #fff5d8;
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 0 16px rgba(255, 200, 110, 0.2);
}
.hw-speak-banner strong { color: #ffe082; }

/* === Catalog search bar — tone-stripped substring match against
   pinyin / Spanish / hanzi. Solves the "can't find Ni hao" pain. === */
.hw-asg-library-search {
  position: relative;
  display: flex; align-items: center;
  margin: 4px 0 6px;
}
.hw-asg-library-search-icon {
  position: absolute;
  left: 12px;
  font-size: 1rem;
  pointer-events: none;
  opacity: 0.7;
}
.hw-asg-library-search-input {
  width: 100%;
  padding-left: 36px !important;
  padding-right: 36px !important;
  font-size: 0.95rem;
}
.hw-asg-library-search-clear {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  color: rgba(243, 230, 194, 0.6);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 10px;
  font-family: inherit;
}
.hw-asg-library-search-clear:hover { color: #ff5a66; }

/* === EXP filter tabs on the assignment catalog === */
/* Replaces the old "wall of 150 chips" with a per-experience filter, so
   kids pick the chapter they're in and only see those words. Matches the
   warmup mode's mental model. */
.hw-asg-library-hint {
  display: block;
  font-weight: 600;
  color: rgba(243, 230, 194, 0.65);
  font-size: 0.78rem;
  font-style: italic;
  margin-top: 2px;
}
.hw-asg-library-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 8px;
  padding: 6px;
  background: rgba(20, 22, 36, 0.55);
  border-radius: 10px;
}
.hw-lib-tab {
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 800;
  font-family: inherit;
  background: rgba(50, 55, 90, 0.65);
  border: 2px solid rgba(255, 213, 122, 0.25);
  border-radius: 999px;
  color: rgba(243, 230, 194, 0.85);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.hw-lib-tab:hover {
  background: rgba(70, 75, 120, 0.85);
  border-color: rgba(255, 224, 130, 0.55);
}
.hw-lib-tab.active {
  background: linear-gradient(135deg, rgba(91, 232, 209, 0.35), rgba(255, 224, 130, 0.25));
  border-color: #5be8d1;
  color: #fff5d8;
  box-shadow: 0 0 12px rgba(91, 232, 209, 0.35);
}
.hw-lib-empty {
  width: 100%;
  text-align: center;
  padding: 20px;
  color: rgba(243, 230, 194, 0.55);
  font-style: italic;
}

/* === Modo Curioso mini-card on chip tap ===
   User feedback 2026-05-27: "make the animation match the curious mode
   exactly — bigger, same style, same sounds." So this bubble now mirrors
   the full Pokédex card's structure (big icon, big hanzi, big pinyin,
   category chip) but stays inline + auto-dismisses so it doesn't block
   sentence building. Same glow + border-color treatment as the overlay. */
.hw-meaning-bubble {
  /* Position is computed in JS and set inline as position:fixed +
     explicit left/top. JS clamps to viewport edges + flips above/below
     the chip based on available room. Don't override here. */
  z-index: 9000;
  transform: scale(0.85);
  padding: 14px 20px 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(160deg, rgba(40, 50, 80, 0.98), rgba(20, 25, 45, 0.99));
  border: 3px solid var(--cat-color, #5be8d1);
  border-radius: 18px;
  color: #fff5d8;
  text-align: center;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.6),
    0 0 32px var(--cat-color, rgba(91, 232, 209, 0.55)),
    inset 0 0 16px rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  white-space: nowrap;
  min-width: 160px;
}
.hw-meaning-bubble.show {
  opacity: 1;
  transform: scale(1);
}
.hw-meaning-bubble.fade {
  opacity: 0;
  transform: scale(0.94);
}
.hw-meaning-bubble::after {
  /* Pointer arrow below the card */
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: rgba(20, 25, 45, 0.99);
  border-right: 3px solid var(--cat-color, #5be8d1);
  border-bottom: 3px solid var(--cat-color, #5be8d1);
}
.hw-mb-icon {
  display: block;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
.hw-mb-hanzi {
  display: block;
  font-family: 'ZCOOL XiaoWei', 'Cinzel', serif;
  font-size: 1.9rem;
  line-height: 1;
  color: #fff5d8;
  margin-bottom: 4px;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
.hw-mb-pinyin {
  display: block;
  color: var(--cat-color, #5be8d1);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  font-family: 'Cinzel', serif;
}
.hw-mb-arrow { display: none; }   /* old inline arrow — hidden in card layout */
.hw-mb-es {
  display: block;
  margin-top: 6px;
  color: #ffe082;
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 700;
}

/* === Fly-to-stage animation — the tapped word visually arcs from the
   catalog chip into the active sentence stage. */
.hw-fly {
  position: absolute;
  z-index: 8500;
  font-weight: 900;
  font-size: 1.1rem;
  color: #5be8d1;
  text-shadow: 0 0 12px rgba(91, 232, 209, 0.8), 0 0 4px rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: hw-fly-arc 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes hw-fly-arc {
  0%   { transform: translate(-50%, -50%) scale(1)    rotate(0deg); opacity: 1; }
  60%  { transform: translate(calc(-50% + var(--dx) * 0.7), calc(-50% + var(--dy) * 0.7 - 30px)) scale(1.3) rotate(8deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.7) rotate(-3deg);
         opacity: 0; }
}

/* When a word lands on the stage, briefly pulse + glow it */
.hw-item-stage.hw-stage-receive {
  animation: hw-stage-receive 0.35s ease-out;
}
@keyframes hw-stage-receive {
  0%   { transform: scale(1); box-shadow: inset 0 0 12px rgba(91, 232, 209, 0.18); }
  50%  { transform: scale(1.015); box-shadow: inset 0 0 26px rgba(91, 232, 209, 0.55), 0 0 18px rgba(91, 232, 209, 0.4); }
  100% { transform: scale(1); box-shadow: inset 0 0 12px rgba(91, 232, 209, 0.18); }
}

/* Chip tap feedback — green flash on pickup so kids feel the action.
   Triggered by JS removing/adding the .flash class. */
@keyframes hw-lib-chip-flash {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(91, 232, 209, 0); }
  35%  { transform: scale(1.18); box-shadow: 0 0 22px 6px rgba(91, 232, 209, 0.7); background: rgba(91, 232, 209, 0.45); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(91, 232, 209, 0); }
}
.hw-lib-chip.flash {
  animation: hw-lib-chip-flash 0.45s ease-out;
}

/* === Settings screen === */
.hw-settings {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 14px calc(28px + env(safe-area-inset-bottom, 0px));
}
.hw-settings-card {
  background: linear-gradient(160deg, rgba(40, 50, 80, 0.95), rgba(20, 25, 45, 0.97));
  border: 3px solid #ffe082;
  border-radius: 22px;
  padding: 20px 20px 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 28px rgba(255, 224, 130, 0.18);
}
.hw-settings-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.hw-settings-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #ffe082; margin: 0;
  font-size: 1.3rem;
}
.hw-settings-profile {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 14px;
  background: rgba(30, 35, 60, 0.55);
  border-radius: 16px;
  margin-bottom: 16px;
}
.hw-settings-avatar {
  flex: 0 0 auto;
  width: 96px; height: 96px;
  border: 3px solid #5be8d1;
  border-radius: 18px;
  box-shadow: 0 0 18px rgba(91, 232, 209, 0.4);
}
.hw-settings-profile-info { flex: 1; min-width: 0; }
.hw-settings-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff5d8;
  margin-bottom: 4px;
  word-break: break-word;
}
.hw-settings-code-wrap {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.hw-settings-code-label {
  color: rgba(243, 230, 194, 0.65);
  font-size: 0.82rem;
}
.hw-settings-code {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: #ffe082;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(255, 224, 130, 0.45);
  border-radius: 6px;
  padding: 2px 8px;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}
.hw-settings-code-hint {
  font-size: 0.75rem;
  color: rgba(243, 230, 194, 0.55);
  font-style: italic;
  margin: 6px 0 0;
}

.hw-settings-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 224, 130, 0.18);
}
.hw-settings-section-title {
  font-weight: 900;
  color: #5be8d1;
  font-size: 1.0rem;
  margin-bottom: 10px;
}
.hw-settings-help {
  font-size: 0.85rem;
  color: rgba(243, 230, 194, 0.7);
  font-style: italic;
  margin: 0 0 10px;
}
.hw-settings-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hw-settings-row .input { flex: 1; min-width: 160px; }
.hw-settings-msg {
  min-height: 1.1em;
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: #5be8d1;
}
.hw-settings-reset-list {
  display: flex; flex-direction: column; gap: 8px;
}
.hw-settings-reset-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(30, 35, 60, 0.55);
  border: 1px solid rgba(255, 213, 122, 0.25);
  border-radius: 10px;
}
.hw-settings-reset-info { flex: 1; min-width: 0; }
.hw-settings-reset-title {
  font-weight: 800;
  color: #fff5d8;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hw-settings-reset-best {
  color: rgba(243, 230, 194, 0.7);
  font-size: 0.82rem;
}
.hw-settings-reset-best strong { color: #ffe082; }
.hw-settings-reset-empty {
  text-align: center;
  padding: 16px;
  background: rgba(30, 35, 60, 0.4);
  border: 1px dashed rgba(255, 213, 122, 0.25);
  border-radius: 10px;
  color: rgba(243, 230, 194, 0.6);
  font-style: italic;
  font-size: 0.9rem;
}
/* Settings: same avatar grid, but tighter so the page doesn't get tall */
#hw-settings-avatar-grid { gap: 8px; }
#hw-settings-avatar-grid .hw-avatar-option { padding: 6px 4px 4px; }
#hw-settings-avatar-grid .hw-avatar-option-label { font-size: 0.72rem; }

/* === Force-takeover splash (teacher pushed a live session) === */
.hw-force-takeover {
  position: fixed; inset: 0;
  z-index: 100000;
  background: radial-gradient(circle at 50% 40%, rgba(91, 232, 209, 0.25), rgba(10, 12, 22, 0.97) 70%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.hw-force-takeover.show { opacity: 1; }
.hw-force-card {
  text-align: center;
  padding: 30px;
  transform: scale(0.85);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hw-force-takeover.show .hw-force-card { transform: scale(1); }
.hw-force-dragon {
  font-size: 5rem;
  animation: hw-force-bounce 0.8s ease-in-out infinite;
}
@keyframes hw-force-bounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-14px) rotate(5deg); }
}
.hw-force-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #5be8d1;
  font-size: 1.8rem;
  margin: 12px 0 8px;
  text-shadow: 0 0 20px rgba(91, 232, 209, 0.6);
}
.hw-force-text {
  color: #fff5d8;
  font-size: 1.1rem;
  margin-bottom: 16px;
  max-width: 320px;
}
.hw-force-spinner {
  color: #ffe082;
  font-weight: 800;
  font-size: 0.95rem;
  animation: hw-force-pulse 1s ease-in-out infinite;
}
@keyframes hw-force-pulse { 0%,100%{opacity:0.5;} 50%{opacity:1;} }

/* 🆕 2026-06-08 — Cancelar chip on the force-pull splash. Tiny so it
   doesn't compete with the "tu maestra te llama" hero, but big enough
   to be a real tap target. Floats top-right. */
.hw-force-cancel {
  position: absolute;
  top: 16px; right: 16px;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.22);
  color: #fff5d8;
  font-size: 0.95rem; font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.22);
}
.hw-force-cancel:hover  { background: rgba(255, 255, 255, 0.16); }
.hw-force-cancel:active { transform: scale(0.94); }
.hw-force-hint {
  margin-top: 14px;
  font-size: 0.78rem;
  color: rgba(255, 245, 216, 0.6);
  max-width: 300px;
}
.hw-force-hint strong { color: #fff5d8; }

/* === Inbox bell + badge === */
.hw-bell-btn { position: relative; }
.hw-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: #ff5a66;
  color: white;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #14121e;
  animation: hw-bell-pulse 1.6s ease-in-out infinite;
}
@keyframes hw-bell-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* === Inbox toast (slides down from top when a new message arrives) === */
.hw-inbox-toast {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-120px);
  z-index: 10001;
  width: calc(100vw - 28px);
  max-width: 440px;
  padding: 12px 14px;
  background: linear-gradient(160deg, rgba(40, 50, 80, 0.97), rgba(20, 25, 45, 0.98));
  border: 2px solid #ffe082;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 224, 130, 0.4);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hw-inbox-toast.show { transform: translateX(-50%) translateY(0); }
.hw-inbox-toast-icon { font-size: 1.8rem; flex: 0 0 auto; }
.hw-inbox-toast-body { flex: 1; min-width: 0; }
.hw-inbox-toast-from {
  font-weight: 900; color: #ffe082; font-size: 0.85rem;
}
.hw-inbox-toast-text {
  color: rgba(243, 230, 194, 0.95);
  font-size: 0.88rem;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* === Inbox modal ===
   2026-05-27 CRITICAL FIX: was leaving the overlay in the DOM at opacity:0
   after close, which still ate every tap and froze the kid's screen.
   Now pointer-events is none when not .show, so taps pass through. */
.hw-inbox-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(10, 12, 22, 0.75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;          /* invisible AND non-blocking when closed */
  transition: opacity 0.25s;
}
.hw-inbox-overlay.show {
  opacity: 1;
  pointer-events: auto;          /* only blocks touches when actually shown */
}
.hw-inbox-card {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 80dvh;
  overflow-y: auto;
  background: linear-gradient(160deg, rgba(40, 50, 80, 0.97), rgba(20, 25, 45, 0.98));
  border: 3px solid #ffe082;
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 32px rgba(255, 224, 130, 0.3);
}
.hw-inbox-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(40, 45, 70, 0.9);
  border: 2px solid rgba(255, 224, 130, 0.5);
  color: #fff5d8;
  font-size: 1.1rem;
  cursor: pointer;
  font-family: inherit;
}
.hw-inbox-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: #ffe082; margin: 0 0 14px;
  font-size: 1.3rem;
}
.hw-inbox-empty {
  padding: 28px;
  text-align: center;
  color: rgba(243, 230, 194, 0.6);
  font-style: italic;
  background: rgba(30, 35, 60, 0.4);
  border-radius: 12px;
}
.hw-inbox-list { display: flex; flex-direction: column; gap: 10px; }
.hw-inbox-msg {
  padding: 12px 14px;
  background: rgba(30, 35, 60, 0.55);
  border-radius: 12px;
  border-left: 4px solid rgba(255, 224, 130, 0.35);
}
.hw-inbox-msg.unread {
  border-left-color: #ff5a66;
  background: linear-gradient(160deg, rgba(255, 90, 102, 0.15), rgba(30, 35, 60, 0.55));
}
.hw-inbox-msg-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
  flex-wrap: wrap; gap: 6px;
}
.hw-inbox-msg-from { font-weight: 900; color: #c5a3ff; font-size: 0.9rem; }
.hw-inbox-msg-time { color: rgba(243, 230, 194, 0.55); font-size: 0.78rem; }
.hw-inbox-msg-text {
  color: #fff5d8;
  font-size: 0.95rem;
  line-height: 1.45;
  word-break: break-word;
}
.hw-inbox-action {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
}
.hw-inbox-msg-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72rem;
  color: rgba(91, 232, 209, 0.85);
  font-style: italic;
}

/* === Maestro detail rename row === */
.m-detail-name-row {
  display: flex; align-items: center; gap: 6px;
}

/* TTS state toast — visible diagnostic. Top-center, fades in/out. */
.hw-tts-toast {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 10000;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  font-family: 'Nunito', sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.hw-tts-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hw-tts-toast.good {
  background: rgba(40, 60, 50, 0.95);
  color: #5be8d1;
  border: 2px solid #5be8d1;
}
.hw-tts-toast.bad {
  background: rgba(60, 30, 30, 0.95);
  color: #ffb35a;
  border: 2px solid rgba(255, 179, 90, 0.7);
}

/* Word-count pill — clickable, expands the HSK1 dropdown when tapped */
.hw-parents-stat-pill.is-clickable {
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.hw-parents-stat-pill.is-clickable:hover {
  background: rgba(91, 232, 209, 0.22);
  border-color: #5be8d1;
  transform: translateY(-1px);
}
.hw-parents-stat-pill.is-clickable::after {
  content: ' →';
  opacity: 0.6;
  font-weight: 900;
}

/* Homework portal entry button on index.html. Promoted to TOP of paths
   list (above the PIN card) on 2026-05-27 — most kids open the site after
   school for tareas, not for live games, so this is the primary CTA.
   Big tap target, teal so it's clearly distinct from the jade "join live"
   button. Safe-area padding so it never lands under iOS notches. */
.home-hw-link {
  display: block;
  margin-top: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(91, 232, 209, 0.18), rgba(45, 212, 191, 0.18));
  border: 2px solid #5be8d1;
  border-radius: 14px;
  color: #5be8d1;
  font-weight: 900;
  font-size: 1.0rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.15s;
}
.home-hw-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(91, 232, 209, 0.4);
}
/* Hero variant — promoted button at the TOP of paths. Big, gradient,
   chunky icon + double-line text so it's the first thing kids tap. */
.home-hw-link-hero {
  display: flex; align-items: center;
  gap: 14px;
  margin-top: max(8px, env(safe-area-inset-top, 0px));
  padding: 16px 18px;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 224, 130, 0.25), transparent 55%),
    linear-gradient(135deg, rgba(91, 232, 209, 0.32), rgba(45, 180, 220, 0.28));
  border: 3px solid #5be8d1;
  border-radius: 18px;
  color: #fff5d8;
  text-align: left;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 24px rgba(91, 232, 209, 0.35);
  position: relative;
  overflow: hidden;
}
.home-hw-link-hero::before {
  /* shimmering sheen so kids' eyes catch it */
  content: '';
  position: absolute; top: 0; left: -40%;
  width: 30%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: home-hw-shine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes home-hw-shine {
  0%   { left: -40%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}
.home-hw-link-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(91, 232, 209, 0.55), 0 0 28px rgba(255, 224, 130, 0.35);
}
.home-hw-icon {
  font-size: 2.4rem;
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}
.home-hw-text {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.home-hw-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.05rem, 4.2vmin, 1.35rem);
  color: #fff5d8;
  letter-spacing: 0.02em;
}
.home-hw-sub {
  font-size: 0.82rem;
  font-weight: 800;
  color: rgba(91, 232, 209, 0.95);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.home-hw-arrow {
  font-size: 1.8rem;
  font-weight: 900;
  color: #5be8d1;
  flex: 0 0 auto;
  text-shadow: 0 0 8px rgba(91, 232, 209, 0.6);
}

/* =====================================================================
   📁 FOLDER NAVIGATION (2026-05-28) — HSK1 → 8 experiences → assignments
   ===================================================================== */
.hw-folder-bar {
  /* 🔧 STICKY — was just inline-flow which got pushed off-screen on mobile
     when the folder had a few cards. Now it floats at the top so the kid
     can ALWAYS see the Volver button without pinch-zooming. */
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  display: flex; align-items: center; gap: 12px;
  margin: -4px -10px 16px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(22,28,48,0.96), rgba(22,28,48,0.86));
  backdrop-filter: blur(6px);
  border-bottom: 1.5px solid rgba(91,232,209,0.3);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.hw-volver-btn {
  font-size: 0.98rem !important;
  font-weight: 900 !important;
  min-height: 48px !important;
  min-width: 110px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 10px rgba(91,232,138,0.3);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(91,232,138,0.4);
}
.hw-folder-crumb {
  font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.05rem;
  color: #5be8d1;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 🗂️ THREE TABS — Pendientes | Completadas | Tu Maestro/a */
.hw-tabs {
  display: flex; gap: 8px;
  margin: 8px -4px 18px;
  padding: 4px 0;
  position: sticky; top: 0; z-index: 25;
  background: linear-gradient(180deg, rgba(22,28,48,0.95), rgba(22,28,48,0.85));
  backdrop-filter: blur(4px);
}
.hw-tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: rgba(40,50,80,0.55);
  border: 2px solid rgba(91,232,209,0.18);
  border-radius: 14px;
  padding: 10px 6px;
  color: #d6e4ff;
  font-weight: 800; font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(91,232,209,0.32);
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
  min-height: 64px;
}
.hw-tab:active { transform: scale(0.97); }
.hw-tab.is-active {
  background: linear-gradient(160deg, rgba(91,232,209,0.32), rgba(91,232,138,0.22));
  border-color: #5be8d1;
  color: #fff;
  box-shadow: 0 5px 14px rgba(91,232,209,0.28);
}
.hw-tab-icon { font-size: 1.25rem; line-height: 1; }
.hw-tab-label { font-size: 0.85rem; letter-spacing: 0.02em; }
.hw-tab-count {
  background: rgba(0,0,0,0.35); color: #ffe082;
  border-radius: 999px; padding: 1px 9px;
  font-size: 0.78rem; font-weight: 900;
  min-width: 22px;
}
.hw-tab.is-active .hw-tab-count { background: rgba(255,224,130,0.92); color: #2a1d05; }
@media (max-width: 380px) {
  .hw-tab { padding: 8px 3px; font-size: 0.78rem; min-height: 58px; }
  .hw-tab-label { font-size: 0.76rem; }
  .hw-tab-icon { font-size: 1.1rem; }
}
.hw-folder-pending { border-color: rgba(255,224,130,0.45); }
.hw-folder-pending .hw-folder-progress { background: rgba(255,224,130,0.18); color: #ffe082; }
.hw-folder-done { border-color: rgba(91,232,138,0.55); opacity: 0.9; }
.hw-folder-done .hw-folder-progress { background: rgba(91,232,138,0.2); color: #5be88a; }

.hw-folder-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; cursor: pointer;
  background: linear-gradient(160deg, rgba(40,50,80,0.9), rgba(22,28,48,0.95));
  border: 2px solid rgba(91,232,209,0.4); border-radius: 18px;
  padding: 20px 14px; min-height: 140px;
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.hw-folder-card:hover { transform: translateY(-3px); border-color: #5be8d1; box-shadow: 0 10px 26px rgba(91,232,209,0.25); }
.hw-folder-card:active { transform: scale(0.97); }
.hw-folder-emoji { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5)); }
.hw-folder-name { font-weight: 900; color: #fff5d8; font-size: 1.02rem; line-height: 1.2; }
.hw-folder-meta { font-size: 0.82rem; color: rgba(243,230,194,0.7); }
.hw-folder-progress {
  font-size: 0.8rem; font-weight: 800; color: #5be8d1;
  background: rgba(91,232,209,0.16); border-radius: 999px; padding: 2px 10px;
}
.hw-folder-card.hw-folder-empty {
  opacity: 0.45; cursor: default; border-style: dashed; border-color: rgba(200,200,220,0.3);
}
.hw-folder-card.hw-folder-empty:hover { transform: none; box-shadow: none; border-color: rgba(200,200,220,0.3); }

/* =====================================================================
   2026-05-28b: expandable "oraciones correctas" + Guías tab (PDFs)
   ===================================================================== */
/* Make the parent tabs horizontally scrollable (a 3rd tab "Guías" added). */
.hw-parents-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
.hw-parents-tab { white-space: nowrap; flex: 0 0 auto; }

/* Expandable per-sentence detail panel */
.hw-parents-sentences-panel {
  margin: 8px 0 4px; display: flex; flex-direction: column; gap: 12px;
}
.hw-sent-group {
  background: rgba(20, 22, 36, 0.55); border-radius: 12px; padding: 10px 12px;
  border-left: 3px solid #c5a3ff;
}
.hw-sent-group-head { font-weight: 800; color: #fff5d8; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; }
.hw-sent-group-score { color: #5be8d1; font-weight: 900; }
.hw-sent-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-top: 1px solid rgba(255,255,255,0.06); }
.hw-sent-mark { font-weight: 900; font-size: 1.1rem; flex: 0 0 auto; }
.hw-sent-row.ok  .hw-sent-mark { color: #5be88a; }
.hw-sent-row.bad .hw-sent-mark { color: #ef6b6b; }
.hw-sent-body { display: flex; flex-direction: column; gap: 2px; }
.hw-sent-es { color: rgba(243,230,194,0.85); font-size: 0.9rem; }
.hw-sent-given { font-size: 0.92rem; color: #f3f7ff; }
.hw-sent-expected { font-size: 0.9rem; color: #ffe082; }

/* Guías (PDF) cards */
.hw-guias-list { display: flex; flex-direction: column; gap: 10px; }
.hw-guia-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: linear-gradient(160deg, rgba(40,50,80,0.9), rgba(22,28,48,0.95));
  border: 2px solid rgba(91,232,209,0.4); border-radius: 14px; padding: 12px 14px;
  transition: transform 0.1s, border-color 0.15s;
}
.hw-guia-card:active { transform: scale(0.98); }
.hw-guia-card:hover { border-color: #5be8d1; }
.hw-guia-icon { font-size: 1.8rem; flex: 0 0 auto; }
.hw-guia-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hw-guia-title { font-weight: 800; color: #fff5d8; }
.hw-guia-meta { font-size: 0.8rem; color: rgba(243,230,194,0.6); }
.hw-guia-open { color: #5be8d1; font-weight: 800; flex: 0 0 auto; }

/* 🔎 Review-mistakes button + modal (student-facing) */
.hw-review-btn {
  border: 1.5px solid rgba(255,213,122,0.5); border-radius: 12px;
  background: rgba(255,213,122,0.14); color: #ffe082; font-weight: 800;
  font-size: 0.9rem; padding: 8px 12px; cursor: pointer; touch-action: manipulation;
}
.hw-review-btn:active { transform: scale(0.96); }
.hw-mistakes-overlay {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center;
  justify-content: center; padding: 14px; background: rgba(10,12,22,0.78);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.hw-mistakes-overlay.show { opacity: 1; pointer-events: auto; }
.hw-mistakes-card {
  position: relative; width: 100%; max-width: 480px; max-height: 88dvh; overflow-y: auto;
  background: linear-gradient(160deg, rgba(40,50,80,0.98), rgba(20,25,45,0.99));
  border: 3px solid #ffe082; border-radius: 20px; padding: 22px 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
.hw-mistakes-close { position: absolute; top: 10px; right: 12px; border: none; background: rgba(255,255,255,0.12); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; cursor: pointer; }
.hw-mistakes-title { font-family: 'Cinzel', serif; font-weight: 900; color: #ffe082; font-size: 1.2rem; }
.hw-mistakes-score { color: rgba(243,230,194,0.85); font-weight: 800; margin: 4px 0 12px; }
.hw-mistakes-list { display: flex; flex-direction: column; gap: 8px; }
.hw-mistake-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(20,22,36,0.55); border-left: 3px solid; }
.hw-mistake-row.ok  { border-color: #5be88a; }
.hw-mistake-row.bad { border-color: #ef6b6b; }
.hw-mistake-mark { font-weight: 900; font-size: 1.1rem; }
.hw-mistake-row.ok  .hw-mistake-mark { color: #5be88a; }
.hw-mistake-row.bad .hw-mistake-mark { color: #ef6b6b; }
.hw-mistake-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-mistake-q { color: #fff5d8; font-weight: 700; font-size: 0.92rem; }
.hw-mistake-given { font-size: 0.88rem; color: rgba(243,230,194,0.85); }
.hw-mistake-correct { font-size: 0.88rem; color: #5be88a; }
.hw-mistakes-tip { margin-top: 12px; font-size: 0.85rem; color: rgba(255,213,122,0.85); background: rgba(255,213,122,0.1); border-radius: 10px; padding: 8px 10px; }

/* 📋 Report-card month picker (parent) */
.hw-report-months { display: flex; flex-direction: column; gap: 10px; }
.hw-report-month-btn {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, rgba(200,30,30,0.18), rgba(255,160,60,0.14));
  border: 2px solid rgba(239,91,91,0.5); border-radius: 14px; padding: 14px 16px;
  color: #fff5d8; font-weight: 800; font-size: 1.05rem; cursor: pointer; touch-action: manipulation;
}
.hw-report-month-btn:active { transform: scale(0.98); }
.hw-report-go { color: #ffb46b; font-weight: 900; }

/* ⏳ Pending badge — assignment attempted but <80% (must retry to pass) */
.hw-card-badge.pending { background: rgba(255,170,40,0.22); color: #ffb000; border: 1px solid rgba(255,170,40,0.6); font-size: 0.72rem; }

/* ── 📜 Mis oraciones — sentence history in the kid's own profile ──── */
/* ═══════════════════════════════════════════════════════════════════
 * 📜 MIS ORACIONES — full-screen redesign 2026-06-04 v2
 *   Fernando: "Mis oraciones is not redesigned. It's not more clean.
 *    It's not split into Saved by Me / Sent by Teacher."
 *   Was a 520px centered card; now full-viewport sheet with sticky
 *   hero + tabs + category filter (on teacher tab). Existing
 *   month-grouping preserved inside.
 * ═══════════════════════════════════════════════════════════════════ */
.hw-sentences-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(255, 209, 102, 0.10), transparent 70%),
    linear-gradient(160deg, #1a2540 0%, #0e1426 100%);
  overflow: hidden;
}
.hw-sentences-overlay.hidden { display: none; }
.hw-sentences-sheet {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px clamp(14px, 4vw, 28px) 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hw-sent-corner-close {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 11;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 90, 102, 0.18);
  border: 2px solid rgba(255, 90, 102, 0.55);
  color: #ff9a8a;
  font-size: 1.05rem; font-weight: 900;
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.hw-sent-corner-close:hover  { background: rgba(255, 90, 102, 0.32); }
.hw-sent-corner-close:active { transform: scale(0.9); }
.hw-sent-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 14px;
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(14, 20, 38, 0.96) 0%, rgba(14, 20, 38, 0.8) 75%, rgba(14, 20, 38, 0) 100%);
  backdrop-filter: blur(4px);
}
.hw-sent-back {
  min-width: 100px;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.18);
  color: #fff5d8;
  font-size: 1rem; font-weight: 900;
  cursor: pointer; touch-action: manipulation;
  flex: 0 0 auto;
}
.hw-sent-back:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.22); }
.hw-sent-hero-text { flex: 1; min-width: 0; }
.hw-sent-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.3rem, 4vw, 2rem);
  color: #ffd166;
  margin: 0; line-height: 1.1;
  text-shadow: 0 0 18px rgba(255, 209, 102, 0.3);
}
.hw-sent-sub {
  margin: 6px 0 0;
  color: rgba(243, 230, 194, 0.78);
  font-size: clamp(0.85rem, 2.6vw, 0.95rem);
  font-weight: 600;
  line-height: 1.45;
}
.hw-sent-tabs {
  display: flex;
  gap: 10px;
  position: sticky;
  top: 70px;
  z-index: 3;
  padding: 4px 0 14px;
  background: linear-gradient(180deg, rgba(14, 20, 38, 0.96) 0%, rgba(14, 20, 38, 0.6) 80%, rgba(14, 20, 38, 0) 100%);
}
.hw-sent-tab {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: rgba(220, 235, 245, 0.7);
  border-radius: 14px;
  padding: 12px 10px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer; touch-action: manipulation;
  transition: background 120ms ease;
}
.hw-sent-tab:active { transform: scale(0.97); }
.hw-sent-tab.is-active {
  background: linear-gradient(135deg, rgba(255, 200, 110, 0.22), rgba(255, 90, 102, 0.16));
  border-color: rgba(255, 200, 110, 0.7);
  color: #fff5d8;
  box-shadow: 0 0 14px rgba(255, 200, 110, 0.22);
}
.hw-sent-tab-n {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #ffe082;
  font-size: 0.85rem;
  font-weight: 900;
}
.hw-sent-catbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.hw-sent-catbar.is-empty { display: none; }
.hw-sent-cat-chip {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--cat-color, rgba(255, 255, 255, 0.18));
  color: var(--cat-color, rgba(243, 230, 194, 0.7));
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer; touch-action: manipulation;
  white-space: nowrap;
  font-family: inherit;
}
.hw-sent-cat-chip:active { transform: scale(0.96); }
.hw-sent-cat-chip.is-active {
  background: var(--cat-color, rgba(255, 200, 110, 0.3));
  color: #1a1a1a;
  box-shadow: 0 0 10px color-mix(in srgb, var(--cat-color, #ffc874) 60%, transparent);
}
.hw-sent-cat-n {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}
.hw-sentences-list { display: flex; flex-direction: column; gap: 12px; }

.hw-sentence-item {
  background: rgba(20,24,40,0.6); border: 1px solid rgba(255,209,102,0.22);
  border-radius: 16px; padding: 12px 12px 14px;
}
.hw-sentence-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hw-sentence-date { color: rgba(243,230,194,0.62); font-size: 0.82rem; font-weight: 700; }
.hw-sentence-speak {
  border: none; background: linear-gradient(135deg, #ffb46b, #ff7e5f); color: #2a1500;
  font-weight: 900; font-size: 0.9rem; padding: 8px 14px; border-radius: 999px;
  cursor: pointer; touch-action: manipulation; flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(255,126,95,0.35);
}
.hw-sentence-speak:active { transform: scale(0.95); }
.hw-sentence-speak.speaking { animation: hwSentPulse 0.7s ease-in-out infinite; }
@keyframes hwSentPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.hw-sentence-words { display: flex; flex-wrap: wrap; gap: 8px; }

/* 📝 MIS EXÁMENES — kid's HSK simulation history overlay.
   Visual language: same modal frame as Mis Oraciones, jade accent on
   passed attempts (≥60%) and warm accent on low scores. Each attempt
   card is tappable when it has wrongQs data — taps expand into the
   wrong-question detail panel. (Fernando 2026-06-04) */
.hw-myexams-overlay {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center;
  justify-content: center; padding: 14px; background: rgba(10,12,22,0.80);
}
.hw-myexams-overlay.hidden { display: none; }
.hw-myexams-card {
  position: relative; width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(160deg, rgba(44,54,86,0.99), rgba(20,25,45,0.99));
  border: 3px solid #5be88a; border-radius: 22px; padding: 22px 18px 18px;
  box-shadow: 0 18px 52px rgba(0,0,0,0.72);
}
.hw-myexams-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hw-myexams-title { font-family: 'Cinzel', serif; font-weight: 900; color: #5be88a; font-size: 1.3rem; }
.hw-myexams-close {
  border: none; background: rgba(255,255,255,0.12); color: #fff; width: 34px; height: 34px;
  border-radius: 50%; font-size: 1.05rem; cursor: pointer; flex: 0 0 auto;
  touch-action: manipulation;
}
.hw-myexams-close:active { background: rgba(255,255,255,0.26); }
.hw-myexams-sub { color: rgba(243,230,194,0.78); font-size: 0.9rem; margin: 6px 0 14px; line-height: 1.4; }
.hw-myexams-list { display: flex; flex-direction: column; gap: 12px; }
.hw-myexams-attempt {
  background: rgba(20,24,40,0.6); border: 1px solid rgba(91,232,138,0.22);
  border-left: 4px solid #5be88a;
  border-radius: 12px; padding: 12px 14px;
  transition: background 120ms ease, transform 120ms ease;
}
.hw-myexams-attempt.is-low { border-left-color: #ff9a6b; border-color: rgba(255,154,107,0.22); }
.hw-myexams-attempt.is-clickable { cursor: pointer; }
.hw-myexams-attempt.is-clickable:hover { background: rgba(91,232,138,0.06); }
.hw-myexams-attempt.is-clickable:active { transform: scale(0.99); }
.hw-myexams-attempt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.hw-myexams-attempt-title { color: #fff5d8; font-weight: 900; font-size: 1.02rem; }
.hw-myexams-attempt-pct   { color: #5be88a; font-weight: 900; font-size: 1.15rem; }
.hw-myexams-attempt.is-low .hw-myexams-attempt-pct { color: #ff9a6b; }
.hw-myexams-attempt-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  color: rgba(243,230,194,0.75); font-size: 0.86rem; font-weight: 600;
}
.hw-myexams-attempt-wrong { color: #ff9a6b; font-weight: 800; }
.hw-myexams-attempt-wrong.is-stale { color: rgba(243,230,194,0.45); font-style: italic; font-weight: 500; }
.hw-myexams-attempt-hint {
  margin-top: 6px;
  color: rgba(91,232,209,0.85);
  font-size: 0.82rem;
  font-weight: 800;
}
.hw-myexams-attempt-detail {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(18, 24, 40, 0.7);
  border-radius: 8px;
}
.hw-myexams-attempt-detail.hidden { display: none; }
.hw-myexams-detail-head {
  color: #ffd24a; font-weight: 800; margin-bottom: 8px;
  font-size: 0.9rem; font-style: italic;
}
.hw-myexams-perfect {
  color: #5be88a; font-weight: 900; text-align: center;
  padding: 10px; font-size: 1rem;
}
.hw-myexams-wrong-row {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(243, 230, 194, 0.12);
}
.hw-myexams-wrong-row:last-child { border-bottom: none; }
.hw-myexams-wrong-q {
  color: #ffd2b3; font-weight: 800; font-size: 0.95rem; margin-bottom: 4px;
}
.hw-myexams-wrong-d {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: 0.85rem; color: rgba(243, 230, 194, 0.85);
}
.hw-myexams-wrong-picked  { color: #ff9a6b; }
.hw-myexams-wrong-correct { color: #5be88a; }
/* 🆕 2026-07-05 — richer mistake context: question sentence/word, real
   narrator-audio replay, question image, and picture answers for the
   "tú elegiste vs la correcta" comparison. */
.hw-myexams-ctx {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 4px 0 8px;
}
.hw-myexams-ctx-text {
  color: #ffe082; font-weight: 800; font-size: 0.95rem;
}
.hw-myexams-ctx-hanzi {
  font-family: 'ZCOOL XiaoWei', serif;
  color: rgba(255, 245, 216, 0.85); font-weight: 400;
}
.hw-myexams-ctx-img {
  width: 74px; height: 74px; object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}
.hw-myexams-replay {
  border: none; cursor: pointer; touch-action: manipulation;
  background: rgba(91, 232, 209, 0.16);
  color: #5be8d1; font-weight: 800; font-size: 0.82rem;
  border-radius: 999px; padding: 6px 12px;
}
.hw-myexams-replay.speaking { animation: hw-speak-pulse 0.7s ease-in-out infinite; }
.hw-myexams-pick {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 10px;
  border: 1.5px solid transparent;
  background: rgba(255, 255, 255, 0.04);
}
.hw-myexams-pick img {
  width: 58px; height: 58px; object-fit: contain;
  background: rgba(255, 255, 255, 0.06); border-radius: 8px;
}
.hw-myexams-pick-tag {
  font-size: 0.72rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.4px; opacity: 0.75;
}
.hw-myexams-pick.is-picked  { border-color: rgba(255, 154, 107, 0.55); }
.hw-myexams-pick.is-picked strong  { color: #ff9a6b; }
.hw-myexams-pick.is-correct { border-color: rgba(91, 232, 138, 0.55); }
.hw-myexams-pick.is-correct strong { color: #5be88a; }

.hw-sent-chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 12px; border-radius: 12px; min-width: 54px;
  background: var(--cat-color, #ffe082); color: #1a1a2a;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28);
}
.hw-sent-chip-py { font-weight: 900; font-size: 1rem; line-height: 1.1; }
.hw-sent-chip-es { font-size: 0.72rem; opacity: 0.78; line-height: 1.1; }
/* Curious-tappable chips become buttons — add affordance + press feedback. */
button.hw-sent-chip { border: none; cursor: pointer; font-family: inherit; touch-action: manipulation; }
button.hw-sent-chip.curious-tappable { box-shadow: 0 3px 8px rgba(0,0,0,0.28), 0 0 0 2px rgba(255,255,255,0.18) inset; }
button.hw-sent-chip:active { transform: scale(0.94); }

/* Per-sentence action row (Oír / Editar / Borrar) */
.hw-sentence-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hw-sentence-edit, .hw-sentence-del {
  border: none; border-radius: 999px; font-weight: 900; font-size: 0.82rem;
  padding: 7px 12px; cursor: pointer; touch-action: manipulation;
}
.hw-sentence-edit { background: rgba(91,232,209,0.22); color: #7df0e0; border: 1px solid rgba(91,232,209,0.5); }
.hw-sentence-del  { background: rgba(239,107,107,0.18); color: #ff9a9a; border: 1px solid rgba(239,107,107,0.5); }
.hw-sentence-edit:active, .hw-sentence-del:active { transform: scale(0.93); }

/* Inline editor — rearrange (tap-swap) + remove (✕) + save copy */
.hw-sent-editor { display: flex; flex-direction: column; gap: 14px; }
.hw-sent-editor-tip { color: rgba(243,230,194,0.82); font-size: 0.9rem; line-height: 1.4; background: rgba(20,24,40,0.5); padding: 10px 12px; border-radius: 12px; }
.hw-sent-editor-words { display: flex; flex-wrap: wrap; gap: 10px; min-height: 56px; }
.hw-sent-edit-chip {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 14px 10px; border-radius: 14px; min-width: 60px; cursor: pointer;
  background: var(--cat-color, #ffe082); color: #1a1a2a;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3); touch-action: manipulation;
  transition: transform 0.12s, box-shadow 0.12s;
}
.hw-sent-edit-chip.selected { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0,0,0,0.45); }
.hw-sent-edit-x {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: #ef6b6b; color: #fff; font-weight: 900; font-size: 0.8rem;
  cursor: pointer; line-height: 1; padding: 0; touch-action: manipulation;
}
.hw-sent-editor-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.hw-sent-editor-bar button { border: none; border-radius: 999px; font-weight: 900; font-size: 0.9rem; padding: 11px 16px; cursor: pointer; touch-action: manipulation; }
.hw-sent-editor-cancel { background: rgba(255,255,255,0.12); color: #fff; }
.hw-sent-editor-move { background: rgba(120,160,255,0.2); color: #bcd0ff; border: 1px solid rgba(120,160,255,0.5); }
.hw-sent-editor-move.active { background: linear-gradient(135deg, #6f9cff, #5b6cff); color: #fff; }
.hw-sent-edit-chip.moving { outline: 2px dashed rgba(255,255,255,0.4); }
.hw-sent-editor-listen { background: linear-gradient(135deg, #ffb46b, #ff7e5f); color: #2a1500; }
.hw-sent-editor-save   { background: linear-gradient(135deg, #5be8d1, #36b9c7); color: #07232a; }
.hw-sent-editor-bar button:active { transform: scale(0.95); }

/* 🔊 speak button inside the curious card */
.wu-pk-actions { margin-top: 12px; }
.wu-pk-speak { border: none; border-radius: 999px; font-weight: 900; font-size: 0.95rem; padding: 10px 18px; cursor: pointer; background: linear-gradient(135deg, #ffb46b, #ff7e5f); color: #2a1500; touch-action: manipulation; }
.wu-pk-speak:active { transform: scale(0.95); }

/* ── 🔍 MODO CURIOSO card (copied from warmup.css so the homework portal
      shows the IDENTICAL big animated word card) ─────────────────────── */
.wu-pokedex { position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity 0.25s; }
.wu-pokedex.hidden { display: none !important; }
.wu-pokedex.show { opacity: 1; }
.wu-pokedex-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); color: #e7faff; width: 44px; height: 44px; font-size: 1.2rem; font-weight: 900; border-radius: 50%; cursor: pointer; z-index: 10002; }
.wu-pokedex-card { background: linear-gradient(160deg, rgba(40,60,100,0.95), rgba(20,30,60,0.98)); border: 4px solid var(--cat-color, #5be8d1); border-radius: 22px; padding: 28px 28px 22px; text-align: center; max-width: 380px; width: 100%; box-shadow: 0 0 38px var(--cat-color, rgba(91,232,209,0.7)), 0 18px 48px rgba(0,0,0,0.6); transform: scale(0.6); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff5d8; }
.wu-pokedex.show .wu-pokedex-card { transform: scale(1); }
.wu-pk-icon { font-size: clamp(5rem, 22vmin, 8rem); line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); margin-bottom: 6px; animation: wu-pk-icon-bob 1.4s ease-in-out infinite; }
@keyframes wu-pk-icon-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.wu-pk-pinyin { font-size: clamp(2rem, 8vmin, 2.8rem); font-weight: 900; color: var(--cat-color, #fff); text-shadow: 0 0 18px var(--cat-color, transparent); letter-spacing: 0.02em; }
.wu-pk-hanzi { font-size: clamp(2.5rem, 10vmin, 3.5rem); font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); margin: 4px 0; }
.wu-pk-es { font-size: clamp(1.1rem, 4.5vmin, 1.4rem); font-weight: 800; color: #ffe66a; text-shadow: 0 0 10px rgba(255,230,106,0.5); font-style: italic; }
.wu-pk-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.wu-pk-chip { padding: 4px 12px; border-radius: 999px; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.wu-pk-chip.exp { background: rgba(91,232,209,0.18); border: 2px solid #5be8d1; color: #5be8d1; }
.wu-pk-hint { font-size: 0.78rem; font-style: italic; color: rgba(220,235,245,0.55); margin-top: 14px; }

/* =====================================================================
   ⚔️ DIARIO — daily challenge · XP / tiers / DralySwords · mini-game
   ===================================================================== */
.hw-daily-cta { background: linear-gradient(135deg, #ffd24a, #ff9a3c) !important; color: #3a2400 !important; font-weight: 900 !important; }

/* HUD strip on the list screen */
.hw-hud {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 auto 12px; max-width: 980px; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(60,40,90,0.6), rgba(30,30,60,0.7));
  border: 2px solid rgba(255,210,74,0.45); border-radius: 16px;
  cursor: pointer; color: #fff5d8; font-family: inherit; touch-action: manipulation;
}
.hw-hud:active { transform: scale(0.99); }
.hw-hud-tier { font-size: 1.5rem; }
.hw-hud-xp { flex: 1; min-width: 0; }
.hw-hud-lvl { font-weight: 900; font-size: 0.85rem; color: #ffe082; }
.hw-hud-bar { display: block; height: 8px; border-radius: 999px; background: rgba(0,0,0,0.35); overflow: hidden; margin-top: 3px; }
.hw-hud-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd24a, #ff9a3c); transition: width 0.5s; }
.hw-hud-stat { font-weight: 900; font-size: 0.95rem; white-space: nowrap; }

/* Daily screen */
.hw-daily { max-width: 980px; margin: 0 auto; padding: 16px 14px calc(24px + env(safe-area-inset-bottom,0px)); }
.hw-daily-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hw-daily-tierbig { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.2rem; color: #ffd24a; }
.hw-daily-hud { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: linear-gradient(135deg, rgba(60,40,90,0.55), rgba(25,28,55,0.7)); border: 2px solid rgba(255,210,74,0.4); border-radius: 18px; padding: 16px; margin-bottom: 16px; }
.hw-daily-xp { flex: 1; min-width: 180px; }
.hw-daily-lvl { font-weight: 900; color: #ffe082; font-size: 1rem; }
.hw-daily-xpbar { height: 14px; border-radius: 999px; background: rgba(0,0,0,0.4); overflow: hidden; margin: 6px 0 4px; }
.hw-daily-xpfill { height: 100%; width: 0; background: linear-gradient(90deg, #ffd24a, #ff9a3c); transition: width 0.6s cubic-bezier(.2,.8,.3,1); }
.hw-daily-xptext { font-size: 0.78rem; color: rgba(243,230,194,0.7); }
.hw-daily-stats { display: flex; gap: 12px; }
.hw-daily-stat { display: flex; flex-direction: column; align-items: center; font-weight: 900; font-size: 1.3rem; color: #fff5d8; }
.hw-daily-stat span { font-size: 0.62rem; font-weight: 700; opacity: 0.7; }

.hw-daily-challenge { background: linear-gradient(160deg, rgba(40,50,80,0.9), rgba(20,25,45,0.95)); border: 3px solid #5be8d1; border-radius: 20px; padding: 20px; text-align: center; margin-bottom: 18px; box-shadow: 0 0 28px rgba(91,232,209,0.2); }
.hw-dc-head { font-weight: 900; color: #5be8d1; letter-spacing: 0.05em; }
.hw-dc-theme { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.3rem; color: #fff5d8; margin: 6px 0; }
.hw-dc-goal { color: rgba(243,230,194,0.85); margin-bottom: 14px; }
.hw-dc-play { border: none; border-radius: 999px; font-weight: 900; font-size: 1.2rem; padding: 14px 32px; cursor: pointer; background: linear-gradient(135deg, #ffd24a, #ff7e3c); color: #3a1800; box-shadow: 0 8px 22px rgba(255,126,60,0.4); touch-action: manipulation; animation: hwDcPulse 1.6s ease-in-out infinite; }
.hw-dc-play:active { transform: scale(0.95); }
@keyframes hwDcPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.hw-dc-done { color: #5be88a; font-size: 1.05rem; line-height: 1.5; }
.hw-dc-done span { color: rgba(243,230,194,0.7); font-size: 0.9rem; }

.hw-daily-ladder-title { font-weight: 900; color: #ffd24a; margin-bottom: 10px; }
.hw-daily-ladder { display: flex; flex-direction: column; gap: 8px; }
.hw-ladder-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(20,24,40,0.6); border: 1px solid rgba(255,255,255,0.08); opacity: 0.7; }
.hw-ladder-item.reached { opacity: 1; border-color: #ffd24a; background: rgba(80,60,20,0.4); box-shadow: 0 0 18px rgba(255,210,74,0.25); }
.hw-ladder-box { font-size: 1.8rem; }
.hw-ladder-amt { font-weight: 900; color: #ffd24a; }
.hw-ladder-lbl { font-size: 0.82rem; color: rgba(243,230,194,0.75); }

/* 🎮 Mini-game arena */
.hw-game { position: fixed; inset: 0; z-index: 10005; background: radial-gradient(circle at 50% 30%, rgba(40,60,110,0.98), rgba(10,12,28,0.99)); overflow: hidden; }
.hw-game.hidden { display: none !important; }
.hw-game-hud { position: absolute; top: calc(env(safe-area-inset-top,0px) + 10px); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 4; }
.hw-game-goal { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.4rem; color: #ffd24a; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.hw-game-theme { font-weight: 800; color: #bfe9ff; }
.hw-game-quit { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color: #fff; font-size: 1.1rem; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.hw-game-arena { position: absolute; inset: 0; touch-action: none; }

/* Floating 3D object (emoji); big drop shadow + bob/rotate while it rises */
.hw-obj {
  position: absolute; bottom: -14vh; width: 18vmin; height: 18vmin; max-width: 130px; max-height: 130px;
  border: none; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  animation-name: hwObjRise; animation-timing-function: cubic-bezier(.3,.1,.5,1); animation-fill-mode: forwards;
  will-change: transform; touch-action: none;
}
.hw-obj-emoji { font-size: 14vmin; line-height: 1; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5)); pointer-events: none; transition: transform 0.25s; }
.hw-obj-slash .hw-obj-emoji { animation: hwObjSpinFood 2.4s linear infinite; }
.hw-obj-pet .hw-obj-emoji { animation: hwObjBob 1.1s ease-in-out infinite; }
.hw-obj-launch .hw-obj-emoji { animation: hwObjWobble 1s ease-in-out infinite; }
@keyframes hwObjRise { 0% { bottom: -16vh; } 100% { bottom: 110vh; } }
@keyframes hwObjSpinFood { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes hwObjBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hwObjWobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
/* hit feedback per type */
.hw-obj-hit { animation: none !important; pointer-events: none; }
.hw-obj-hit.fx-slash .hw-obj-emoji { animation: hwHitSlash 0.5s forwards; }
.hw-obj-hit.fx-pet .hw-obj-emoji { animation: hwHitPet 0.5s forwards; }
.hw-obj-hit.fx-launch .hw-obj-emoji { animation: hwHitLaunch 0.5s forwards; }
@keyframes hwHitSlash { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.5) rotate(25deg); } 100% { transform: scale(0) rotate(120deg); opacity: 0; } }
@keyframes hwHitPet { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(0.2) translateY(-40px); opacity: 0; } }
@keyframes hwHitLaunch { 0% { transform: translateX(0) scale(1); } 100% { transform: translateX(60vw) scale(0.3) rotate(40deg); opacity: 0; } }

/* Word reveal after a hit */
.hw-game-reveal { position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%) scale(0.6); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 2px; background: linear-gradient(160deg, rgba(40,60,100,0.96), rgba(20,30,60,0.98)); border: 4px solid var(--cat-color, #5be8d1); border-radius: 22px; padding: 18px 28px; box-shadow: 0 0 34px rgba(91,232,209,0.5); opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; }
.hw-game-reveal.hidden { display: none; }
.hw-game-reveal.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.hw-rv-emoji { font-size: 4rem; line-height: 1; }
.hw-rv-py { font-weight: 900; font-size: 2rem; color: #fff; text-shadow: 0 0 12px rgba(255,255,255,0.3); }
.hw-rv-es { font-weight: 800; font-style: italic; color: #ffe66a; }

/* 🏆 Reward summary */
.hw-reward { position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8,10,22,0.82); overflow-y: auto; }
.hw-reward.hidden { display: none !important; }
/* 🔧 The card MUST fit in the visible viewport. Was: max-width 380px
   with width 100%, which on devices with side notches / lockscreen
   indicators could exceed the safe area and push the ¡Genial! close
   button off-screen — kid stuck unable to dismiss. Now clamps to
   calc(100vw - 36px) so there's always room on both sides for the
   close button, plus word-wrap so long text never overflows. */
.hw-reward-card {
  width: calc(100vw - 36px);
  max-width: 380px;
  box-sizing: border-box;
  text-align: center;
  background: linear-gradient(160deg, rgba(50,60,100,0.99), rgba(22,28,52,0.99));
  border: 3px solid #ffd24a;
  border-radius: 24px;
  padding: 26px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.7);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* 🛟 Backdrop tap dismissal — taps the dark overlay area (not the card
   itself) hide the reward. A second escape hatch in case the OK button
   ever gets clipped on weird viewports. */
.hw-reward { cursor: pointer; }
.hw-reward-card { cursor: default; position: relative; }
/* 🆘 EJECT BAR — full-width red bar fixed to the top of the viewport
   while the reward overlay is showing. Impossible to miss, impossible
   to clip off-screen. Tap target ~60px tall so the kid can't miss it
   with a fat-finger. User was repeatedly getting stuck — this is the
   nuclear option. */
.hw-reward-eject {
  position: fixed;
  top: max(0px, env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  height: 56px;
  border: none;
  border-radius: 0;
  background: linear-gradient(180deg, #ff5a5a, #cc2929);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 100002;   /* above everything including char-celebration */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  box-shadow: 0 4px 16px rgba(255, 60, 60, 0.5);
  -webkit-tap-highlight-color: transparent;
}
.hw-reward-eject:active {
  background: linear-gradient(180deg, #cc2929, #991a1a);
  transform: translateY(2px);
}

/* 📱 KILL MOBILE STICKY HOVER — on iOS/Android, :hover stays "on" after
   a tap, causing the highlighted-but-no-touch ghost states the user
   reported. Scope all hover/active visual effects to devices that
   actually have hover (desktops with mice). Mobile uses :active only. */
@media (hover: none) {
  .hw-lib-chip:hover,
  .hw-folder-card:hover,
  .hw-card:hover,
  .hw-custom-card:hover,
  .hw-reward-eject:hover,
  .hw-reward-ok:hover {
    background: inherit;
    transform: none;
    border-color: inherit;
  }
}
/* Remove the blue tap-flash rectangle iOS draws on tap targets. */
.hw-lib-chip,
.hw-folder-card,
.hw-card,
.hw-custom-card,
.hw-reward-ok,
.hw-reward-eject,
.hw-item-clear,
.hw-item-undo,
.hw-item-speak {
  -webkit-tap-highlight-color: transparent;
}
.hw-reward-burst { font-size: 4rem; animation: hwObjBob 1s ease-in-out infinite; }
.hw-reward-title { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.4rem; color: #ffd24a; margin: 6px 0 14px; }
.hw-reward-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.hw-reward-row { font-weight: 900; font-size: 1.1rem; color: #fff5d8; }
.hw-reward-levelup { color: #5be8d1; }
.hw-reward-ok { border: none; border-radius: 999px; font-weight: 900; font-size: 1.1rem; padding: 12px 30px; cursor: pointer; background: linear-gradient(135deg, #ffd24a, #ff7e3c); color: #3a1800; touch-action: manipulation; }
.hw-reward-ok:active { transform: scale(0.95); }

/* ── Desafíos del Día — refinements (title, sounds, slash trail, combos,
      clearer prize ladder, practice replay) ──────────────────────────── */
.hw-daily-top { position: relative; }
.hw-daily-h1 { flex: 1; text-align: center; font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.15rem; color: #ffd24a; margin: 0; }
.hw-daily-ladder-sub { font-size: 0.85rem; color: rgba(243,230,194,0.78); line-height: 1.45; margin: -4px 0 10px; }
.hw-ladder-item.next { border-color: #5be8d1; box-shadow: 0 0 16px rgba(91,232,209,0.25); opacity: 1; }
.hw-ladder-prog { height: 9px; border-radius: 999px; background: rgba(0,0,0,0.4); overflow: hidden; margin: 5px 0 4px; }
.hw-ladder-progfill { display: block; height: 100%; background: linear-gradient(90deg, #5be8d1, #36b9c7); }
.hw-dc-practice { background: linear-gradient(135deg, #8a7bff, #5b6cff) !important; color: #fff !important; font-size: 1rem !important; margin-top: 10px; }

/* hint badge on each falling object (✂️ swipe / 👆 tap) */
.hw-obj-hint { position: absolute; top: -6px; right: -2px; font-size: 1.4rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); pointer-events: none; }
.hw-obj-hit .hw-obj-hint { display: none; }

/* slash trail dots that follow the finger */
.hw-trail { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(120,220,255,0.4)); transform: translate(-50%,-50%); pointer-events: none; animation: hwTrailFade 0.36s linear forwards; will-change: opacity, transform; }
@keyframes hwTrailFade { 0% { opacity: 0.9; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.4); } }

/* burst particles on a hit */
.hw-particle { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; animation: hwParticle 0.6s ease-out forwards; will-change: transform, opacity; }
@keyframes hwParticle { 0% { opacity: 1; transform: translate(-50%,-50%); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4); } }

/* combo callout */
.hw-combo { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); font-family: 'Cinzel', serif; font-weight: 900; font-size: 2rem; color: #ffd24a; text-shadow: 0 0 16px rgba(255,160,60,0.9), 0 3px 6px rgba(0,0,0,0.6); pointer-events: none; animation: hwComboPop 0.8s ease-out forwards; z-index: 6; }
@keyframes hwComboPop { 0% { opacity: 0; transform: translateX(-50%) scale(0.5); } 25% { opacity: 1; transform: translateX(-50%) scale(1.2); } 100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-40px); } }

/* ── 🧠 MEMORY MATCH mode ─────────────────────────────────────────── */
.hw-game-arena.hw-memory { display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top,0) + 70px) 12px 24px; touch-action: manipulation; }
.hw-memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 520px; perspective: 1000px; }
.hw-memory-card { aspect-ratio: 3/4; background: none; border: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hw-mem-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(.3,1.6,.5,1); }
.hw-memory-card.flipped .hw-mem-inner, .hw-memory-card.matched .hw-mem-inner { transform: rotateY(180deg); }
.hw-mem-back, .hw-mem-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; box-shadow: 0 6px 14px rgba(0,0,0,0.45); }
.hw-mem-back { background: linear-gradient(160deg, #5b6cff, #5b3cff); color: #fff; font-size: clamp(1.6rem, 7vmin, 2.4rem); font-weight: 900; }
.hw-mem-front { background: var(--cat-color, #ffe082); color: #1a1a2a; transform: rotateY(180deg); }
.hw-mem-icon { font-size: clamp(1.4rem, 7vmin, 2.4rem); line-height: 1; }
.hw-mem-py { font-weight: 900; font-size: clamp(0.8rem, 3.6vmin, 1.05rem); }
.hw-mem-es { font-size: clamp(0.62rem, 2.4vmin, 0.78rem); font-style: italic; opacity: 0.85; text-align: center; }
.hw-memory-card.matched .hw-mem-front { animation: hwMemMatched 0.6s ease-out; box-shadow: 0 0 22px var(--cat-color, #fff); }
@keyframes hwMemMatched { 0%,100% { transform: rotateY(180deg) scale(1); } 50% { transform: rotateY(180deg) scale(1.1); } }

/* ── 🗣️ SPEAK & LISTEN mode ──────────────────────────────────────── */
.hw-game-arena.hw-speak { display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top,0) + 70px) 18px 24px; }
.hw-speak-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: linear-gradient(160deg, rgba(40,55,90,0.95), rgba(20,28,52,0.98)); border: 4px solid var(--cat-color, #ffe082); border-radius: 22px; padding: 24px 22px; box-shadow: 0 0 38px var(--cat-color, rgba(255,224,130,0.3)); }
.hw-speak-num { color: rgba(243,230,194,0.7); font-weight: 800; font-size: 0.9rem; }
.hw-speak-icon { font-size: clamp(4rem, 18vmin, 6.5rem); line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
.hw-speak-py { font-weight: 900; font-size: clamp(2rem, 8vmin, 2.8rem); color: var(--cat-color, #fff); text-shadow: 0 0 18px var(--cat-color, transparent); }
.hw-speak-es { font-weight: 800; font-style: italic; color: #ffe66a; font-size: clamp(1rem, 4vmin, 1.3rem); }
.hw-speak-listen, .hw-speak-next { border: none; border-radius: 999px; font-weight: 900; padding: 14px 22px; cursor: pointer; touch-action: manipulation; width: 100%; }
.hw-speak-listen { background: linear-gradient(135deg, #ffb46b, #ff7e5f); color: #2a1500; font-size: 1rem; }
.hw-speak-next { background: linear-gradient(135deg, #5be8d1, #36b9c7); color: #07232a; font-size: 1.1rem; }
.hw-speak-listen:active, .hw-speak-next:active { transform: scale(0.97); }

/* ── Character story beats (intro/outro inside the daily mini-game) ──── */
.hw-story { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: rgba(10,12,28,0.86); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.hw-story.show { opacity: 1; }
.hw-story-char { width: clamp(140px, 32vmin, 240px); height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6)); animation: hwStoryBob 1.2s ease-in-out infinite; }
@keyframes hwStoryBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.hw-story-bubble { position: relative; max-width: 60%; background: #fff5d8; color: #1a1a2a; font-weight: 900; font-size: clamp(1.1rem, 3.8vmin, 1.6rem); padding: 16px 20px; border-radius: 18px; box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
.hw-story-bubble::before { content: ''; position: absolute; left: -14px; top: 28px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 16px solid #fff5d8; }
.hw-story-intro .hw-story-char { animation-name: hwStoryEntry; }
@keyframes hwStoryEntry { 0% { transform: translateX(-40vw) rotate(-12deg); opacity: 0; } 100% { transform: translateX(0) rotate(-2deg); opacity: 1; } }

/* ── 🎁 Sentence Bonus inside the mini-game ──────────────────────── */
.hw-game.is-bonus .hw-game-arena, .hw-game.is-bonus .hw-game-hud { display: none; }
.hw-bonus { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px 18px calc(28px + env(safe-area-inset-bottom, 0)); background: radial-gradient(circle at 50% 30%, rgba(50,40,90,0.99), rgba(15,15,32,0.99)); overflow-y: auto; }
.hw-bonus-head { font-family: 'Cinzel', serif; font-weight: 900; font-size: clamp(1.2rem, 4.5vmin, 1.5rem); color: #ffd24a; text-align: center; }
.hw-bonus-stage { min-height: 72px; padding: 12px; background: rgba(20,24,40,0.6); border: 2px dashed rgba(255,210,74,0.5); border-radius: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.hw-bonus-empty { color: rgba(243,230,194,0.6); font-style: italic; font-size: 0.9rem; }
.hw-bonus-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hw-bonus-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; border: none; border-radius: 14px; background: var(--cat-color, #ffe082); color: #1a1a2a; font-family: inherit; font-weight: 900; cursor: pointer; touch-action: manipulation; box-shadow: 0 4px 10px rgba(0,0,0,0.35); }
.hw-bonus-chip.on-stage { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.5); }
.hw-bonus-chip:active { transform: scale(0.94); }
.hw-bonus-py { font-size: 1rem; font-weight: 900; line-height: 1.1; }
.hw-bonus-es { font-size: 0.72rem; opacity: 0.78; line-height: 1.1; font-style: italic; }
.hw-bonus-bar { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; margin-top: auto; }
.hw-bonus-bar button { border: none; border-radius: 999px; font-weight: 900; font-size: 0.95rem; padding: 12px 18px; cursor: pointer; touch-action: manipulation; }
.hw-bonus-skip { background: rgba(255,255,255,0.12); color: #fff; }
.hw-bonus-listen { background: linear-gradient(135deg, #ffb46b, #ff7e5f); color: #2a1500; }
.hw-bonus-save { background: linear-gradient(135deg, #5be8d1, #36b9c7); color: #07232a; flex: 1; min-width: 180px; }
.hw-bonus-bar button:active { transform: scale(0.96); }
.hw-reward-bonus { color: #5be8d1; font-weight: 800; font-size: 0.82rem; }

/* ✅ "X oraciones guardadas hoy" flash badge in the bonus panel. */
.hw-bonus-saved {
  margin-top: 10px; padding: 8px 14px;
  background: rgba(91,232,138,0.18); color: #5be88a;
  border: 1.5px solid #5be88a; border-radius: 999px;
  font-weight: 900; font-size: 0.92rem;
  text-align: center;
  align-self: center;
}
.hw-bonus-saved.pulse { animation: hwBonusSavedPulse 0.42s; }
@keyframes hwBonusSavedPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }

/* "Guardar otra oración" CTA on the reward overlay so the kid can stack
   saves without re-running the whole daily. */
.hw-extra-save {
  margin-top: 14px;
  background: linear-gradient(135deg, #5be88a, #36b9c7);
  color: #07232a;
  border: none; border-radius: 999px;
  padding: 11px 22px;
  font-weight: 900; font-size: 0.98rem;
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 6px 16px rgba(91,232,138,0.32);
}
.hw-extra-save:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════════════════
   🐲 TEMPLO DEL DRAGÓN — themed daily game (replaces gift-tap loop)
   ═══════════════════════════════════════════════════════════════════════ */
.hw-temple-mode { position: relative; min-height: 540px; overflow: hidden; }
.hw-temple-scene {
  position: relative;
  width: 100%; height: 100%; min-height: 540px;
  border-radius: 20px;
  background: linear-gradient(180deg, #2a1545 0%, #4a1a4a 35%, #8a2433 70%, #c83a2a 100%);
  overflow: hidden;
}
/* Twinkly star/cloud sky band at the top */
.hw-temple-sky {
  position: absolute; inset: 0 0 60% 0;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff5d8 50%, transparent),
    radial-gradient(1.5px 1.5px at 65% 18%, #ffd24a 50%, transparent),
    radial-gradient(2px 2px at 85% 45%, #fff5d8 50%, transparent),
    radial-gradient(1.5px 1.5px at 35% 55%, #ffe082 50%, transparent),
    radial-gradient(ellipse at 50% 90%, rgba(255,224,130,0.16), transparent 60%);
  background-repeat: no-repeat;
  animation: hwTempleSky 18s linear infinite;
}
@keyframes hwTempleSky { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
/* Layered mountain silhouettes */
.hw-temple-mountains {
  position: absolute; left: 0; right: 0; bottom: 35%;
  height: 25%;
  background:
    linear-gradient(180deg, transparent 30%, rgba(40,20,55,0.4) 30%, rgba(40,20,55,0.6) 100%),
    radial-gradient(circle at 18% 100%, rgba(60,30,75,0.85) 0 28%, transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(70,30,80,0.95) 0 38%, transparent 38%),
    radial-gradient(circle at 82% 100%, rgba(60,30,75,0.88) 0 32%, transparent 32%);
  filter: drop-shadow(0 -4px 8px rgba(0,0,0,0.4));
}
.hw-temple-pagoda {
  position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
  font-size: clamp(3.5rem, 11vmin, 5.5rem);
  filter: drop-shadow(0 6px 12px rgba(255,200,80,0.4));
  animation: hwTempleSway 4s ease-in-out infinite alternate;
  z-index: 2;
}
@keyframes hwTempleSway { from { transform: translateX(calc(-50% - 4px)) rotate(-1deg); } to { transform: translateX(calc(-50% + 4px)) rotate(1deg); } }
/* Falling cherry blossom petals (parallax) */
.hw-temple-petals { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hw-temple-petal {
  position: absolute; top: -10px; left: var(--x);
  width: 10px; height: 10px;
  background: radial-gradient(circle at 30% 30%, #ffd5e8, #ff7eb3 70%);
  border-radius: 50% 50% 50% 0;
  opacity: 0.85;
  animation: hwTemplePetalFall 8s linear var(--d) infinite;
}
@keyframes hwTemplePetalFall {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(40px, 110vh) rotate(720deg); opacity: 0.4; }
}
/* The stepping-stone path leading up to the dragon */
.hw-temple-stones {
  position: absolute; left: 0; right: 0; bottom: 18%;
  display: flex; justify-content: space-around; align-items: center;
  padding: 0 6%;
  z-index: 4;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
.hw-temple-stone {
  font-size: clamp(1.8rem, 6vmin, 2.6rem);
  opacity: 0.55;
  transition: transform 0.25s, opacity 0.25s;
}
.hw-temple-stone.lit {
  opacity: 1;
  transform: translateY(-4px) scale(1.15);
  filter: drop-shadow(0 0 18px #ff7e5f) drop-shadow(0 0 6px #ffe082);
  animation: hwTempleLanternGlow 1.4s ease-in-out infinite alternate;
}
@keyframes hwTempleLanternGlow { from { filter: drop-shadow(0 0 12px #ff7e5f); } to { filter: drop-shadow(0 0 24px #ffe082); } }
/* The character — hops between stones */
.hw-temple-char {
  position: absolute; bottom: 22%;
  left: calc(6% + ((100% - 12%) / 8) * var(--step, 0));
  transform: translateX(-50%);
  width: clamp(70px, 16vmin, 110px); height: auto;
  z-index: 6;
  transition: left 0.45s cubic-bezier(.2,1.2,.4,1);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.hw-temple-char.hop { animation: hwTempleHop 0.55s ease-out; }
@keyframes hwTempleHop {
  0%   { transform: translateX(-50%) translateY(0); }
  40%  { transform: translateX(-50%) translateY(-30px) scale(1.05); }
  100% { transform: translateX(-50%) translateY(0); }
}
/* The dragon waiting at the top of the path */
.hw-temple-dragon {
  position: absolute; top: 8%; right: 6%;
  font-size: clamp(3rem, 11vmin, 5rem);
  z-index: 5;
  filter: drop-shadow(0 0 12px rgba(255,200,80,0.5));
  animation: hwTempleDragonFloat 3s ease-in-out infinite alternate;
}
@keyframes hwTempleDragonFloat { from { transform: translateY(-4px); } to { transform: translateY(6px); } }
.hw-temple-dragon.roar { animation: hwTempleDragonRoar 0.9s ease-out; }
@keyframes hwTempleDragonRoar {
  0%   { transform: scale(1) rotate(0); filter: drop-shadow(0 0 12px gold); }
  40%  { transform: scale(1.6) rotate(-6deg); filter: drop-shadow(0 0 32px #ff7e5f) drop-shadow(0 0 14px gold); }
  100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 12px gold); }
}
/* Progress bar across the top of the scene */
.hw-temple-progress {
  position: absolute; top: 12px; left: 12px; right: 12px;
  height: 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 999px; overflow: hidden;
  z-index: 7;
  border: 1px solid rgba(255,224,130,0.4);
}
.hw-temple-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #5be88a, #ffe082, #ff7e5f);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255,224,130,0.6);
  transition: width 0.5s cubic-bezier(.3,1.2,.4,1);
}
/* Combo chip in the scene (override of generic .hw-sp-combo) */
.hw-temple-mode .hw-temple-combo,
.hw-temple-combo {
  position: absolute; top: 28px; right: 14px; z-index: 8;
  background: rgba(0,0,0,0.55); color: #ffe082;
  border: 1.5px solid #ffe082; border-radius: 999px;
  padding: 5px 12px;
  font-family: 'Cinzel', serif; font-weight: 900; font-size: 0.84rem;
  letter-spacing: 0.04em;
  box-shadow: 0 0 14px rgba(255,224,130,0.5);
}
/* Question banner + Spanish choice chips at the bottom */
.hw-temple-question {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 12px 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
  z-index: 9;
}
.hw-temple-q-bubble {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-bottom: 10px;
  padding: 12px 16px;
  background: linear-gradient(160deg, #fff5d8, #ffe082);
  border: 2.5px solid #b06a2a;
  border-radius: 18px;
  color: #2a1500;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.hw-temple-q-prompt { font-weight: 800; font-size: 0.92rem; opacity: 0.78; }
.hw-temple-q-pinyin { font-weight: 900; font-size: clamp(1.4rem, 5.5vmin, 2.1rem); letter-spacing: -0.01em; }
.hw-temple-q-listen {
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: #c81e1e; color: #fff;
  font-size: 1rem; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 4px 10px rgba(200,30,30,0.4);
}
.hw-temple-q-listen:active { transform: scale(0.92); }
.hw-temple-q-choices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 380px) { .hw-temple-q-choices { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
.hw-temple-q-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: rgba(255,255,255,0.96);
  border: 2.5px solid var(--cat-color, #ffd24a);
  border-radius: 16px;
  padding: 14px 8px;
  font-weight: 900; color: #2a1500;
  min-height: 84px;
  cursor: pointer; touch-action: manipulation;
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.hw-temple-q-choice:active { transform: scale(0.95); }
.hw-temple-q-choice.is-correct {
  background: linear-gradient(135deg, #5be88a, #36b9c7);
  color: #07232a;
  box-shadow: 0 0 22px rgba(91,232,138,0.7);
  animation: hwTempleChoicePulse 0.5s;
}
.hw-temple-q-choice.is-wrong {
  background: #ff7a7a; color: #fff;
  animation: hwTempleChoiceShake 0.4s;
}
@keyframes hwTempleChoicePulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }
@keyframes hwTempleChoiceShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.hw-temple-q-icon { font-size: 1.5rem; line-height: 1; }
.hw-temple-q-es { font-size: 0.95rem; line-height: 1.15; }
.hw-temple-scene.shake { animation: hwTempleSceneShake 0.35s; }
@keyframes hwTempleSceneShake { 0%,100%{transform:translateX(0);} 30%{transform:translateX(-5px);} 70%{transform:translateX(5px);} }
/* Grammar tip overlay (sits on top of the scene) */
.hw-temple-tip {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  animation: hwTempleTipFadeIn 0.2s;
}
@keyframes hwTempleTipFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hw-temple-tip-card {
  width: min(86%, 480px);
  padding: 18px 18px 14px;
  background: linear-gradient(160deg, #fff5d8, #ffe082);
  border: 2.5px solid #b06a2a; border-radius: 18px;
  color: #2a1500;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.hw-temple-tip-head { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.05rem; color: #8a4514; margin-bottom: 6px; }
.hw-temple-tip-body { font-size: 0.98rem; line-height: 1.45; font-weight: 700; }
.hw-temple-tip-ok {
  margin-top: 12px; width: 100%;
  background: linear-gradient(135deg, #c81e1e, #e23b3b); color: #fff;
  border: none; border-radius: 999px; padding: 12px 18px;
  font-weight: 900; font-size: 0.98rem; cursor: pointer; touch-action: manipulation;
}

/* ─── 🗂️ Monthly carpets in Mis oraciones ─────────────────────────────── */
.hw-sentences-month {
  margin: 0 0 14px;
  border: 1.5px solid rgba(91,232,209,0.32);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(40,60,90,0.5), rgba(20,30,55,0.55));
  overflow: hidden;
}
.hw-sentences-month[open] { border-color: rgba(91,232,209,0.55); }
.hw-sentences-month-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-weight: 900; color: #d6f4ff; font-size: 1.02rem;
  touch-action: manipulation;
}
.hw-sentences-month-head::-webkit-details-marker { display: none; }
.hw-sentences-month-head::after {
  content: '▾'; margin-left: auto; color: #5be8d1; font-weight: 900;
  transition: transform 0.2s;
}
.hw-sentences-month:not([open]) .hw-sentences-month-head::after { transform: rotate(-90deg); }
.hw-sm-icon { font-size: 1.2rem; }
.hw-sm-name { font-family: 'Cinzel', serif; letter-spacing: 0.02em; }
.hw-sm-count {
  margin-left: auto; padding: 2px 10px;
  background: rgba(91,232,209,0.18); color: #5be8d1;
  border-radius: 999px; font-size: 0.78rem; font-weight: 900;
}
.hw-sentences-month-body { padding: 6px 12px 14px; }

/* ─── 🌱 Parent 0→2000 progress bar ────────────────────────────────────── */
.hw-parents-progress {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: linear-gradient(140deg, rgba(40,180,120,0.18), rgba(255,196,90,0.14));
  border: 1.5px solid rgba(91,232,138,0.42);
  border-radius: 18px;
  color: #f4ffe6;
}
.hw-pp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hw-pp-icon { font-size: 1.4rem; }
.hw-pp-title { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.02rem; color: #ffe082; }
.hw-pp-tier {
  margin-left: auto; padding: 3px 11px;
  background: rgba(255,224,130,0.22); color: #ffe082;
  border-radius: 999px; font-size: 0.78rem; font-weight: 900;
  border: 1px solid rgba(255,224,130,0.55);
}
.hw-pp-bar {
  width: 100%; height: 14px;
  background: rgba(0,0,0,0.32);
  border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.hw-pp-fill {
  height: 100%;
  background: linear-gradient(90deg, #5be88a, #ffe082, #ff7e5f);
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 14px rgba(91,232,138,0.55);
}
.hw-pp-meta { margin-top: 6px; font-size: 0.92rem; font-weight: 800; color: #fff5d8; }
.hw-pp-note { margin-top: 4px; font-size: 0.78rem; color: rgba(243,230,194,0.78); line-height: 1.4; }

/* ─── 📖 Story mode interactivity (gift reveal, challenge, grammar tip) ─ */
.hw-sp-gift {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: clamp(140px, 38vw, 220px); height: clamp(140px, 38vw, 220px);
  border: none; border-radius: 28px;
  background: linear-gradient(140deg, #ffd24a, #ff7e5f);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  box-shadow: 0 14px 36px rgba(255,126,95,0.5), inset 0 -8px 16px rgba(0,0,0,0.2);
  cursor: pointer; touch-action: manipulation;
  animation: hwGiftBounce 0.9s ease-in-out infinite alternate;
  z-index: 4;
}
.hw-sp-gift-emoji { font-size: clamp(3rem, 9vmin, 4.6rem); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }
.hw-sp-gift-cta { font-weight: 900; color: #2a1500; font-size: 0.95rem; letter-spacing: 0.02em; }
.hw-sp-gift.pop { animation: hwGiftPop 0.36s forwards; }
@keyframes hwGiftBounce { from { transform: translate(-50%, -52%) scale(1); } to { transform: translate(-50%, -48%) scale(1.05); } }
@keyframes hwGiftPop { to { transform: translate(-50%, -50%) scale(0); opacity: 0; } }

.hw-sp-challenge .hw-sp-dialog,
.hw-sp-tip .hw-sp-dialog { padding-bottom: 18px; }
.hw-sp-choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin-top: 10px;
}
.hw-sp-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.92);
  border: 2px solid var(--cat-color, #ffd24a);
  border-radius: 14px;
  padding: 12px 8px;
  font-weight: 900; color: #2a1500;
  cursor: pointer; touch-action: manipulation;
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
  min-height: 76px;
}
.hw-sp-choice:active { transform: scale(0.95); }
.hw-sp-choice.is-correct {
  background: linear-gradient(135deg, #5be88a, #36b9c7);
  color: #07232a;
  box-shadow: 0 0 22px rgba(91,232,138,0.7);
  animation: hwChoicePulse 0.5s ease-out;
}
.hw-sp-choice.is-wrong {
  background: #ff7a7a; color: #fff;
  animation: hwChoiceShake 0.35s;
}
@keyframes hwChoicePulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }
@keyframes hwChoiceShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.hw-sp-choice-icon { font-size: 1.5rem; line-height: 1; }
.hw-sp-choice-py { font-size: 0.95rem; }
.hw-story-panel.shake { animation: hwPanelShake 0.4s; }
@keyframes hwPanelShake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-4px);} 60%{transform:translateX(4px);} }

.hw-sp-tip-card {
  position: relative; z-index: 3;
  margin: auto 14px; padding: 18px 18px 14px;
  background: linear-gradient(160deg, #fff5d8, #ffe082);
  border: 2px solid #b06a2a;
  border-radius: 18px;
  color: #2a1500;
  max-width: 540px; align-self: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.hw-sp-tip-head { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.05rem; color: #8a4514; margin-bottom: 6px; }
.hw-sp-tip-body { font-size: 0.98rem; line-height: 1.45; font-weight: 700; }
.hw-sp-tip-card .hw-sp-next {
  margin-top: 12px; width: 100%;
  background: linear-gradient(135deg, #c81e1e, #e23b3b); color: #fff;
  border: none; border-radius: 999px; padding: 12px 18px;
  font-weight: 900; font-size: 0.98rem; cursor: pointer;
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════════════════
   📱 MOBILE-FIRST FIXES FOR PADRES VIEW + PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* Stack the hero card vertically — avatar on top, name + stats below */
  .hw-parents-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px 12px;
  }
  .hw-parents-avatar-frame {
    width: 96px; height: 96px;
    border-radius: 18px;
  }
  .hw-parents-avatar .hw-avatar-emoji-fallback { font-size: 3rem; }
  .hw-parents-hero-info { width: 100%; min-width: 0; }
  .hw-parents-hero-name {
    font-size: 1.2rem;
    word-break: break-word;
  }
  .hw-parents-stats {
    align-items: center;
  }
  .hw-parents-stat,
  .hw-parents-stat-pill {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    word-break: break-word;
  }
  /* "Camino del idioma" tier badge — was overflowing right edge */
  .hw-pp-head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .hw-pp-tier {
    margin-left: 0 !important;
    flex-shrink: 0;
  }
  .hw-pp-title { font-size: 0.95rem; }
  /* Volver button — give it its own row so it doesn't overlap the title */
  .hw-back-btn,
  .hw-parents-back {
    width: 100%;
    margin-bottom: 8px;
  }
  /* Parents header layout — stack title and back button */
  .hw-parents-header,
  .hw-back-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* iPhone SE / very narrow */
@media (max-width: 380px) {
  .hw-parents-hero-name { font-size: 1.05rem; }
  .hw-parents-stat strong { font-size: 1em; }
  .hw-pp-meta { font-size: 0.82rem; }
}


/* 📤 "De tu maestra" tag in Mis Oraciones */
.hw-sentence-from-teacher {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: linear-gradient(135deg, #5be8d1, #2eb8a3);
  color: #0a2a26;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════
   🆕 2026-09-15 — NIVELES HSK (Fernando): nombre GRANDE, chip de nivel
   a la DERECHA, banner del código de estudiante, y el jugador de la
   "Bolsa de Palabras" (tareas HSK2 tipo word-sack).
   ══════════════════════════════════════════════════════════════════ */
/* Nombre del alumno = protagonista del header */
.hw-list-sub { font-size: 1.05rem; }
.hw-list-sub strong { font-size: 1.5rem; color: #ffe082; letter-spacing: 0.02em; }
/* Chip de nivel — a la derecha, junto a los botones. Cambia por nivel. */
.hw-level-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  font-weight: 900; font-size: 0.95rem; letter-spacing: 0.04em;
  border: 2px solid; white-space: nowrap;
}
.hw-level-chip.is-hsk1 { color: #ffe082; border-color: rgba(255, 224, 130, 0.7); background: rgba(255, 224, 130, 0.12); }
.hw-level-chip.is-hsk2 { color: #5be8d1; border-color: rgba(91, 232, 209, 0.7); background: rgba(91, 232, 209, 0.12); }

/* 🔑 Banner del código de estudiante (solo cuentas nuevas) */
#hw-code-banner {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 18, 0.82); backdrop-filter: blur(4px);
  padding: 16px;
}
.hw-code-banner-card {
  background: linear-gradient(160deg, #1a2035, #0d1224);
  border: 3px solid #ffe082; border-radius: 22px;
  padding: 28px 26px; max-width: 440px; width: 100%;
  text-align: center; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
.hw-code-banner-icon { font-size: 3rem; }
.hw-code-banner-title { color: #f3e6c2; font-weight: 800; font-size: 1.15rem; margin-top: 6px; }
.hw-code-banner-code {
  font-size: 3.2rem; font-weight: 900; letter-spacing: 0.35em; padding-left: 0.35em;
  color: #ffe082; margin: 10px 0;
  text-shadow: 0 0 24px rgba(255, 224, 130, 0.45);
}
.hw-code-banner-note { color: rgba(243, 230, 194, 0.85); font-size: 0.95rem; line-height: 1.5; margin-bottom: 18px; }

/* 🎒 Bolsa de Palabras (word-sack) */
#hw-sack-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: #0d1224; overflow-y: auto;
  padding: 14px 14px 90px; -webkit-overflow-scrolling: touch;
}
.hw-sack-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.hw-sack-title { font-weight: 900; color: #fff; font-size: 1.1rem; }
.hw-sack-progress { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
#hw-sack-count { color: #ffe082; font-weight: 900; white-space: nowrap; }
.hw-sack-bar { flex: 1; min-width: 90px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; display: inline-block; }
.hw-sack-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffe082, #5be88a); transition: width 0.35s ease; }
.hw-sack-instr { color: rgba(243, 230, 194, 0.8); font-size: 0.9rem; line-height: 1.45; margin: 4px 0 10px; }
.hw-sack-stage {
  min-height: 68px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 224, 130, 0.4);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px;
}
.hw-sack-stage-hint { color: rgba(255, 255, 255, 0.45); font-size: 0.9rem; }
.hw-sack-stagechip {
  border: none; cursor: pointer; touch-action: manipulation;
  background: var(--cat, #ffe082); color: #101426;
  font-weight: 900; font-size: 1.05rem;
  border-radius: 10px; padding: 9px 13px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}
.hw-sack-shake { animation: hw-sack-shake 0.4s ease; border-color: rgba(255, 90, 102, 0.8) !important; }
@keyframes hw-sack-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-4px)} }
.hw-sack-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.hw-sack-bag {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.hw-sack-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, 0.06);
  border-left: 5px solid var(--cat, #ffe082);
  border-radius: 10px; padding: 9px 6px;
  color: #fff;
}
.hw-sack-chip b { font-size: 1rem; color: var(--cat, #ffe082); }
.hw-sack-chip small { font-size: 0.72rem; color: rgba(243, 230, 194, 0.7); }
.hw-sack-chip:active { transform: scale(0.95); }
.hw-sack-found-head { color: #ffe082; font-weight: 900; margin-bottom: 6px; }
.hw-sack-found { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.hw-sack-none { color: rgba(255, 255, 255, 0.45); font-size: 0.9rem; }
.hw-sack-foundrow {
  background: rgba(91, 232, 138, 0.1);
  border: 1px solid rgba(91, 232, 138, 0.35);
  border-radius: 10px; padding: 8px 12px;
  color: #d9ffe6; font-size: 1rem;
}
.hw-sack-submit { width: 100%; }
.hw-sack-submit:disabled { opacity: 0.45; }
.hw-sack-result {
  position: fixed; inset: 0; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 18, 0.85);
  padding: 16px;
}
.hw-sack-result-card {
  background: linear-gradient(160deg, #1a2035, #0d1224);
  border: 3px solid #5be88a; border-radius: 22px;
  padding: 26px; max-width: 380px; width: 100%; text-align: center;
}
.hw-sack-result-emoji { font-size: 3.4rem; }
.hw-sack-result-score { font-size: 2.4rem; font-weight: 900; color: #5be88a; margin: 6px 0; }
.hw-sack-result-note { color: rgba(243, 230, 194, 0.85); margin-bottom: 16px; line-height: 1.45; }

/* ══════════════════════════════════════════════════════════════════
   🆕 2026-09-15 v2 — premium pass (Fernando): pinned code+level stack
   top-right, level OUT of the name area, HSK2 jade theme, and the
   Bolsa de Palabras redesigned as an actual game (hw-sk-*).
   ══════════════════════════════════════════════════════════════════ */
/* 📌 Pinned stack — always visible, top-right */
#hw-pin-stack {
  position: fixed; top: 10px; right: 10px; z-index: 800;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  pointer-events: none;
}
#hw-pin-stack > * { pointer-events: auto; }
.hw-pin-code {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid rgba(255, 224, 130, 0.75); border-radius: 999px;
  background: rgba(13, 18, 36, 0.92); color: #fff;
  padding: 7px 14px; cursor: pointer; touch-action: manipulation;
  font-size: 0.9rem; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}
.hw-pin-code b { color: #ffe082; letter-spacing: 0.18em; font-size: 1.02rem; }
.hw-pin-code:active { transform: scale(0.96); }
.hw-pin-level {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 4px 14px;
  font-weight: 900; font-size: 0.82rem; letter-spacing: 0.08em;
  border: 2px solid; backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.hw-pin-level.is-hsk1 { color: #ffe082; border-color: rgba(255, 224, 130, 0.8); background: rgba(255, 224, 130, 0.14); }
.hw-pin-level.is-hsk2 { color: #5be8d1; border-color: rgba(91, 232, 209, 0.8); background: rgba(91, 232, 209, 0.14); }
.hw-pin-level.is-yct1 { color: #ffab91; border-color: rgba(255, 138, 101, 0.8); background: rgba(255, 138, 101, 0.14); }
/* YCT 1 (2026-10-12): Desafíos are built from HSK 1 words, above a YCT kid's level */
body.hw-no-daily #hw-list-daily,
body.hw-no-daily #hw-hud { display: none !important; }
/* the old inline chip is gone */
.hw-level-chip { display: none !important; }

/* 🌊 HSK2 theme — same portal, another level: gold accents turn jade */
body.hw-lv-hsk2 .hw-list-header { border-color: rgba(91, 232, 209, 0.45); }
body.hw-lv-hsk2 .hw-list-sub strong { color: #5be8d1; }
body.hw-lv-hsk2 .hw-tab.is-active { border-color: #5be8d1; color: #5be8d1; }
body.hw-lv-hsk2 .hw-folder-card { border-color: rgba(91, 232, 209, 0.35); }
body.hw-lv-hsk2 .hw-folder-card:hover { border-color: #5be8d1; }
body.hw-lv-hsk2 .hw-hud { border-color: rgba(91, 232, 209, 0.5); }

/* ═══ 🎒 BOLSA DE PALABRAS — the game (hw-sk-*) ═══ */
#hw-sack-overlay.hw-sk {
  position: fixed; inset: 0; z-index: 5000;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(91, 232, 209, 0.14), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(255, 224, 130, 0.08), transparent 55%),
    #0b0f1e;
  padding: 14px clamp(14px, 4vw, 40px) 110px;
}
.hw-sk-head { display: flex; align-items: center; gap: 12px; max-width: 860px; margin: 0 auto 4px; }
.hw-sk-back, .hw-sk-help {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06);
  color: #fff; font-size: 1.15rem; font-weight: 900; cursor: pointer; touch-action: manipulation;
}
.hw-sk-headmid { flex: 1; text-align: center; min-width: 0; }
.hw-sk-kicker { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.28em; color: #5be8d1; }
.hw-sk-title { font-size: 1.08rem; font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-sk-stars { display: flex; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.hw-sk-star { font-size: 1.7rem; opacity: 0.35; filter: grayscale(1); transition: all 0.25s ease; }
.hw-sk-star.is-on { opacity: 1; filter: none; text-shadow: 0 0 16px rgba(255, 224, 130, 0.7); transform: scale(1.12); }
.hw-sk-coach {
  max-width: 640px; margin: 4px auto 14px; text-align: center;
  color: rgba(243, 230, 194, 0.6); font-size: 0.84rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hw-sk-coach.is-open { -webkit-line-clamp: unset; color: rgba(243, 230, 194, 0.9); }
.hw-sk-stagewrap { max-width: 860px; margin: 0 auto 22px; }
.hw-sk-stage {
  min-height: 96px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 2px dashed rgba(91, 232, 209, 0.45);
  box-shadow: inset 0 0 40px rgba(91, 232, 209, 0.05);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  padding: 16px;
}
.hw-sk-stagehint { color: rgba(255, 255, 255, 0.4); font-size: 0.95rem; }
.hw-sk-stagechip {
  border: none; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--cat, #ffe082); color: #101426;
  font-weight: 900; font-size: 1.12rem;
  border-radius: 14px; padding: 9px 15px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.3);
}
.hw-sk-stagechip i { font-style: normal; font-weight: 400; font-size: 0.95rem; opacity: 0.75; }
.hw-sk-stagechip:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.hw-sk-shake { animation: hw-sack-shake 0.4s ease; }
.hw-sk-actionbar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.hw-sk-ico {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07);
  font-size: 1.15rem; cursor: pointer; touch-action: manipulation; color: #fff;
}
.hw-sk-ico:active { transform: scale(0.92); }
.hw-sk-try {
  border: none; cursor: pointer; touch-action: manipulation;
  background: linear-gradient(180deg, #ffe082, #f0a93a); color: #1a1a2a;
  font-weight: 900; font-size: 1.05rem; letter-spacing: 0.06em;
  border-radius: 999px; padding: 13px 30px;
  box-shadow: 0 5px 0 rgba(160, 100, 20, 0.55), 0 10px 24px rgba(255, 200, 80, 0.25);
}
.hw-sk-try:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(160, 100, 20, 0.55); }
.hw-sk-hintline {
  text-align: center; margin-top: 10px; min-height: 1.4em;
  color: #5be8d1; font-size: 0.98rem;
  opacity: 0; transform: translateY(-4px); transition: all 0.25s ease;
}
.hw-sk-hintline.is-show { opacity: 1; transform: none; }
.hw-sk-hintline b { color: #fff; background: rgba(91, 232, 209, 0.14); border: 1px dashed rgba(91,232,209,0.5); border-radius: 8px; padding: 2px 10px; }
.hw-sk-baghead {
  max-width: 860px; margin: 0 auto 8px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  color: #ffe082; font-weight: 900; font-size: 0.95rem;
}
.hw-sk-legend { font-weight: 600; font-size: 0.72rem; color: rgba(255,255,255,0.55); display: flex; gap: 10px; align-items: center; }
.hw-sk-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cat); margin-right: 4px; }
.hw-sk-bag {
  max-width: 860px; margin: 0 auto 24px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.hw-sk-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; cursor: pointer; touch-action: manipulation;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  border-top: 3px solid var(--cat, #ffe082);
  border-radius: 14px; padding: 11px 6px 9px;
  color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.hw-sk-chip b { font-size: 1.02rem; color: var(--cat, #ffe082); }
.hw-sk-chip i { font-style: normal; font-size: 1rem; color: rgba(255, 255, 255, 0.85); }
.hw-sk-chip small { font-size: 0.68rem; color: rgba(243, 230, 194, 0.6); }
.hw-sk-chip:active { transform: scale(0.94); }
.hw-sk-pop { animation: hw-sk-pop 0.28s ease; }
@keyframes hw-sk-pop { 40% { transform: scale(1.12); } }
.hw-sk-foundhead { max-width: 860px; margin: 0 auto 8px; color: #5be8d1; font-weight: 900; font-size: 0.95rem; }
.hw-sk-found {
  max-width: 860px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px;
}
.hw-sk-none { color: rgba(255, 255, 255, 0.4); font-size: 0.9rem; }
.hw-sk-foundcard {
  background: rgba(91, 232, 138, 0.08);
  border: 1px solid rgba(91, 232, 138, 0.4);
  border-radius: 14px; padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  animation: hw-sk-slidein 0.35s ease;
}
@keyframes hw-sk-slidein { from { transform: translateY(10px); opacity: 0; } }
.hw-sk-foundcard b { color: #fff; font-size: 1.15rem; font-weight: 700; }
.hw-sk-foundcard span { color: #8fe8b0; font-size: 0.82rem; }
.hw-sk-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5100;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(14px, 4vw, 40px);
  background: rgba(11, 15, 30, 0.92); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hw-sk-bottomtxt { color: rgba(243, 230, 194, 0.85); font-weight: 800; font-size: 0.95rem; }
.hw-sk-submit {
  border: none; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75);
  font-weight: 900; font-size: 1rem; border-radius: 999px; padding: 12px 26px;
}
.hw-sk-submit:disabled { opacity: 0.35; cursor: default; }
.hw-sk-submit.is-ready {
  background: linear-gradient(180deg, #7dffa8, #2ecc71); color: #0b1a10;
  box-shadow: 0 0 22px rgba(91, 232, 138, 0.5);
  animation: hw-sk-pulse 1.2s ease-in-out infinite;
}
@keyframes hw-sk-pulse { 50% { transform: scale(1.05); } }
.hw-sk-flash {
  position: fixed; inset: 0; z-index: 5200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 18, 0.55); pointer-events: none;
}
.hw-sk-flashcard {
  background: linear-gradient(160deg, #1a2035, #0d1224);
  border: 3px solid #ffe082; border-radius: 24px;
  padding: 26px 40px; text-align: center;
  box-shadow: 0 0 60px rgba(255, 224, 130, 0.35);
  animation: hw-sk-flashin 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes hw-sk-flashin { from { transform: scale(0.6); opacity: 0; } }
.hw-sk-flashstar { font-size: 2.6rem; }
.hw-sk-flashzh { font-size: 2.2rem; font-weight: 700; color: #fff; margin: 4px 0; }
.hw-sk-flashpy { font-size: 1.15rem; color: #ffe082; font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════
   🎯 2026-09-20 — SIM TRAINER (HSK1): hero de 3 tiers en el inicio,
   panel por tier y jugador de mini-exámenes con material real.
   ══════════════════════════════════════════════════════════════════ */
#hw-trainer-hero { margin: 14px 0 16px; }
.hw-tr-herohead {
  color: #ffe082; font-weight: 900; font-size: 1.15rem; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.hw-tr-herohead small { color: rgba(243, 230, 194, 0.65); font-weight: 600; font-size: 0.8rem; }
.hw-tr-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.hw-tr-tiercard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  border: 2px solid; border-radius: 18px; padding: 14px 16px;
  cursor: pointer; touch-action: manipulation; text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  color: #fff; transition: transform 0.12s ease;
}
.hw-tr-tiercard:hover { transform: translateY(-3px); }
.hw-tr-tiercard.is-t1 { border-color: #cd7f32; box-shadow: 0 6px 22px rgba(205, 127, 50, 0.22); }
.hw-tr-tiercard.is-t2 { border-color: #c0c0c0; box-shadow: 0 6px 22px rgba(192, 192, 192, 0.18); }
.hw-tr-tiercard.is-t3 { border-color: #ffd24a; box-shadow: 0 6px 22px rgba(255, 210, 74, 0.25); }
.hw-tr-tiericon { font-size: 2rem; }
.hw-tr-tiertitle { font-weight: 900; font-size: 1.02rem; }
.hw-tr-tierblurb { color: rgba(243, 230, 194, 0.7); font-size: 0.78rem; }
.hw-tr-tierprog {
  margin-top: 6px; font-size: 0.78rem; font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 3px 10px;
}
.hw-tr-tierprog.is-done { color: #0b1a10; background: #5be88a; }

#hw-tr-tierpanel {
  position: fixed; inset: 0; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 18, 0.8); backdrop-filter: blur(4px); padding: 14px;
}
.hw-tr-panelcard {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(160deg, #1a2035, #0d1224);
  border: 2px solid rgba(255, 224, 130, 0.5); border-radius: 20px; padding: 20px;
}
.hw-tr-close {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 90, 102, 0.25); color: #ff9a8a; font-weight: 900; font-size: 1rem;
}
.hw-tr-paneltitle { color: #fff; font-weight: 900; font-size: 1.2rem; }
.hw-tr-panelblurb { color: rgba(243, 230, 194, 0.7); font-size: 0.85rem; margin: 4px 0 14px; }
.hw-tr-list { display: flex; flex-direction: column; gap: 10px; }
.hw-tr-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); padding: 12px 14px;
  cursor: pointer; touch-action: manipulation; color: #fff; text-align: left;
}
.hw-tr-row:hover { border-color: #ffe082; }
.hw-tr-rowicon { font-size: 1.6rem; }
.hw-tr-rowtxt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-tr-rowtxt b { font-size: 0.98rem; }
.hw-tr-rowtxt small { color: rgba(243, 230, 194, 0.6); font-size: 0.74rem; }
.hw-tr-new { color: #5bcfef; font-weight: 900; font-size: 0.85rem; white-space: nowrap; }
.hw-tr-pass { color: #5be88a; font-weight: 900; font-size: 0.9rem; white-space: nowrap; }
.hw-tr-retry { color: #ffb26b; font-weight: 800; font-size: 0.8rem; white-space: nowrap; }

/* ── el jugador ── */
#hw-tr-play {
  position: fixed; inset: 0; z-index: 6500;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(1000px 460px at 50% -10%, rgba(255, 224, 130, 0.12), transparent 60%),
    #0b0f1e;
  padding: 14px clamp(14px, 4vw, 40px) 60px;
}
.hw-tr-playhead { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; }
.hw-tr-back {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06);
  color: #fff; font-size: 1.15rem; font-weight: 900; cursor: pointer;
}
.hw-tr-playtitles { flex: 1; min-width: 0; }
.hw-tr-kicker { font-size: 0.65rem; font-weight: 900; letter-spacing: 0.26em; color: #ffe082; }
.hw-tr-playtitle { color: #fff; font-weight: 900; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-tr-dots { display: flex; gap: 5px; flex-wrap: wrap; max-width: 130px; justify-content: flex-end; }
.hw-tr-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); transition: all 0.2s ease;
}
.hw-tr-dot.is-now { background: #ffe082; transform: scale(1.35); }
.hw-tr-dot.is-ok { background: #5be88a; }
.hw-tr-dot.is-bad { background: #ff5a66; }
.hw-tr-instr {
  max-width: 640px; margin: 10px auto 14px; text-align: center;
  color: rgba(243, 230, 194, 0.7); font-size: 0.88rem;
}
.hw-tr-q { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hw-tr-audio {
  border: none; cursor: pointer; touch-action: manipulation;
  width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe082, #f0a93a); color: #1a1a2a;
  font-size: 2rem; font-weight: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  box-shadow: 0 6px 0 rgba(160, 100, 20, 0.5), 0 12px 30px rgba(255, 200, 80, 0.3);
}
.hw-tr-audio small { font-size: 0.62rem; letter-spacing: 0.08em; }
.hw-tr-audio:active { transform: translateY(3px); }
.hw-tr-audio.is-playing { animation: hw-sk-pulse 1s ease-in-out infinite; }
.hw-tr-img img {
  max-width: min(340px, 80vw); max-height: 240px; border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.18); background: #fff;
}
.hw-tr-prompt {
  text-align: center; color: #fff; font-weight: 900; font-size: 1.5rem;
  display: flex; flex-direction: column; gap: 2px;
}
.hw-tr-prompt span { color: rgba(255, 224, 130, 0.9); font-weight: 400; font-size: 1.25rem; }
.hw-tr-tf { display: flex; gap: 18px; }
.hw-tr-tfbtn {
  width: 110px; height: 92px; border-radius: 20px; border: 3px solid; cursor: pointer;
  font-size: 2.4rem; font-weight: 900; background: rgba(255, 255, 255, 0.05);
  touch-action: manipulation; transition: transform 0.1s ease;
}
.hw-tr-tfbtn:active { transform: scale(0.94); }
.hw-tr-tfbtn.is-yes { color: #5be88a; border-color: rgba(91, 232, 138, 0.6); }
.hw-tr-tfbtn.is-no { color: #ff5a66; border-color: rgba(255, 90, 102, 0.6); }
.hw-tr-imgopts { display: grid; grid-template-columns: repeat(3, minmax(90px, 200px)); gap: 12px; }
.hw-tr-imgopts.is-many { grid-template-columns: repeat(auto-fit, minmax(110px, 160px)); justify-content: center; }
.hw-tr-imgopt {
  position: relative; border: 3px solid rgba(255, 255, 255, 0.18); border-radius: 16px;
  background: #fff; padding: 0; overflow: hidden; cursor: pointer; touch-action: manipulation;
  aspect-ratio: 1 / 1;
}
.hw-tr-imgopt img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hw-tr-optkey {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: #101426; color: #ffe082; font-weight: 900; font-size: 0.85rem;
  border-radius: 8px; padding: 2px 8px;
}
.hw-tr-txtopts { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 480px; }
.hw-tr-txtopt {
  position: relative; display: flex; align-items: center; gap: 12px;
  border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); color: #fff;
  padding: 13px 14px 13px 46px; cursor: pointer; touch-action: manipulation; text-align: left;
}
.hw-tr-txtopt b { font-size: 1.1rem; color: #ffe082; }
.hw-tr-txtopt i { font-style: normal; font-size: 1.05rem; color: rgba(255, 255, 255, 0.8); }
.hw-tr-imgopt.is-right, .hw-tr-txtopt.is-right, .hw-tr-tfbtn.is-right {
  border-color: #5be88a !important; box-shadow: 0 0 22px rgba(91, 232, 138, 0.55);
}
.hw-tr-imgopt.is-wrong, .hw-tr-txtopt.is-wrong, .hw-tr-tfbtn.is-wrong {
  border-color: #ff5a66 !important; box-shadow: 0 0 18px rgba(255, 90, 102, 0.5);
  animation: hw-sack-shake 0.4s ease;
}
.hw-tr-imgopt.is-answer, .hw-tr-txtopt.is-answer, .hw-tr-tfbtn.is-answer {
  border-color: #5be88a !important;
  box-shadow: 0 0 26px rgba(91, 232, 138, 0.75);
  animation: hw-sk-pulse 0.7s ease-in-out 2;
}

/* ══════════════════════════════════════════════════════════════════
   🎯 2026-09-20 v2 — trainer home limpio, experiencias por tier,
   y celebración ÉPICA (confeti + emoji 3D).
   ══════════════════════════════════════════════════════════════════ */
.hw-tr-classiclink {
  margin-top: 12px; border: none; cursor: pointer; touch-action: manipulation;
  background: none; color: rgba(243, 230, 194, 0.55);
  font-size: 0.85rem; font-weight: 700; text-decoration: underline dotted;
  padding: 6px 2px;
}
.hw-tr-classiclink:hover { color: #ffe082; }
.hw-tr-backstrip {
  width: 100%; border: 2px solid rgba(255, 224, 130, 0.5); border-radius: 14px;
  background: rgba(255, 224, 130, 0.08); color: #ffe082;
  font-weight: 900; font-size: 0.95rem; padding: 12px; cursor: pointer;
  touch-action: manipulation; margin-bottom: 4px;
}
.hw-tr-expgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.hw-tr-expcard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); padding: 14px 8px 10px;
  cursor: pointer; touch-action: manipulation; color: #fff; text-align: center;
}
.hw-tr-expcard:hover { border-color: #ffe082; transform: translateY(-2px); }
.hw-tr-expemoji { font-size: 1.9rem; }
.hw-tr-explabel { font-weight: 800; font-size: 0.85rem; }
.hw-tr-expcount { color: rgba(243, 230, 194, 0.55); font-size: 0.7rem; }
.hw-tr-expcard .hw-tr-new, .hw-tr-expcard .hw-tr-pass, .hw-tr-expcard .hw-tr-retry {
  position: absolute; top: 6px; right: 8px; font-size: 0.75rem;
}

/* ── 🎉 CELEBRACIÓN ÉPICA ── */
.hw-epic {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 18, 0.85); backdrop-filter: blur(3px);
}
.hw-epic-canvas { position: absolute; inset: 0; pointer-events: none; }
.hw-epic-card {
  position: relative; text-align: center; padding: 34px 44px;
  background: linear-gradient(160deg, #1a2035, #0d1224);
  border: 3px solid #ffe082; border-radius: 28px;
  box-shadow: 0 0 80px rgba(255, 224, 130, 0.35);
  animation: hw-epic-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
  max-width: min(420px, 90vw);
}
@keyframes hw-epic-in { from { transform: scale(0.4) rotate(-6deg); opacity: 0; } }
.hw-epic-emoji3d {
  font-size: 4.6rem; display: inline-block;
  animation: hw-epic-spin 2.4s ease-in-out infinite;
  transform-style: preserve-3d;
  filter: drop-shadow(0 10px 24px rgba(255, 210, 74, 0.5));
}
@keyframes hw-epic-spin {
  0%   { transform: rotateY(0deg) scale(1); }
  40%  { transform: rotateY(360deg) scale(1.15); }
  60%  { transform: rotateY(360deg) scale(1.15); }
  100% { transform: rotateY(720deg) scale(1); }
}
.hw-epic-title {
  font-size: 2rem; font-weight: 900; letter-spacing: 0.06em;
  background: linear-gradient(90deg, #ffe082, #ff9a45, #ff5b9f, #5be8d1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hw-epic-shine 2s linear infinite; background-size: 300% 100%;
  margin-top: 4px;
}
@keyframes hw-epic-shine { to { background-position: 300% 0; } }
.hw-epic-score { font-size: 3.2rem; font-weight: 900; color: #fff; line-height: 1; margin: 6px 0 2px; }
.hw-epic-score small { font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); }
.hw-epic-note { color: rgba(243, 230, 194, 0.8); font-size: 0.95rem; margin-bottom: 14px; }
.hw-epic-floaters { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.hw-epic-floaters span {
  position: absolute; bottom: -10px; left: calc(8% + var(--i) * 15%);
  font-size: 1.7rem; opacity: 0;
  animation: hw-epic-float 2.6s ease-in calc(var(--i) * 0.35s) infinite;
}
@keyframes hw-epic-float {
  0%   { transform: translateY(0) rotate(0deg) scale(0.7); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-340px) rotate(340deg) scale(1.4); opacity: 0; }
}
.hw-epic-ok {
  border: none; cursor: pointer; touch-action: manipulation;
  background: linear-gradient(180deg, #7dffa8, #2ecc71); color: #0b1a10;
  font-weight: 900; font-size: 1.05rem; border-radius: 999px; padding: 13px 34px;
  box-shadow: 0 5px 0 rgba(20, 90, 45, 0.6);
}
.hw-epic-ok:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(20, 90, 45, 0.6); }
/* mini-burst al acertar */
.hw-miniburst {
  position: fixed; z-index: 9500; pointer-events: none;
  font-size: 1.25rem;
  animation: hw-miniburst 0.85s ease-out forwards;
}
@keyframes hw-miniburst {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.4) rotate(200deg); opacity: 0; }
}

/* 📺 «Episodio de hoy» badge on the daily story (2026-10-11: every class is an episode) */
.hw-cs-episode { position: absolute; z-index: 4; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 999px; background: #fff7e3; color: #1d2440; border: 3px solid #1d2440; box-shadow: 0 4px 0 #1d2440;
  font: 800 1rem/1.2 'Baloo 2', 'Nunito', sans-serif; white-space: nowrap; }
.hw-cs-castchar { max-height: 64vmin; }