/* Lingo Pop, aligned with the public LingoPie look: white page, black type, orange pills. */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #121212;
  --muted: #4b5160;
  --line: rgba(18, 18, 18, 0.1);
  --orange: #ff8243;
  --orange-strong: #c2410c; /* burnt orange: white text on it is 5.18:1 */
  --cyan: #1f6feb;
  --lime: #1a7a43;
  --soft: #f6f7f9;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #ffe4cc; }
body {
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
}
.app { max-width: 1100px; margin: 0 auto; padding: 1.1rem 1.2rem 2.6rem; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }
.top-actions { display: flex; align-items: center; gap: 0.5rem; }
.trial-banner { background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: 0.9rem 1rem; margin-bottom: 1rem; }
.trial-banner p { margin: 0 0 0.65rem; line-height: 1.45; }
.trial-banner[hidden] { display: none; }
.home-sub { margin: 0 0 1rem; }
.text-link { background: none; border: none; padding: 0; color: var(--text); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.brand {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--orange);
}
.brand span { color: var(--text); }
.tag { margin: 0.05rem 0 0; color: var(--muted); font-size: 0.85rem; }
.points {
  margin: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}
.points.flash { box-shadow: 0 0 0 3px rgba(255, 130, 67, 0.35); }
h1 { font-size: 2rem; margin: 0.15rem 0 0.4rem; letter-spacing: -0.045em; font-weight: 800; }
.lead { color: var(--muted); margin: 0 0 1.1rem; line-height: 1.45; font-size: 1.02rem; }
.stack { display: flex; flex-direction: column; gap: 0.7rem; }
.level-btn, .btn, .chip, .script-line { font: inherit; color: var(--text); cursor: pointer; }
.level-btn {
  text-align: left;
  padding: 1.05rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.04);
}
.level-btn strong { display: block; font-size: 1.35rem; letter-spacing: -0.03em; }
.level-btn span { display: block; color: var(--muted); margin-top: 0.2rem; font-size: 0.95rem; }
.level-btn.basico strong { color: var(--lime); }
.level-btn.intermedio strong { color: #155eef; }
.level-btn.avanzado strong { color: var(--orange); }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 0.7rem 0.95rem;
  min-height: 46px;
  border-radius: 999px;
}
.btn.primary { background: var(--orange-strong); border-color: transparent; color: #fff; font-weight: 800; }
.btn.lime { border-color: rgba(31, 138, 76, 0.45); color: var(--lime); }
.btn.on { outline: 2px solid var(--lime); }
.btn.wide { width: 100%; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
a.btn.wide { display: flex; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.card, .panel, .plan, .vocab-card, details.more {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.sentence { font-size: 1.55rem; line-height: 1.25; margin: 0; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.translation { color: #f3f4f6; font-size: 1.08rem; margin: 0.3rem 0 0; font-weight: 600; }
.note, .status, .fine { color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.bar { height: 8px; border-radius: 99px; background: #eceff3; overflow: hidden; margin: 0.4rem 0 0.8rem; }
.bar > span { display: block; height: 100%; background: var(--orange); width: 0; }
.chip { border: 1px solid var(--line); background: #fff; padding: 0.4rem 0.7rem; border-radius: 999px; }
.chip.on { border-color: var(--orange-strong); color: var(--orange-strong); }
.plan { padding: 0.95rem; margin-bottom: 0.7rem; }
.plan.featured { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255, 130, 67, 0.25); }
.plan b { font-size: 1.15rem; }
.credit { margin-top: 1.8rem; color: var(--muted); font-size: 0.75rem; line-height: 1.4; }
.link { color: #155eef; }
.back { background: none; border: none; color: var(--muted); font: inherit; font-weight: 700; padding: 0 0 0.5rem; cursor: pointer; }
.warn { color: #b42318; }
.energy { font-weight: 700; color: var(--text); margin: 0.35rem 0; }
.episode-kicker { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.88rem; }


/* Theme picker palette, chosen for study: calm sage for focus, warm paper to cut glare,
   blue for concentration, a small yellow for reward, soft orange cards to invite a tap. */
/* Soft orange frame around the whole screen (header with the Lingo Pop name included),
   warm paper inside. Applies to every screen, billing and locked included (the class ships in
   index.html so the first paint is already themed). */
body.themed { background: #ffe4cc; }
body.themed .brand { color: #d9531a; }
body.themed .tag { color: #5a4636; }
body.themed #view {
  background: #f8f6f0;
  border: 1px solid #f4c9a2;
  border-radius: 30px;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(120, 60, 10, 0.08);
}
body.themed #open-billing { background: #eef5fc; border-color: #b9d1ec; color: #1d4f8c; font-weight: 700; }
body.themed .points { background: #fff5d1; border-color: #ecd486; color: #5c4600; }
body.themed .credit { color: #6a5546; }
body.themed #view:empty { min-height: 40vh; }

/* Billing (Suscribirme) and locked screens: same peach frame and warm card as the rest. */
body.on-billing #view .stack { margin-bottom: 0.4rem; }
#plan-month, #plan-year {
  min-height: 58px;
  border-radius: 18px;
  border: 2px solid #e8a066;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(80, 36, 0, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* Anual is the recommended plan: warm filled card with a burnt orange border. */
#plan-year {
  background: linear-gradient(180deg, #fff1e4 0%, #ffd5ad 100%);
  border-color: var(--orange-strong);
  color: #2a1d12;
  box-shadow: 0 10px 22px rgba(194, 65, 12, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
#plan-month:hover, #plan-year:hover { transform: translateY(-1px); }
#plan-month:focus-visible, #plan-year:focus-visible { outline: 3px solid #1d4f8c; outline-offset: 2px; }
/* Selected plan: thick green ring plus green border, visible on both cards. */
#plan-month.on, #plan-year.on {
  border-color: var(--lime);
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}
body.on-billing #view .fine, body.on-billing #view .lead { color: #4a3728; }
body.on-billing #add-card,
body.on-locked #add-card { background: var(--orange-strong); border-color: transparent; color: #fff; font-weight: 800; }
body.on-billing #billing-back { margin-top: 0.6rem; }
.home {
  background: #dcebe1;
  color: #1f3a2e;
  border: 1px solid #c4dccc;
  border-radius: 28px;
  padding: 1.15rem 1rem 1.25rem;
}
.home h1 { color: #1f3a2e; }
.home .lead, .home .fine { color: #3e5a4c; }
.home .text-link { color: #1d4f8c; }
.home .warn { color: #b42318; }
.install-row { margin: 0 0 1rem; }
.install-hint { margin: 0 0 1rem; color: #1d4f8c; font-size: 0.9rem; line-height: 1.4; }
.home .level-btn, .home .btn { color: var(--text); }
.home .install-btn { background: #eef5fc; border-color: #b9d1ec; color: #1d4f8c; font-weight: 700; }
.home .level-btn {
  background: linear-gradient(180deg, #fff1e4 0%, #ffc48a 100%);
  border-color: #e8a066;
  box-shadow: 0 10px 22px rgba(80, 36, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.home .level-btn strong { color: #2a1d12; }
.home .level-btn span { color: #4a3728; }
.home .level-btn:hover, .home .level-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(80, 36, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  outline: 2px solid #1d4f8c;
  outline-offset: 2px;
}
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.1rem;
  align-items: start;
  background: #e3efe7;
  color: #1f3a2e;
  border: 1px solid #c4dccc;
  border-radius: 28px;
  padding: 1rem 1rem 1.15rem;
}
.stage .back,
.stage .episode-kicker,
.stage .fine { color: #3e5a4c; }
.stage .script,
.stage .vocab-card,
.stage details.more,
.stage .gloss-pop,
.stage .btn,
.stage .chip { color: var(--text); }
.stage .btn.primary { color: #fff; }
.player { display: flex; flex-direction: column; align-items: stretch; }
.clip-window {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 14px 34px rgba(31, 58, 46, 0.14);
  outline: 3px solid #b9d1ec;
}
.clip-video { width: 100%; height: 100%; object-fit: contain; background: #111; display: block; }
.subs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1rem 0.95rem;
  text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82) 48%);
  pointer-events: none;
}
.subs .tap-word, .subs .sentence, .subs .translation { pointer-events: auto; }
.subs-solo { position: static; background: var(--soft); border-radius: 18px; padding: 1rem; }
.subs-solo .sentence, .subs-solo .tap-word { color: var(--text); }
.subs-solo .translation { color: var(--muted); }
.scrub {
  position: relative;
  width: 100%;
  height: 8px;
  margin-top: 0.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #eceff3;
  cursor: pointer;
}
.scrub span { display: block; height: 100%; width: 0%; border-radius: inherit; background: var(--orange); pointer-events: none; }
.transport { display: flex; flex-direction: row; gap: 0.45rem; margin-top: 0.7rem; flex-wrap: wrap; }
.transport .btn { min-width: 48px; display: inline-flex; align-items: center; justify-content: center; }
.gloss-pop {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
}
.vocab-card { margin-top: 0.75rem; padding: 0.8rem 0.95rem; }
.vocab-card h2 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.vocab-card ul { margin: 0; padding-left: 1.1rem; }
.vocab-card li { margin: 0.2rem 0; color: var(--muted); }
.vocab-card strong { color: var(--text); }
.script {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  max-height: 78vh;
  overflow: auto;
  padding: 0.35rem;
}
.script h2 {
  margin: 0.5rem 0.7rem 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.script-line {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
}
.script-line.on { background: rgba(255, 130, 67, 0.12); }
.script-en { display: block; font-weight: 800; font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.02em; }
.script-es { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.12rem; line-height: 1.3; }
details.more { margin-top: 0.95rem; padding: 0.8rem 0.95rem; }
details.more summary { cursor: pointer; font-weight: 800; }
.exercise { margin-top: 0.7rem; }
.exercise h2 { margin: 0 0 0.35rem; font-size: 1rem; }
.word-row { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 2.4rem; margin: 0.4rem 0; }
.word-row .chip { cursor: pointer; }
.tap-word {
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.7);
  color: #fff;
  font: inherit;
  font-weight: 800;
  padding: 0 0.06rem;
  cursor: pointer;
}
.tap-word:hover, .tap-word:focus { background: var(--orange-strong); border-radius: 5px; border-bottom-color: transparent; }
@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; }
  .script { max-height: none; }
  .sentence { font-size: 1.2rem; }
  h1 { font-size: 1.6rem; }
}