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

:root {
  --ciga-bg: #0b1437;
  --ciga-card: #1a2d45;
  --ciga-border: #2a4060;
  --ciga-text: #ffffff;
  --ciga-gold: #ffd60a;
  --ciga-yellow: #f9c74f;
  --ciga-blue: #4cc9f0;
  --ciga-purple: #7209b7;
  --ciga-pink: #f72585;
  --ciga-red: #ff6b6b;
  --ciga-muted: #8a9cc0;
  --ciga-radius-md: 12px;
  --ciga-radius-lg: 24px;
  --ciga-radius-xl: 28px;
  --ciga-radius-pill: 999px;
  --ciga-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.5);
  --ciga-shadow-blue: 0 0 30px rgba(76, 201, 240, 0.4);
  --ciga-nav-z: 1000;
  /* Height of the fixed copyright footer; reserved as bottom padding so page
     content never slides under it (with a visible gap above). Includes the iOS
     home-indicator inset. */
  --ciga-footer-h: calc(3.25rem + env(safe-area-inset-bottom, 0px));
}

html,
body {
  background-color: var(--ciga-bg);
  color: var(--ciga-text);
  font-family: 'Nunito', sans-serif;
}

.ciga-page {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom: var(--ciga-footer-h);
}

.ciga-page--locked {
  height: 100%;
  overflow: hidden;
}

/* Site-wide copyright footer — fixed at the viewport bottom on every page.
   Position:fixed avoids touching page layout (no body flex, no margin tricks)
   so original page CSS keeps working. A subtle gradient backdrop keeps the
   text readable over any content. Opt out by adding class="ciga-page--no-footer". */
body::after {
  content: "© 2026 CIGA MEDIA LLC. ALL RIGHTS RESERVED.";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.32);
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.9rem 1rem 0.7rem;
  background: linear-gradient(180deg, transparent, rgba(15, 27, 45, 0.78) 55%);
  pointer-events: none;
  z-index: 50;
}
body.ciga-page--no-footer::after { content: none; }

/* Reserve space so the fixed footer never overlaps the last button/card on
   normal-flow pages (loaded after each page's inline <style>, so this wins). */
body:not(.ciga-page--no-footer) { padding-bottom: var(--ciga-footer-h); }

/* Clear the fixed top nav (.ciga-nav, bottom edge ~66px) and bottom footer
   across the bespoke math/Português apps. Their content lives in inner
   containers (.wrap = 116 files, .shell = 19, .app), not on <body>, so body
   padding alone can't help. The `body `-prefix raises specificity to (0,1,1)
   so these win over each app's inline single-class rules REGARDLESS of whether
   ciga-design.css is linked before or after the inline <style>. Longhand
   top/bottom preserves each app's own left/right padding. With box-sizing:
   border-box (set in every app), padding-bottom also pushes flex/fixed-height
   shell content up off the footer. */
/* Top: reserve space for the fixed nav on top-level containers + bespoke headers. */
body .wrap,
body .shell,
body .app,
body .app-header {
  padding-top: clamp(72px, 9vh, 88px);
}
/* Bottom: reserve footer space on the content / inner-scroll containers. */
body .wrap,
body .shell,
body .app,
body .content-area {
  padding-bottom: var(--ciga-footer-h);
}

/* On phones, shrink the footer band so it reclaims vertical room. */
@media (max-width: 480px) {
  :root { --ciga-footer-h: calc(2.75rem + env(safe-area-inset-bottom, 0px)); }
  body::after {
    font-size: 0.6rem;
    padding: 0.55rem 0.75rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  }
}

/* The area-model / long-multiplication / column-math / phonics-funnel template uses a
   horizontal <header> (left-aligned brand title sharing one row with the stars bar, streak
   and NEW CHALLENGE button). The fixed top-left nav (.ciga-nav) floats over that corner and
   covers the start of the title. Fix at ALL widths: wrap the header, reserve top space so it
   clears the nav, and pull the title onto its own full-width centered row (controls drop to a
   second row that keeps each app's space-between). body-prefixed (0,1,1) beats each app's
   inline single-class header rules regardless of link order. */
body #app > header,
body .shell > header {
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 10px;
  padding-top: clamp(60px, 8vh, 72px); /* nav box bottom ≈ 54–66px */
}
/* Pull the title onto its own centered full-width row. Two markup shapes exist:
   the title is a direct child of <header> (.brand-title / .brand on the area-model,
   column-math, division templates), OR it's wrapped in a left group (.hdr-left on
   aventura / Sound Quest, .header-left on the phonics funnel). Center whichever is the
   header's direct child; for wrappers, justify-content + text-align cover both flex and
   block wrappers. Scoped to direct children so generic .brand/.title elsewhere is safe. */
body #app > header > .brand-title,
body #app > header > .brand,
body #app > header > .hdr-title,
body #app > header > .app-title,
body #app > header > .title,
body #app > header > .hdr-left,
body #app > header > .header-left,
body .shell > header > .brand-title,
body .shell > header > .brand,
body .shell > header > .hdr-title,
body .shell > header > .app-title,
body .shell > header > .title,
body .shell > header > .hdr-left,
body .shell > header > .header-left {
  flex-basis: 100%;
  width: 100%;
  text-align: center;
  justify-content: center; /* centers the title when the wrapper is a flex row */
  order: -1; /* title first, even if an app lists controls before it */
}

/* Phones: drop the top reserve now that the nav sits higher/smaller (see the
   nav shrink in the @media block lower in this file, which must come AFTER the
   base .ciga-nav rules to win). Nav box bottom is ~54px, so a 60px reserve
   clears it with a small gap and reclaims ~12px vs the 72px desktop reserve. */
@media (max-width: 600px) {
  body .wrap,
  body .shell,
  body .app,
  body .app-header {
    padding-top: clamp(60px, 8vh, 70px);
  }
  /* The horizontal header (wrap + centered title) is handled by the base rule above.
     On phones the nav sits higher/smaller, so tighten the header's top reserve.
     #app (an id) gets no container reserve, so its header must clear the nav itself;
     .shell already has the reserve, so don't double it. */
  body #app > header {
    padding-top: 56px;
  }
}

/* Uniform app title size. Every bespoke app's main page heading uses class .title
   (148 apps; 104 already declare 2rem). Standardize the rest to the same 2rem so all
   titles match — the size validated on number-ops-4 ("Laboratório de Números"). The
   body-prefix (0,1,1) overrides each app's inline single-class `.title` rule (including
   oversized clamp() values like place-value-chart's clamp(2.3rem,5vw,4.6rem)) in any link
   order. The <480px cap below comes later in source, so it still wins on phones. Scope is
   the big centered page title only — the compact header brand titles (.brand-title /
   .hdr-title / .app-title) keep their own smaller header-row sizing. */
body .title {
  font-size: 2rem;
  line-height: 1.15;
}

/* Phones: cap oversized title fonts so long titles stop wrapping to 2-3 lines.
   body-prefixed (0,1,1) beats each app's inline single-class rule in any order.
   Leaves big display numbers / question text alone (already responsive). */
@media (max-width: 480px) {
  body .title,
  body .brand-title,
  body .brand,
  body .app-title,
  body .hdr-title {
    font-size: clamp(1.05rem, 4.6vw, 1.45rem);
    line-height: 1.15;
  }
}

.ciga-topic-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ciga-screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + var(--ciga-footer-h));
}

.ciga-center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.ciga-topic-container {
  position: relative;
  z-index: 10;
  width: 95%;
  max-width: 1200px;
  padding: 80px 20px 60px;
  text-align: center;
}

.ciga-app-list {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 96px 0 48px;
}

.ciga-logo {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--ciga-blue), var(--ciga-purple), var(--ciga-pink));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ciga-logo span {
  -webkit-text-fill-color: var(--ciga-gold);
}

.ciga-animated-text {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.35;
  background: linear-gradient(135deg, #fff 60%, var(--ciga-blue));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ciga-fade-in-up 0.6s ease;
}

.ciga-tagline {
  margin-top: 4px;
  color: var(--ciga-text);
  opacity: 0.78;
  font-size: 0.82rem;
  font-weight: 600;
}

.ciga-topic-title {
  margin-bottom: 70px;
  color: var(--ciga-gold);
  font-size: 2.8rem;
  letter-spacing: 1px;
  text-shadow: 0 0 15px rgba(255, 214, 10, 0.4);
}

.ciga-app-list__title {
  margin: 0 0 8px;
  color: var(--ciga-gold);
  text-align: center;
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 800;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.ciga-app-list__subtitle {
  max-width: 620px;
  margin: 0 auto 30px;
  color: var(--ciga-muted);
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5;
}

.ciga-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  background: rgba(26, 45, 69, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ciga-border);
  border-radius: var(--ciga-radius-md);
  padding: 5px;
  z-index: var(--ciga-nav-z);
}

.ciga-nav--strong {
  background: rgba(26, 45, 69, 0.6);
}

.ciga-nav__btn {
  background: transparent;
  border: none;
  color: var(--ciga-muted);
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color 0.3s ease, filter 0.3s ease;
}

.ciga-nav__btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.ciga-nav__btn:hover {
  color: var(--ciga-blue);
  filter: drop-shadow(0 0 8px var(--ciga-blue));
}

.ciga-nav__divider {
  width: 1px;
  height: 20px;
  background: var(--ciga-border);
  margin: 0 4px;
}

/* Learner profile chip + popover (shared; injected by ciga-profile-badge.js).
   Ported from the landing-page inline .pf__* styles, namespaced + tokenized. */
.ciga-pf { position: relative; font-family: 'Nunito', sans-serif; }
/* Floating fallback for pages without a .ciga-nav. */
.ciga-pf--float { position: fixed; top: 20px; right: 20px; z-index: var(--ciga-nav-z); }
.ciga-pf__chip {
  background: rgba(15, 27, 45, .4);
  color: rgba(232, 240, 254, .75);
  border: 1px solid rgba(232, 240, 254, .18);
  border-radius: var(--ciga-radius-pill);
  padding: 8px 16px; font: inherit; font-weight: 800; font-size: .9rem;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.ciga-pf__chip:hover, .ciga-pf__chip[aria-expanded="true"] {
  color: var(--ciga-yellow); border-color: rgba(249, 199, 79, .5); background: rgba(249, 199, 79, .08);
}
/* Inside the nav, render flat like the other .ciga-nav__btn icons: no pill,
   no border, muted text that brightens to blue on hover. */
.ciga-pf--nav .ciga-pf__chip {
  background: transparent; border: none; border-radius: 0;
  padding: 8px 12px; font-size: .9rem; color: var(--ciga-muted);
  transition: color .3s ease, filter .3s ease;
}
.ciga-pf--nav .ciga-pf__chip:hover, .ciga-pf--nav .ciga-pf__chip[aria-expanded="true"] {
  background: transparent; border-color: transparent;
  color: var(--ciga-blue); filter: drop-shadow(0 0 8px var(--ciga-blue));
}
.ciga-pf__panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: auto;
  width: 264px; max-width: 88vw;
  background: var(--ciga-card); border: 1px solid var(--ciga-border); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45); padding: 12px; text-align: left;
  z-index: 1001;
}
/* In the nav (anchored to the screen's left) open rightward so the panel stays
   on screen; floating (anchored top-right) opens leftward for the same reason.
   The nav panel anchors to the nav's left edge (not the right-end chip) so it
   can't run off the right on narrow phones — .ciga-pf--nav goes position:static
   so the absolute panel resolves against the fixed .ciga-nav. */
.ciga-pf--nav { position: static; }
.ciga-pf--nav .ciga-pf__panel { left: 0; right: auto; }
.ciga-pf--float .ciga-pf__panel { left: auto; right: 0; }

/* Inline variant: the chip is dropped into a bespoke app's own header row
   (data-ciga-profile-mount), so it blends in — transparent, inherits the
   header's text color, opens its panel rightward. */
.ciga-pf--inline { position: relative; display: inline-flex; align-items: center; }
.ciga-pf--inline .ciga-pf__chip {
  background: transparent; border: none; border-radius: 0;
  padding: 0 4px; font-size: .85rem; color: inherit; opacity: .8;
  transition: opacity .15s, color .15s;
}
.ciga-pf--inline .ciga-pf__chip:hover, .ciga-pf--inline .ciga-pf__chip[aria-expanded="true"] {
  background: transparent; border-color: transparent; color: inherit; opacity: 1;
}
.ciga-pf--inline .ciga-pf__panel { left: 0; right: auto; }
.ciga-pf__row { display: flex; align-items: center; gap: 6px; }
.ciga-pf__mrow { flex-wrap: wrap; row-gap: 4px; padding: 6px 0; }
.ciga-pf__mrow-actions { display: flex; gap: 4px; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
.ciga-pf__name-btn {
  flex: 1; text-align: left; background: transparent; border: none; color: #e8f0fe;
  font: inherit; font-weight: 800; font-size: .95rem; padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.ciga-pf__name-btn:hover { background: rgba(76, 201, 240, .12); }
.ciga-pf__name-btn.is-active { color: var(--ciga-yellow); }
/* Mirror the crescent so it opens to the right, matching the brand moon-C. */
.ciga-pf__moon { display: inline-block; transform: scaleX(-1); }
.ciga-pf__divider { height: 1px; background: var(--ciga-border); margin: 8px 0; }
.ciga-pf__action {
  width: 100%; text-align: left; background: transparent; border: none; color: var(--ciga-blue);
  font: inherit; font-weight: 800; font-size: .9rem; padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.ciga-pf__action:hover { background: rgba(76, 201, 240, .12); }
.ciga-pf__input {
  width: 100%; box-sizing: border-box; padding: 11px 12px; margin-bottom: 8px;
  border-radius: 12px; border: 2px solid var(--ciga-border); background: rgba(15, 27, 45, .85);
  color: #e8f0fe; font: inherit; font-weight: 700; font-size: 1rem; outline: none;
}
.ciga-pf__input:focus { border-color: var(--ciga-yellow); }
.ciga-pf__btns { display: flex; gap: 8px; }
.ciga-pf__btn { font: inherit; font-weight: 800; font-size: .9rem; padding: 9px 16px; border-radius: var(--ciga-radius-pill); cursor: pointer; border: none; }
.ciga-pf__btn--primary { background: linear-gradient(135deg, #4361ee, #7209b7); color: #fff; }
.ciga-pf__btn--ghost { background: transparent; color: rgba(232, 240, 254, .7); border: 1px solid var(--ciga-border); }
.ciga-pf__note { color: var(--ciga-muted); font-size: .75rem; font-weight: 700; margin-top: 8px; text-align: center; }

/* Nickname picker. A fixed grid of playful, non-identifying labels replaces the
   old free-text name field, so the app never prompts a child to type their real
   name. Names already taken on this device are disabled to avoid duplicates. */
.ciga-pf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 2px; }
.ciga-pf__nick {
  font: inherit; font-weight: 800; font-size: .7rem; line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 3px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .04); color: var(--ciga-text);
  border: 1px solid var(--ciga-border);
  transition: border-color .15s, background .15s, transform .15s;
}
.ciga-pf__nick:hover:not(:disabled) {
  border-color: var(--ciga-yellow); background: rgba(249, 199, 79, .1); transform: translateY(-1px);
}
.ciga-pf__nick-emoji { font-size: 1.3rem; line-height: 1; }
.ciga-pf__nick:disabled { opacity: .3; cursor: not-allowed; }
.ciga-pf__title { color: var(--ciga-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin: 6px 4px; }
.ciga-pf__manage-name { flex: 1 1 100%; color: #e8f0fe; font-weight: 800; font-size: .92rem; padding-left: 4px; }
.ciga-pf__manage-name--archived { color: var(--ciga-muted); }
.ciga-pf__icon-btn { background: transparent; border: none; color: var(--ciga-muted); font: inherit; font-weight: 800; font-size: .8rem; padding: 6px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ciga-pf__icon-btn:hover { background: rgba(76, 201, 240, .12); color: var(--ciga-blue); }
.ciga-pf__icon-btn--danger:hover { background: rgba(255, 107, 107, .12); color: var(--ciga-red); }
.ciga-pf__confirm { flex: 1 1 100%; color: var(--ciga-red); font-size: .82rem; font-weight: 700; line-height: 1.35; padding-left: 4px; }

.ciga-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.ciga-btn--primary {
  overflow: hidden;
  background: linear-gradient(135deg, #4361ee, var(--ciga-purple));
  color: #fff;
  font-size: 1.3rem;
  border-radius: var(--ciga-radius-pill);
  padding: 16px 48px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 32px rgba(67, 97, 238, 0.5);
}

.ciga-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ciga-pink), var(--ciga-blue));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ciga-btn--primary:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 40px rgba(67, 97, 238, 0.7);
}

.ciga-btn--primary:hover::after {
  opacity: 1;
}

.ciga-btn--primary > span {
  position: relative;
  z-index: 1;
}

.ciga-btn--action {
  background: rgba(26, 45, 69, 0.4);
  border: 1px solid var(--ciga-border);
  color: var(--ciga-muted);
  padding: 10px 18px;
  border-radius: var(--ciga-radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
}

.ciga-btn--action svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.ciga-btn--action:hover {
  border-color: var(--ciga-blue);
  color: var(--ciga-blue);
  background: rgba(76, 201, 240, 0.1);
  transform: translateX(-5px);
  box-shadow: 0 0 15px rgba(76, 201, 240, 0.3);
}

.ciga-action-menu {
  position: fixed;
  right: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 100;
}

/* On small phones, lift the action menu clear of the footer strip */
@media (max-width: 768px) {
  .ciga-action-menu {
    bottom: calc(18px + var(--ciga-footer-h));
  }
}

.ciga-card-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.ciga-card-grid--subjects {
  gap: 60px;
}

.ciga-card-grid--topics {
  gap: 30px;
  margin-bottom: 90px;
}

.ciga-card-grid--apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.ciga-card-shell {
  position: relative;
}

.ciga-card-shell--subject {
  width: 200px;
  height: 250px;
}

.ciga-card-shell--topic {
  width: clamp(150px, 16vw, 180px);
  height: clamp(185px, 20vw, 220px);
}

.ciga-card {
  position: relative;
  z-index: 2;
  background: var(--ciga-card);
  border: 4px solid var(--ciga-border);
  width: 100%;
  height: 100%;
  border-radius: var(--ciga-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
  cursor: pointer;
  box-shadow: var(--ciga-shadow-card);
}

.ciga-card:hover {
  border-color: var(--ciga-blue);
  box-shadow: var(--ciga-shadow-blue);
}

.ciga-card--topic {
  border-radius: var(--ciga-radius-xl);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ciga-card--topic:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 35px rgba(76, 201, 240, 0.4);
}

.ciga-app-card {
  display: block;
  min-height: 142px;
  padding: 20px;
  border: 3px solid var(--ciga-border);
  border-radius: 22px;
  background: rgba(26, 45, 69, 0.92);
  color: var(--ciga-gold);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.ciga-app-card--link {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ciga-app-card--link:hover {
  transform: translateY(-4px);
  border-color: var(--ciga-blue);
  box-shadow: 0 0 24px rgba(76, 201, 240, 0.35);
}

.ciga-app-card__name {
  display: block;
  margin-bottom: 10px;
  font-size: 1.25rem;
  font-weight: 800;
}

.ciga-app-card__path,
.ciga-app-card p {
  margin: 0;
  color: var(--ciga-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.ciga-card__icon {
  background: var(--ciga-purple);
  width: 80px;
  height: 80px;
  border-radius: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.ciga-card__icon svg {
  width: 45px;
  height: 45px;
  fill: #fff;
}

.ciga-card__icon--topic {
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.ciga-card__icon--topic svg {
  width: 40px;
  height: 40px;
}

.ciga-card__label {
  color: var(--ciga-gold);
  font-weight: 800;
  font-size: 1.5rem;
}

.ciga-card__label--topic {
  padding: 0 10px;
  font-size: 1.05rem;
  line-height: 1.2;
}

.ciga-mascots-row {
  display: flex;
  gap: 0;
  align-items: flex-end;
  justify-content: center;
  margin: 8px 0;
}

.ciga-mascot {
  height: auto;
}

.ciga-mascot--float {
  width: clamp(100px, 18vw, 160px);
  filter: drop-shadow(0 8px 24px rgba(76, 201, 240, 0.35));
  animation: ciga-float 3s ease-in-out infinite;
}

.ciga-mascot--delay {
  animation-delay: 1.5s;
}

.ciga-mascot--peek {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 140px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(-500px 0 0 0);
  transform: translateX(-50%) translateY(0);
  transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1s ease-out;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 5px rgba(255, 214, 10, 0.2));
}

.ciga-card-shell:hover .ciga-mascot--peek {
  opacity: 1;
  transform: translateX(-50%) translateY(-220px);
  animation: ciga-peek-bob 3s ease-in-out infinite alternate 1.5s;
}

.ciga-mascot--topic-peek {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 120px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0);
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
}

.ciga-card-shell:hover .ciga-mascot--topic-peek {
  opacity: 1;
  transform: translateX(-50%) translateY(-205px);
  animation: ciga-topic-peek-bob 3s ease-in-out infinite alternate 1.2s;
}

@keyframes ciga-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ciga-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes ciga-peek-bob {
  0% { transform: translateX(-50%) translateY(-220px); }
  100% { transform: translateX(-50%) translateY(-226px); }
}

@keyframes ciga-topic-peek-bob {
  0% { transform: translateX(-50%) translateY(-205px); }
  100% { transform: translateX(-50%) translateY(-212px); }
}

@keyframes ciga-blue-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px var(--ciga-blue)); }
  50% { filter: drop-shadow(0 0 20px var(--ciga-blue)) drop-shadow(0 0 35px var(--ciga-blue)); }
}

@media (max-width: 600px) {
  /* Smaller, higher nav on phones — reclaims vertical space. Kept here (after
     the base .ciga-nav rules) so it wins; buttons stay finger-sized. */
  .ciga-nav {
    top: 10px;
    left: 10px;
  }
  .ciga-nav__btn { padding: 7px 10px; }

  .ciga-card-shell--subject,
  .ciga-card-shell--subject .ciga-card {
    width: 160px;
    height: 200px;
  }

  .ciga-mascot--peek {
    width: 110px;
  }

  .ciga-card-shell:hover .ciga-mascot--peek {
    transform: translateX(-50%) translateY(-180px);
  }
}

@media (max-width: 1000px) {
  .ciga-topic-container {
    padding-top: 100px;
  }

  .ciga-card-grid--topics {
    gap: 80px 20px;
    margin-bottom: 80px;
  }

  .ciga-card-shell--topic {
    width: clamp(140px, 40vw, 160px);
    height: clamp(170px, 48vw, 195px);
  }
}

/* Practice-app shared controls — matches the Multiplication Lab pattern.
   - .ciga-choice    = multiple-choice answer card (rounded rectangle, dark fill)
   - .ciga-btn--check = primary action (gold gradient pill — Check, Next Mission)
   - .ciga-btn--ghost = secondary action (gold outline pill — Hint, Back, All Missions) */
.ciga-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1e3350;
  color: var(--ciga-text);
  border: 2px solid var(--ciga-border);
  border-radius: 18px;
  min-height: 52px;
  padding: 14px 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.ciga-choice:hover {
  transform: translateY(-2px);
  border-color: var(--ciga-blue);
}
.ciga-choice--good {
  background: rgba(67, 217, 142, 0.22);
  border-color: #43d98e;
}
.ciga-choice--bad {
  background: rgba(255, 107, 107, 0.2);
  border-color: #ff6b6b;
}

.ciga-btn--check {
  background: linear-gradient(135deg, #f8961e, var(--ciga-yellow));
  color: #182033;
  border: 0;
  border-radius: var(--ciga-radius-pill);
  padding: 10px 22px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(248, 150, 30, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.ciga-btn--check:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px rgba(248, 150, 30, 0.5);
  filter: brightness(1.05);
}

.ciga-btn--ghost {
  background: transparent;
  color: var(--ciga-yellow);
  border: 2px solid var(--ciga-yellow);
  border-radius: var(--ciga-radius-pill);
  padding: 9px 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.ciga-btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(249, 199, 79, 0.12);
  box-shadow: 0 6px 18px rgba(249, 199, 79, 0.25);
}

.ciga-btn--secondary {
  background: rgba(76, 201, 240, 0.15);
  color: var(--ciga-blue);
  border: 2px solid var(--ciga-blue);
  border-radius: var(--ciga-radius-pill);
  padding: 9px 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.ciga-btn--secondary:hover {
  transform: translateY(-2px);
  background: rgba(76, 201, 240, 0.25);
  box-shadow: 0 6px 18px rgba(76, 201, 240, 0.3);
}

.ciga-ladder-page {
  max-width: 1280px;
}

.ciga-ladder-subtitle {
  margin: -56px auto 36px;
  color: var(--ciga-muted);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.ciga-ladder {
  display: grid;
  gap: 26px;
}

.ciga-ladder__step {
  border: 1px solid rgba(76, 201, 240, 0.28);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(26, 45, 69, 0.74), rgba(11, 20, 55, 0.88));
  padding: 20px 18px 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.ciga-ladder__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  padding: 5px 14px;
  border-radius: var(--ciga-radius-pill);
  border: 1px solid rgba(255, 214, 10, 0.55);
  color: var(--ciga-gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ciga-card--ladder-topic .ciga-card__icon {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ciga-gold);
}

.ciga-ladder-topic__cat {
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ciga-muted);
}

.ciga-ladder-stage-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ciga-ladder-stage {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.ciga-ladder-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 19vh;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}

.ciga-ladder-title {
  font-family: 'Fredoka One', cursive;
  font-size: 4rem;
  line-height: 1;
  color: var(--ciga-gold);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 26px rgba(255, 214, 10, 0.35);
}

.ciga-ladder-subtitle {
  margin: 10px 0 0;
  color: var(--ciga-muted);
  font-size: 2rem;
  font-weight: 800;
}

.ciga-ladder-pill {
  position: fixed;
  right: 32px;
  top: 32px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(76, 201, 240, 0.35);
  background: rgba(26, 45, 69, 0.68);
  color: #d9ebff;
  font-weight: 800;
}

.ciga-ladder-pill__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #76d2ff, #4d5eff);
  box-shadow: 0 0 10px rgba(76, 201, 240, 0.8);
}

.ciga-ladder-pill__swap {
  border-left: 1px solid rgba(120, 150, 195, 0.45);
  padding-left: 10px;
  color: #8fa8cf;
  font-size: 0.84rem;
}

@media (max-width: 760px) {
  .ciga-ladder-header {
    top: 16vh;
  }

  .ciga-ladder-title {
    font-size: 2.7rem;
  }

  .ciga-ladder-subtitle {
    font-size: 1.25rem;
  }

  .ciga-ladder-pill {
    top: 72px;
    right: 14px;
    gap: 8px;
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .ciga-ladder-pill__swap {
    padding-left: 8px;
    font-size: 0.72rem;
  }
}

.ciga-ladder-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.ciga-ladder-path {
  fill: none;
  stroke: var(--ciga-gold);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(255, 214, 10, 0.75));
}

.ciga-ladder-card {
  --ladder-card-w: 120px;
  --ladder-card-h: 136px;
  --ladder-card-glyph: 2rem;
  --ladder-card-title: 0.9rem;
  --ladder-card-cat: 0.56rem;
  --ladder-card-pad-x: 8px;
  --ladder-card-pad-top: 8px;
  --ladder-card-pad-bottom: 10px;
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--ladder-card-w);
  height: var(--ladder-card-h);
  border-radius: 18px;
  text-decoration: none;
  border: 2px solid var(--ciga-gold);
  background: linear-gradient(180deg, #7c4be8 0%, #6a3ccf 36%, #351674 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: white;
  padding: var(--ladder-card-pad-top) var(--ladder-card-pad-x) var(--ladder-card-pad-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 3;
}

.ciga-ladder-card:hover {
  transform: translate(-50%, calc(-50% - 6px));
}

.ciga-ladder-card__glyph {
  margin-top: 8px;
  font-weight: 900;
  font-size: var(--ladder-card-glyph);
  line-height: 1;
}

.ciga-ladder-card__title {
  margin-top: auto;
  color: var(--ciga-gold);
  text-align: center;
  font-weight: 900;
  font-size: var(--ladder-card-title);
  line-height: 1.12;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ciga-ladder-card__cat {
  margin-top: 3px;
  color: #93abd5;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--ladder-card-cat);
  font-weight: 800;
}

.ciga-ladder-card__status {
  position: absolute;
  right: -9px;
  top: -9px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd60a, #f8a71e);
  color: #23324f;
  font-size: 0.9rem;
  font-weight: 900;
}

.ciga-ladder-card__status--current {
  background: linear-gradient(135deg, #72cdff, #6566ff);
  color: white;
}

.ciga-ladder-mascot {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transform: translate(-50%, -100%);
}

.ciga-ladder-mascot img {
  width: 190px;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

.ciga-ladder-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -12px);
  background: white;
  color: #1b2b45;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.ciga-ladder-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid white;
}

.ciga-ladder-mobile {
  display: none;
}

.ciga-ladder-mobile-snake-card {
  position: relative;
  text-decoration: none;
  border: 2px solid var(--ciga-gold);
  border-radius: 18px;
  background: linear-gradient(180deg, #7c4be8 0%, #6a3ccf 36%, #351674 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: white;
  min-height: 122px;
  padding: 10px 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.ciga-ladder-mobile-snake-card__glyph {
  margin-top: 4px;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
}

.ciga-ladder-mobile-snake-card__title {
  margin-top: auto;
  color: var(--ciga-gold);
  text-align: center;
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1.12;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ciga-ladder-mobile-snake-card__cat {
  margin-top: 3px;
  color: #93abd5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 800;
}

.ciga-ladder-mobile-snake-card__status {
  position: absolute;
  right: -9px;
  top: -9px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd60a, #f8a71e);
  color: #23324f;
  font-size: 0.9rem;
  font-weight: 900;
}

.ciga-ladder-mobile-snake-card__status--current {
  background: linear-gradient(135deg, #72cdff, #6566ff);
  color: white;
}

@media (max-width: 1199px) {
  .ciga-page.ciga-topic-page {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ciga-ladder-stage-wrap {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 120px 0 calc(30px + var(--ciga-footer-h));
  }

  .ciga-ladder-stage {
    position: relative;
    inset: auto;
    width: min(980px, calc(100% - 24px));
    height: auto;
    margin: 0 auto;
  }

  .ciga-ladder-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 auto 18px;
    padding: 0 16px;
  }

  .ciga-ladder-title {
    font-size: 3.25rem;
  }

  .ciga-ladder-subtitle {
    font-size: 1.9rem;
  }

  .ciga-ladder-svg,
  #ladderCards,
  .ciga-ladder-mascot {
    display: none;
  }

  .ciga-ladder-mobile {
    position: relative;
    display: block;
    padding: 0 0 26px;
  }

  .ciga-ladder-mobile-snake {
    position: relative;
    width: min(390px, calc(100% - 6px));
    height: var(--snake-h, 980px);
    margin: 0 auto;
  }

  .ciga-ladder-mobile-snake__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .ciga-ladder-mobile-snake__line {
    fill: none;
    stroke: #e7ff58;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(231, 255, 88, 0.95)) drop-shadow(0 0 30px rgba(228, 255, 79, 0.55));
  }

  .ciga-ladder-mobile-snake-card {
    position: absolute;
    transform: translate(-50%, -50%);
    min-height: 118px;
    z-index: 2;
  }

  .ciga-ladder-mobile-start {
    position: absolute;
    width: 152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
  }

  .ciga-ladder-mobile-start img {
    width: 152px;
    height: auto;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
  }

  .ciga-ladder-mobile-start .ciga-ladder-bubble {
    position: static;
    transform: none;
    font-size: 0.85rem;
    white-space: normal;
    max-width: 140px;
    text-align: center;
    line-height: 1.2;
    word-break: normal;
  }

  .ciga-ladder-mobile-start .ciga-ladder-bubble::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .ciga-ladder-title {
    font-size: 2.7rem;
  }

  .ciga-ladder-subtitle {
    font-size: 1.35rem;
  }

  .ciga-ladder-mobile-snake {
    width: min(360px, calc(100% - 8px));
  }

  .ciga-ladder-mobile-snake__line {
    stroke-width: 10;
  }

  .ciga-ladder-mobile-snake-card {
    min-height: 112px;
  }
}

.ciga-lab--roomy-header .sub {
  margin: 0.2rem 0 2.7rem;
}

.ciga-lab--roomy-header .card {
  margin-top: 2.2rem;
}

/* Report-a-problem footer (kids-safe feedback: no data collected, mailto only).
   Fixed to the bottom-center so it's reachable without scrolling on tall
   level-select menus; corners are left clear for the progress pill (bottom-left)
   and the mascot (bottom-right). */
.ciga-report {
  position: fixed;
  left: 50%;
  bottom: var(--ciga-footer-h, 3.25rem); /* sit above the site copyright footer */
  transform: translateX(-50%);
  z-index: 900;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 6px 18px;
  /* Translucent plate + blur so the text stays readable when content-heavy
     pages (e.g. Learn tabs) scroll behind this fixed strip, instead of the
     two colliding. Mobile (<=640px) resets this back to a clean in-flow footer. */
  background: rgba(15, 27, 45, 0.82);
  border: 1px solid var(--ciga-border, #2a4060);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  max-width: calc(100vw - 360px);
  /* The fixed footer is mostly transparent. Without this, its full box steals
     clicks from content beneath it (e.g. a fullscreen modal's Prev/Next buttons
     that scroll through this band). Only the link itself should be clickable. */
  pointer-events: none;
}

.ciga-report__link {
  color: var(--ciga-blue, #4cc9f0);
  font-size: 0.85rem;
  text-decoration: none;
  opacity: 0.9;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  pointer-events: auto;
}

.ciga-report__link:hover {
  opacity: 1;
}

.ciga-report__hint {
  color: var(--ciga-muted, #9fb3c8);
  font-size: 0.68rem;
  opacity: 0.7;
}

/* On narrow screens the bottom corners (progress pill + mascot) leave no room
   for a centered fixed pill, and scrolling is natural anyway — so fall back to
   an in-flow footer at the end of the content. */
@media (max-width: 640px) {
  .ciga-report {
    position: static;
    transform: none;
    max-width: none;
    margin: 1.8rem auto 1rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Report-a-problem dialog */
.ciga-report__link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.ciga-report-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ciga-report-modal[hidden] { display: none; }

.ciga-report-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 22, 0.7);
  backdrop-filter: blur(2px);
}

.ciga-report-modal__panel {
  position: relative;
  width: min(440px, 100%);
  background: var(--ciga-card, #1a2d45);
  border: 1px solid var(--ciga-border, rgba(255, 255, 255, 0.12));
  border-radius: 18px;
  padding: 1.6rem 1.4rem 1.4rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ciga-report-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: none;
  border: none;
  color: var(--ciga-muted, #9fb3c8);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.ciga-report-modal__title {
  margin: 0 0 0.3rem;
  font-family: "Fredoka One", system-ui, sans-serif;
  color: var(--ciga-gold, #f9c74f);
  font-size: 1.25rem;
}

.ciga-report-modal__hint {
  margin: 0 0 0.9rem;
  color: var(--ciga-muted, #9fb3c8);
  font-size: 0.85rem;
}

.ciga-report-modal__text {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  border: 1px solid var(--ciga-border, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  padding: 0.7rem;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.ciga-report-modal__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

.ciga-report-modal__sendto {
  color: var(--ciga-muted, #9fb3c8);
  font-size: 0.82rem;
}

.ciga-report-modal__sendto b { color: #fff; }
/* ---------------------------------------------------------------------------
   iPad / iOS Safari: never trap content below the fold.

   Several apps lock the viewport with `html, body { height:100%; overflow:hidden }`
   to stop rubber-band bouncing, then lay their content out in normal flow. On a
   desktop-height window everything fits, so the lock is invisible. On an iPad the
   visible area is ~80px shorter than `100vh` (Safari's toolbar), the content column
   grows past the fold, and `overflow:hidden` means the bottom controls — "Hear it",
   "Ouvir", "Conferir", "Next" — cannot be reached by any gesture.

   Restore vertical scrolling. Where the content already fits this is a no-op
   (max scroll is 0, so the page still feels locked); where it overflows it is the
   difference between a usable app and a dead end. Horizontal scroll stays locked
   and `overscroll-behavior-y: contain` keeps the bounce suppressed.

   ciga-design.css is linked BEFORE each app's inline <style>, so these must beat a
   plain `html, body` (0,0,1) rule. `html:root` and `body:not(.ciga-scroll-lock)`
   are both (0,1,1) and win regardless of order. A genuinely locked full-screen
   experience (canvas game) can opt out with class="ciga-scroll-lock" on <body>.
   --------------------------------------------------------------------------- */
html:root {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Body must NOT become a scroll container. Giving it `overflow-y: auto` (as this
   rule used to) switches off body->viewport overflow propagation, so body turns
   into its own scroller with zero scrollable content while the viewport keeps the
   real overflow. A wheel over the page then targets body, finds nothing to scroll,
   and `overscroll-behavior-y: contain` blocks the scroll from chaining up to the
   viewport — the page scrolls by dragging the scrollbar but the wheel is dead.
   `visible` keeps body a plain in-flow box so the viewport scrolls normally, and
   it still overrides an app's `body { overflow: hidden }` viewport lock. Both axes
   must be visible: `overflow-x: hidden` alone would compute overflow-y back to
   auto and re-create the trap. Horizontal scroll stays locked on html above. */
body:not(.ciga-scroll-lock) {
  overflow-x: visible;
  overflow-y: visible;
}

/* Fixed-height app shells (`.shell { height: 100dvh }`) put their question area in
   a flex `<main>` that some apps set to `overflow: hidden`. When the content is
   taller than the shrunken flex track, that hidden overflow eats the bottom of the
   card — on column-add-subtract it clipped the "Conferir ✔" button by 46px with no
   way to scroll, because the shell exactly fills the viewport so the page itself
   has nothing to scroll. Let that track scroll instead of clipping. `body main` is
   (0,0,2) so it beats a bare `main` rule in the app's inline <style> regardless of
   link order. */
body main {
  overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   Short landscape viewports (iPad held horizontally) — reclaim vertical room.

   The page chrome above the activity is sized for a tall window: the title alone
   is clamp(2rem, 6vw, 3.6rem), which at 1024px wide resolves to its 3.6rem cap.
   On word-unscrambler at 1024x686 that chrome (nav reserve + title + subtitle +
   stars) ate 320px — 47% of the screen — leaving the letter tiles cut off at the
   bottom. Portrait has the height to spare, so this only applies when the viewport
   is genuinely short.

   Scale the title with vh rather than vw so it responds to the dimension that is
   actually scarce, and tighten the stacked gaps. `body `-prefixed (0,1,1) to beat
   each app's inline single-class rules regardless of link order.
   --------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 760px) {
  /* Nav box bottom is ~54px, so 58px clears it with a small gap (vs the 72-96px
     reserve these containers carry for tall windows). `main[class]` is (0,1,2):
     a plain `body main` is only (0,0,2) and LOSES to the single-class rule these
     templates use (`.typo-app { padding: 96px 0 48px }`, (0,1,0)). */
  body .wrap,
  body .shell,
  body .app,
  body .app-header,
  body main[class] {
    padding-top: 58px;
  }

  body .ciga-app-list__title {
    font-size: clamp(1.35rem, 4vh, 2rem);
    margin-bottom: 4px;
  }

  body .ciga-app-list__subtitle {
    margin-bottom: 10px;
    font-size: 0.95rem;
  }

  /* These templates stack their sections with a flex gap (18px) on <main>. */
  body main[class] {
    gap: 8px;
  }

  /* The spelling/vocabulary family (word-unscrambler, vocabulary-mastery,
     context-clue-master, spelling-bubble + the pt-BR twins) wraps the activity in
     a `*__panel` card padded clamp(20px, 4vw, 30px) — 30px top and bottom at iPad
     width. Halving it on short screens buys back ~28px, which is the difference
     between the letter tiles fitting and being cut off. (0,2,1) beats the card's
     own single-class rule. */
  body main[class] > [class$="__panel"] {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Reclaim the copyright band: it is decorative, and at 3.25rem it costs more
     than the title does here. Same treatment the <=480px phone rule already uses. */
  :root {
    --ciga-footer-h: calc(2.4rem + env(safe-area-inset-bottom, 0px));
  }

  body::after {
    font-size: 0.62rem;
    padding: 0.5rem 0.75rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  }

  /* `main` carries the app shell in these templates but is missing from the
     footer-reserve list above (which only covers .wrap/.shell/.app/.content-area),
     so its last row of buttons rendered underneath the fixed bottom furniture.

     There are TWO fixed layers down there, not one: the copyright band
     (--ciga-footer-h) and the .ciga-report pill sitting on top of it at
     `bottom: var(--ciga-footer-h)`, ~3.2rem tall. Reserving only the band left the
     report pill covering the "Dica"/"Reiniciar" labels on high-frequency-unscramble.
     The pill is pointer-events:none so the buttons still worked — they were just
     unreadable, which is arguably worse than being plainly cut off. Reserve both. */
  body main[class] {
    padding-bottom: calc(var(--ciga-footer-h) + 3.2rem);
  }

  /* These subtitles are full sentences and wrap to two lines at tablet width. */
  body .ciga-app-list__subtitle {
    font-size: 0.9rem;
    line-height: 1.35;
    margin-bottom: 8px;
  }
}
